@popsure/dirty-swan 0.62.3 → 0.63.0

package/dist/esm/components/comparisonTable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/comparisonTable/hooks/useComparisonTable.ts","../../../../../src/lib/components/comparisonTable/index.tsx"],"sourcesContent":["import debounce from 'lodash.debounce';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport generateId from '../../../util/generateId';\nimport { ArrowValues } from '../components/TableArrows';\n\nexport const useComparisonTable = ({\n  onSelectionChanged,\n}: {\n  onSelectionChanged?: (selectedIndex: number) => void;\n}) => {\n  const [showMore, setShowMore] = useState<boolean>(false);\n  const [headerWidth, setHeaderWidth] = useState(1400);\n  const [selectedTabIndex, setSelectedTabIndex] = useState(0);\n  const [selectedSection, setSelectedSection] = useState('');\n  const [headerId, setHeaderId] = useState('');\n  const headerRef = useRef<HTMLDivElement | null>(null);\n  const contentContainerRef = useRef<HTMLDivElement | null>(null);\n  const observerRef = useRef<ResizeObserver | null>(null);\n\n  const headerRefCallbackRef = useCallback((node) => {\n    if (node) {\n      setHeaderWidth(node.clientWidth);\n    }\n\n    headerRef.current = node;\n  }, []);\n\n  useEffect(() => {\n    if (!observerRef.current) {\n      observerRef.current = new ResizeObserver((entries) => {\n        entries.forEach((entry) => {\n          const currentTabIndex = Math.round(\n            entry.target.scrollLeft / entry.contentRect.width\n          );\n\n          setHeaderWidth(entry.contentRect.width);\n\n          // Update selectedTabIndex to match the calculated current tab index\n          setSelectedTabIndex(currentTabIndex);\n        });\n      });\n    }\n\n    if (headerRef.current) {\n      observerRef.current.observe(headerRef.current);\n    }\n\n    return () => {\n      if (headerRef.current) {\n        observerRef.current?.unobserve(headerRef.current);\n      }\n      observerRef.current?.disconnect();\n    };\n  }, []);\n\n  useEffect(() => {\n    const resetHeaderWidth = () => {\n      if (headerRef.current) {\n        setHeaderWidth(headerRef.current.clientWidth);\n      }\n    };\n\n    window.addEventListener('resize', resetHeaderWidth);\n\n    return () => window.removeEventListener('resize', resetHeaderWidth);\n  }, []);\n\n  const handleTableScroll = () => {\n    if (!headerRef.current) {\n      return;\n    }\n\n    const headerWidth = headerRef.current.getBoundingClientRect().width;\n\n    const currentTabIndex = Math.round(\n      headerRef.current.scrollLeft / headerWidth\n    );\n\n    setSelectedTabIndex(currentTabIndex);\n  };\n\n  const debouncedTableScroll = debounce(handleTableScroll, 150);\n\n  useEffect(() => {\n    headerRef.current?.addEventListener('scroll', debouncedTableScroll, {\n      passive: true,\n    });\n\n    return headerRef.current?.removeEventListener('scroll', handleTableScroll);\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const handleArrowsClick = (value: ArrowValues) => {\n    if (headerRef.current) {\n      const currentTabIndex = Math.round(\n        headerRef.current.scrollLeft / headerRef.current.clientWidth\n      );\n\n      const direction = value === 'next' ? 1 : -1;\n\n      const newTabIndex = currentTabIndex + direction;\n\n      headerRef.current.scroll({\n        top: 0,\n        left: headerWidth * newTabIndex,\n        behavior: 'smooth',\n      });\n\n      setSelectedTabIndex(() => {\n        return newTabIndex;\n      });\n    }\n  };\n\n  const toggleMoreRows = async () => {\n    setShowMore(!showMore);\n  };\n\n  useEffect(() => {\n    if (headerRef.current) {\n      return;\n    }\n\n    const headerById = document.getElementById(headerId);\n\n    if (headerById) {\n      headerRefCallbackRef(headerById);\n    }\n  }, [headerId, headerRefCallbackRef]);\n\n  useEffect(() => {\n    setHeaderId(generateId());\n  }, []);\n\n  useEffect(() => {\n    onSelectionChanged?.(selectedTabIndex);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedTabIndex]);\n\n  return {\n    headerWidth,\n    headerId,\n    contentContainerRef,\n    selectedSection,\n    setSelectedSection,\n    selectedTabIndex,\n    setSelectedTabIndex,\n    headerRefCallbackRef,\n    handleArrowsClick,\n    toggleMoreRows,\n    showMore,\n  };\n};\n","import classNames from 'classnames';\nimport { Fragment } from 'react';\nimport { ScrollSync, ScrollSyncPane } from 'react-scroll-sync';\n\nimport { AccordionItem } from './components/AccordionItem';\nimport Chevron from './components/Chevron';\nimport Row from './components/Row';\nimport TableArrows from './components/TableArrows';\nimport TableButton from './components/TableButton';\nimport TableInfoButton from './components/TableInfoButton';\nimport TableRating from './components/TableRating';\nimport TableRowHeader from './components/TableRowHeader';\nimport TableTrueFalse from './components/TableTrueFalse';\nimport { useComparisonTable } from './hooks/useComparisonTable';\nimport baseStyles from './style.module.scss';\n\nexport interface CellBaseProps<T> {\n  /** Used to display the row's title */\n  label?: React.ReactNode;\n  /**\n   *\n   * @param value The current data value\n   * @param element The complete data object\n   */\n  render?: (value: any, element: T) => React.ReactNode; // TODO: add typing to value param\n}\n\ninterface CellWithId<T> extends CellBaseProps<T> {\n  /** Used when adding component add-ons */\n  addonId: string | number;\n}\n\nexport type Cell<T> =\n  | ({ key: Extract<keyof T, string> } & CellBaseProps<T>)\n  | ({ key?: undefined } & CellWithId<T>);\n\nexport interface TableHeader<T> {\n  /** Required unique id number for each table group */\n  id: number;\n  /** Used to display a table group subheader */\n  label?: React.ReactNode;\n  cells: Array<Cell<T>>;\n  default?: boolean;\n}\n\nexport interface ComparisonTableProps<T> {\n  headers: Array<TableHeader<T>>;\n  data: Array<T>;\n  hideDetails?: boolean;\n  hideDetailsCaption?: string;\n  showDetailsCaption?: string;\n  hideScrollBars?: boolean;\n  hideScrollBarsMobile?: boolean;\n  collapsibleSections?: boolean;\n  cellWidth?: number;\n  firstColumnWidth?: number;\n  stickyHeaderTopOffset?: number;\n  growContent?: boolean;\n  classNameOverrides?: ClassNameOverrides;\n  onSelectionChanged?: (selectedIndex: number) => void;\n}\n\nexport interface ClassNameOverrides {\n  header?: string;\n  container?: string;\n  cell?: string;\n  headerCell?: string;\n  collapsibleSection?: string;\n  section?: string;\n  hideDetailsButton?: string;\n}\n\nconst ComparisonTable = <T extends { id: number }>(\n  props: ComparisonTableProps<T>\n) => {\n  const {\n    headers,\n    data,\n    hideDetails,\n    hideDetailsCaption = 'Hide details',\n    showDetailsCaption = 'Show details',\n    classNameOverrides,\n    hideScrollBars,\n    hideScrollBarsMobile = true,\n    collapsibleSections,\n    cellWidth,\n    firstColumnWidth,\n    stickyHeaderTopOffset,\n    growContent,\n    onSelectionChanged,\n  } = props;\n\n  const {\n    headerWidth,\n    headerId,\n    contentContainerRef,\n    selectedSection,\n    setSelectedSection,\n    selectedTabIndex,\n    headerRefCallbackRef,\n    handleArrowsClick,\n    toggleMoreRows,\n    showMore,\n  } = useComparisonTable({ onSelectionChanged });\n\n  const cssVariablesStyle = {\n    '--tableWidth': `${headerWidth}px`,\n    ...(cellWidth ? { '--cellWidth': `${cellWidth}px` } : {}),\n    ...(firstColumnWidth\n      ? { '--firstColumnWidth': `${firstColumnWidth}px` }\n      : {}),\n    ...(stickyHeaderTopOffset\n      ? { '--stickyHeaderTopOffset': `${stickyHeaderTopOffset}px` }\n      : {}),\n    ...(growContent ? { '--growContent': '100%' } : {}),\n  } as React.CSSProperties;\n\n  return (\n    <ScrollSync onSync={headerRefCallbackRef}>\n      <div\n        style={cssVariablesStyle}\n        className={classNames({\n          [baseStyles.noScrollBars]: hideScrollBars,\n          [baseStyles.noScrollBarsMobile]: hideScrollBarsMobile,\n        })}\n      >\n        <div\n          id={headerId}\n          className={classNames(baseStyles.header, classNameOverrides?.header)}\n        >\n          <ScrollSyncPane>\n            <div className={classNames(baseStyles.container)}>\n              <div className={classNames(baseStyles['overflow-container'])}>\n                <div className={baseStyles['group-container']}>\n                  <TableArrows\n                    onClick={handleArrowsClick}\n                    active={{\n                      left: selectedTabIndex > 0,\n                      right: selectedTabIndex < data.length - 1,\n                    }}\n                  />\n                  <Row<T>\n                    key=\"table-header-row\"\n                    rowId=\"table-header-row\"\n                    cell={headers[0].cells[0]}\n                    data={data}\n                    isRowHeader\n                    cellClassName={classNameOverrides?.headerCell}\n                  />\n                </div>\n              </div>\n            </div>\n          </ScrollSyncPane>\n        </div>\n        <div ref={contentContainerRef}>\n          {Array.isArray(headers) &&\n            headers\n              .filter(\n                (headerGroup) => !hideDetails || showMore || headerGroup.default\n              )\n              .map((headerGroup, headerGroupIndex) => {\n                const content = headerGroup.cells?.map((cell, index) => {\n                  const rowId = `${headerGroup.id}-${\n                    cell.key ?? 'addon'\n                  }-${index}`;\n\n                  /** Do not render the first row */\n                  if (index === 0 && headerGroupIndex === 0) return null;\n\n                  return (\n                    <Row<T>\n                      key={rowId}\n                      rowId={rowId}\n                      cell={cell}\n                      data={data}\n                      cellClassName={classNameOverrides?.cell}\n                    />\n                  );\n                });\n\n                const idString = `headerGroup-${headerGroup.id}`;\n\n                return (\n                  <Fragment key={idString}>\n                    {headerGroup.label && collapsibleSections ? (\n                      <AccordionItem\n                        className={classNames(\n                          'mt16',\n                          classNameOverrides?.collapsibleSection\n                        )}\n                        label={headerGroup.label}\n                        headerClassName=\"p24 br8\"\n                      >\n                        <ScrollSyncPane>\n                          <div\n                            className={classNames(\n                              baseStyles.container,\n                              'pb16',\n                              classNameOverrides?.container,\n                              {\n                                [baseStyles.noScrollBars]: hideScrollBars,\n                              }\n                            )}\n                          >\n                            <div\n                              className={classNames(\n                                baseStyles['overflow-container']\n                              )}\n                            >\n                              <div className={baseStyles['group-container']}>\n                                {content}\n                              </div>\n                            </div>\n                          </div>\n                        </ScrollSyncPane>\n                      </AccordionItem>\n                    ) : (\n                      <section\n                        key={idString}\n                        className={classNames(\n                          baseStyles.section,\n                          classNameOverrides?.section\n                        )}\n                      >\n                        <ScrollSyncPane>\n                          <div\n                            className={classNames(\n                              baseStyles.container,\n                              'pb16',\n                              classNameOverrides?.container,\n                              {\n                                [baseStyles.noScrollBars]: hideScrollBars,\n                              }\n                            )}\n                          >\n                            <div\n                              className={classNames(\n                                baseStyles['overflow-container']\n                              )}\n                            >\n                              <div className={baseStyles['group-container']}>\n                                {\n                                  /**\n                                   * Print a table subheader if the `label` value is present\n                                   */\n                                  headerGroup.label && !collapsibleSections && (\n                                    <div className={baseStyles['group-title']}>\n                                      <h4\n                                        className={`p-h4 ${baseStyles.sticky}`}\n                                      >\n                                        {headerGroup.label}\n                                      </h4>\n                                    </div>\n                                  )\n                                }\n                                {content}\n                              </div>\n                            </div>\n                          </div>\n                        </ScrollSyncPane>\n                      </section>\n                    )}\n                  </Fragment>\n                );\n              })}\n          {hideDetails && (\n            <div\n              className={classNames(\n                baseStyles['show-details-container'],\n                baseStyles.sticky,\n                'mt48'\n              )}\n            >\n              <div>\n                <button\n                  className={classNames(\n                    'w100 d-flex p-h4 c-pointer',\n                    baseStyles['show-details-button'],\n                    classNameOverrides?.hideDetailsButton\n                  )}\n                  onClick={toggleMoreRows}\n                  type=\"button\"\n                >\n                  {showMore ? hideDetailsCaption : showDetailsCaption}\n                  <Chevron\n                    className={showMore ? '' : baseStyles['icon-inverted']}\n                  />\n                </button>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    </ScrollSync>\n  );\n};\n\nexport {\n  ComparisonTable,\n  TableButton,\n  TableInfoButton,\n  TableRating,\n  TableRowHeader,\n  TableTrueFalse,\n};\n"],"names":["_jsx","ScrollSync","_jsxs","ScrollSyncPane"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/comparisonTable/hooks/useComparisonTable.ts","../../../../../src/lib/components/comparisonTable/index.tsx"],"sourcesContent":["import debounce from 'lodash.debounce';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport generateId from '../../../util/generateId';\nimport { ArrowValues } from '../components/TableArrows';\n\nexport const useComparisonTable = ({\n  onSelectionChanged,\n}: {\n  onSelectionChanged?: (selectedIndex: number) => void;\n}) => {\n  const [showMore, setShowMore] = useState<boolean>(false);\n  const [headerWidth, setHeaderWidth] = useState(1400);\n  const [selectedTabIndex, setSelectedTabIndex] = useState(0);\n  const [selectedSection, setSelectedSection] = useState('');\n  const [headerId, setHeaderId] = useState('');\n  const headerRef = useRef<HTMLDivElement | null>(null);\n  const contentContainerRef = useRef<HTMLDivElement | null>(null);\n  const observerRef = useRef<ResizeObserver | null>(null);\n\n  const headerRefCallbackRef = useCallback((node) => {\n    if (node) {\n      setHeaderWidth(node.clientWidth);\n    }\n\n    headerRef.current = node;\n  }, []);\n\n  useEffect(() => {\n    if (!observerRef.current) {\n      observerRef.current = new ResizeObserver((entries) => {\n        entries.forEach((entry) => {\n          const currentTabIndex = Math.round(\n            entry.target.scrollLeft / entry.contentRect.width\n          );\n\n          setHeaderWidth(entry.contentRect.width);\n\n          // Update selectedTabIndex to match the calculated current tab index\n          setSelectedTabIndex(currentTabIndex);\n        });\n      });\n    }\n\n    if (headerRef.current) {\n      observerRef.current.observe(headerRef.current);\n    }\n\n    return () => {\n      if (headerRef.current) {\n        observerRef.current?.unobserve(headerRef.current);\n      }\n      observerRef.current?.disconnect();\n    };\n  }, []);\n\n  useEffect(() => {\n    const resetHeaderWidth = () => {\n      if (headerRef.current) {\n        setHeaderWidth(headerRef.current.clientWidth);\n      }\n    };\n\n    window.addEventListener('resize', resetHeaderWidth);\n\n    return () => window.removeEventListener('resize', resetHeaderWidth);\n  }, []);\n\n  const handleTableScroll = () => {\n    if (!headerRef.current) {\n      return;\n    }\n\n    const headerWidth = headerRef.current.getBoundingClientRect().width;\n\n    const currentTabIndex = Math.round(\n      headerRef.current.scrollLeft / headerWidth\n    );\n\n    setSelectedTabIndex(currentTabIndex);\n  };\n\n  const debouncedTableScroll = debounce(handleTableScroll, 150);\n\n  useEffect(() => {\n    headerRef.current?.addEventListener('scroll', debouncedTableScroll, {\n      passive: true,\n    });\n\n    return headerRef.current?.removeEventListener('scroll', handleTableScroll);\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const handleArrowsClick = (value: ArrowValues) => {\n    if (headerRef.current) {\n      const currentTabIndex = Math.round(\n        headerRef.current.scrollLeft / headerRef.current.clientWidth\n      );\n\n      const direction = value === 'next' ? 1 : -1;\n\n      const newTabIndex = currentTabIndex + direction;\n\n      headerRef.current.scroll({\n        top: 0,\n        left: headerWidth * newTabIndex,\n        behavior: 'smooth',\n      });\n\n      setSelectedTabIndex(() => {\n        return newTabIndex;\n      });\n    }\n  };\n\n  const toggleMoreRows = async () => {\n    setShowMore(!showMore);\n  };\n\n  useEffect(() => {\n    if (headerRef.current) {\n      return;\n    }\n\n    const headerById = document.getElementById(headerId);\n\n    if (headerById) {\n      headerRefCallbackRef(headerById);\n    }\n  }, [headerId, headerRefCallbackRef]);\n\n  useEffect(() => {\n    setHeaderId(generateId());\n  }, []);\n\n  useEffect(() => {\n    onSelectionChanged?.(selectedTabIndex);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedTabIndex]);\n\n  return {\n    headerWidth,\n    headerId,\n    contentContainerRef,\n    selectedSection,\n    setSelectedSection,\n    selectedTabIndex,\n    setSelectedTabIndex,\n    headerRefCallbackRef,\n    handleArrowsClick,\n    toggleMoreRows,\n    showMore,\n  };\n};\n","import classNames from 'classnames';\nimport { Fragment } from 'react';\nimport { ScrollSync, ScrollSyncPane } from 'react-scroll-sync';\n\nimport { AccordionItem } from './components/AccordionItem';\nimport Chevron from './components/Chevron';\nimport Row from './components/Row';\nimport TableArrows from './components/TableArrows';\nimport TableButton from './components/TableButton';\nimport TableInfoButton from './components/TableInfoButton';\nimport TableRating from './components/TableRating';\nimport TableRowHeader from './components/TableRowHeader';\nimport TableTrueFalse from './components/TableTrueFalse';\nimport { useComparisonTable } from './hooks/useComparisonTable';\nimport baseStyles from './style.module.scss';\n\nexport interface CellBaseProps<T> {\n  /** Used to display the row's title */\n  label?: React.ReactNode;\n  /**\n   *\n   * @param value The current data value\n   * @param element The complete data object\n   */\n  render?: (value: any, element: T) => React.ReactNode; // TODO: add typing to value param\n}\n\ninterface CellWithId<T> extends CellBaseProps<T> {\n  /** Used when adding component add-ons */\n  addonId: string | number;\n}\n\nexport type Cell<T> =\n  | ({ key: Extract<keyof T, string> } & CellBaseProps<T>)\n  | ({ key?: undefined } & CellWithId<T>);\n\nexport interface TableHeader<T> {\n  /** Required unique id number for each table group */\n  id: number;\n  /** Used to display a table group subheader */\n  label?: React.ReactNode;\n  cells: Array<Cell<T>>;\n  default?: boolean;\n}\n\nexport interface ComparisonTableProps<T> {\n  headers: Array<TableHeader<T>>;\n  data: Array<T>;\n  hideDetails?: boolean;\n  hideDetailsCaption?: string;\n  showDetailsCaption?: string;\n  hideScrollBars?: boolean;\n  hideScrollBarsMobile?: boolean;\n  collapsibleSections?: boolean;\n  cellWidth?: number;\n  firstColumnWidth?: number;\n  stickyHeaderTopOffset?: number;\n  growContent?: boolean;\n  classNameOverrides?: ClassNameOverrides;\n  onSelectionChanged?: (selectedIndex: number) => void;\n}\n\nexport interface ClassNameOverrides {\n  header?: string;\n  container?: string;\n  cell?: string;\n  headerCell?: string;\n  collapsibleSection?: string;\n  section?: string;\n  hideDetailsButton?: string;\n}\n\nconst ComparisonTable = <T extends { id: number }>(\n  props: ComparisonTableProps<T>\n) => {\n  const {\n    headers,\n    data,\n    hideDetails,\n    hideDetailsCaption = 'Hide details',\n    showDetailsCaption = 'Show details',\n    classNameOverrides,\n    hideScrollBars,\n    hideScrollBarsMobile = true,\n    collapsibleSections,\n    cellWidth,\n    firstColumnWidth,\n    stickyHeaderTopOffset,\n    growContent,\n    onSelectionChanged,\n  } = props;\n\n  const {\n    headerWidth,\n    headerId,\n    contentContainerRef,\n    selectedSection,\n    setSelectedSection,\n    selectedTabIndex,\n    headerRefCallbackRef,\n    handleArrowsClick,\n    toggleMoreRows,\n    showMore,\n  } = useComparisonTable({ onSelectionChanged });\n\n  const cssVariablesStyle = {\n    '--tableWidth': `${headerWidth}px`,\n    ...(cellWidth ? { '--cellWidth': `${cellWidth}px` } : {}),\n    ...(firstColumnWidth\n      ? { '--firstColumnWidth': `${firstColumnWidth}px` }\n      : {}),\n    ...(stickyHeaderTopOffset\n      ? { '--stickyHeaderTopOffset': `${stickyHeaderTopOffset}px` }\n      : {}),\n    ...(growContent ? { '--growContent': '100%' } : {}),\n  } as React.CSSProperties;\n\n  return (\n    <ScrollSync onSync={headerRefCallbackRef}>\n      <div\n        style={cssVariablesStyle}\n        className={classNames({\n          [baseStyles.noScrollBars]: hideScrollBars,\n          [baseStyles.noScrollBarsMobile]: hideScrollBarsMobile,\n        })}\n      >\n        <div\n          id={headerId}\n          className={classNames(baseStyles.header, classNameOverrides?.header)}\n        >\n          <ScrollSyncPane>\n            <div className={classNames(baseStyles.container)}>\n              <div className={classNames(baseStyles['overflow-container'])}>\n                <div className={baseStyles['group-container']}>\n                  <TableArrows\n                    onClick={handleArrowsClick}\n                    active={{\n                      left: selectedTabIndex > 0,\n                      right: selectedTabIndex < data.length - 1,\n                    }}\n                  />\n                  <Row<T>\n                    key=\"table-header-row\"\n                    rowId=\"table-header-row\"\n                    cell={headers[0].cells[0]}\n                    data={data}\n                    isRowHeader\n                    cellClassName={classNameOverrides?.headerCell}\n                  />\n                </div>\n              </div>\n            </div>\n          </ScrollSyncPane>\n        </div>\n        <div ref={contentContainerRef}>\n          {Array.isArray(headers) &&\n            headers\n              .filter(\n                (headerGroup) => !hideDetails || showMore || headerGroup.default\n              )\n              .map((headerGroup, headerGroupIndex) => {\n                const content = headerGroup.cells?.map((cell, index) => {\n                  const rowId = `${headerGroup.id}-${\n                    cell.key ?? 'addon'\n                  }-${index}`;\n\n                  /** Do not render the first row */\n                  if (index === 0 && headerGroupIndex === 0) return null;\n\n                  return (\n                    <Row<T>\n                      key={rowId}\n                      rowId={rowId}\n                      cell={cell}\n                      data={data}\n                      cellClassName={classNameOverrides?.cell}\n                    />\n                  );\n                });\n\n                const idString = `headerGroup-${headerGroup.id}`;\n\n                return (\n                  <Fragment key={idString}>\n                    {headerGroup.label && collapsibleSections ? (\n                      <AccordionItem\n                        className={classNames(\n                          'mt16',\n                          classNameOverrides?.collapsibleSection\n                        )}\n                        label={headerGroup.label}\n                        headerClassName=\"p24 br8\"\n                        isOpen={selectedSection === idString}\n                        onOpen={() => setSelectedSection(idString)}\n                        onClose={() => setSelectedSection('')}\n                      >\n                        <ScrollSyncPane>\n                          <div\n                            className={classNames(\n                              baseStyles.container,\n                              'pb16',\n                              classNameOverrides?.container,\n                              {\n                                [baseStyles.noScrollBars]: hideScrollBars,\n                              }\n                            )}\n                          >\n                            <div\n                              className={classNames(\n                                baseStyles['overflow-container']\n                              )}\n                            >\n                              <div className={baseStyles['group-container']}>\n                                {content}\n                              </div>\n                            </div>\n                          </div>\n                        </ScrollSyncPane>\n                      </AccordionItem>\n                    ) : (\n                      <section\n                        key={idString}\n                        className={classNames(\n                          baseStyles.section,\n                          classNameOverrides?.section\n                        )}\n                      >\n                        <ScrollSyncPane>\n                          <div\n                            className={classNames(\n                              baseStyles.container,\n                              'pb16',\n                              classNameOverrides?.container,\n                              {\n                                [baseStyles.noScrollBars]: hideScrollBars,\n                              }\n                            )}\n                          >\n                            <div\n                              className={classNames(\n                                baseStyles['overflow-container']\n                              )}\n                            >\n                              <div className={baseStyles['group-container']}>\n                                {\n                                  /**\n                                   * Print a table subheader if the `label` value is present\n                                   */\n                                  headerGroup.label && !collapsibleSections && (\n                                    <div className={baseStyles['group-title']}>\n                                      <h4\n                                        className={`p-h4 ${baseStyles.sticky}`}\n                                      >\n                                        {headerGroup.label}\n                                      </h4>\n                                    </div>\n                                  )\n                                }\n                                {content}\n                              </div>\n                            </div>\n                          </div>\n                        </ScrollSyncPane>\n                      </section>\n                    )}\n                  </Fragment>\n                );\n              })}\n          {hideDetails && (\n            <div\n              className={classNames(\n                baseStyles['show-details-container'],\n                baseStyles.sticky,\n                'mt48'\n              )}\n            >\n              <div>\n                <button\n                  className={classNames(\n                    'w100 d-flex p-a p-h4 c-pointer',\n                    baseStyles['show-details-button'],\n                    classNameOverrides?.hideDetailsButton\n                  )}\n                  onClick={toggleMoreRows}\n                  type=\"button\"\n                >\n                  {showMore ? hideDetailsCaption : showDetailsCaption}\n                  <Chevron\n                    className={showMore ? '' : baseStyles['icon-inverted']}\n                  />\n                </button>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    </ScrollSync>\n  );\n};\n\nexport {\n  ComparisonTable,\n  TableButton,\n  TableInfoButton,\n  TableRating,\n  TableRowHeader,\n  TableTrueFalse,\n};\n"],"names":["debounce","_jsx","ScrollSync","_jsxs","ScrollSyncPane"],"mappings":"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"}

package/dist/esm/components/comparisonTable/index.stories.js

@@ -1,27 +1,27 @@
 import { jsx } from 'react/jsx-runtime';
 import { ComparisonTable } from './index.js';
-import 'react';
-import '../../index-DLQEsiym.js';
 import { CardButton } from '../cards/cardButton/index.js';
 import TableButton from './components/TableButton/index.js';
-import TableRating from './components/TableRating/index.js';
 import TableRowHeader from './components/TableRowHeader/index.js';
+import TableRating from './components/TableRating/index.js';
 import TableTrueFalse from './components/TableTrueFalse.js';
-import '../../tslib.es6-CVlKGIvp.js';
-import '../../index-CqsS0Elu.js';
-import './components/AccordionItem/AccordionItem.js';
-import '../../index-DYcCCrfR.js';
-import '../../style-inject.es-tgCJW-Cu.js';
+import '../../tslib.es6-a39f91fc.js';
+import '../../index-6ea95111.js';
+import 'react';
+import '../../index-caeac7cd.js';
+import '../../_commonjsHelpers-4730bd53.js';
 import './components/Chevron.js';
 import './components/Row/index.js';
+import '../../style-inject.es-1f59c1d0.js';
 import './components/TableArrows/index.js';
 import './components/TableArrows/Arrow.js';
 import './components/TableInfoButton/index.js';
 import '../icon/icons/Info.js';
 import '../icon/IconWrapper/IconWrapper.js';
-import '../../_commonjsHelpers-BFTU3MAI.js';
-import '../../index-BClARCFl.js';
-import '../../index-CNcEE5dn.js';
+import '../../index-5e72c3d4.js';
+import '../../index-69a46657.js';
+import './components/AccordionItem/AccordionItem.js';
+import '../../index-a0ef2ab4.js';
 import '../icon/icons/ChevronRight.js';
 import '../cards/card/index.js';
 import './components/TableRating/StarIcon.js';
@@ -266,8 +266,8 @@ var story = {
         onSelectionChanged: {
             description: 'Callback to be called when the selected tab index changes on mobile',
             table: {
-                category: 'Callbacks',
-            },
+                category: 'Callbacks'
+            }
         },
     },
     args: {
@@ -291,20 +291,19 @@ var story = {
             collapsibleSection: '',
             section: '',
             hideDetailsButton: '',
-        },
+        }
     },
     parameters: {
         componentSubtitle: 'The Comparison Table component provides an easy way to compare vast amounts of information in a fast and easy way.',
     },
 };
-var ComparisonTableStory = {
-    render: function (_a) {
-        var data = _a.data, headers = _a.headers, collapsibleSections = _a.collapsibleSections, hideDetails = _a.hideDetails, classNameOverrides = _a.classNameOverrides, hideDetailsCaption = _a.hideDetailsCaption, showDetailsCaption = _a.showDetailsCaption, hideScrollBars = _a.hideScrollBars, hideScrollBarsMobile = _a.hideScrollBarsMobile, cellWidth = _a.cellWidth, firstColumnWidth = _a.firstColumnWidth, stickyHeaderTopOffset = _a.stickyHeaderTopOffset, growContent = _a.growContent;
-        return (jsx("div", { className: "bg-white", children: jsx(ComparisonTable, { data: data, headers: headers, collapsibleSections: collapsibleSections, hideDetails: hideDetails, classNameOverrides: classNameOverrides, hideDetailsCaption: hideDetailsCaption, showDetailsCaption: showDetailsCaption, hideScrollBars: hideScrollBars, hideScrollBarsMobile: hideScrollBarsMobile, cellWidth: cellWidth, firstColumnWidth: firstColumnWidth, stickyHeaderTopOffset: stickyHeaderTopOffset, growContent: growContent }) }));
-    },
-    name: 'ComparisonTable',
+var ComparisonTableStory = function (_a) {
+    var data = _a.data, headers = _a.headers, collapsibleSections = _a.collapsibleSections, hideDetails = _a.hideDetails, classNameOverrides = _a.classNameOverrides, hideDetailsCaption = _a.hideDetailsCaption, showDetailsCaption = _a.showDetailsCaption, hideScrollBars = _a.hideScrollBars, hideScrollBarsMobile = _a.hideScrollBarsMobile, cellWidth = _a.cellWidth, firstColumnWidth = _a.firstColumnWidth, stickyHeaderTopOffset = _a.stickyHeaderTopOffset, growContent = _a.growContent;
+    return (jsx("div", { className: 'bg-white', children: jsx(ComparisonTable, { data: data, headers: headers, collapsibleSections: collapsibleSections, hideDetails: hideDetails, classNameOverrides: classNameOverrides, hideDetailsCaption: hideDetailsCaption, showDetailsCaption: showDetailsCaption, hideScrollBars: hideScrollBars, hideScrollBarsMobile: hideScrollBarsMobile, cellWidth: cellWidth, firstColumnWidth: firstColumnWidth, stickyHeaderTopOffset: stickyHeaderTopOffset, growContent: growContent }) }));
 };
+ComparisonTableStory.storyName = "ComparisonTable";
 var HeaderType = function () { return (jsx("pre", { children: "export interface Header<T> {\n    id: number;\n    label?: React.ReactNode;\n    cells: Array<Cell<T>>;\n    default?: boolean;\n  }" })); };
 
-export { ComparisonTableStory, HeaderType, story as default };
+export default story;
+export { ComparisonTableStory, HeaderType };
 //# sourceMappingURL=index.stories.js.map

package/dist/esm/components/comparisonTable/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/comparisonTable/index.stories.tsx"],"sourcesContent":["import {\n  ComparisonTable,\n  ComparisonTableProps,\n  TableButton,\n  TableRating,\n  TableRowHeader,\n  TableTrueFalse,\n} from '.';\nimport { CardButton } from '../cards';\n\nconst headers = [\n  {\n    id: 1,\n    default: true,\n    cells: [\n      {\n        id: 1,\n        key: 'name',\n        label: 'Films',\n        render: (value: string) => (\n          <TableButton onClick={() => {}}>{value}</TableButton>\n        ),\n      },\n      {\n        id: 2,\n        key: 'country',\n        label: 'Country',\n      },\n      {\n        id: 4,\n        key: 'imdb',\n        label: 'IMDB rating',\n        render: (value: string) => (\n          <TableButton onClick={() => {}}>{value}</TableButton>\n        ),\n      },\n      {\n        id: 3,\n        key: 'rating',\n        label: (\n          <TableRowHeader\n            label=\"Our rating of movies found online on IMDB lists\"\n            onClickInfo={() => {}}\n          />\n        ),\n        render: (value: number) => (\n          <TableButton onClick={() => {}}>\n            <TableRating type=\"star\" rating={value} />\n          </TableButton>\n        ),\n      },\n      {\n        id: 5,\n        key: 'recommended',\n        label: (\n          <TableRowHeader\n            label=\"Recommended\"\n            subtitle=\"Our favourites\"\n            onClickInfo={() => {}}\n          />\n        ),\n        render: (value: number) => <TableRating type=\"zap\" rating={value} />,\n      },\n      {\n        id: 5,\n        key: 'familyFriendly',\n        label: 'Family friendly',\n        render: (value: boolean) => <TableTrueFalse value={value} />,\n      },\n      {\n        id: 6,\n        key: 'boxOffice',\n        label: 'Box office',\n        render: (value: number) =>\n          value.toLocaleString('de-DE', {\n            style: 'currency',\n            currency: 'EUR',\n          }),\n      },\n    ],\n  },\n  {\n    id: 2,\n    label: 'SUBSECTION',\n    cells: [\n      {\n        id: 1,\n        key: 'name',\n        label: 'Films',\n      },\n      {\n        id: 2,\n        key: 'country',\n        label: 'Country',\n      },\n      {\n        id: 4,\n        key: 'imdb',\n        label: 'IMDB rating',\n      },\n      {\n        id: 3,\n        key: 'rating',\n        label: 'Our rating',\n        render: (value: number) => <TableRating type=\"star\" rating={value} />,\n      },\n      {\n        id: 5,\n        key: 'recommended',\n        label: 'Recommended',\n        render: (value: number) => <TableRating type=\"zap\" rating={value} />,\n      },\n      {\n        id: 5,\n        key: 'familyFriendly',\n        label: 'Family friendly',\n        render: (value: boolean) => <TableTrueFalse value={value} />,\n      },\n      {\n        id: 6,\n        key: 'boxOffice',\n        label: 'Box office',\n        render: (value: number) =>\n          value.toLocaleString('de-DE', {\n            style: 'currency',\n            currency: 'EUR',\n          }),\n      },\n      {\n        addonId: 'addon-movies',\n        label: (\n          <CardButton\n            title=\"All Review\"\n            description=\"Click here to read all reviews\"\n            onClick={() => {}}\n          />\n        ),\n      },\n    ],\n  },\n  {\n    id: 3,\n    label: 'SUBSECTION 2',\n    cells: [\n      {\n        id: 1,\n        key: 'name',\n        label: 'Films',\n      },\n      {\n        id: 2,\n        key: 'country',\n        label: 'Country',\n      },\n      {\n        id: 4,\n        key: 'imdb',\n        label: 'IMDB rating',\n      },\n      {\n        id: 3,\n        key: 'rating',\n        label: 'Our rating',\n        render: (value: number) => <TableRating type=\"star\" rating={value} />,\n      },\n      {\n        id: 5,\n        key: 'recommended',\n        label: 'Recommended',\n        render: (value: number) => <TableRating type=\"zap\" rating={value} />,\n      },\n      {\n        id: 5,\n        key: 'familyFriendly',\n        label: 'Family friendly',\n        render: (value: boolean) => <TableTrueFalse value={value} />,\n      },\n      {\n        id: 6,\n        key: 'boxOffice',\n        label: 'Box office',\n        render: (value: number) =>\n          value.toLocaleString('de-DE', {\n            style: 'currency',\n            currency: 'EUR',\n          }),\n      },\n    ],\n  },\n];\n\nconst data = [\n  {\n    id: 1,\n    name: 'Pulp Fiction',\n    country: 'United States',\n    year: '1994',\n    rating: 3,\n    imdb: 8.9,\n    recommended: 3,\n    familyFriendly: false,\n    boxOffice: 213928762,\n  },\n  {\n    id: 2,\n    name: 'Parasite',\n    country: 'South Korea',\n    year: '2019',\n    rating: 2,\n    imdb: 8.6,\n    recommended: 3,\n    familyFriendly: false,\n    boxOffice: 355475245,\n  },\n  {\n    id: 3,\n    name: 'Spirited Away',\n    country: 'Japan',\n    year: '2001',\n    rating: 3,\n    imdb: 8.6,\n    recommended: 3,\n    familyFriendly: true,\n    boxOffice: 258908054,\n  },\n];\n\nconst story = {\n  title: 'JSX/ComparisonTable',\n  component: ComparisonTable,\n  argTypes: {\n    headers: {\n      description: 'The structure of the table',\n    },\n    data: {\n      description: 'The title text that needs to be displayed',\n    },\n    hideDetails: {\n      description: 'Hide table groups that do not have the `default` attribute',\n    },\n    hideDetailsCaption: {\n      description: 'Caption of the button to hide the details',\n    },\n    showDetailsCaption: {\n      description: 'Caption of the button to show the details',\n    },\n    hideScrollBars: {\n      description: 'Hide scroll bars',\n    },\n\n    hideScrollBarsMobile: {\n      description: 'Hide scroll bars on mobile only',\n    },\n    collapsibleSections: {\n      description: 'Make table groups with a label collapsible',\n    },\n    cellWidth: {\n      description: 'Width of a table content cell',\n    },\n    firstColumnWidth: {\n      description: 'Width of the first column of the table',\n    },\n    stickyHeaderTopOffset: {\n      description: 'Y-offset of the sticky header row',\n    },\n\n    growContent: {\n      description: 'Makes the content area grow to fill the available space',\n    },\n    classNameOverrides: {\n      description:\n        '\"className\" props to be passed down to various internal components',\n    },\n    onSelectionChanged: {\n      description:\n        'Callback to be called when the selected tab index changes on mobile',\n      table: {\n        category: 'Callbacks',\n      },\n    },\n  },\n  args: {\n    data,\n    headers,\n    hideDetails: false,\n    hideDetailsCaption: 'Hide details',\n    showDetailsCaption: 'Show details',\n    hideScrollBars: false,\n    hideScrollBarsMobile: true,\n    collapsibleSections: false,\n    cellWidth: undefined,\n    firstColumnWidth: undefined,\n    stickyHeaderTopOffset: 0,\n    growContent: false,\n    classNameOverrides: {\n      header: '',\n      container: '',\n      cell: '',\n      headerCell: '',\n      collapsibleSection: '',\n      section: '',\n      hideDetailsButton: '',\n    },\n  },\n  parameters: {\n    componentSubtitle:\n      'The Comparison Table component provides an easy way to compare vast amounts of information in a fast and easy way.',\n  },\n};\n\ninterface Data {\n  id: number;\n  name: string;\n  country: string;\n  year: string;\n  rating: number;\n  imdb: number;\n  recommended: number;\n  familyFriendly: boolean;\n  boxOffice: number;\n}\n\nexport const ComparisonTableStory = {\n  render: ({\n    data,\n    headers,\n    collapsibleSections,\n    hideDetails,\n    classNameOverrides,\n    hideDetailsCaption,\n    showDetailsCaption,\n    hideScrollBars,\n    hideScrollBarsMobile,\n    cellWidth,\n    firstColumnWidth,\n    stickyHeaderTopOffset,\n    growContent,\n  }: ComparisonTableProps<Data>) => (\n    <div className=\"bg-white\">\n      <ComparisonTable\n        data={data}\n        headers={headers}\n        collapsibleSections={collapsibleSections}\n        hideDetails={hideDetails}\n        classNameOverrides={classNameOverrides}\n        hideDetailsCaption={hideDetailsCaption}\n        showDetailsCaption={showDetailsCaption}\n        hideScrollBars={hideScrollBars}\n        hideScrollBarsMobile={hideScrollBarsMobile}\n        cellWidth={cellWidth}\n        firstColumnWidth={firstColumnWidth}\n        stickyHeaderTopOffset={stickyHeaderTopOffset}\n        growContent={growContent}\n      />\n    </div>\n  ),\n\n  name: 'ComparisonTable',\n};\n\nexport const HeaderType = () => (\n  <pre>\n    {`export interface Header<T> {\n    id: number;\n    label?: React.ReactNode;\n    cells: Array<Cell<T>>;\n    default?: boolean;\n  }`}\n  </pre>\n);\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/comparisonTable/index.stories.tsx"],"sourcesContent":["import { ComparisonTable, ComparisonTableProps, TableButton, TableRating, TableRowHeader, TableTrueFalse } from '.';\nimport { CardButton } from '../cards';\n\nconst headers = [\n  {\n    id: 1,\n    default: true,\n    cells: [\n      {\n        id: 1,\n        key: 'name',\n        label: 'Films',\n        render: (value: string) => (\n          <TableButton onClick={() => {}}>{value}</TableButton>\n        ),\n      },\n      {\n        id: 2,\n        key: 'country',\n        label: 'Country',\n      },\n      {\n        id: 4,\n        key: 'imdb',\n        label: 'IMDB rating',\n        render: (value: string) => (\n          <TableButton onClick={() => {}}>{value}</TableButton>\n        ),\n      },\n      {\n        id: 3,\n        key: 'rating',\n        label: (\n          <TableRowHeader\n            label=\"Our rating of movies found online on IMDB lists\"\n            onClickInfo={() => {}}\n          />\n        ),\n        render: (value: number) => (\n          <TableButton onClick={() => {}}>\n            <TableRating type=\"star\" rating={value} />\n          </TableButton>\n        ),\n      },\n      {\n        id: 5,\n        key: 'recommended',\n        label: (\n          <TableRowHeader\n            label=\"Recommended\"\n            subtitle=\"Our favourites\"\n            onClickInfo={() => {}}\n          />\n        ),\n        render: (value: number) => <TableRating type=\"zap\" rating={value} />,\n      },\n      {\n        id: 5,\n        key: 'familyFriendly',\n        label: 'Family friendly',\n        render: (value: boolean) => <TableTrueFalse value={value} />,\n      },\n      {\n        id: 6,\n        key: 'boxOffice',\n        label: 'Box office',\n        render: (value: number) =>\n          value.toLocaleString('de-DE', {\n            style: 'currency',\n            currency: 'EUR',\n          }),\n      },\n    ],\n  },\n  {\n    id: 2,\n    label: 'SUBSECTION',\n    cells: [\n      {\n        id: 1,\n        key: 'name',\n        label: 'Films',\n      },\n      {\n        id: 2,\n        key: 'country',\n        label: 'Country',\n      },\n      {\n        id: 4,\n        key: 'imdb',\n        label: 'IMDB rating',\n      },\n      {\n        id: 3,\n        key: 'rating',\n        label: 'Our rating',\n        render: (value: number) => <TableRating type=\"star\" rating={value} />,\n      },\n      {\n        id: 5,\n        key: 'recommended',\n        label: 'Recommended',\n        render: (value: number) => <TableRating type=\"zap\" rating={value} />,\n      },\n      {\n        id: 5,\n        key: 'familyFriendly',\n        label: 'Family friendly',\n        render: (value: boolean) => <TableTrueFalse value={value} />,\n      },\n      {\n        id: 6,\n        key: 'boxOffice',\n        label: 'Box office',\n        render: (value: number) =>\n          value.toLocaleString('de-DE', {\n            style: 'currency',\n            currency: 'EUR',\n          }),\n      },\n      {\n        addonId: 'addon-movies',\n        label: (\n          <CardButton\n            title=\"All Review\"\n            description=\"Click here to read all reviews\"\n            onClick={() => {}}\n          />\n        ),\n      },\n    ],\n  },\n  {\n    id: 3,\n    label: 'SUBSECTION 2',\n    cells: [\n      {\n        id: 1,\n        key: 'name',\n        label: 'Films',\n      },\n      {\n        id: 2,\n        key: 'country',\n        label: 'Country',\n      },\n      {\n        id: 4,\n        key: 'imdb',\n        label: 'IMDB rating',\n      },\n      {\n        id: 3,\n        key: 'rating',\n        label: 'Our rating',\n        render: (value: number) => <TableRating type=\"star\" rating={value} />,\n      },\n      {\n        id: 5,\n        key: 'recommended',\n        label: 'Recommended',\n        render: (value: number) => <TableRating type=\"zap\" rating={value} />,\n      },\n      {\n        id: 5,\n        key: 'familyFriendly',\n        label: 'Family friendly',\n        render: (value: boolean) => <TableTrueFalse value={value} />,\n      },\n      {\n        id: 6,\n        key: 'boxOffice',\n        label: 'Box office',\n        render: (value: number) =>\n          value.toLocaleString('de-DE', {\n            style: 'currency',\n            currency: 'EUR',\n          }),\n      },\n    ],\n  },\n];\n\nconst data = [\n  {\n    id: 1,\n    name: 'Pulp Fiction',\n    country: 'United States',\n    year: '1994',\n    rating: 3,\n    imdb: 8.9,\n    recommended: 3,\n    familyFriendly: false,\n    boxOffice: 213928762,\n  },\n  {\n    id: 2,\n    name: 'Parasite',\n    country: 'South Korea',\n    year: '2019',\n    rating: 2,\n    imdb: 8.6,\n    recommended: 3,\n    familyFriendly: false,\n    boxOffice: 355475245,\n  },\n  {\n    id: 3,\n    name: 'Spirited Away',\n    country: 'Japan',\n    year: '2001',\n    rating: 3,\n    imdb: 8.6,\n    recommended: 3,\n    familyFriendly: true,\n    boxOffice: 258908054,\n  },\n];\n\nconst story = {\n  title: 'JSX/ComparisonTable',\n  component: ComparisonTable,\n  argTypes: {\n   headers: {\n     description: 'The structure of the table',\n    },\n    data: {\n      description: 'The title text that needs to be displayed',\n    },\n    hideDetails: {\n      description: 'Hide table groups that do not have the `default` attribute',\n    },\n    hideDetailsCaption: {\n      description: 'Caption of the button to hide the details',\n    },\n    showDetailsCaption: {\n      description: 'Caption of the button to show the details',\n    },\n    hideScrollBars: {\n      description: 'Hide scroll bars',\n    },\n\n    hideScrollBarsMobile: {\n      description: 'Hide scroll bars on mobile only',\n    },\n    collapsibleSections: {\n      description: 'Make table groups with a label collapsible',\n    },\n    cellWidth: {\n      description: 'Width of a table content cell',\n    },\n    firstColumnWidth: {\n      description: 'Width of the first column of the table',\n    },\n    stickyHeaderTopOffset: {\n      description: 'Y-offset of the sticky header row',\n    },\n\n    growContent: {\n      description: 'Makes the content area grow to fill the available space',\n    },\n    classNameOverrides: {\n      description: '\"className\" props to be passed down to various internal components',\n    },\n    onSelectionChanged: {\n      description: 'Callback to be called when the selected tab index changes on mobile',\n      table: {\n        category: 'Callbacks'\n      }\n    },\n  },\n  args: {\n    data,\n    headers,\n    hideDetails: false,\n    hideDetailsCaption: 'Hide details',\n    showDetailsCaption: 'Show details',\n    hideScrollBars: false,\n    hideScrollBarsMobile: true,\n    collapsibleSections: false,\n    cellWidth: undefined,\n    firstColumnWidth: undefined,\n    stickyHeaderTopOffset: 0,\n    growContent: false,\n    classNameOverrides: {\n      header: '',\n      container: '',\n      cell: '',\n      headerCell: '',\n      collapsibleSection: '',\n      section: '',\n      hideDetailsButton: '',\n    }\n  },\n  parameters: {\n    componentSubtitle: 'The Comparison Table component provides an easy way to compare vast amounts of information in a fast and easy way.',\n  },\n};\n\ninterface Data {\n  id: number;\n  name: string;\n  country: string;\n  year: string;\n  rating: number;\n  imdb: number;\n  recommended: number;\n  familyFriendly: boolean;\n  boxOffice: number;\n}\n\nexport const ComparisonTableStory = ({\n  data,\n  headers,\n  collapsibleSections,\n  hideDetails,\n  classNameOverrides,\n  hideDetailsCaption,\n  showDetailsCaption,\n  hideScrollBars,\n  hideScrollBarsMobile,\n  cellWidth,\n  firstColumnWidth,\n  stickyHeaderTopOffset,\n  growContent,\n}: ComparisonTableProps<Data>) => (\n  <div className='bg-white'> \n    <ComparisonTable\n      data={data}\n      headers={headers}\n      collapsibleSections={collapsibleSections}\n      hideDetails={hideDetails}\n      classNameOverrides={classNameOverrides}\n      hideDetailsCaption={hideDetailsCaption}\n      showDetailsCaption={showDetailsCaption}\n      hideScrollBars={hideScrollBars}\n      hideScrollBarsMobile={hideScrollBarsMobile}\n      cellWidth={cellWidth}\n      firstColumnWidth={firstColumnWidth}\n      stickyHeaderTopOffset={stickyHeaderTopOffset}\n      growContent={growContent}\n    />\n  </div>\n);\n\nComparisonTableStory.storyName = \"ComparisonTable\";\n\nexport const HeaderType = () => (\n  <pre>\n   {`export interface Header<T> {\n    id: number;\n    label?: React.ReactNode;\n    cells: Array<Cell<T>>;\n    default?: boolean;\n  }`}\n  </pre>\n)\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/components/dateSelector/components/Calendar.js

@@ -1,11 +1,11 @@
 import 'react/jsx-runtime';
 import 'react';
-export { C as Calendar } from '../../../Calendar-DnUl9SJx.js';
-import '../../../index-DLQEsiym.js';
+export { C as Calendar } from '../../../Calendar-8e595b56.js';
 import '../../icon/icons/Calendar.js';
 import '../../button/index.js';
-import '../../../_commonjsHelpers-BFTU3MAI.js';
-import '../../../style-inject.es-tgCJW-Cu.js';
+import '../../../_commonjsHelpers-4730bd53.js';
+import '../../../style-inject.es-1f59c1d0.js';
 import '../../icon/IconWrapper/IconWrapper.js';
-import '../../../tslib.es6-CVlKGIvp.js';
+import '../../../tslib.es6-a39f91fc.js';
+import '../../../index-6ea95111.js';
 //# sourceMappingURL=Calendar.js.map

package/dist/esm/components/dateSelector/index.js

@@ -1,51 +1,31 @@
-import { b as __assign } from '../../tslib.es6-CVlKGIvp.js';
+import { a as __assign } from '../../tslib.es6-a39f91fc.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
-import { d as dayjs, C as Calendar } from '../../Calendar-DnUl9SJx.js';
-import { g as getDefaultExportFromCjs } from '../../_commonjsHelpers-BFTU3MAI.js';
-import { s as styleInject } from '../../style-inject.es-tgCJW-Cu.js';
+import { a as dayjs, C as Calendar } from '../../Calendar-8e595b56.js';
+import { c as commonjsGlobal } from '../../_commonjsHelpers-4730bd53.js';
+import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
 import { Input } from '../input/index.js';
-import { c as classNames } from '../../index-DLQEsiym.js';
+import { c as classNames } from '../../index-6ea95111.js';
 import '../icon/icons/Calendar.js';
 import '../icon/IconWrapper/IconWrapper.js';
 import '../button/index.js';
-import '../../index-CNcEE5dn.js';
+import '../../index-69a46657.js';
 
-var localeData$2 = {exports: {}};
+var localeData$1 = {exports: {}};
 
-var localeData$1 = localeData$2.exports;
+(function (module, exports) {
+!function(n,e){module.exports=e();}(commonjsGlobal,(function(){return function(n,e,t){var r=e.prototype,o=function(n){return n&&(n.indexOf?n:n.s)},u=function(n,e,t,r,u){var i=n.name?n:n.$locale(),a=o(i[e]),s=o(i[t]),f=a||s.map((function(n){return n.substr(0,r)}));if(!u)return f;var d=i.weekStart;return f.map((function(n,e){return f[(e+(d||0))%7]}))},i=function(){return t.Ls[t.locale()]},a=function(n,e){return n.formats[e]||function(n){return n.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g,(function(n,e,t){return e||t.slice(1)}))}(n.formats[e.toUpperCase()])},s=function(){var n=this;return {months:function(e){return e?e.format("MMMM"):u(n,"months")},monthsShort:function(e){return e?e.format("MMM"):u(n,"monthsShort","months",3)},firstDayOfWeek:function(){return n.$locale().weekStart||0},weekdays:function(e){return e?e.format("dddd"):u(n,"weekdays")},weekdaysMin:function(e){return e?e.format("dd"):u(n,"weekdaysMin","weekdays",2)},weekdaysShort:function(e){return e?e.format("ddd"):u(n,"weekdaysShort","weekdays",3)},longDateFormat:function(e){return a(n.$locale(),e)},meridiem:this.$locale().meridiem,ordinal:this.$locale().ordinal}};r.localeData=function(){return s.bind(this)()},t.localeData=function(){var n=i();return {firstDayOfWeek:function(){return n.weekStart||0},weekdays:function(){return t.weekdays()},weekdaysShort:function(){return t.weekdaysShort()},weekdaysMin:function(){return t.weekdaysMin()},months:function(){return t.months()},monthsShort:function(){return t.monthsShort()},longDateFormat:function(e){return a(n,e)},meridiem:n.meridiem,ordinal:n.ordinal}},t.months=function(){return u(i(),"months")},t.monthsShort=function(){return u(i(),"monthsShort","months",3)},t.weekdays=function(n){return u(i(),"weekdays",null,null,n)},t.weekdaysShort=function(n){return u(i(),"weekdaysShort","weekdays",3,n)},t.weekdaysMin=function(n){return u(i(),"weekdaysMin","weekdays",2,n)};}}));
+}(localeData$1));
 
-var hasRequiredLocaleData;
+var localeData = localeData$1.exports;
 
-function requireLocaleData () {
-	if (hasRequiredLocaleData) return localeData$2.exports;
-	hasRequiredLocaleData = 1;
-	(function (module, exports$1) {
-		!function(n,e){module.exports=e();}(localeData$1,(function(){return function(n,e,t){var r=e.prototype,o=function(n){return n&&(n.indexOf?n:n.s)},u=function(n,e,t,r,u){var i=n.name?n:n.$locale(),a=o(i[e]),s=o(i[t]),f=a||s.map((function(n){return n.substr(0,r)}));if(!u)return f;var d=i.weekStart;return f.map((function(n,e){return f[(e+(d||0))%7]}))},i=function(){return t.Ls[t.locale()]},a=function(n,e){return n.formats[e]||function(n){return n.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g,(function(n,e,t){return e||t.slice(1)}))}(n.formats[e.toUpperCase()])},s=function(){var n=this;return {months:function(e){return e?e.format("MMMM"):u(n,"months")},monthsShort:function(e){return e?e.format("MMM"):u(n,"monthsShort","months",3)},firstDayOfWeek:function(){return n.$locale().weekStart||0},weekdays:function(e){return e?e.format("dddd"):u(n,"weekdays")},weekdaysMin:function(e){return e?e.format("dd"):u(n,"weekdaysMin","weekdays",2)},weekdaysShort:function(e){return e?e.format("ddd"):u(n,"weekdaysShort","weekdays",3)},longDateFormat:function(e){return a(n.$locale(),e)},meridiem:this.$locale().meridiem,ordinal:this.$locale().ordinal}};r.localeData=function(){return s.bind(this)()},t.localeData=function(){var n=i();return {firstDayOfWeek:function(){return n.weekStart||0},weekdays:function(){return t.weekdays()},weekdaysShort:function(){return t.weekdaysShort()},weekdaysMin:function(){return t.weekdaysMin()},months:function(){return t.months()},monthsShort:function(){return t.monthsShort()},longDateFormat:function(e){return a(n,e)},meridiem:n.meridiem,ordinal:n.ordinal}},t.months=function(){return u(i(),"months")},t.monthsShort=function(){return u(i(),"monthsShort","months",3)},t.weekdays=function(n){return u(i(),"weekdays",null,null,n)},t.weekdaysShort=function(n){return u(i(),"weekdaysShort","weekdays",3,n)},t.weekdaysMin=function(n){return u(i(),"weekdaysMin","weekdays",2,n)};}})); 
-	} (localeData$2));
-	return localeData$2.exports;
-}
-
-var localeDataExports = requireLocaleData();
-var localeData = /*@__PURE__*/getDefaultExportFromCjs(localeDataExports);
-
-var customParseFormat$2 = {exports: {}};
+var customParseFormat$1 = {exports: {}};
 
-var customParseFormat$1 = customParseFormat$2.exports;
-
-var hasRequiredCustomParseFormat;
-
-function requireCustomParseFormat () {
-	if (hasRequiredCustomParseFormat) return customParseFormat$2.exports;
-	hasRequiredCustomParseFormat = 1;
-	(function (module, exports$1) {
-		!function(t,e){module.exports=e();}(customParseFormat$1,(function(){var t={LTS:"h:mm:ss A",LT:"h:mm A",L:"MM/DD/YYYY",LL:"MMMM D, YYYY",LLL:"MMMM D, YYYY h:mm A",LLLL:"dddd, MMMM D, YYYY h:mm A"},e=/(\[[^[]*\])|([-:/.()\s]+)|(A|a|YYYY|YY?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g,n=/\d\d/,r=/\d\d?/,i=/\d*[^\s\d-_:/()]+/,o={},s=function(t){return (t=+t)+(t>68?1900:2e3)};var a=function(t){return function(e){this[t]=+e;}},f=[/[+-]\d\d:?(\d\d)?|Z/,function(t){(this.zone||(this.zone={})).offset=function(t){if(!t)return 0;if("Z"===t)return 0;var e=t.match(/([+-]|\d\d)/g),n=60*e[1]+(+e[2]||0);return 0===n?0:"+"===e[0]?-n:n}(t);}],u=function(t){var e=o[t];return e&&(e.indexOf?e:e.s.concat(e.f))},h=function(t,e){var n,r=o.meridiem;if(r){for(var i=1;i<=24;i+=1)if(t.indexOf(r(i,0,e))>-1){n=i>12;break}}else n=t===(e?"pm":"PM");return n},d={A:[i,function(t){this.afternoon=h(t,false);}],a:[i,function(t){this.afternoon=h(t,true);}],S:[/\d/,function(t){this.milliseconds=100*+t;}],SS:[n,function(t){this.milliseconds=10*+t;}],SSS:[/\d{3}/,function(t){this.milliseconds=+t;}],s:[r,a("seconds")],ss:[r,a("seconds")],m:[r,a("minutes")],mm:[r,a("minutes")],H:[r,a("hours")],h:[r,a("hours")],HH:[r,a("hours")],hh:[r,a("hours")],D:[r,a("day")],DD:[n,a("day")],Do:[i,function(t){var e=o.ordinal,n=t.match(/\d+/);if(this.day=n[0],e)for(var r=1;r<=31;r+=1)e(r).replace(/\[|\]/g,"")===t&&(this.day=r);}],M:[r,a("month")],MM:[n,a("month")],MMM:[i,function(t){var e=u("months"),n=(u("monthsShort")||e.map((function(t){return t.substr(0,3)}))).indexOf(t)+1;if(n<1)throw new Error;this.month=n%12||n;}],MMMM:[i,function(t){var e=u("months").indexOf(t)+1;if(e<1)throw new Error;this.month=e%12||e;}],Y:[/[+-]?\d+/,a("year")],YY:[n,function(t){this.year=s(t);}],YYYY:[/\d{4}/,a("year")],Z:f,ZZ:f};function c(n){var r,i;r=n,i=o&&o.formats;for(var s=(n=r.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g,(function(e,n,r){var o=r&&r.toUpperCase();return n||i[r]||t[r]||i[o].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g,(function(t,e,n){return e||n.slice(1)}))}))).match(e),a=s.length,f=0;f<a;f+=1){var u=s[f],h=d[u],c=h&&h[0],l=h&&h[1];s[f]=l?{regex:c,parser:l}:u.replace(/^\[|\]$/g,"");}return function(t){for(var e={},n=0,r=0;n<a;n+=1){var i=s[n];if("string"==typeof i)r+=i.length;else {var o=i.regex,f=i.parser,u=t.substr(r),h=o.exec(u)[0];f.call(e,h),t=t.replace(h,"");}}return function(t){var e=t.afternoon;if(void 0!==e){var n=t.hours;e?n<12&&(t.hours+=12):12===n&&(t.hours=0),delete t.afternoon;}}(e),e}}return function(t,e,n){n.p.customParseFormat=true,t&&t.parseTwoDigitYear&&(s=t.parseTwoDigitYear);var r=e.prototype,i=r.parse;r.parse=function(t){var e=t.date,r=t.utc,s=t.args;this.$u=r;var a=s[1];if("string"==typeof a){var f=true===s[2],u=true===s[3],h=f||u,d=s[2];u&&(d=s[2]),o=this.$locale(),!f&&d&&(o=n.Ls[d]),this.$d=function(t,e,n){try{if(["x","X"].indexOf(e)>-1)return new Date(("X"===e?1e3:1)*t);var r=c(e)(t),i=r.year,o=r.month,s=r.day,a=r.hours,f=r.minutes,u=r.seconds,h=r.milliseconds,d=r.zone,l=new Date,m=s||(i||o?1:l.getDate()),M=i||l.getFullYear(),Y=0;i&&!o||(Y=o>0?o-1:l.getMonth());var p=a||0,v=f||0,D=u||0,g=h||0;return d?new Date(Date.UTC(M,Y,m,p,v,D,g+60*d.offset*1e3)):n?new Date(Date.UTC(M,Y,m,p,v,D,g)):new Date(M,Y,m,p,v,D,g)}catch(t){return new Date("")}}(e,a,r),this.init(),d&&true!==d&&(this.$L=this.locale(d).$L),h&&e!=this.format(a)&&(this.$d=new Date("")),o={};}else if(a instanceof Array)for(var l=a.length,m=1;m<=l;m+=1){s[1]=a[m-1];var M=n.apply(this,s);if(M.isValid()){this.$d=M.$d,this.$L=M.$L,this.init();break}m===l&&(this.$d=new Date(""));}else i.call(this,t);};}})); 
-	} (customParseFormat$2));
-	return customParseFormat$2.exports;
-}
+(function (module, exports) {
+!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t={LTS:"h:mm:ss A",LT:"h:mm A",L:"MM/DD/YYYY",LL:"MMMM D, YYYY",LLL:"MMMM D, YYYY h:mm A",LLLL:"dddd, MMMM D, YYYY h:mm A"},e=/(\[[^[]*\])|([-:/.()\s]+)|(A|a|YYYY|YY?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g,n=/\d\d/,r=/\d\d?/,i=/\d*[^\s\d-_:/()]+/,o={},s=function(t){return (t=+t)+(t>68?1900:2e3)};var a=function(t){return function(e){this[t]=+e;}},f=[/[+-]\d\d:?(\d\d)?|Z/,function(t){(this.zone||(this.zone={})).offset=function(t){if(!t)return 0;if("Z"===t)return 0;var e=t.match(/([+-]|\d\d)/g),n=60*e[1]+(+e[2]||0);return 0===n?0:"+"===e[0]?-n:n}(t);}],u=function(t){var e=o[t];return e&&(e.indexOf?e:e.s.concat(e.f))},h=function(t,e){var n,r=o.meridiem;if(r){for(var i=1;i<=24;i+=1)if(t.indexOf(r(i,0,e))>-1){n=i>12;break}}else n=t===(e?"pm":"PM");return n},d={A:[i,function(t){this.afternoon=h(t,!1);}],a:[i,function(t){this.afternoon=h(t,!0);}],S:[/\d/,function(t){this.milliseconds=100*+t;}],SS:[n,function(t){this.milliseconds=10*+t;}],SSS:[/\d{3}/,function(t){this.milliseconds=+t;}],s:[r,a("seconds")],ss:[r,a("seconds")],m:[r,a("minutes")],mm:[r,a("minutes")],H:[r,a("hours")],h:[r,a("hours")],HH:[r,a("hours")],hh:[r,a("hours")],D:[r,a("day")],DD:[n,a("day")],Do:[i,function(t){var e=o.ordinal,n=t.match(/\d+/);if(this.day=n[0],e)for(var r=1;r<=31;r+=1)e(r).replace(/\[|\]/g,"")===t&&(this.day=r);}],M:[r,a("month")],MM:[n,a("month")],MMM:[i,function(t){var e=u("months"),n=(u("monthsShort")||e.map((function(t){return t.substr(0,3)}))).indexOf(t)+1;if(n<1)throw new Error;this.month=n%12||n;}],MMMM:[i,function(t){var e=u("months").indexOf(t)+1;if(e<1)throw new Error;this.month=e%12||e;}],Y:[/[+-]?\d+/,a("year")],YY:[n,function(t){this.year=s(t);}],YYYY:[/\d{4}/,a("year")],Z:f,ZZ:f};function c(n){var r,i;r=n,i=o&&o.formats;for(var s=(n=r.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g,(function(e,n,r){var o=r&&r.toUpperCase();return n||i[r]||t[r]||i[o].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g,(function(t,e,n){return e||n.slice(1)}))}))).match(e),a=s.length,f=0;f<a;f+=1){var u=s[f],h=d[u],c=h&&h[0],l=h&&h[1];s[f]=l?{regex:c,parser:l}:u.replace(/^\[|\]$/g,"");}return function(t){for(var e={},n=0,r=0;n<a;n+=1){var i=s[n];if("string"==typeof i)r+=i.length;else {var o=i.regex,f=i.parser,u=t.substr(r),h=o.exec(u)[0];f.call(e,h),t=t.replace(h,"");}}return function(t){var e=t.afternoon;if(void 0!==e){var n=t.hours;e?n<12&&(t.hours+=12):12===n&&(t.hours=0),delete t.afternoon;}}(e),e}}return function(t,e,n){n.p.customParseFormat=!0,t&&t.parseTwoDigitYear&&(s=t.parseTwoDigitYear);var r=e.prototype,i=r.parse;r.parse=function(t){var e=t.date,r=t.utc,s=t.args;this.$u=r;var a=s[1];if("string"==typeof a){var f=!0===s[2],u=!0===s[3],h=f||u,d=s[2];u&&(d=s[2]),o=this.$locale(),!f&&d&&(o=n.Ls[d]),this.$d=function(t,e,n){try{if(["x","X"].indexOf(e)>-1)return new Date(("X"===e?1e3:1)*t);var r=c(e)(t),i=r.year,o=r.month,s=r.day,a=r.hours,f=r.minutes,u=r.seconds,h=r.milliseconds,d=r.zone,l=new Date,m=s||(i||o?1:l.getDate()),M=i||l.getFullYear(),Y=0;i&&!o||(Y=o>0?o-1:l.getMonth());var p=a||0,v=f||0,D=u||0,g=h||0;return d?new Date(Date.UTC(M,Y,m,p,v,D,g+60*d.offset*1e3)):n?new Date(Date.UTC(M,Y,m,p,v,D,g)):new Date(M,Y,m,p,v,D,g)}catch(t){return new Date("")}}(e,a,r),this.init(),d&&!0!==d&&(this.$L=this.locale(d).$L),h&&e!=this.format(a)&&(this.$d=new Date("")),o={};}else if(a instanceof Array)for(var l=a.length,m=1;m<=l;m+=1){s[1]=a[m-1];var M=n.apply(this,s);if(M.isValid()){this.$d=M.$d,this.$L=M.$L,this.init();break}m===l&&(this.$d=new Date(""));}else i.call(this,t);};}}));
+}(customParseFormat$1));
 
-var customParseFormatExports = requireCustomParseFormat();
-var customParseFormat = /*@__PURE__*/getDefaultExportFromCjs(customParseFormatExports);
+var customParseFormat = customParseFormat$1.exports;
 
 function zerofill(input, size) {
     if (size === void 0) { size = 2; }
@@ -72,20 +52,20 @@ function isoStringtoCalendarDate(input) {
     return { year: year, month: month + 1, day: day };
 }
 
-var css_248z = ".style-module_container__3bJf5 {\n  display: flex;\n}\n@media (max-width: 34rem) {\n  .style-module_container__3bJf5 {\n    width: 100%;\n    flex-direction: column;\n  }\n}\n\n.style-module_dayInput__1OBNv,\n.style-module_monthInput__2L_7o {\n  width: 88px;\n  flex: 1;\n}\n\n.style-module_yearInput__2C_H8 {\n  width: 104px;\n}\n@media (max-width: 34rem) {\n  .style-module_yearInput__2C_H8 {\n    width: 100%;\n  }\n}";
+var css_248z = ".style-module_container__3bJf5 {\n  display: flex;\n}\n@media (max-width: 34rem) {\n  .style-module_container__3bJf5 {\n    flex-direction: column;\n  }\n}\n\n.style-module_dayInput__1OBNv,\n.style-module_monthInput__2L_7o {\n  width: 88px;\n  flex: 1;\n}\n\n.style-module_yearInput__2C_H8 {\n  width: 104px;\n}\n@media (max-width: 34rem) {\n  .style-module_yearInput__2C_H8 {\n    width: 100%;\n  }\n}";
 var styles = {"container":"style-module_container__3bJf5","dayInput":"style-module_dayInput__1OBNv","monthInput":"style-module_monthInput__2L_7o","yearInput":"style-module_yearInput__2C_H8"};
 styleInject(css_248z);
 
 dayjs.extend(localeData);
 var COLLECTABLE_DATE_FORMAT = 'YYYY-MM-DD';
 var defaultPlaceholders = {
-    day: "Day",
-    dayFormat: "DD",
-    month: "Month",
-    monthFormat: "MM",
-    year: "Year",
-    yearFormat: "YYYY",
-    error: "Please enter a valid date"
+    day: 'Day',
+    dayFormat: 'DD',
+    month: 'Month',
+    monthFormat: 'MM',
+    year: 'Year',
+    yearFormat: 'YYYY',
+    error: 'Please enter a valid date',
 };
 var isDateValid = function (date, yearBoundaries, dateObject) {
     var _a = yearBoundaries.min, min = _a === void 0 ? 0 : _a, _b = yearBoundaries.max, max = _b === void 0 ? 0 : _b;
@@ -102,7 +82,7 @@ var isDateValid = function (date, yearBoundaries, dateObject) {
     var isValidDate = dayjs(date, COLLECTABLE_DATE_FORMAT, true).isValid();
     return {
         isValid: isValidDate,
-        errorType: 'default'
+        errorType: 'default',
     };
 };
 var DateSelector = function (_a) {
@@ -114,8 +94,13 @@ var DateSelector = function (_a) {
     var _e = useState(false), isCalendarOpen = _e[0], setIsCalendarOpen = _e[1];
     var _f = useState({}), internalValue = _f[0], setInternalValue = _f[1];
     useEffect(function () {
-        var calendarDateValue = value ? isoStringtoCalendarDate(value) : undefined;
-        if (value !== calendarDateValue && (calendarDateValue === null || calendarDateValue === void 0 ? void 0 : calendarDateValue.day) && (calendarDateValue === null || calendarDateValue === void 0 ? void 0 : calendarDateValue.month) && (calendarDateValue === null || calendarDateValue === void 0 ? void 0 : calendarDateValue.year)) {
+        var calendarDateValue = value
+            ? isoStringtoCalendarDate(value)
+            : undefined;
+        if (value !== calendarDateValue &&
+            (calendarDateValue === null || calendarDateValue === void 0 ? void 0 : calendarDateValue.day) &&
+            (calendarDateValue === null || calendarDateValue === void 0 ? void 0 : calendarDateValue.month) &&
+            (calendarDateValue === null || calendarDateValue === void 0 ? void 0 : calendarDateValue.year)) {
             var _a = isDateValid(value, yearBoundaries, calendarDateValue), isValid = _a.isValid, errorType = _a.errorType;
             setInternalValue(calendarDateValue);
             setHasError(isValid ? undefined : errorType);
@@ -140,7 +125,7 @@ var DateSelector = function (_a) {
         setHasError(isValid ? undefined : errorType);
         setIsCalendarOpen(false);
         if (isDateInValidFormat || isDirty) {
-            onChange(isValid ? formattedDate : "");
+            onChange(isValid ? formattedDate : '');
         }
     };
     var handleOnKeyDown = function (event, index) {
@@ -152,9 +137,10 @@ var DateSelector = function (_a) {
         // is not day input
         index > 0 &&
             // has clicked backspace or arrow left
-            ['Backspace', "ArrowLeft"].includes(event.key) &&
+            ['Backspace', 'ArrowLeft'].includes(event.key) &&
             // is focused at the first character of the input
-            inputSelectionStart === 0 && inputSelectionEnd === 0) {
+            inputSelectionStart === 0 &&
+            inputSelectionEnd === 0) {
             var prevInput = (_b = itemsRef.current) === null || _b === void 0 ? void 0 : _b[index - 1];
             event.preventDefault();
             prevInput === null || prevInput === void 0 ? void 0 : prevInput.focus();
@@ -162,11 +148,11 @@ var DateSelector = function (_a) {
         }
         if (
         // is not year input
-        index < 2
+        index < 2 &&
             // has clicked arrow right
-            && event.key === "ArrowRight"
+            event.key === 'ArrowRight' &&
             // is focused at the last character of the input value
-            && inputSelectionStart === currentInput.value.length) {
+            inputSelectionStart === currentInput.value.length) {
             var nextInput = (_c = itemsRef.current) === null || _c === void 0 ? void 0 : _c[index + 1];
             event.preventDefault();
             nextInput === null || nextInput === void 0 ? void 0 : nextInput.focus();
@@ -179,14 +165,13 @@ var DateSelector = function (_a) {
         var inputSelectionStart = currentInput === null || currentInput === void 0 ? void 0 : currentInput.selectionStart;
         if (
         // is not year input
-        index < 2
+        index < 2 &&
             // is a number key
-            && /^\d+$/.test(event.key)
-            && (
+            /^\d+$/.test(event.key) &&
             // is focused at the last character of the input value
-            inputSelectionStart === currentInput.maxLength
+            (inputSelectionStart === currentInput.maxLength ||
                 // or month value is over 1 or day value is over 3
-                || Number(currentInput.value) > (index === 1 ? 1 : 3))) {
+                Number(currentInput.value) > (index === 1 ? 1 : 3))) {
             var nextInput = (_b = itemsRef.current) === null || _b === void 0 ? void 0 : _b[index + 1];
             event.preventDefault();
             event.stopPropagation();
@@ -196,16 +181,24 @@ var DateSelector = function (_a) {
     };
     var getInputProps = function (key, index) {
         var _a, _b;
-        return (__assign({ 'data-cy': "date-selector-".concat(key), 'data-testid': "date-selector-".concat(key), className: styles["".concat(key, "Input")], id: key, name: key, maxLength: key === 'year' ? 4 : 2, required: true, label: placeholders === null || placeholders === void 0 ? void 0 : placeholders[key], placeholder: (_a = placeholders === null || placeholders === void 0 ? void 0 : placeholders["".concat(key, "Format")]) !== null && _a !== void 0 ? _a : "", labelInsideInput: true, value: (_b = internalValue[key]) !== null && _b !== void 0 ? _b : '', error: hasError && isDirty, type: "text", inputMode: "numeric", ref: function (el) { itemsRef.current[index] = el; }, onKeyUp: function (event) { return handleOnKeyUp(event, index); }, onKeyDown: function (event) { return handleOnKeyDown(event, index); }, onChange: function (_a) {
+        return (__assign({ 'data-cy': "date-selector-".concat(key), 'data-testid': "date-selector-".concat(key), className: styles["".concat(key, "Input")], id: key, name: key, maxLength: key === 'year' ? 4 : 2, required: true, label: placeholders === null || placeholders === void 0 ? void 0 : placeholders[key], placeholder: (_a = placeholders === null || placeholders === void 0 ? void 0 : placeholders["".concat(key, "Format")]) !== null && _a !== void 0 ? _a : '', labelInsideInput: true, value: (_b = internalValue[key]) !== null && _b !== void 0 ? _b : '', error: hasError && isDirty, type: 'text', inputMode: 'numeric', ref: function (el) {
+                itemsRef.current[index] = el;
+            }, onKeyUp: function (event) {
+                return handleOnKeyUp(event, index);
+            }, onKeyDown: function (event) {
+                return handleOnKeyDown(event, index);
+            }, onChange: function (_a) {
                 var target = _a.target;
                 return handleOnChange(key, target.value);
-            } }, (inputProps === null || inputProps === void 0 ? void 0 : inputProps(key)) || {}));
+            } }, ((inputProps === null || inputProps === void 0 ? void 0 : inputProps(key)) || {})));
     };
-    return (jsxs("div", { children: [jsxs("div", { className: "d-flex", children: [jsxs("div", { className: classNames(styles.container, "d-flex gap8"), children: [jsxs("div", { className: "d-flex gap8 jc-between", children: [jsx(Input, __assign({}, getInputProps('day', 0))), jsx(Input, __assign({}, getInputProps('month', 1)))] }), jsx(Input, __assign({}, getInputProps('year', 2)))] }), jsx(Calendar, { dateFormat: COLLECTABLE_DATE_FORMAT, yearBoundaries: yearBoundaries, displayCalendar: displayCalendar, dayjsLocale: dayjsLocale, firstDayOfWeek: firstDayOfWeek, isOpen: isCalendarOpen, setCalendarOpen: setIsCalendarOpen, value: value, onChange: onChange })] }), hasError && isDirty && (jsx("p", { className: classNames(hasError && isDirty ? 'd-block' : 'd-none', "p-p--small tc-red-500 w100 mt8"), "data-testid": "date-error-message", children: {
+    return (jsxs("div", { children: [jsxs("div", { className: "d-flex ai-center", children: [jsxs("div", { className: classNames(styles.container, 'd-flex gap8'), children: [jsxs("div", { className: 'd-flex gap8 jc-between', children: [jsx(Input, __assign({}, getInputProps('day', 0))), jsx(Input, __assign({}, getInputProps('month', 1)))] }), jsx(Input, __assign({}, getInputProps('year', 2)))] }), jsx(Calendar, { dateFormat: COLLECTABLE_DATE_FORMAT, yearBoundaries: yearBoundaries, displayCalendar: displayCalendar, dayjsLocale: dayjsLocale, firstDayOfWeek: firstDayOfWeek, isOpen: isCalendarOpen, setCalendarOpen: setIsCalendarOpen, value: value, onChange: onChange })] }), hasError && isDirty && (jsx("p", { className: classNames(hasError && isDirty ? 'd-block' : 'd-none', 'p-p--small tc-red-500 w100 mt8'), "data-testid": "date-error-message", children: {
                     default: placeholders.error,
-                    afterMax: placeholders.errorAfterMaxYear || "Please choose a date before ".concat(yearBoundaries.max + 1),
-                    beforeMin: placeholders.errorBeforeMinYear || "Please choose a date after ".concat(yearBoundaries.min - 1),
-                }[hasError || "default"] }))] }));
+                    afterMax: placeholders.errorAfterMaxYear ||
+                        "Please choose a date before ".concat(yearBoundaries.max + 1),
+                    beforeMin: placeholders.errorBeforeMinYear ||
+                        "Please choose a date after ".concat(yearBoundaries.min - 1),
+                }[hasError || 'default'] }))] }));
 };
 
 export { DateSelector };