@kaizen/components 1.34.0 → 1.35.1

package/src/types/StringSuggestions.ts

@@ -0,0 +1,4 @@
+// Allows any string value, but will have intellisense for values provided in the generic.
+export type StringSuggestions<T extends string> =
+  | T
+  | (string & Record<never, never>)

package/src/utils/AppearanceAnim.module.scss

@@ -0,0 +1,15 @@
+// Sync with ./AppearanceAnim.tsx
+$anim-duration-ms: 0.2s;
+
+.defaultHiddenState {
+  opacity: 0%;
+  pointer-events: none;
+  transition: opacity $anim-duration-ms ease-out;
+  will-change: opacity;
+  display: inline;
+}
+
+.visibleState {
+  opacity: 100%;
+  pointer-events: initial;
+}

package/src/utils/AppearanceAnim.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from "react"
+import classnames from "classnames"
+import { useDebouncedCallback } from "use-debounce"
+import styles from "./AppearanceAnim.module.scss"
+
+type AppearanceAnimProps = {
+  children: React.ReactNode
+  isVisible: boolean
+  className?: string | null
+}
+
+// Sync with ./AppearanceAnim.scss
+const ANIM_DURATION_MS = 200
+const ANIM_BUFFER = 200 // Add a buffer, just in case the css animation hasn't had a chance to finish yet
+
+/**
+ * Simply applies a css animation to transition a component in and out.
+ * When the component is no longer needed, it will no longer be rendered to the
+ * dom.
+ */
+export const AppearanceAnim = ({
+  children,
+  isVisible,
+  className,
+  ...rest
+}: AppearanceAnimProps): JSX.Element | null => {
+  const [isAnimIn, setIsAnimIn] = useState(false)
+  const [isAnimOut, setIsAnimOut] = useState(false)
+  const [prevIsOpen, setPrevIsOpen] = useState(isVisible)
+
+  // Keeps the modal visible while the css animation is completing
+  const trackAnimOutCompleted = useDebouncedCallback(
+    () => {
+      setIsAnimOut(false)
+    },
+    ANIM_DURATION_MS + ANIM_BUFFER,
+    { leading: false }
+  )
+
+  // Allows us to flash the component in an "invisible" state, for one frame.
+  // Then set it to "visible". This allows us to make sure the css transition
+  // actually works.
+  const trackAnimInCompleted = useDebouncedCallback(
+    () => {
+      setIsAnimIn(false)
+    },
+    0,
+    { leading: false }
+  )
+
+  if (isVisible !== prevIsOpen) {
+    setPrevIsOpen(isVisible)
+    if (!isVisible) {
+      trackAnimInCompleted.cancel()
+      setIsAnimOut(true)
+      trackAnimOutCompleted()
+    } else {
+      trackAnimOutCompleted.cancel()
+      setIsAnimIn(true)
+      trackAnimInCompleted()
+    }
+  }
+
+  return isVisible || isAnimOut || isAnimIn ? (
+    <div
+      className={classnames([
+        {
+          [styles.defaultHiddenState]: true,
+          [styles.visibleState]: isVisible && !isAnimIn,
+        },
+        className,
+      ])}
+      {...rest}
+    >
+      {children}
+    </div>
+  ) : null
+}
+
+AppearanceAnim.displayName = "AppearanceAnim"

package/src/utils/getNodeText.spec.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+import { getNodeText } from "./getNodeText"
+
+describe("getNodeText()", () => {
+  it("returns an empty string when given empty values", () => {
+    expect(getNodeText(null)).toBe("")
+    expect(getNodeText(undefined)).toBe("")
+  })
+
+  it("returns the same string when given a string", () => {
+    expect(getNodeText("Bacon pancakes")).toBe("Bacon pancakes")
+  })
+
+  it("returns the same number when given a number", () => {
+    expect(getNodeText(3)).toEqual(3)
+  })
+
+  it("concatenates elements of an array into a string", () => {
+    expect(getNodeText([3, "bacon", "pancakes"])).toBe("3baconpancakes")
+  })
+
+  it("returns the text from a React element", () => {
+    expect(
+      getNodeText(
+        <div>
+          3 <span>bacon</span> pancakes
+        </div>
+      )
+    ).toBe("3 bacon pancakes")
+  })
+})

package/src/utils/getNodeText.ts

@@ -0,0 +1,10 @@
+import React from "react"
+
+// Adapted from https://stackoverflow.com/a/60564620
+export const getNodeText = (node: React.ReactNode): string | number => {
+  if (!node) return ""
+  if (typeof node === "string" || typeof node === "number") return node
+  if (node instanceof Array) return node.map(getNodeText).join("")
+  if (React.isValidElement(node)) return getNodeText(node.props.children)
+  return ""
+}

package/src/utils/isRefObject.ts

@@ -0,0 +1,3 @@
+export const isRefObject = (
+  ref: React.ForwardedRef<any>
+): ref is React.MutableRefObject<any> => ref !== null && "current" in ref

package/src/utils/useMediaQueries.spec.tsx

@@ -0,0 +1,90 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { useMediaQueries, subtractOnePixel } from "./useMediaQueries"
+
+const ExampleComponent = (): JSX.Element => {
+  const { queries, components } = useMediaQueries({
+    prefersReducedMotion: "(prefers-reduced-motion: reduce)",
+  })
+  const { MediumOnly, PrefersReducedMotion } = components
+
+  return (
+    <div>
+      {queries.isSmall && <button type="button">Small only boolean</button>}
+      <MediumOnly>
+        <button type="button">Medium only component</button>
+      </MediumOnly>
+      {queries.prefersReducedMotion && (
+        <button type="button">Prefers reduced boolean</button>
+      )}
+      <PrefersReducedMotion>
+        <button type="button">Prefers reduced component</button>
+      </PrefersReducedMotion>
+    </div>
+  )
+}
+
+export const mockMatchMedia = (matches: boolean = false): void => {
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+      matches,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // Deprecated
+      removeListener: jest.fn(), // Deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  })
+}
+
+describe("useMediaQueries()", () => {
+  it("shows and hides content based on Kaizen break points", () => {
+    mockMatchMedia()
+    render(<ExampleComponent />)
+    expect(
+      screen.queryByRole("button", { name: /Small only boolean/i })
+    ).not.toBeInTheDocument()
+    expect(
+      screen.queryByRole("button", { name: /Medium only component/i })
+    ).not.toBeInTheDocument()
+
+    mockMatchMedia(true)
+    render(<ExampleComponent />)
+
+    expect(
+      screen.queryByRole("button", { name: /Small only boolean/i })
+    ).toBeInTheDocument()
+    expect(
+      screen.queryByRole("button", { name: /Medium only component/i })
+    ).toBeInTheDocument()
+  })
+
+  it("shows and hides content based on based on custom queries passed in", () => {
+    mockMatchMedia()
+    render(<ExampleComponent />)
+
+    expect(
+      screen.queryByRole("button", { name: /Prefers reduced boolean/i })
+    ).not.toBeInTheDocument()
+    expect(
+      screen.queryByRole("button", { name: /Prefers reduced component/i })
+    ).not.toBeInTheDocument()
+
+    mockMatchMedia(true)
+    render(<ExampleComponent />)
+
+    expect(
+      screen.queryByRole("button", { name: /Prefers reduced boolean/i })
+    ).toBeInTheDocument()
+    expect(
+      screen.queryByRole("button", { name: /Prefers reduced component/i })
+    ).toBeInTheDocument()
+  })
+
+  it("subtracts 1px correctly", () => {
+    expect(subtractOnePixel("1080px")).toEqual("1079px")
+  })
+})

package/src/utils/useMediaQueries.tsx

@@ -0,0 +1,223 @@
+import React, { useEffect, useState, ReactNode, useMemo } from "react"
+
+type Props = { [key: string]: string }
+type GenericChildrenType = { children?: ReactNode }
+
+export const subtractOnePixel = (breakpoint: string): string =>
+  `${parseInt(breakpoint, 10) - 1}px`
+
+export const useMediaQueries = (
+  propQueries: Props = {}
+): {
+  queries: {
+    [key: string]: boolean
+    isSmall: boolean
+    isMedium: boolean
+    isLarge: boolean
+    isMediumOrSmaller: boolean
+    isMediumOrLarger: boolean
+  }
+  components: {
+    [key: string]: (props: GenericChildrenType) => JSX.Element
+    SmallOnly: (props: GenericChildrenType) => JSX.Element
+    MediumOnly: (props: GenericChildrenType) => JSX.Element
+    LargeOnly: (props: GenericChildrenType) => JSX.Element
+    MediumOrSmaller: (props: GenericChildrenType) => JSX.Element
+    MediumOrLarger: (props: GenericChildrenType) => JSX.Element
+  }
+} => {
+  if (typeof window === "undefined") {
+    return {
+      queries: {
+        isSmall: false,
+        isMedium: false,
+        isLarge: false,
+        isMediumOrSmaller: false,
+        isMediumOrLarger: true,
+      },
+      components: {
+        SmallOnly: () => <></>,
+        MediumOnly: () => <></>,
+        LargeOnly: () => <></>,
+        MediumOrSmaller: () => <></>,
+        MediumOrLarger: (props: HelperComponentProps) => <>{props.children}</>,
+      },
+    }
+  }
+
+  // Ensure these match the tokens in @kaizen/design-tokens
+  const breakpoints = { medium: "768px", large: "1080px" }
+
+  // The `addEventListener` calls blow up legacy Edge (<= v18/pre chromium),
+  // so we disable the functionality of updating after page load.
+  const isLegacyEdge = navigator.userAgent.match(/Edge/)
+  const isUnsupportedSafari =
+    window.matchMedia("").addEventListener === undefined
+
+  // ---------------------------------------
+  // Create Kaizen breakpoint matches for initial state
+  // ---------------------------------------
+  const smallMatchMedia = useMemo(
+    () =>
+      window.matchMedia(`(max-width: ${subtractOnePixel(breakpoints.medium)})`),
+    [breakpoints.medium]
+  )
+
+  const mediumMatchMedia = useMemo(
+    () =>
+      window.matchMedia(
+        `(min-width: ${breakpoints.medium}) and (max-width: ${subtractOnePixel(
+          breakpoints.large
+        )})`
+      ),
+    [breakpoints.large]
+  )
+  const largeMatchMedia = useMemo(
+    () => window.matchMedia(`(min-width: ${breakpoints.large})`),
+    [breakpoints.large]
+  )
+
+  const isSmall = smallMatchMedia.matches || false
+  const isMedium = mediumMatchMedia.matches || false
+  const isLarge = largeMatchMedia.matches || false
+
+  const [kaizenMatches, setKaizenMatches] = useState<{
+    isSmall: boolean
+    isMedium: boolean
+    isLarge: boolean
+    isMediumOrSmaller: boolean
+    isMediumOrLarger: boolean
+  }>({
+    isSmall,
+    isMedium,
+    isLarge,
+    isMediumOrSmaller: !isLarge,
+    isMediumOrLarger: !isSmall,
+    // Note: ^the last two will need an adjustment in logic if/when we add more breakpoints
+  })
+
+  // ---------------------------------------
+  // Create an event listener based on the medium breakpoint and update state whenever it changes
+  // ---------------------------------------
+  useEffect(() => {
+    if (isLegacyEdge || isUnsupportedSafari) {
+      return
+    }
+
+    const updateMatches = (): void => {
+      const isSmallAfterUpdate = smallMatchMedia.matches || false
+      const isMediumAfterUpdate = mediumMatchMedia.matches || false
+      const isLargeAfterUpdate = largeMatchMedia.matches || false
+
+      setKaizenMatches({
+        isSmall: isSmallAfterUpdate,
+        isMedium: isMediumAfterUpdate,
+        isLarge: isLargeAfterUpdate,
+        isMediumOrSmaller: !isLargeAfterUpdate,
+        isMediumOrLarger: !isSmallAfterUpdate,
+      })
+    }
+
+    mediumMatchMedia.addEventListener("change", updateMatches, true)
+
+    return () => {
+      mediumMatchMedia.removeEventListener("change", updateMatches)
+    }
+  }, [])
+
+  // ---------------------------------------
+  // Create custom queries matches for initial state
+  // ---------------------------------------
+  const customQueryMatchMedias = new Map()
+  const customQueryMatches: Record<string, boolean> = {}
+  new Map(Object.entries(propQueries)).forEach((queryString, queryName) => {
+    const matchMedia = window.matchMedia(queryString)
+    customQueryMatches[queryName] = matchMedia.matches || false
+
+    // Store this matchMedia so that we can loop over it later and add event listeners
+    customQueryMatchMedias.set(queryName, matchMedia)
+  })
+
+  const [customMatches, setCustomMatches] =
+    useState<Record<string, boolean>>(customQueryMatches)
+
+  // ---------------------------------------
+  // Create an event listener for each custom query
+  // ---------------------------------------
+  useEffect(() => {
+    if (isLegacyEdge || isUnsupportedSafari) {
+      return
+    }
+
+    const updateCustomMatches = (
+      matchMedia: MediaQueryList,
+      queryName: string
+    ): void =>
+      setCustomMatches({
+        ...customQueryMatches,
+        [queryName]: matchMedia.matches || false,
+      })
+
+    const allEventListeners = new Map()
+    customQueryMatchMedias.forEach((matchMedia, queryName) => {
+      // Store this method so that we can reference it in the cleanup function below
+      const updateCustomMatchesForQuery = (): void => {
+        updateCustomMatches(matchMedia, queryName)
+      }
+      allEventListeners.set(matchMedia, updateCustomMatchesForQuery)
+
+      // Add the event listener
+      matchMedia.addEventListener("change", updateCustomMatchesForQuery, true)
+    })
+
+    return () => {
+      allEventListeners.forEach((eventListener, matchMedia) => {
+        matchMedia.removeEventListener("change", eventListener)
+      })
+    }
+  }, [])
+
+  // ---------------------------------------
+  // Create Kaizen helper components
+  // ---------------------------------------
+  type HelperComponentProps = {
+    children?: ReactNode
+  }
+
+  const kaizenComponents = {
+    SmallOnly: (props: HelperComponentProps) => (
+      <>{kaizenMatches.isSmall && props.children}</>
+    ),
+    MediumOnly: (props: HelperComponentProps) => (
+      <>{kaizenMatches.isMedium && props.children}</>
+    ),
+    LargeOnly: (props: HelperComponentProps) => (
+      <>{kaizenMatches.isLarge && props.children}</>
+    ),
+    MediumOrSmaller: (props: HelperComponentProps) => (
+      <>{kaizenMatches.isMediumOrSmaller && props.children}</>
+    ),
+    MediumOrLarger: (props: HelperComponentProps) => (
+      <>{kaizenMatches.isMediumOrLarger && props.children}</>
+    ),
+  }
+
+  // ---------------------------------------
+  // Create custom query helper components
+  // ---------------------------------------
+  const customComponents: Record<
+    string,
+    (props: GenericChildrenType) => JSX.Element
+  > = {}
+  Object.keys(propQueries).map(key => {
+    const componentName = key.charAt(0).toUpperCase() + key.slice(1)
+    customComponents[componentName] = (
+      props: HelperComponentProps
+    ): JSX.Element => <>{customMatches[key] && props.children}</>
+  })
+
+  return {
+    queries: { ...kaizenMatches, ...customQueryMatches },
+    components: { ...kaizenComponents, ...customComponents },
+  }
+}

package/src/utils/useResizeObserver.spec.tsx

@@ -0,0 +1,49 @@
+import { setImmediate } from "timers"
+import { renderHook, act } from "@testing-library/react-hooks"
+import { useResizeObserver } from "./useResizeObserver"
+
+function MockResizeObserver(callback: unknown): void {
+  // @ts-ignore
+  this.callback = callback
+}
+
+MockResizeObserver.prototype.observe = async function observe(): Promise<void> {
+  this.callback(["first"])
+  await new Promise(r => setImmediate(r))
+  this.callback(["second"])
+  await new Promise(r => setImmediate(r))
+  this.callback(["third"])
+}
+
+const disconnect = jest.fn()
+MockResizeObserver.prototype.disconnect = disconnect
+
+jest.mock("resize-observer-polyfill", () => ({
+  __esModule: true,
+  default: MockResizeObserver,
+}))
+
+describe("useResizeObserver", () => {
+  it("Calls the callback with the expected entries", async () => {
+    const callback = jest.fn().mockImplementation(value => value)
+    const { result, waitForNextUpdate, unmount } = renderHook(() =>
+      useResizeObserver(callback)
+    )
+    await act(async () => {
+      // @ts-ignore
+      result.current[0]("node")
+      expect(result.current[1]).toBe(undefined)
+      await waitForNextUpdate()
+      expect(callback).toBeCalledTimes(1)
+      expect(result.current[1]).toBe("first")
+      await waitForNextUpdate()
+      expect(callback).toBeCalledTimes(2)
+      expect(result.current[1]).toBe("second")
+      await waitForNextUpdate()
+      expect(callback).toBeCalledTimes(3)
+      expect(result.current[1]).toBe("third")
+    })
+    unmount()
+    expect(disconnect).toBeCalled()
+  })
+})

package/src/utils/useResizeObserver.ts

@@ -0,0 +1,75 @@
+import React, { Ref, useCallback, useEffect, useRef, useState } from "react"
+import ResizeObserver from "resize-observer-polyfill"
+
+const defaultCallback = (entry: ResizeObserverEntry): ResizeObserverEntry =>
+  entry
+
+export interface DOMRectReadOnly {
+  readonly x: number
+  readonly y: number
+  readonly width: number
+  readonly height: number
+  readonly top: number
+  readonly right: number
+  readonly bottom: number
+  readonly left: number
+}
+
+/**
+ * Hook for observing changes to a DOM element via ResizeObserver.
+ *
+ * @param {resolveEntryCallback} resolveEntry - Callback for resolving the
+ * desired value from each ResizeObserverEntry emitted by ResizeObserver
+ * @return {Array} An array containing a ref for binding to the observed DOM
+ * element, and the current value of the callback-resolved ResizeObserverEntry
+ * @callback resolveEntryCallback
+ */
+export const useResizeObserver = <T, E extends Element = HTMLElement>(
+  resolveEntry: (entry: ResizeObserverEntry) => any = defaultCallback
+): [Ref<E>, T | undefined] => {
+  const destroyResizeObserverRef: React.MutableRefObject<
+    undefined | (() => void)
+  > = useRef(undefined)
+  const [dimensions, setDimensions] = useState<T | undefined>(undefined)
+  const resolveEntryRef: React.MutableRefObject<
+    (entry: ResizeObserverEntry) => any
+  > = useRef(resolveEntry)
+
+  const ref: Ref<E> = useCallback(
+    (node: E) => {
+      if (node) {
+        const resizeObserver = new ResizeObserver(
+          (entries: ResizeObserverEntry[]) => {
+            for (const entry of entries) {
+              const value = resolveEntryRef.current(entry)
+              if (value) {
+                setDimensions(value)
+              }
+            }
+          }
+        )
+        resizeObserver.observe(node)
+        destroyResizeObserverRef.current = (): void => {
+          resizeObserver.disconnect()
+        }
+      }
+    },
+    [destroyResizeObserverRef, setDimensions, resolveEntryRef]
+  )
+
+  // Ensure the resolveEntryRef has the latest value
+  useEffect(() => {
+    resolveEntryRef.current = resolveEntry
+  }, [resolveEntry])
+
+  // Destroy the observer on unmount
+  useEffect(
+    () => () => {
+      if (destroyResizeObserverRef.current) {
+        destroyResizeObserverRef.current()
+      }
+    },
+    []
+  )
+  return [ref, dimensions]
+}

package/dist/cjs/Filter/Filter.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Filter.cjs","sources":["../../../src/Filter/Filter.tsx"],"sourcesContent":["import React, { HTMLAttributes, useEffect, useRef, useState } from \"react\"\nimport { FocusOn } from \"react-focus-on\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { FilterPopover } from \"./subcomponents/FilterPopover\"\nimport { FilterTriggerRef } from \"./types\"\n\nexport type FilterProps = {\n  children: React.ReactNode\n  isOpen: boolean\n  setIsOpen: (isOpen: boolean) => void\n  renderTrigger: (triggerProps: {\n    onClick: () => void\n    isOpen: boolean\n  }) => JSX.Element & { ref?: React.RefObject<FilterTriggerRef> }\n  onMount?: (triggerRef: React.RefObject<HTMLButtonElement>) => void\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\nexport const Filter = ({\n  children,\n  isOpen,\n  setIsOpen,\n  renderTrigger,\n  classNameOverride,\n  onMount,\n  ...restProps\n}: FilterProps): JSX.Element => {\n  const [isRefLoaded, setIsRefLoaded] = useState<boolean>(false)\n\n  const trigger = renderTrigger({\n    onClick: (): void => setIsOpen(!isOpen),\n    isOpen,\n  })\n\n  const inbuiltButtonRef = useRef<HTMLButtonElement>(null)\n  const inbuiltRef = useRef<FilterTriggerRef>({\n    triggerRef: inbuiltButtonRef,\n  })\n  const filterButtonRef = trigger.ref ?? inbuiltRef\n\n  useEffect(() => {\n    if (filterButtonRef.current?.triggerRef?.current) {\n      setIsRefLoaded(true)\n      onMount?.(filterButtonRef.current.triggerRef)\n    }\n  }, [filterButtonRef.current?.triggerRef?.current, onMount])\n\n  return (\n    <div className={classNameOverride} {...restProps}>\n      {React.cloneElement(trigger, {\n        ref: filterButtonRef,\n      })}\n      {isRefLoaded && isOpen && (\n        <FocusOn\n          scrollLock={false}\n          onClickOutside={(): void => setIsOpen(false)}\n          onEscapeKey={(): void => setIsOpen(false)}\n        >\n          <FilterPopover\n            referenceElement={\n              filterButtonRef.current?.triggerRef?.current || null\n            }\n          >\n            {children}\n          </FilterPopover>\n        </FocusOn>\n      )}\n    </div>\n  )\n}\n\nFilter.displayName = \"Filter\"\n"],"names":["Filter","_a","children","isOpen","setIsOpen","renderTrigger","classNameOverride","onMount","restProps","__rest","_g","useState","isRefLoaded","setIsRefLoaded","trigger","onClick","inbuiltButtonRef","useRef","inbuiltRef","triggerRef","filterButtonRef","_b","ref","useEffect","current","_d","_c","React","createElement","__assign","className","cloneElement","FocusOn","scrollLock","onClickOutside","onEscapeKey","FilterPopover","referenceElement","_f","_e","displayName"],"mappings":"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"}

package/dist/cjs/Filter/subcomponents/FilterContents/FilterContents.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"FilterContents.cjs","sources":["../../../../../src/Filter/subcomponents/FilterContents/FilterContents.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./FilterContents.module.scss\"\n\nexport type FilterContentsProps = {\n  children: React.ReactNode\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\nexport const FilterContents = ({\n  children,\n  classNameOverride,\n  ...restProps\n}: FilterContentsProps): JSX.Element => (\n  <div\n    className={classnames(styles.filterContents, classNameOverride)}\n    {...restProps}\n  >\n    {children}\n  </div>\n)\n\nFilterContents.displayName = \"FilterContents\"\n"],"names":["FilterContents","_a","children","classNameOverride","restProps","__rest","React","createElement","__assign","className","classnames","styles","filterContents","displayName"],"mappings":";;;;;;MASaA,cAAc;EAAA,MAAdA,cAAc,GAAG,SAAAA,CAACC,EAIT,EAAA;IAHpB,IAAAC,QAAQ,cAAA;MACRC,iBAAiB,uBAAA;MACdC,SAAS,GAHiBC,KAAA,CAAAA,MAAA,CAAAJ,EAAA,EAAA,CAAA,UAAA,EAAA,mBAAA,CAI9B,CADa;IAC0B,OACtCK,KACE,CAAAC,aAAA,CAAA,KAAA,EAAAC,KAAA,CAAAA,QAAA,CAAA;MAAAC,SAAS,EAAEC,UAAU,CAACC,qBAAM,CAACC,cAAc,EAAET,iBAAiB;IAAC,CAC3D,EAAAC,SAAS,GAEZF,QAAQ,CACL;GACP;EAEDF,cAAc,CAACa,WAAW,GAAG,gBAAgB;EAAA,OAbhCb,cAAc;AAAA;"}

package/dist/cjs/Filter/subcomponents/FilterContents/FilterContents.module.scss.cjs

@@ -1,7 +0,0 @@
-'use strict';
-
-var styles = {
-  "filterContents": "FilterContents-module_filterContents__TeYuo"
-};
-module.exports = styles;
-//# sourceMappingURL=FilterContents.module.scss.cjs.map

package/dist/cjs/Filter/subcomponents/FilterPopover/FilterPopover.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"FilterPopover.cjs","sources":["../../../../../src/Filter/subcomponents/FilterPopover/FilterPopover.tsx"],"sourcesContent":["import React, { HTMLAttributes, useState } from \"react\"\nimport { Options } from \"@popperjs/core\"\nimport classnames from \"classnames\"\nimport { usePopper } from \"react-popper\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport styles from \"./FilterPopover.module.scss\"\n\nexport type FilterPopoverProps = {\n  children: React.ReactNode\n  referenceElement: HTMLElement | null\n  popperOptions?: Partial<Options>\n} & OverrideClassName<HTMLAttributes<HTMLDivElement>>\n\nexport const FilterPopover = ({\n  children,\n  referenceElement,\n  popperOptions,\n  classNameOverride,\n  ...restProps\n}: FilterPopoverProps): JSX.Element => {\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(\n    null\n  )\n\n  const { styles: popperStyles, attributes: popperAttributes } = usePopper(\n    referenceElement,\n    popperElement,\n    {\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 15],\n          },\n        },\n      ],\n      placement: \"bottom-start\",\n      ...popperOptions,\n    }\n  )\n\n  return (\n    <div\n      ref={setPopperElement}\n      style={popperStyles?.popper}\n      {...popperAttributes?.popper}\n      className={classnames(styles.filterPopover, classNameOverride)}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      {...restProps}\n    >\n      {children}\n    </div>\n  )\n}\n\nFilterPopover.displayName = \"FilterPopover\"\n"],"names":["FilterPopover","_a","children","referenceElement","popperOptions","classNameOverride","restProps","__rest","_b","useState","popperElement","setPopperElement","_c","usePopper","__assign","modifiers","name","options","offset","placement","popperStyles","styles","popperAttributes","attributes","React","ref","style","popper","className","classnames","filterPopover","role","displayName"],"mappings":";;;;;;;MAaaA,aAAa;EAAA,MAAbA,aAAa,GAAG,SAAAA,CAACC,EAMT,EAAA;IALnB,IAAAC,QAAQ,GAAAD,EAAA,CAAAC,QAAA;MACRC,gBAAgB,sBAAA;MAChBC,aAAa,GAAAH,EAAA,CAAAG,aAAA;MACbC,iBAAiB,GAAAJ,EAAA,CAAAI,iBAAA;MACdC,SAAS,GAAAC,KAAAA,CAAAA,MAAA,CAAAN,EAAA,EALgB,sEAM7B,CADa;IAEN,IAAAO,EAAA,GAAoCC,KAAAA,CAAAA,QAAQ,CAChD,IAAI,CACL;MAFMC,aAAa,GAAAF,EAAA,CAAA,CAAA,CAAA;MAAEG,gBAAgB,GAAAH,EAAA,CAAA,CAAA,CAErC;IAEK,IAAAI,EAAA,GAAyDC,WAAAA,CAAAA,SAAS,CACtEV,gBAAgB,EAChBO,aAAa,EAAAI,KAAAA,CAAAA,QAAA,CAAA;QAEXC,SAAS,EAAE,CACT;UACEC,IAAI,EAAE,QAAQ;UACdC,OAAO,EAAE;YACPC,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;UACf;QACF,CAAA,CACF;QACDC,SAAS,EAAE;OAAc,EACtBf,aAAa,CAAA,CAEnB;MAfegB,YAAY,GAAAR,EAAA,CAAAS,MAAA;MAAcC,gBAAgB,GAAAV,EAAA,CAAAW,UAezD;IAED,OACEC;MACEC,GAAG,EAAEd,gBAAgB;MACrBe,KAAK,EAAEN,YAAY,KAAA,IAAA,IAAZA,YAAY,KAAZ,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,YAAY,CAAEO;IAAM,CAAA,EACvBL,gBAAgB,KAAhB,IAAA,IAAAA,gBAAgB,KAAhB,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,gBAAgB,CAAEK,MAAM;MAC5BC,SAAS,EAAEC,UAAU,CAACR,oBAAM,CAACS,aAAa,EAAEzB,iBAAiB,CAAC;MAC9D0B,IAAI,EAAC,QAAQ;oBACF;IAAM,CAAA,EACbzB,SAAS,CAEZ,EAAAJ,QAAQ,CACL;EAEV,CAAC;EAEDF,aAAa,CAACgC,WAAW,GAAG,eAAe;EAAA,OA3C9BhC,aAAa;AAAA;"}

package/dist/cjs/Filter/subcomponents/FilterPopover/FilterPopover.module.scss.cjs

@@ -1,7 +0,0 @@
-'use strict';
-
-var styles = {
-  "filterPopover": "FilterPopover-module_filterPopover__KUS4q"
-};
-module.exports = styles;
-//# sourceMappingURL=FilterPopover.module.scss.cjs.map

package/dist/cjs/FilterBar/FilterBar.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"FilterBar.cjs","sources":["../../../src/FilterBar/FilterBar.tsx"],"sourcesContent":["import React from \"react\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport {\n  FilterBarProvider,\n  FilterBarProviderProps,\n} from \"./context/FilterBarContext\"\nimport {\n  FilterBarDatePicker,\n  FilterBarDateRangePicker,\n  FilterBarMultiSelect,\n  FilterBarSelect,\n} from \"./subcomponents\"\nimport { AddFiltersMenu } from \"./subcomponents/AddFiltersMenu\"\nimport { ClearAllButton } from \"./subcomponents/ClearAllButton\"\nimport { FiltersValues } from \"./types\"\nimport styles from \"./FilterBar.module.scss\"\n\nexport type FilterBarProps<ValuesMap extends FiltersValues> = OverrideClassName<\n  Omit<FilterBarProviderProps<ValuesMap>, \"children\">\n>\n\nexport const FilterBar = <ValuesMap extends FiltersValues>({\n  filters,\n  classNameOverride,\n  ...providerProps\n}: FilterBarProps<ValuesMap>): JSX.Element => (\n  <FilterBarProvider<ValuesMap> filters={filters} {...providerProps}>\n    {(activeFilters): JSX.Element => (\n      <div className={classnames(styles.filterBar, classNameOverride)}>\n        <div className={styles.filtersContainer}>\n          {Object.values(activeFilters).map(({ id, Component }) => (\n            // `id` will always be `string`, but keyof ValuesMap transformed it\n            <React.Fragment key={id as string}>\n              {React.cloneElement(Component, { id })}\n            </React.Fragment>\n          ))}\n          <AddFiltersMenu />\n        </div>\n\n        <div>\n          <ClearAllButton />\n        </div>\n      </div>\n    )}\n  </FilterBarProvider>\n)\n\nFilterBar.displayName = \"FilterBar\"\n\nFilterBar.DatePicker = FilterBarDatePicker\nFilterBar.DateRangePicker = FilterBarDateRangePicker\nFilterBar.MultiSelect = FilterBarMultiSelect\nFilterBar.Select = FilterBarSelect\n"],"names":["FilterBar","_a","filters","classNameOverride","providerProps","__rest","React","createElement","FilterBarProvider","__assign","activeFilters","className","classnames","styles","filterBar","filtersContainer","Object","values","map","id","Component","Fragment","key","cloneElement","AddFiltersMenu","ClearAllButton","displayName","DatePicker","FilterBarDatePicker","DateRangePicker","FilterBarDateRangePicker","MultiSelect","FilterBarMultiSelect","Select","FilterBarSelect"],"mappings":";;;;;;;;;;;;;MAsBaA,SAAS;EAAA,MAATA,SAAS,GAAG,SAAAA,CAAkCC,EAI/B,EAAA;IAH1B,IAAAC,OAAO,aAAA;MACPC,iBAAiB,uBAAA;MACdC,aAAa,GAHyCC,KAAA,CAAAA,MAAA,CAAAJ,EAAA,EAAA,CAAA,SAAA,EAAA,mBAAA,CAI1D,CADiB;IAC4B,OAC5CK,KAAC,CAAAC,aAAA,CAAAC,gBAAAA,CAAAA,iBAAiB,EAAYC,KAAA,CAAAA,QAAA,CAAA;MAAAP,OAAO,EAAEA;IAAO,CAAA,EAAME,aAAa,CAAA,EAC9D,UAACM,aAAa;MAAkB,OAC/BJ,KAAK,CAAAC,aAAA,CAAA,KAAA,EAAA;QAAAI,SAAS,EAAEC,UAAU,CAACC,gBAAM,CAACC,SAAS,EAAEX,iBAAiB;MAAC,CAAA,EAC7DG,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;QAAKI,SAAS,EAAEE,gBAAM,CAACE;MAAgB,CAAA,EACpCC,MAAM,CAACC,MAAM,CAACP,aAAa,CAAC,CAACQ,GAAG,CAAC,UAACjB,EAAiB,EAAA;YAAfkB,EAAE,GAAAlB,EAAA,CAAAkB,EAAA;UAAEC,SAAS,GAAAnB,EAAA,CAAAmB,SAAA;QAAO;;UAEvDd,KAAC,CAAAC,aAAA,CAAAD,KAAK,CAACe,QAAQ,EAAA;YAACC,GAAG,EAAEH;UAAY,GAC9Bb,KAAK,CAACiB,YAAY,CAACH,SAAS,EAAE;YAAED,EAAE;UAAA,CAAE,CAAC;QACvB;MAJsC,CAKxD,CAAC,EACFb,KAAC,CAAAC,aAAA,CAAAiB,6BAAc,OAAG,CACd,EAENlB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA,IAAA,EACED,KAAC,CAAAC,aAAA,CAAAkB,cAAc,CAAAA,cAAA,OAAG,CACd,CACF;IAfyB,CAgBhC,CACiB;GACrB;EAEDzB,SAAS,CAAC0B,WAAW,GAAG,WAAW;EAEnC1B,SAAS,CAAC2B,UAAU,GAAGC,mBAAAA,CAAAA,mBAAmB;EAC1C5B,SAAS,CAAC6B,eAAe,GAAGC,wBAAAA,CAAAA,wBAAwB;EACpD9B,SAAS,CAAC+B,WAAW,GAAGC,oBAAAA,CAAAA,oBAAoB;EAC5ChC,SAAS,CAACiC,MAAM,GAAGC,eAAe,CAAAA,eAAA;EAAA,OA/BrBlC,SAAS;AAAA;"}

package/dist/cjs/FilterBar/FilterBar.module.scss.cjs

@@ -1,8 +0,0 @@
-'use strict';
-
-var styles = {
-  "filterBar": "FilterBar-module_filterBar__qMeNj",
-  "filtersContainer": "FilterBar-module_filtersContainer__AlFGD"
-};
-module.exports = styles;
-//# sourceMappingURL=FilterBar.module.scss.cjs.map