Merge branch 'master' into toast-jsdoc

.github/workflows/test.yml

@@ -37,7 +37,9 @@ jobs:
         with:
           timezone: Asia/Kolkata
 
-      - name: install deps
+      - name: Install deps
         run: yarn
+      - name: Check Types
+        run: yarn check-types
       - name: Test
         run: yarn test

package.json

@@ -30,6 +30,7 @@
     "build:cjs": "cross-env BABEL_ENV=cjs babel src --extensions .ts,.tsx --config-file ./babel-config.js -d dist/cjs --source-maps",
     "build:esm": "cross-env BABEL_ENV=esm babel src --extensions .ts,.tsx --config-file ./babel-config.js -d dist/esm --source-maps",
     "build:types": "tsc --emitDeclarationOnly",
+    "check-types": "tsc --noEmit",
     "commit": "gacp",
     "format": "prettier --write \"./**/*.{js,ts,css,less,json,md,html,yml,yaml,pcss,jsx,tsx}\"",
     "keys": "node scripts/build/keys",

src/accordion/AccordionState.ts

@@ -28,7 +28,7 @@ export type AccordionState = CompositeState & {
    * Whether the accodion selection should be manual.
    * @default true
    */
-  manual: boolean;
+  manual?: boolean;
   /**
    * Allow to open multiple accordion items
    * @default false

src/accordion/AccordionTrigger.ts

@@ -48,7 +48,12 @@ export const useAccordionTrigger = createHook<
 
   useProps(
     options,
-    { onClick: htmlOnClick, onFocus: htmlOnFocus, ...htmlProps },
+    {
+      onClick: htmlOnClick,
+      onKeyDown: htmlOnKeyDown,
+      onFocus: htmlOnFocus,
+      ...htmlProps
+    },
   ) {
     const {
       manual,
@@ -61,9 +66,30 @@ export const useAccordionTrigger = createHook<
     } = options;
     const selected = isAccordionSelected(options);
     const accordionPanelId = useAccordionPanelId(options);
+    const onKeyDownRef = useLiveRef(htmlOnKeyDown);
     const onClickRef = useLiveRef(htmlOnClick);
     const onFocusRef = useLiveRef(htmlOnFocus);
 
+    const onKeyDown = React.useCallback(
+      (event: React.KeyboardEvent) => {
+        const first = options.first && (() => setTimeout(options.first));
+        const last = options.last && (() => setTimeout(options.last));
+        const keyMap = { Home: first, End: last };
+        const action = keyMap[event.key as keyof typeof keyMap];
+        if (action) {
+          event.preventDefault();
+          event.stopPropagation();
+          action();
+          return;
+        }
+
+        onKeyDownRef.current?.(event);
+      },
+
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [options.first, options.last],
+    );
+
     const handleSelection = React.useCallback(() => {
       if (disabled) return;
       if (!id) return;
@@ -91,7 +117,8 @@ export const useAccordionTrigger = createHook<
         handleSelection();
       },
 
-      [handleSelection, onClickRef],
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [handleSelection],
     );
 
     const onFocus = React.useCallback(
@@ -103,7 +130,8 @@ export const useAccordionTrigger = createHook<
         handleSelection();
       },
 
-      [onFocusRef, manual, handleSelection],
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [manual, handleSelection],
     );
 
     return {
@@ -112,6 +140,7 @@ export const useAccordionTrigger = createHook<
       "aria-disabled": ariaAttr(!allowToggle && selected),
       onClick,
       onFocus,
+      onKeyDown,
       ...htmlProps,
     };
   },

src/accordion/stories/Accordion.stories.tsx

@@ -5,7 +5,7 @@ import {
   AccordionComponent as Accordion,
   AccordionComponentInitialState,
   StyledAccordion,
-} from "./Accordion";
+} from "./AccordionComponent";
 
 export default {
   component: Accordion,

src/calendar/CalendarCellButton.ts

@@ -28,6 +28,7 @@ export type CalendarCellButtonOptions = ButtonOptions &
     | "maxDate"
     | "dateValue"
     | "isFocused"
+    | "isRangeCalendar"
   > &
   Partial<Pick<RangeCalendarStateReturn, "anchorDate">> & {
     date: Date;
@@ -132,7 +133,7 @@ export const useCalendarCellButton = createHook<
 
     // When a cell is focused and this is a range calendar, add a prompt to help
     // screenreader users know that they are in a range selection mode.
-    if (anchorDate && isFocused && !isDisabled) {
+    if (options.isRangeCalendar && isFocused && !isDisabled) {
       let rangeSelectionPrompt = "";
 
       // If selection has started add "click to finish selecting range"

src/calendar/CalendarState.ts

@@ -111,9 +111,15 @@ export function useCalendarState(props: CalendarInitialState = {}) {
     setFocusedDate(date);
   }
 
+  const announceSelectedDate = React.useCallback((value: Date) => {
+    if (!value) return;
+    announce(`Selected Date: ${format(value, "do MMM yyyy")}`);
+  }, []);
+
   function setValue(value: Date) {
     if (!isDisabled && !isReadOnly) {
       setControllableValue(value);
+      announceSelectedDate(value);
     }
   }
 
@@ -129,11 +135,6 @@ export function useCalendarState(props: CalendarInitialState = {}) {
     // rather than move focus, we announce the new month value
   }, [currentMonth]);
 
-  useUpdateEffect(() => {
-    if (!value) return;
-    announce(`Selected Date: ${format(value, "do MMM yyyy")}`);
-  }, [value]);
-
   return {
     calendarId,
     dateValue: value,
@@ -190,6 +191,7 @@ export function useCalendarState(props: CalendarInitialState = {}) {
     selectDate(date: Date) {
       setValue(date);
     },
+    isRangeCalendar: false,
   };
 }
 

src/calendar/RangeCalendarState.ts

@@ -63,21 +63,7 @@ export function useRangeCalendarState(props: RangeCalendarInitialState = {}) {
     ? makeRange(anchorDate, calendar.focusedDate)
     : value && dateRange && makeRange(dateRange.start, dateRange.end);
 
-  const selectDate = (date: Date) => {
-    if (props.isReadOnly) {
-      return;
-    }
-
-    if (!anchorDate) {
-      setAnchorDate(date);
-    } else {
-      setValue(makeRange(anchorDate, date));
-      setAnchorDate(null);
-    }
-  };
-
-  useUpdateEffect(() => {
-    if (anchorDate) return;
+  const announceRange = React.useCallback(() => {
     if (!highlightedRange) return;
     if (isSameDay(highlightedRange.start, highlightedRange.end)) {
       announce(
@@ -96,6 +82,21 @@ export function useRangeCalendarState(props: RangeCalendarInitialState = {}) {
     }
   }, [highlightedRange]);
 
+  const selectDate = (date: Date) => {
+    if (props.isReadOnly) {
+      return;
+    }
+
+    if (!anchorDate) {
+      setAnchorDate(date);
+      announce(`Starting range from ${format(date, "do MMM yyyy")}`);
+    } else {
+      setValue(makeRange(anchorDate, date));
+      announceRange();
+      setAnchorDate(null);
+    }
+  };
+
   return {
     ...calendar,
     dateRangeValue: dateRange,
@@ -112,6 +113,7 @@ export function useRangeCalendarState(props: RangeCalendarInitialState = {}) {
         calendar.setFocusedDate(date);
       }
     },
+    isRangeCalendar: true,
   };
 }
 

src/calendar/__keys.ts

@@ -31,6 +31,7 @@ const CALENDAR_STATE_KEYS = [
   "focusPreviousYear",
   "selectFocusedDate",
   "selectDate",
+  "isRangeCalendar",
 ] as const;
 const RANGE_CALENDAR_STATE_KEYS = [
   ...CALENDAR_STATE_KEYS,

src/calendar/__tests__/RangeCalendar.test.tsx

@@ -119,7 +119,11 @@ describe("RangeCalendar", () => {
     press.Tab();
     press.Tab();
 
-    expect(label("Wednesday, October 7, 2020 selected")).toHaveFocus();
+    expect(
+      label(
+        "Wednesday, October 7, 2020 selected (click to start selecting range)",
+      ),
+    ).toHaveFocus();
     press.ArrowDown(); // go to down just for some variety
 
     press.Enter(); // start the selection, currently the start and end should be the same date
@@ -145,9 +149,12 @@ describe("RangeCalendar", () => {
     // check if the selection is actually finished or not
     press.ArrowRight();
     press.ArrowRight();
-    expect(label("Wednesday, November 4, 2020")).toHaveFocus();
     expect(
-      label("Wednesday, November 4, 2020")?.parentElement,
+      label("Wednesday, November 4, 2020 (click to start selecting range)"),
+    ).toHaveFocus();
+    expect(
+      label("Wednesday, November 4, 2020 (click to start selecting range)")
+        ?.parentElement,
     ).not.toHaveAttribute("data-is-range-selection");
 
     // Verify selection ranges
@@ -174,7 +181,11 @@ describe("RangeCalendar", () => {
     press.Tab();
     press.Tab();
 
-    expect(label("Monday, October 7, 2019 selected")).toHaveFocus();
+    expect(
+      label(
+        "Monday, October 7, 2019 selected (click to start selecting range)",
+      ),
+    ).toHaveFocus();
     press.ArrowDown();
     press.Enter(); // start the selection
 

src/calendar/stories/RangeCalendar.stories.tsx

@@ -86,10 +86,7 @@ const RangeCalendarComp: React.FC<RangeCalendarInitialState> = props => {
 export const Default = () => <RangeCalendarComp />;
 export const DefaultValue = () => (
   <RangeCalendarComp
-    defaultValue={{
-      start: format(new Date(), "yyyy-MM-dd"),
-      end: format(addDays(new Date(), 4), "yyyy-MM-dd"),
-    }}
+    defaultValue={{ start: "2019-10-07", end: "2019-10-30" }}
   />
 );
 

src/datepicker/DatePickerSegment.ts

@@ -1,14 +1,12 @@
 import { DatePickerStateReturn } from ".";
+import { unstable_useId as useId } from "reakit";
 import { createComponent, createHook } from "reakit-system";
 
 import { DATE_PICKER_SEGMENT_KEYS } from "./__keys";
-import { DateRangePickerStateReturn } from "./DateRangePickerState";
 import { useSegment, SegmentOptions, SegmentHTMLProps } from "../segment";
 
-export type DatePickerSegmentOptions =
-  | SegmentOptions
-  | Partial<DatePickerStateReturn>
-  | Partial<DateRangePickerStateReturn>;
+export type DatePickerSegmentOptions = SegmentOptions &
+  Partial<Pick<DatePickerStateReturn, "pickerId" | "isDateRangePicker">>;
 
 export type DatePickerSegmentHTMLProps = SegmentHTMLProps;
 
@@ -22,6 +20,17 @@ export const useDatePickerSegment = createHook<
   name: "DatePickerSegment",
   compose: useSegment,
   keys: DATE_PICKER_SEGMENT_KEYS,
+
+  useProps(options, htmlProps) {
+    const { id } = useId({ baseId: "datepicker-segment" });
+    return {
+      id,
+      ...(options.isDateRangePicker
+        ? { "aria-labelledby": `${options.pickerId} ${options.baseId} ${id}` }
+        : { "aria-labelledby": id }),
+      ...htmlProps,
+    };
+  },
 });
 
 export const DatePickerSegment = createComponent({

src/datepicker/DatePickerState.ts

@@ -113,6 +113,7 @@ export const useDatePickerState = (props: DatePickerInitialState = {}) => {
     ...popover,
     ...segmentState,
     calendar,
+    isDateRangePicker: false,
   };
 };
 

src/datepicker/DateRangePickerState.ts

@@ -11,10 +11,9 @@ import {
   FocusableProps,
   ValidationState,
 } from "@react-types/shared";
-import { v4 } from "uuid";
 import * as React from "react";
-import { useCompositeState } from "reakit";
 import { useControllableState } from "@chakra-ui/hooks";
+import { useCompositeState, unstable_useId as useId } from "reakit";
 
 import {
   parseDate,
@@ -159,6 +158,9 @@ export const useDateRangePickerState = (
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [autoFocus, segmentComposite.first]);
 
+  const { id: startId } = useId({ baseId: "startsegment" });
+  const { id: endId } = useId({ baseId: "endsegment" });
+
   return {
     dateValue: value,
     setDateValue: setValue,
@@ -171,14 +173,15 @@ export const useDateRangePickerState = (
     startSegmentState: {
       ...startSegmentState,
       ...segmentComposite,
-      baseId: v4(),
+      baseId: startId,
     },
     endSegmentState: {
       ...endSegmentState,
       ...segmentComposite,
-      baseId: v4(),
+      baseId: endId,
     },
     calendar,
+    isDateRangePicker: true,
   };
 };
 

src/datepicker/__keys.ts

@@ -1,6 +1,7 @@
 // Automatically generated
 const DATE_PICKER_STATE_KEYS = [
   "calendar",
+  "isDateRangePicker",
   "fieldValue",
   "setFieldValue",
   "segments",
@@ -83,6 +84,7 @@ const DATE_RANGE_PICKER_STATE_KEYS = [
   "startSegmentState",
   "endSegmentState",
   "calendar",
+  "isDateRangePicker",
   "baseId",
   "unstable_idCountRef",
   "visible",

src/datepicker/__tests__/DateRangePicker.test.tsx

@@ -146,12 +146,16 @@ describe("DateRangePicker", () => {
 
     openDatePicker(text, testId);
 
-    expect(label("Sunday, November 15, 2020 selected")).toHaveFocus();
+    expect(
+      label(
+        "Sunday, November 15, 2020 selected (click to start selecting range)",
+      ),
+    ).toHaveFocus();
 
     // check if current date is selected
-    isEndSelection(label, "Sunday, November 15, 2020 selected");
-    isStartSelection(label, "Sunday, November 15, 2020 selected");
-    isInSelectionRange(label, "Sunday, November 15, 2020 selected");
+    isEndSelection(label, /Sunday, November 15, 2020 selected/i);
+    isStartSelection(label, /Sunday, November 15, 2020 selected/i);
+    isInSelectionRange(label, /Sunday, November 15, 2020 selected/i);
 
     // change date selection
     press.Enter();