@kaizen/components 0.0.0-canary-test-exports-20231114054615 → 0.0.0-canary-bundle-size-check-20231115005811

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/validateEndDateBeforeStartDate.spec.ts

@@ -0,0 +1,105 @@
+import { validateEndDateBeforeStartDate } from "./validateEndDateBeforeStartDate"
+
+describe("validateEndDateBeforeStartDate()", () => {
+  describe("when the end date is after the start date", () => {
+    const startDate = new Date("2022-04-03")
+    const startDateFieldLabel = "Start date"
+    const endDate = new Date("2022-05-01")
+    const endDateInputValue = "01/05/2022"
+    let result: ReturnType<typeof validateEndDateBeforeStartDate>
+
+    beforeEach(() => {
+      result = validateEndDateBeforeStartDate({
+        startDate,
+        startDateFieldLabel,
+        endDate,
+        endDateInputValue,
+      })
+    })
+
+    it("returns a response with no errors", () => {
+      expect(result.validationResponse).toStrictEqual({
+        date: endDate,
+        inputValue: endDateInputValue,
+        validationMessage: undefined,
+        isInvalid: false,
+        isDisabled: false,
+        isEmpty: false,
+        isValidDate: true,
+      })
+    })
+
+    it("returns a new date that is the same as the given end date", () => {
+      expect(result.newDate).toBe(endDate)
+    })
+  })
+
+  describe("when the end date equals the start date", () => {
+    const startDate = new Date("2022-05-01")
+    const startDateFieldLabel = "Start date"
+    const endDate = new Date("2022-05-01")
+    const endDateInputValue = "01/05/2022"
+    let result: ReturnType<typeof validateEndDateBeforeStartDate>
+
+    beforeEach(() => {
+      result = validateEndDateBeforeStartDate({
+        startDate,
+        startDateFieldLabel,
+        endDate,
+        endDateInputValue,
+      })
+    })
+
+    it("returns a response with no errors", () => {
+      expect(result.validationResponse).toStrictEqual({
+        date: endDate,
+        inputValue: endDateInputValue,
+        validationMessage: undefined,
+        isInvalid: false,
+        isDisabled: false,
+        isEmpty: false,
+        isValidDate: true,
+      })
+    })
+
+    it("returns a new date that is the same as the given end date", () => {
+      expect(result.newDate).toBe(endDate)
+    })
+  })
+
+  describe("when the end date is before the start date", () => {
+    const startDate = new Date("2022-05-01")
+    const startDateFieldLabel = "Start date"
+    const endDate = new Date("2022-04-03")
+    const endDateInputValue = "03/04/2022"
+    let result: ReturnType<typeof validateEndDateBeforeStartDate>
+
+    beforeEach(() => {
+      result = validateEndDateBeforeStartDate({
+        startDate,
+        startDateFieldLabel,
+        endDate,
+        endDateInputValue,
+      })
+    })
+
+    it("returns a response with an error status and validation message", () => {
+      expect(result.validationResponse).toStrictEqual({
+        date: endDate,
+        inputValue: endDateInputValue,
+        validationMessage: {
+          status: "error",
+          message: 'Cannot be earlier than the selection in "Start date"',
+        },
+        isInvalid: false,
+        isDisabled: false,
+        isEmpty: false,
+        isValidDate: true,
+      })
+    })
+
+    it("returns the new end date", () => {
+      expect(result.newDate).toEqual(endDate)
+    })
+  })
+})

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/validateEndDateBeforeStartDate.ts

@@ -0,0 +1,53 @@
+import React from "react"
+import { DateValidationResponse } from "~components/Filter/FilterDatePicker"
+import { getNodeText } from "~utils/getNodeText"
+import { isValidRange } from "./isValidRange"
+
+export type ValidateEndDateBeforeStartDateArgs = {
+  startDate: Date
+  startDateFieldLabel: React.ReactNode
+  endDate: Date
+  endDateInputValue: string
+}
+
+export type ValidateEndDateBeforeStartDateResponse = {
+  validationResponse: DateValidationResponse
+  newDate: Date | undefined
+}
+
+export const validateEndDateBeforeStartDate = ({
+  startDate,
+  startDateFieldLabel,
+  endDate,
+  endDateInputValue,
+}: ValidateEndDateBeforeStartDateArgs): ValidateEndDateBeforeStartDateResponse => {
+  const baseResponse = {
+    date: endDate,
+    inputValue: endDateInputValue,
+    validationMessage: undefined,
+    isInvalid: false,
+    isDisabled: false,
+    isEmpty: false,
+    isValidDate: true,
+  }
+
+  if (!isValidRange(startDate, endDate)) {
+    return {
+      validationResponse: {
+        ...baseResponse,
+        validationMessage: {
+          status: "error",
+          message: `Cannot be earlier than the selection in "${getNodeText(
+            startDateFieldLabel
+          )}"`,
+        },
+      },
+      newDate: endDate,
+    }
+  }
+
+  return {
+    validationResponse: baseResponse,
+    newDate: endDate,
+  }
+}

package/src/Filter/FilterDateRangePicker/utils/isCompleteDateRange.spec.ts

@@ -0,0 +1,23 @@
+import { isCompleteDateRange } from "./isCompleteDateRange"
+
+describe("isCompleteDateRange", () => {
+  it("is not a complete date range if it is not defined", () => {
+    expect(isCompleteDateRange(undefined)).toBe(false)
+  })
+
+  it("is not a complete date range if it is partially defined", () => {
+    expect(isCompleteDateRange({ from: new Date("2022-05-01") })).toBe(false)
+    expect(
+      isCompleteDateRange({ from: undefined, to: new Date("2022-05-01") })
+    ).toBe(false)
+  })
+
+  it("is a complete date range if both from/to dates are defined", () => {
+    expect(
+      isCompleteDateRange({
+        from: new Date("2022-05-01"),
+        to: new Date("2022-12-17"),
+      })
+    ).toBe(true)
+  })
+})

package/src/Filter/FilterDateRangePicker/utils/isCompleteDateRange.ts

@@ -0,0 +1,6 @@
+import { DateRange } from "~components/Calendar"
+
+export const isCompleteDateRange = (
+  dateRange: DateRange | undefined
+): dateRange is { from: Date; to: Date } =>
+  dateRange?.from !== undefined && dateRange?.to !== undefined

package/src/Filter/FilterMultiSelect/FilterMultiSelect.spec.tsx

@@ -0,0 +1,215 @@
+import React, { useState } from "react"
+import { Selection } from "@react-types/shared"
+import { render, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { FilterMultiSelect, FilterMultiSelectProps } from "./FilterMultiSelect"
+import { ItemType } from "./types"
+import { getSelectedOptionLabels } from "./utils"
+
+const user = userEvent.setup()
+
+const mockItems = [
+  { label: "Front-End", value: "id-fe", count: "1245" },
+  { label: "Back-End", value: "id-be", count: "4", isDisabled: true },
+  { label: "SRE", value: "id-sre", count: "4", isDisabled: true },
+  { label: "Dev-ops", value: "id-devops" },
+  { label: "Others", value: "id-others" },
+] satisfies ItemType[]
+
+const FilterMultiSelectWrapper = ({
+  selectedKeys: propsSelectedKeys,
+  ...props
+}: Partial<FilterMultiSelectProps>): JSX.Element => {
+  const [selectedKeys, setSelectedKeys] = useState<Selection>(
+    propsSelectedKeys ?? new Set(["id-fe"])
+  )
+
+  const handleSelectionChange = (keys: Selection): void => setSelectedKeys(keys)
+
+  return (
+    <FilterMultiSelect
+      label="Engineer"
+      onSelectionChange={handleSelectionChange}
+      selectedKeys={selectedKeys}
+      items={mockItems}
+      trigger={(): JSX.Element => (
+        <FilterMultiSelect.TriggerButton
+          selectedOptionLabels={getSelectedOptionLabels(
+            selectedKeys,
+            mockItems
+          )}
+          label="Engineer"
+        />
+      )}
+      {...props}
+    >
+      {(): JSX.Element => (
+        <>
+          <FilterMultiSelect.SearchInput />
+          <FilterMultiSelect.ListBox>
+            {({ allItems, hasNoItems }): JSX.Element | JSX.Element[] => {
+              if (hasNoItems) {
+                return (
+                  <FilterMultiSelect.NoResults>
+                    No results found.
+                  </FilterMultiSelect.NoResults>
+                )
+              }
+
+              return allItems.map(item => (
+                <FilterMultiSelect.Option key={item.key} item={item} />
+              ))
+            }}
+          </FilterMultiSelect.ListBox>
+          <FilterMultiSelect.MenuFooter>
+            <FilterMultiSelect.SelectAllButton />
+            <FilterMultiSelect.ClearButton />
+          </FilterMultiSelect.MenuFooter>
+        </>
+      )}
+    </FilterMultiSelect>
+  )
+}
+
+describe("<FilterMultiSelect>", () => {
+  it("does not show the popover initially", () => {
+    const { queryByRole } = render(<FilterMultiSelectWrapper />)
+    expect(queryByRole("listbox")).not.toBeInTheDocument()
+  })
+
+  it("opens the popover using the trigger button", async () => {
+    const { getByRole } = render(<FilterMultiSelectWrapper />)
+
+    const triggerButton = getByRole("button", { name: "Engineer : Front-End" })
+    await user.click(triggerButton)
+
+    await waitFor(() => {
+      expect(getByRole("listbox")).toBeVisible()
+    })
+  })
+
+  it("selects an unselected option on click", async () => {
+    const { getByRole } = render(<FilterMultiSelectWrapper isOpen />)
+
+    const devOpsOption = getByRole("option", {
+      name: "Dev-ops",
+      selected: false,
+    })
+    await user.click(devOpsOption)
+
+    await waitFor(() => {
+      expect(devOpsOption).toHaveAttribute("aria-selected", "true")
+    })
+  })
+
+  it("deselects a selected option on click", async () => {
+    const { getByRole } = render(<FilterMultiSelectWrapper isOpen />)
+
+    const devOpsOption = getByRole("option", {
+      name: "Front-End",
+      selected: true,
+    })
+    await user.click(devOpsOption)
+
+    await waitFor(() => {
+      expect(devOpsOption).toHaveAttribute("aria-selected", "false")
+    })
+  })
+
+  it("filters out options which do not match the search term", async () => {
+    const { getByRole, getAllByRole } = render(
+      <FilterMultiSelectWrapper isOpen />
+    )
+    expect(getAllByRole("option")).toHaveLength(5)
+
+    await user.type(getByRole("searchbox"), "end")
+
+    await waitFor(() => {
+      expect(getAllByRole("option")).toHaveLength(2)
+    })
+  })
+
+  describe("Clear button", () => {
+    it("deselects all options when unfiltered", async () => {
+      const { getByRole, queryAllByRole } = render(
+        <FilterMultiSelectWrapper
+          isOpen
+          selectedKeys={new Set(["id-fe", "id-devops"])}
+        />
+      )
+
+      expect(queryAllByRole("option", { selected: true })).toHaveLength(2)
+
+      await user.click(getByRole("button", { name: "Clear selections" }))
+      await waitFor(() => {
+        expect(queryAllByRole("option", { selected: true })).toHaveLength(0)
+      })
+    })
+
+    it("deselects only selected filtered options", async () => {
+      const { getByRole, queryAllByRole } = render(
+        <FilterMultiSelectWrapper
+          isOpen
+          selectedKeys={new Set(["id-fe", "id-devops"])}
+        />
+      )
+
+      expect(queryAllByRole("option")).toHaveLength(5)
+      expect(queryAllByRole("option", { selected: true })).toHaveLength(2)
+
+      const searchbox = getByRole("searchbox")
+      await user.type(searchbox, "dev")
+      await waitFor(() => {
+        expect(queryAllByRole("option", { selected: true })).toHaveLength(1)
+      })
+
+      await user.click(getByRole("button", { name: "Clear selections" }))
+      await user.clear(searchbox)
+      await waitFor(() => {
+        expect(queryAllByRole("option", { selected: true })).toHaveLength(1)
+      })
+    })
+  })
+
+  describe("Select all button", () => {
+    const getDisabledOptions = (options: HTMLElement[]): HTMLElement[] =>
+      options.filter(option => option.hasAttribute("aria-disabled"))
+
+    it("selects all non-disabled options when unfiltered", async () => {
+      const { getByRole, queryAllByRole } = render(
+        <FilterMultiSelectWrapper isOpen selectedKeys={new Set([])} />
+      )
+
+      const allOptions = queryAllByRole("option")
+      expect(allOptions).toHaveLength(5)
+      expect(getDisabledOptions(allOptions)).toHaveLength(2)
+
+      await user.click(getByRole("button", { name: "Select all" }))
+      await waitFor(() => {
+        expect(queryAllByRole("option", { selected: true })).toHaveLength(3)
+      })
+    })
+
+    it("selects only non-disabled filtered options", async () => {
+      const { getByRole, queryAllByRole } = render(
+        <FilterMultiSelectWrapper isOpen selectedKeys={new Set([])} />
+      )
+
+      expect(queryAllByRole("option")).toHaveLength(5)
+
+      const searchbox = getByRole("searchbox")
+      await user.type(searchbox, "end")
+      await waitFor(() => {
+        const filteredOptions = queryAllByRole("option")
+        expect(filteredOptions).toHaveLength(2)
+        expect(getDisabledOptions(filteredOptions)).toHaveLength(1)
+      })
+
+      await user.click(getByRole("button", { name: "Select all" }))
+      await user.clear(searchbox)
+      await waitFor(() => {
+        expect(queryAllByRole("option", { selected: true })).toHaveLength(1)
+      })
+    })
+  })
+})

package/src/Filter/FilterMultiSelect/FilterMultiSelect.tsx

@@ -0,0 +1,110 @@
+import React from "react"
+import { SelectionMode, Selection } from "@react-types/shared"
+import {
+  MenuTriggerConsumer,
+  MenuTriggerProvider,
+  MenuTriggerProviderContextType,
+  MenuTriggerProviderProps,
+  SelectionConsumer,
+  SelectionProvider,
+  SelectionProviderContextType,
+} from "./context"
+import { ListBox } from "./subcomponents/ListBox"
+import { ListBoxSection } from "./subcomponents/ListBoxSection"
+import { LoadMoreButton } from "./subcomponents/LoadMoreButton"
+import { MenuFooter, MenuLoadingSkeleton } from "./subcomponents/MenuLayout"
+import { MenuPopup, MenuPopupProps } from "./subcomponents/MenuPopup"
+import { MultiSelectOption } from "./subcomponents/MultiSelectOption"
+import { NoResults } from "./subcomponents/NoResults"
+import { SearchInput } from "./subcomponents/SearchInput"
+import { SectionDivider } from "./subcomponents/SectionDivider"
+import {
+  ClearButton,
+  SelectAllButton,
+} from "./subcomponents/SelectionControlButton"
+import {
+  FilterTriggerButton,
+  RemovableFilterTrigger,
+} from "./subcomponents/Trigger"
+import { ItemType } from "./types"
+
+type SelectionProps = {
+  label: string // provide A11y context for listbox
+  items: ItemType[]
+  selectedKeys?: Selection
+  defaultSelectedKeys?: Selection
+  onSelectionChange?: (keys: Selection) => void
+  selectionMode?: SelectionMode
+  onSearchInputChange?: (searchInput: string) => void
+}
+
+export type FilterMultiSelectProps = {
+  trigger: (value?: MenuTriggerProviderContextType) => React.ReactNode
+  children: (value?: SelectionProviderContextType) => React.ReactNode // the content of the menu
+} & Omit<MenuPopupProps, "children"> &
+  Omit<MenuTriggerProviderProps, "children"> &
+  SelectionProps
+
+export const FilterMultiSelect = ({
+  trigger,
+  children,
+  isOpen,
+  defaultOpen,
+  onOpenChange,
+  isLoading,
+  loadingSkeleton,
+  label,
+  items,
+  selectedKeys,
+  defaultSelectedKeys,
+  onSelectionChange,
+  selectionMode = "multiple",
+  onSearchInputChange,
+}: FilterMultiSelectProps): JSX.Element => {
+  const menuTriggerProps = { isOpen, defaultOpen, onOpenChange }
+  const menuPopupProps = { isLoading, loadingSkeleton }
+  const disabledKeys: Selection = new Set(
+    items
+      ?.filter(item => item.isDisabled === true)
+      .map(disabledItem => disabledItem.value)
+  )
+  const selectionProps = {
+    label,
+    items,
+    selectedKeys,
+    defaultSelectedKeys,
+    onSelectionChange,
+    selectionMode,
+    disabledKeys,
+    onSearchInputChange,
+  }
+
+  return (
+    <MenuTriggerProvider {...menuTriggerProps}>
+      <div>
+        <MenuTriggerConsumer>{trigger}</MenuTriggerConsumer>
+        <MenuPopup {...menuPopupProps}>
+          <SelectionProvider {...selectionProps}>
+            <SelectionConsumer>{children}</SelectionConsumer>
+          </SelectionProvider>
+        </MenuPopup>
+      </div>
+    </MenuTriggerProvider>
+  )
+}
+
+FilterMultiSelect.displayName = "FilterMultiSelect"
+
+FilterMultiSelect.TriggerButton = FilterTriggerButton
+FilterMultiSelect.RemovableTrigger = RemovableFilterTrigger
+FilterMultiSelect.SearchInput = SearchInput
+FilterMultiSelect.ListBox = ListBox
+FilterMultiSelect.ListBoxSection = ListBoxSection
+FilterMultiSelect.SectionDivider = SectionDivider
+FilterMultiSelect.Option = MultiSelectOption
+FilterMultiSelect.SelectAllButton = SelectAllButton
+FilterMultiSelect.ClearButton = ClearButton
+FilterMultiSelect.MenuFooter = MenuFooter // For layout
+FilterMultiSelect.MenuLoadingSkeleton = MenuLoadingSkeleton // Menu Loading Skeleton example
+FilterMultiSelect.LoadMoreButton = LoadMoreButton
+FilterMultiSelect.NoResults = NoResults

package/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.stories.scss

@@ -0,0 +1,24 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/shadow";
+@import "~@kaizen/design-tokens/sass/border";
+
+.row {
+  display: inline-grid;
+  grid-template-columns: 1fr auto;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  box-shadow: $shadow-large-box-shadow;
+  border-radius: $border-solid-border-radius;
+  padding: $spacing-xs;
+
+  .filters {
+    display: flex;
+    flex-flow: row wrap;
+    gap: $spacing-xs;
+  }
+}
+
+.helperMessage {
+  padding-bottom: 0.5rem;
+}