@servicetitan/anvil2 1.45.2 → 1.46.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -0
- package/dist/{Calendar-BK861SAW.js → Calendar-BQ5F2ENO.js} +2 -2
- package/dist/{Calendar-BK861SAW.js.map → Calendar-BQ5F2ENO.js.map} +1 -1
- package/dist/Calendar.js +1 -1
- package/dist/{Checkbox-ZphVb1l0.js → Checkbox-DDrmVC-u.js} +2 -2
- package/dist/{Checkbox-ZphVb1l0.js.map → Checkbox-DDrmVC-u.js.map} +1 -1
- package/dist/{Checkbox-CYNjFdtO.js → Checkbox-Dl4KTwEJ.js} +2 -2
- package/dist/{Checkbox-CYNjFdtO.js.map → Checkbox-Dl4KTwEJ.js.map} +1 -1
- package/dist/Checkbox.js +2 -2
- package/dist/{useInfiniteCombobox-BaYWUxjg.js → Combobox-B9nesJuc.js} +18 -185
- package/dist/Combobox-B9nesJuc.js.map +1 -0
- package/dist/Combobox.js +2 -1
- package/dist/Combobox.js.map +1 -1
- package/dist/{DateField-DnasO2rB.js → DateField-DXxPsRtf.js} +2 -2
- package/dist/{DateField-DnasO2rB.js.map → DateField-DXxPsRtf.js.map} +1 -1
- package/dist/DateField.js +1 -1
- package/dist/{DateFieldRange-Ba-8T-Nz.js → DateFieldRange-Xauviu1w.js} +6 -6
- package/dist/DateFieldRange-Xauviu1w.js.map +1 -0
- package/dist/DateFieldRange.js +1 -1
- package/dist/{DateFieldSingle-BBu5Hi9c.js → DateFieldSingle-yLnwpVzd.js} +4 -4
- package/dist/{DateFieldSingle-BBu5Hi9c.js.map → DateFieldSingle-yLnwpVzd.js.map} +1 -1
- package/dist/DateFieldSingle.js +1 -1
- package/dist/Dnd.js +1 -1
- package/dist/DndSort.js +1 -1
- package/dist/{ListView-DEAMQopB.js → ListView-pb3rIcze.js} +2 -2
- package/dist/{ListView-DEAMQopB.js.map → ListView-pb3rIcze.js.map} +1 -1
- package/dist/ListView.js +1 -1
- package/dist/{Menu-C8we5CHP.js → Menu-DEVZz9xZ.js} +8 -3
- package/dist/Menu-DEVZz9xZ.js.map +1 -0
- package/dist/Menu.js +1 -1
- package/dist/{Page-cKXkjMmd.js → Page-BMDkbDcU.js} +2 -2
- package/dist/{Page-cKXkjMmd.js.map → Page-BMDkbDcU.js.map} +1 -1
- package/dist/Page.js +1 -1
- package/dist/{Pagination-ta8a2cJN.js → Pagination-BJsCppgW.js} +2 -2
- package/dist/{Pagination-ta8a2cJN.js.map → Pagination-BJsCppgW.js.map} +1 -1
- package/dist/Pagination.js +1 -1
- package/dist/{SearchField-BKXkoWPs.js → SearchField-Bb0uObwG.js} +2 -2
- package/dist/{SearchField-BKXkoWPs.js.map → SearchField-Bb0uObwG.js.map} +1 -1
- package/dist/SearchField.js +1 -1
- package/dist/{SelectCard-BWh8Yp7T.js → SelectCard-BTYZg9TG.js} +2 -2
- package/dist/{SelectCard-BWh8Yp7T.js.map → SelectCard-BTYZg9TG.js.map} +1 -1
- package/dist/SelectCard.js +1 -1
- package/dist/Toolbar-D4zuUFhb.js +2077 -0
- package/dist/Toolbar-D4zuUFhb.js.map +1 -0
- package/dist/Toolbar.css +139 -28
- package/dist/Toolbar.d.ts +3 -3
- package/dist/Toolbar.js +1 -1
- package/dist/assets/icons/st/gnav_legacy_search_filled.svg +1 -1
- package/dist/assets/icons/st/gnav_legacy_search_outline.svg +1 -1
- package/dist/beta/components/Toolbar/Filters/FilterButton.d.ts +30 -0
- package/dist/beta/components/Toolbar/Filters/FilterDateRange.d.ts +37 -0
- package/dist/beta/components/Toolbar/Filters/FilterDateSingle.d.ts +30 -0
- package/dist/beta/components/Toolbar/Filters/FilterDrawer.d.ts +15 -0
- package/dist/beta/components/Toolbar/Filters/FilterGroup.d.ts +25 -0
- package/dist/beta/components/Toolbar/Filters/FilterItemWrapper.d.ts +24 -0
- package/dist/beta/components/Toolbar/Filters/FilterSelect.d.ts +29 -0
- package/dist/beta/components/Toolbar/Filters/FilterToggleButton.d.ts +24 -0
- package/dist/beta/components/Toolbar/Filters/internal/FilterGroupContext.d.ts +40 -0
- package/dist/beta/components/Toolbar/Filters/internal/types.d.ts +130 -0
- package/dist/beta/components/Toolbar/Filters/internal/utils/filter-state.d.ts +40 -0
- package/dist/beta/components/Toolbar/Filters/internal/utils/test.d.ts +57 -0
- package/dist/beta/components/Toolbar/Toolbar.d.ts +302 -0
- package/dist/beta/components/Toolbar/ToolbarButton.d.ts +41 -0
- package/dist/beta/components/Toolbar/ToolbarButtonLink.d.ts +43 -0
- package/dist/beta/components/Toolbar/ToolbarButtonToggle.d.ts +42 -0
- package/dist/beta/components/Toolbar/ToolbarControlGroup.d.ts +20 -0
- package/dist/beta/components/Toolbar/ToolbarSearchField.d.ts +20 -0
- package/dist/beta/components/Toolbar/ToolbarSelect.d.ts +108 -0
- package/dist/beta/components/Toolbar/index.d.ts +9 -0
- package/dist/beta/components/Toolbar/internal/ToolbarItemOverflowContext.d.ts +19 -0
- package/dist/beta/components/Toolbar/internal/ToolbarItemWrapper.d.ts +40 -0
- package/dist/beta/components/Toolbar/internal/ToolbarOverflowContext.d.ts +35 -0
- package/dist/beta/components/Toolbar/internal/ToolbarOverflowMenu.d.ts +29 -0
- package/dist/beta/components/Toolbar/internal/utils/accessibility.d.ts +26 -0
- package/dist/beta/components/Toolbar/internal/utils/test.d.ts +29 -0
- package/dist/beta/components/Toolbar/types.d.ts +50 -0
- package/dist/beta/components/index.d.ts +1 -0
- package/dist/beta/index.d.ts +1 -0
- package/dist/beta.d.ts +2 -0
- package/dist/beta.js +2 -0
- package/dist/beta.js.map +1 -0
- package/dist/components/Combobox/ComboboxTypes.d.ts +8 -0
- package/dist/components/DateFieldRange/internal/DateFieldRangeCalendar.d.ts +1 -1
- package/dist/components/Dialog/index.d.ts +1 -1
- package/dist/{indeterminate_check_box-Bg24oeHy.js → indeterminate_check_box-RY9zr3xS.js} +17 -17
- package/dist/{indeterminate_check_box-Bg24oeHy.js.map → indeterminate_check_box-RY9zr3xS.js.map} +1 -1
- package/dist/indeterminate_check_box.css +72 -66
- package/dist/{index-CqdP5W00.js → index-V5Ez2gq_.js} +2 -2
- package/dist/{index-CqdP5W00.js.map → index-V5Ez2gq_.js.map} +1 -1
- package/dist/index.css +125 -26
- package/dist/index.js +759 -27
- package/dist/index.js.map +1 -1
- package/dist/index2.css +88 -105
- package/dist/internal/hooks/index.d.ts +1 -0
- package/dist/internal/hooks/useContainerQuery/index.d.ts +1 -0
- package/dist/internal/hooks/useContainerQuery/useContainerQuery.d.ts +46 -0
- package/dist/{useDateFieldOrchestration-DPLftOxu.js → useDateFieldOrchestration-BNJCsRkS.js} +2 -2
- package/dist/{useDateFieldOrchestration-DPLftOxu.js.map → useDateFieldOrchestration-BNJCsRkS.js.map} +1 -1
- package/dist/useInfiniteCombobox-WcRgC9p6.js +179 -0
- package/dist/useInfiniteCombobox-WcRgC9p6.js.map +1 -0
- package/dist/useIntersectionObserver-BEmMDO3P.js +70 -0
- package/dist/useIntersectionObserver-BEmMDO3P.js.map +1 -0
- package/package.json +2 -1
- package/dist/DateFieldRange-Ba-8T-Nz.js.map +0 -1
- package/dist/Menu-C8we5CHP.js.map +0 -1
- package/dist/Toolbar-DK7tXy_W.js +0 -807
- package/dist/Toolbar-DK7tXy_W.js.map +0 -1
- package/dist/useInfiniteCombobox-BaYWUxjg.js.map +0 -1
- /package/dist/{useInfiniteCombobox.css → Combobox.css} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination-ta8a2cJN.js","sources":["../src/components/Pagination/internal/PaginationItem.tsx","../src/components/Pagination/internal/PaginationOverflowMenu.tsx","../src/components/Pagination/internal/PaginationItemsPerPageMenu.tsx","../src/components/Pagination/internal/PaginationList.tsx","../src/components/Pagination/internal/PaginationTotalCount.tsx","../src/components/Pagination/internal/Pagination.tsx","../src/components/Pagination/internal/usePaginationArray.ts","../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport { ButtonToggle } from \"../../ButtonToggle\";\n\nimport styles from \"./PaginationItem.module.scss\";\n\n/**\n * Props for the PaginationItem component\n * @extends ComponentPropsWithoutRef<\"li\">\n */\nexport type PaginationItemProps = ComponentPropsWithoutRef<\"li\"> & {\n /**\n * The page number to display.\n */\n page: number;\n /**\n * Whether this page item is currently active/selected.\n * @default false\n */\n isActive?: boolean;\n /**\n * Callback function called when the page item is clicked.\n */\n onClick?: () => void;\n};\n\n/**\n * PaginationItem component for displaying individual page numbers in pagination.\n *\n * Features:\n * - Displays page number as a toggle button\n * - Supports active state styling\n * - Fully accessible with proper ARIA attributes\n * - Integrates with pagination navigation system\n * - Consistent styling with design system\n *\n * @example\n * <PaginationItem\n * page={3}\n * isActive={true}\n * onClick={() => console.log('Page 3 clicked')}\n * />\n */\nexport const PaginationItem = forwardRef<HTMLLIElement, PaginationItemProps>(\n (props, ref) => {\n const { page, isActive, onClick, className, ...rest } = props;\n\n const paginationClassName = cx(styles[\"pagination-item\"], className);\n const paginationButtonClassName = cx(styles[\"pagination-item-button\"], {\n [styles.active]: isActive,\n });\n return (\n <li ref={ref} {...rest} className={paginationClassName}>\n <ButtonToggle\n className={paginationButtonClassName}\n size=\"small\"\n onClick={onClick}\n aria-current={isActive ? \"page\" : undefined}\n checked={isActive}\n >\n {page}\n </ButtonToggle>\n </li>\n );\n },\n);\n\nPaginationItem.displayName = \"PaginationItem\";\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport IconMoreHoriz from \"@servicetitan/hammer-icon/mdi/round/more_horiz.svg\";\n\nimport { Menu } from \"../../Menu\";\n\nimport styles from \"./PaginationOverflowMenu.module.scss\";\n\n/**\n * Props for the PaginationOverflowMenu component\n * @extends ComponentPropsWithoutRef<\"li\">\n */\nexport type PaginationOverflowMenuProps = ComponentPropsWithoutRef<\"li\"> & {\n /**\n * The starting page number for the overflow range.\n */\n startPage: number;\n /**\n * The ending page number for the overflow range.\n */\n endPage: number;\n /**\n * The number of pages in the overflow range.\n */\n length: number;\n /**\n * Callback function called when a page in the overflow menu is selected.\n * @param page The selected page number\n */\n onItemClick: (page: number) => void;\n};\n\n/**\n * PaginationOverflowMenu component for displaying overflow pages in pagination.\n *\n * Features:\n * - Displays ellipsis menu for large page ranges\n * - Shows all pages in the overflow range as menu items\n * - Integrates with pagination navigation system\n * - Fully accessible with proper ARIA labels\n * - Consistent styling with design system\n *\n * @example\n * <PaginationOverflowMenu\n * startPage={4}\n * endPage={8}\n * length={5}\n * onItemClick={(page) => console.log('Page selected:', page)}\n * />\n */\nexport const PaginationOverflowMenu = forwardRef<\n HTMLLIElement,\n PaginationOverflowMenuProps\n>((props, ref) => {\n const { startPage, endPage, length, onItemClick, ...rest } = props;\n return (\n <li className={styles[\"pagination-item-overflow-menu\"]} ref={ref} {...rest}>\n <Menu\n icon={IconMoreHoriz}\n size=\"small\"\n appearance=\"ghost\"\n maxHeight={200}\n key={`${startPage}-${endPage}`}\n contentClassName={styles[\"pagination-item-overflow-menu-content\"]}\n aria-label=\"More pages\"\n >\n {Array.from({ length: length }).map((_, index) => (\n <Menu.Item\n key={index}\n label={`${startPage + index}`}\n onClick={() => {\n onItemClick(startPage + index);\n }}\n />\n ))}\n </Menu>\n </li>\n );\n});\n\nPaginationOverflowMenu.displayName = \"PaginationOverflowMenu\";\n","import { forwardRef } from \"react\";\nimport IconKeyboardArrowDown from \"@servicetitan/hammer-icon/mdi/round/keyboard_arrow_down.svg\";\n\nimport { Button } from \"../../Button\";\nimport { Flex } from \"../../Flex\";\nimport { Menu } from \"../../Menu\";\nimport { Text } from \"../../Text\";\n\nimport styles from \"./PaginationItemsPerPageMenu.module.scss\";\n\n/**\n * Props for the PaginationItemsPerPageMenu component\n */\nexport type PaginationItemsPerPageMenuProps = {\n /**\n * The currently selected number of items per page.\n */\n itemsPerPage: number;\n /**\n * Array of available options for items per page.\n */\n itemsPerPageOptions: number[];\n /**\n * Callback function called when the items per page selection changes.\n * @param itemsPerPage The new number of items per page\n */\n onItemsPerPageChange: (itemsPerPage: number) => void;\n};\n\n/**\n * PaginationItemsPerPageMenu component for selecting the number of items per page.\n *\n * Features:\n * - Displays current items per page selection\n * - Provides dropdown menu with available options\n * - Integrates with pagination system\n * - Shows \"Rows per page\" label for clarity\n * - Fully accessible with proper ARIA attributes\n * - Consistent styling with design system\n *\n * @example\n * <PaginationItemsPerPageMenu\n * itemsPerPage={10}\n * itemsPerPageOptions={[5, 10, 25, 50]}\n * onItemsPerPageChange={(itemsPerPage) => console.log('Items per page:', itemsPerPage)}\n * />\n */\nexport const PaginationItemsPerPageMenu = forwardRef<\n HTMLDivElement,\n PaginationItemsPerPageMenuProps\n>((props, ref) => {\n const { itemsPerPage, itemsPerPageOptions, onItemsPerPageChange } = props;\n return (\n <Flex alignItems=\"center\" gap=\"2\" ref={ref}>\n <Text size=\"small\">Rows per page</Text>\n <Menu\n trigger={({ ref, ...rest }) => {\n return (\n <Button\n ref={ref}\n {...rest}\n className={styles[\"pagination-items-per-page-button\"]}\n appearance=\"ghost\"\n icon={{ after: IconKeyboardArrowDown }}\n size=\"small\"\n >\n {itemsPerPage}\n </Button>\n );\n }}\n >\n {itemsPerPageOptions.map((option) => (\n <Menu.Item\n key={option}\n label={option}\n onClick={() => {\n onItemsPerPageChange?.(option);\n }}\n />\n ))}\n </Menu>\n </Flex>\n );\n});\n\nPaginationItemsPerPageMenu.displayName = \"PaginationItemsPerPageMenu\";\n","import { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport IconKeyboardArrowLeft from \"@servicetitan/hammer-icon/mdi/round/keyboard_arrow_left.svg\";\nimport IconKeyboardArrowRight from \"@servicetitan/hammer-icon/mdi/round/keyboard_arrow_right.svg\";\n\nimport { Button } from \"../../Button\";\n\nimport styles from \"./PaginationList.module.scss\";\n\ntype PaginationListProps = {\n page: number;\n totalPages: number;\n onPageChange: (page: number) => void;\n children: React.ReactNode;\n className?: string;\n};\n\nexport const PaginationList = forwardRef<HTMLUListElement, PaginationListProps>(\n (props, ref) => {\n const { page, totalPages, children, onPageChange, className } = props;\n\n const paginationListClassName = cx(styles[\"pagination-list\"], className);\n\n return (\n <>\n <Button\n appearance=\"ghost\"\n icon={IconKeyboardArrowLeft}\n size=\"small\"\n aria-label=\"Previous page\"\n disabled={page === 1}\n onClick={() => {\n if (page > 1) {\n onPageChange?.(page - 1);\n }\n }}\n />\n <ul ref={ref} className={paginationListClassName}>\n {children}\n </ul>\n <Button\n appearance=\"ghost\"\n icon={IconKeyboardArrowRight}\n size=\"small\"\n aria-label=\"Next page\"\n disabled={page === totalPages}\n onClick={() => {\n if (page < totalPages) {\n onPageChange?.(page + 1);\n }\n }}\n />\n </>\n );\n },\n);\n\nPaginationList.displayName = \"PaginationList\";\n","import cx from \"classnames\";\n\nimport { Text } from \"../../Text\";\n\nimport styles from \"./PaginationTotalCount.module.scss\";\n\nexport const PaginationTotalCount = ({\n firstItem,\n lastItem,\n totalCount,\n className,\n}: {\n firstItem: number;\n lastItem: number;\n totalCount: number;\n className?: string;\n}) => {\n const paginationTotalCountClassName = cx(\n styles[\"pagination-total-count\"],\n className,\n );\n return (\n <Text\n size=\"small\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n className={paginationTotalCountClassName}\n >\n {firstItem} - {lastItem} {totalCount ? `of ${totalCount}` : \"\"} items\n </Text>\n );\n};\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport { PaginationItem } from \"./PaginationItem\";\nimport { PaginationOverflowMenu } from \"./PaginationOverflowMenu\";\nimport { PaginationItemsPerPageMenu } from \"./PaginationItemsPerPageMenu\";\nimport { PaginationList } from \"./PaginationList\";\nimport { PaginationTotalCount } from \"./PaginationTotalCount\";\n\nimport styles from \"./Pagination.module.scss\";\n\n/**\n * Props for the Pagination component\n * @extends ComponentPropsWithoutRef<\"nav\">\n */\nexport type PaginationProps = ComponentPropsWithoutRef<\"nav\">;\n\nconst PaginationElement = forwardRef<HTMLElement, PaginationProps>(\n (props, ref) => {\n const { className, children, ...rest } = props;\n\n const paginationClassName = cx(styles.pagination, className);\n\n return (\n <nav ref={ref} className={paginationClassName} {...rest}>\n {children}\n </nav>\n );\n },\n);\n\nPaginationElement.displayName = \"Pagination\";\n\n/**\n * Pagination component for navigating through paginated content.\n *\n * Features:\n * - Provides navigation controls for paginated data\n * - Supports compound components for flexible pagination layouts\n * - Includes list, items, overflow menu, items per page menu, and total count\n * - Accessible navigation with proper ARIA roles\n * - Customizable styling and layout\n *\n * @example\n * <Pagination>\n * <Pagination.List>\n * <Pagination.Item>1</Pagination.Item>\n * <Pagination.Item>2</Pagination.Item>\n * <Pagination.OverflowMenu />\n * <Pagination.Item>10</Pagination.Item>\n * </Pagination.List>\n * <Pagination.ItemsPerPageMenu />\n * <Pagination.TotalCount />\n * </Pagination>\n */\nexport const Pagination = Object.assign(PaginationElement, {\n List: PaginationList,\n Item: PaginationItem,\n OverflowMenu: PaginationOverflowMenu,\n ItemsPerPageMenu: PaginationItemsPerPageMenu,\n TotalCount: PaginationTotalCount,\n});\n","import { useMemo, useRef } from \"react\";\n\nexport type PageArrayItem =\n | { type: \"page\"; page: number }\n | { type: \"overflow\"; startPage: number; endPage: number; length: number };\n\n/**\n * Custom hook for managing pagination array state and generation.\n *\n * Features:\n * - Automatically generates pagination array based on current page and total pages\n * - Avoids unnecessary regeneration if the current page is already visible\n * - Updates array when page or total pages change and the visible set must change\n * - Handles jumps to first/last page with overflow between current and target\n * - Provides stable reference for the current pagination array\n *\n * @param page The currently selected page\n * @param totalPages Total number of pages\n * @param maxArrayLength Maximum length of the pagination array (including overflows)\n * @returns The current pagination array\n *\n * @example\n * const pageArray = usePaginationArray({\n * page: 5,\n * totalPages: 10,\n * maxArrayLength: 7\n * });\n */\nexport const usePaginationArray = ({\n page,\n totalPages,\n maxArrayLength = 7,\n}: {\n page: number;\n totalPages: number;\n maxArrayLength?: number;\n}): PageArrayItem[] => {\n const prevRef = useRef<{\n array: PageArrayItem[];\n totalPages: number;\n maxArrayLength: number;\n prevPage: number;\n } | null>(null);\n\n return useMemo(() => {\n const maxPagesToShow = maxArrayLength - 2;\n let result: PageArrayItem[] = [];\n const addRange = (start: number, end: number) => {\n const count = end - start + 1;\n if (count === 1) {\n result.push({ type: \"page\", page: start });\n } else if (count >= 2) {\n result.push({\n type: \"overflow\",\n startPage: start,\n endPage: end,\n length: count,\n });\n }\n };\n\n if (totalPages <= maxArrayLength) {\n result = Array.from({ length: totalPages }, (_, i) => ({\n type: \"page\" as const,\n page: i + 1,\n }));\n } else if (page <= maxPagesToShow) {\n // Leading section\n for (let i = 1; i <= maxPagesToShow; i++) {\n result.push({ type: \"page\", page: i });\n }\n addRange(maxArrayLength - 1, totalPages - 1);\n result.push({ type: \"page\", page: totalPages });\n } else if (page >= totalPages - maxPagesToShow + 1) {\n // Trailing section\n result.push({ type: \"page\", page: 1 });\n addRange(2, totalPages - maxPagesToShow);\n for (let i = totalPages - (maxPagesToShow - 1); i <= totalPages; i++) {\n result.push({ type: \"page\", page: i });\n }\n } else {\n // Middle section\n result.push({ type: \"page\", page: 1 });\n addRange(2, page - 2);\n result.push({ type: \"page\", page: page - 1 });\n result.push({ type: \"page\", page: page });\n result.push({ type: \"page\", page: page + 1 });\n addRange(page + 2, totalPages - 1);\n result.push({ type: \"page\", page: totalPages });\n }\n\n const prev = prevRef.current;\n\n // Check if we should remake array due to overflow between pages or new page being in overflow\n let shouldRemakeForJump = false;\n if (\n prev &&\n prev.totalPages === totalPages &&\n prev.maxArrayLength === maxArrayLength\n ) {\n // Check if there is overflow between the new page and the current page\n const start = Math.min(prev.prevPage, page);\n const end = Math.max(prev.prevPage, page);\n const hasOverflowBetween = prev.array.some(\n (item) =>\n item.type === \"overflow\" &&\n // Check if overflow intersects with the range (not completely covers)\n !(item.endPage < start || item.startPage > end),\n );\n\n // Check if the new page is part of an overflow\n const newPageInOverflow = prev.array.some(\n (item) =>\n item.type === \"overflow\" &&\n item.startPage <= page &&\n item.endPage >= page,\n );\n\n shouldRemakeForJump = hasOverflowBetween || newPageInOverflow;\n }\n\n // If we should remake for jump, always return the new array\n if (shouldRemakeForJump) {\n prevRef.current = {\n array: result,\n totalPages,\n maxArrayLength,\n prevPage: page,\n };\n return result;\n }\n\n // Optimization: if the new page is already present in the previous array, reuse the array\n if (\n prev &&\n prev.totalPages === totalPages &&\n prev.maxArrayLength === maxArrayLength &&\n prev.array.some((item) => item.type === \"page\" && item.page === page)\n ) {\n return prev.array;\n }\n\n prevRef.current = {\n array: result,\n totalPages,\n maxArrayLength,\n prevPage: page,\n };\n return result;\n }, [page, totalPages, maxArrayLength]);\n};\n","import { forwardRef, useLayoutEffect, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { core } from \"@servicetitan/hammer-token\";\n\nimport { DataTrackingId } from \"../../types\";\nimport { SrOnly } from \"../SrOnly\";\nimport { useTrackingId, useMergeRefs } from \"../../hooks\";\n\nimport {\n Pagination as BasePagination,\n type PaginationProps as BasePaginationProps,\n} from \"./internal/Pagination\";\nimport { usePaginationArray } from \"./internal/usePaginationArray\";\n\nimport styles from \"./Pagination.module.scss\";\n\n/**\n * Props for the Pagination component\n * @property {number} page - The current page number\n * @property {number} itemsPerPage - Number of items displayed per page\n * @property {number[]} [itemsPerPageOptions] - Available options for items per page selection\n * @property {number} [totalItemCount] - Total number of items across all pages\n * @property {boolean} [showCount] - Whether to display the item count information\n * @property {(page: number) => void} [onPageChange] - Callback when page changes\n * @property {(itemsPerPage: number) => void} [onItemsPerPageChange] - Callback when items per page changes\n * @extends Omit<BasePaginationProps, \"children\">\n * @extends DataTrackingId\n */\nexport type PaginationProps = Omit<BasePaginationProps, \"children\"> &\n DataTrackingId & {\n page: number;\n itemsPerPage: number;\n itemsPerPageOptions?: number[];\n totalItemCount?: number;\n showCount?: boolean;\n onPageChange?: (page: number) => void;\n onItemsPerPageChange?: (itemsPerPage: number) => void;\n };\n\n/**\n * Pagination component for navigating through paginated content with automatic page array generation.\n *\n * Features:\n * - Automatic page array generation with overflow handling\n * - Supports items per page selection with customizable options\n * - Displays item count information with screen reader support\n * - Handles edge cases like invalid page numbers\n * - Includes previous/next navigation buttons\n * - Supports overflow menus for large page ranges\n * - Fully accessible with proper ARIA attributes\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Pagination\n * page={1}\n * itemsPerPage={10}\n * totalItemCount={100}\n * itemsPerPageOptions={[10, 20, 50]}\n * showCount={true}\n * onPageChange={(page) => console.log('Page changed to:', page)}\n * onItemsPerPageChange={(itemsPerPage) => console.log('Items per page:', itemsPerPage)}\n * />\n */\nexport const Pagination = forwardRef<HTMLDivElement, PaginationProps>(\n (props, ref) => {\n const {\n \"aria-label\": ariaLabel,\n page,\n itemsPerPage,\n itemsPerPageOptions,\n totalItemCount: totalItemCountProp,\n showCount,\n onPageChange,\n onItemsPerPageChange,\n className,\n ...rest\n } = props;\n\n const data = {\n \"aria-label\": ariaLabel,\n };\n\n const trackingId = useTrackingId({\n name: \"Pagination\",\n data,\n hasOverride: !!rest[\"data-tracking-id\"],\n });\n const totalItemCount = totalItemCountProp ?? 0;\n const totalPages = Math.ceil(totalItemCount / itemsPerPage);\n const elRef = useRef<HTMLDivElement>(null);\n const combinedRef = useMergeRefs([elRef, ref]);\n const [isNarrow, setIsNarrow] = useState(false);\n\n const pageArray = usePaginationArray({\n page,\n totalPages,\n maxArrayLength: 7,\n });\n\n // Check if current page is available in the pageArray, fallback to page 1 if not\n const isPageAvailable = pageArray.some(\n (item) => item.type === \"page\" && item.page === page,\n );\n\n if (!isPageAvailable && page !== 1 && totalPages > 0) {\n // Use requestAnimationFrame to avoid calling onPageChange during render\n requestAnimationFrame(() => {\n onPageChange?.(1);\n });\n }\n\n const firstItem = 1 + (page - 1) * itemsPerPage;\n const lastItem = firstItem - 1 + itemsPerPage;\n const itemRangeText = `${firstItem} - ${lastItem} ${\n totalItemCount ? `of ${totalItemCount}` : \"\"\n } items`;\n\n useLayoutEffect(() => {\n const resizeObserver = new ResizeObserver((entries) => {\n const entry = entries[0];\n if (entry) {\n setIsNarrow(\n entry.contentRect.width <\n Number(core.primitive.BreakpointSm.value.replace(\"px\", \"\")),\n );\n }\n });\n if (elRef.current) {\n resizeObserver.observe(elRef.current);\n }\n return () => {\n resizeObserver.disconnect();\n };\n }, []);\n\n return (\n <BasePagination\n ref={combinedRef}\n data-tracking-id={trackingId}\n className={cx(styles.pagination, className)}\n >\n <BasePagination.List\n page={page}\n totalPages={totalPages}\n onPageChange={(page) => onPageChange?.(page)}\n >\n {pageArray.map((item) => {\n if (item.type === \"page\") {\n return (\n <BasePagination.Item\n key={item.page}\n page={item.page}\n isActive={item.page === page}\n onClick={() => onPageChange?.(item.page)}\n />\n );\n }\n return (\n <BasePagination.OverflowMenu\n key={item.startPage}\n startPage={item.startPage}\n endPage={item.endPage}\n length={item.length}\n onItemClick={(item) => onPageChange?.(item)}\n />\n );\n })}\n </BasePagination.List>\n {isNarrow === false && (\n <>\n {itemsPerPageOptions && (\n <BasePagination.ItemsPerPageMenu\n itemsPerPage={itemsPerPage}\n itemsPerPageOptions={itemsPerPageOptions}\n onItemsPerPageChange={(itemsPerPage) =>\n onItemsPerPageChange?.(itemsPerPage)\n }\n />\n )}\n {showCount && (\n <BasePagination.TotalCount\n firstItem={firstItem}\n lastItem={lastItem}\n totalCount={totalItemCount}\n />\n )}\n </>\n )}\n {!showCount || isNarrow ? (\n <SrOnly aria-live=\"polite\" aria-atomic=\"true\">\n {itemRangeText}\n </SrOnly>\n ) : null}\n </BasePagination>\n );\n },\n);\n\nPagination.displayName = \"Pagination\";\n"],"names":["styles","IconMoreHoriz","ref","IconKeyboardArrowDown","IconKeyboardArrowLeft","IconKeyboardArrowRight","Pagination","core.primitive.BreakpointSm","BasePagination","page","item","itemsPerPage"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Pagination-BJsCppgW.js","sources":["../src/components/Pagination/internal/PaginationItem.tsx","../src/components/Pagination/internal/PaginationOverflowMenu.tsx","../src/components/Pagination/internal/PaginationItemsPerPageMenu.tsx","../src/components/Pagination/internal/PaginationList.tsx","../src/components/Pagination/internal/PaginationTotalCount.tsx","../src/components/Pagination/internal/Pagination.tsx","../src/components/Pagination/internal/usePaginationArray.ts","../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport { ButtonToggle } from \"../../ButtonToggle\";\n\nimport styles from \"./PaginationItem.module.scss\";\n\n/**\n * Props for the PaginationItem component\n * @extends ComponentPropsWithoutRef<\"li\">\n */\nexport type PaginationItemProps = ComponentPropsWithoutRef<\"li\"> & {\n /**\n * The page number to display.\n */\n page: number;\n /**\n * Whether this page item is currently active/selected.\n * @default false\n */\n isActive?: boolean;\n /**\n * Callback function called when the page item is clicked.\n */\n onClick?: () => void;\n};\n\n/**\n * PaginationItem component for displaying individual page numbers in pagination.\n *\n * Features:\n * - Displays page number as a toggle button\n * - Supports active state styling\n * - Fully accessible with proper ARIA attributes\n * - Integrates with pagination navigation system\n * - Consistent styling with design system\n *\n * @example\n * <PaginationItem\n * page={3}\n * isActive={true}\n * onClick={() => console.log('Page 3 clicked')}\n * />\n */\nexport const PaginationItem = forwardRef<HTMLLIElement, PaginationItemProps>(\n (props, ref) => {\n const { page, isActive, onClick, className, ...rest } = props;\n\n const paginationClassName = cx(styles[\"pagination-item\"], className);\n const paginationButtonClassName = cx(styles[\"pagination-item-button\"], {\n [styles.active]: isActive,\n });\n return (\n <li ref={ref} {...rest} className={paginationClassName}>\n <ButtonToggle\n className={paginationButtonClassName}\n size=\"small\"\n onClick={onClick}\n aria-current={isActive ? \"page\" : undefined}\n checked={isActive}\n >\n {page}\n </ButtonToggle>\n </li>\n );\n },\n);\n\nPaginationItem.displayName = \"PaginationItem\";\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport IconMoreHoriz from \"@servicetitan/hammer-icon/mdi/round/more_horiz.svg\";\n\nimport { Menu } from \"../../Menu\";\n\nimport styles from \"./PaginationOverflowMenu.module.scss\";\n\n/**\n * Props for the PaginationOverflowMenu component\n * @extends ComponentPropsWithoutRef<\"li\">\n */\nexport type PaginationOverflowMenuProps = ComponentPropsWithoutRef<\"li\"> & {\n /**\n * The starting page number for the overflow range.\n */\n startPage: number;\n /**\n * The ending page number for the overflow range.\n */\n endPage: number;\n /**\n * The number of pages in the overflow range.\n */\n length: number;\n /**\n * Callback function called when a page in the overflow menu is selected.\n * @param page The selected page number\n */\n onItemClick: (page: number) => void;\n};\n\n/**\n * PaginationOverflowMenu component for displaying overflow pages in pagination.\n *\n * Features:\n * - Displays ellipsis menu for large page ranges\n * - Shows all pages in the overflow range as menu items\n * - Integrates with pagination navigation system\n * - Fully accessible with proper ARIA labels\n * - Consistent styling with design system\n *\n * @example\n * <PaginationOverflowMenu\n * startPage={4}\n * endPage={8}\n * length={5}\n * onItemClick={(page) => console.log('Page selected:', page)}\n * />\n */\nexport const PaginationOverflowMenu = forwardRef<\n HTMLLIElement,\n PaginationOverflowMenuProps\n>((props, ref) => {\n const { startPage, endPage, length, onItemClick, ...rest } = props;\n return (\n <li className={styles[\"pagination-item-overflow-menu\"]} ref={ref} {...rest}>\n <Menu\n icon={IconMoreHoriz}\n size=\"small\"\n appearance=\"ghost\"\n maxHeight={200}\n key={`${startPage}-${endPage}`}\n contentClassName={styles[\"pagination-item-overflow-menu-content\"]}\n aria-label=\"More pages\"\n >\n {Array.from({ length: length }).map((_, index) => (\n <Menu.Item\n key={index}\n label={`${startPage + index}`}\n onClick={() => {\n onItemClick(startPage + index);\n }}\n />\n ))}\n </Menu>\n </li>\n );\n});\n\nPaginationOverflowMenu.displayName = \"PaginationOverflowMenu\";\n","import { forwardRef } from \"react\";\nimport IconKeyboardArrowDown from \"@servicetitan/hammer-icon/mdi/round/keyboard_arrow_down.svg\";\n\nimport { Button } from \"../../Button\";\nimport { Flex } from \"../../Flex\";\nimport { Menu } from \"../../Menu\";\nimport { Text } from \"../../Text\";\n\nimport styles from \"./PaginationItemsPerPageMenu.module.scss\";\n\n/**\n * Props for the PaginationItemsPerPageMenu component\n */\nexport type PaginationItemsPerPageMenuProps = {\n /**\n * The currently selected number of items per page.\n */\n itemsPerPage: number;\n /**\n * Array of available options for items per page.\n */\n itemsPerPageOptions: number[];\n /**\n * Callback function called when the items per page selection changes.\n * @param itemsPerPage The new number of items per page\n */\n onItemsPerPageChange: (itemsPerPage: number) => void;\n};\n\n/**\n * PaginationItemsPerPageMenu component for selecting the number of items per page.\n *\n * Features:\n * - Displays current items per page selection\n * - Provides dropdown menu with available options\n * - Integrates with pagination system\n * - Shows \"Rows per page\" label for clarity\n * - Fully accessible with proper ARIA attributes\n * - Consistent styling with design system\n *\n * @example\n * <PaginationItemsPerPageMenu\n * itemsPerPage={10}\n * itemsPerPageOptions={[5, 10, 25, 50]}\n * onItemsPerPageChange={(itemsPerPage) => console.log('Items per page:', itemsPerPage)}\n * />\n */\nexport const PaginationItemsPerPageMenu = forwardRef<\n HTMLDivElement,\n PaginationItemsPerPageMenuProps\n>((props, ref) => {\n const { itemsPerPage, itemsPerPageOptions, onItemsPerPageChange } = props;\n return (\n <Flex alignItems=\"center\" gap=\"2\" ref={ref}>\n <Text size=\"small\">Rows per page</Text>\n <Menu\n trigger={({ ref, ...rest }) => {\n return (\n <Button\n ref={ref}\n {...rest}\n className={styles[\"pagination-items-per-page-button\"]}\n appearance=\"ghost\"\n icon={{ after: IconKeyboardArrowDown }}\n size=\"small\"\n >\n {itemsPerPage}\n </Button>\n );\n }}\n >\n {itemsPerPageOptions.map((option) => (\n <Menu.Item\n key={option}\n label={option}\n onClick={() => {\n onItemsPerPageChange?.(option);\n }}\n />\n ))}\n </Menu>\n </Flex>\n );\n});\n\nPaginationItemsPerPageMenu.displayName = \"PaginationItemsPerPageMenu\";\n","import { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport IconKeyboardArrowLeft from \"@servicetitan/hammer-icon/mdi/round/keyboard_arrow_left.svg\";\nimport IconKeyboardArrowRight from \"@servicetitan/hammer-icon/mdi/round/keyboard_arrow_right.svg\";\n\nimport { Button } from \"../../Button\";\n\nimport styles from \"./PaginationList.module.scss\";\n\ntype PaginationListProps = {\n page: number;\n totalPages: number;\n onPageChange: (page: number) => void;\n children: React.ReactNode;\n className?: string;\n};\n\nexport const PaginationList = forwardRef<HTMLUListElement, PaginationListProps>(\n (props, ref) => {\n const { page, totalPages, children, onPageChange, className } = props;\n\n const paginationListClassName = cx(styles[\"pagination-list\"], className);\n\n return (\n <>\n <Button\n appearance=\"ghost\"\n icon={IconKeyboardArrowLeft}\n size=\"small\"\n aria-label=\"Previous page\"\n disabled={page === 1}\n onClick={() => {\n if (page > 1) {\n onPageChange?.(page - 1);\n }\n }}\n />\n <ul ref={ref} className={paginationListClassName}>\n {children}\n </ul>\n <Button\n appearance=\"ghost\"\n icon={IconKeyboardArrowRight}\n size=\"small\"\n aria-label=\"Next page\"\n disabled={page === totalPages}\n onClick={() => {\n if (page < totalPages) {\n onPageChange?.(page + 1);\n }\n }}\n />\n </>\n );\n },\n);\n\nPaginationList.displayName = \"PaginationList\";\n","import cx from \"classnames\";\n\nimport { Text } from \"../../Text\";\n\nimport styles from \"./PaginationTotalCount.module.scss\";\n\nexport const PaginationTotalCount = ({\n firstItem,\n lastItem,\n totalCount,\n className,\n}: {\n firstItem: number;\n lastItem: number;\n totalCount: number;\n className?: string;\n}) => {\n const paginationTotalCountClassName = cx(\n styles[\"pagination-total-count\"],\n className,\n );\n return (\n <Text\n size=\"small\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n className={paginationTotalCountClassName}\n >\n {firstItem} - {lastItem} {totalCount ? `of ${totalCount}` : \"\"} items\n </Text>\n );\n};\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport { PaginationItem } from \"./PaginationItem\";\nimport { PaginationOverflowMenu } from \"./PaginationOverflowMenu\";\nimport { PaginationItemsPerPageMenu } from \"./PaginationItemsPerPageMenu\";\nimport { PaginationList } from \"./PaginationList\";\nimport { PaginationTotalCount } from \"./PaginationTotalCount\";\n\nimport styles from \"./Pagination.module.scss\";\n\n/**\n * Props for the Pagination component\n * @extends ComponentPropsWithoutRef<\"nav\">\n */\nexport type PaginationProps = ComponentPropsWithoutRef<\"nav\">;\n\nconst PaginationElement = forwardRef<HTMLElement, PaginationProps>(\n (props, ref) => {\n const { className, children, ...rest } = props;\n\n const paginationClassName = cx(styles.pagination, className);\n\n return (\n <nav ref={ref} className={paginationClassName} {...rest}>\n {children}\n </nav>\n );\n },\n);\n\nPaginationElement.displayName = \"Pagination\";\n\n/**\n * Pagination component for navigating through paginated content.\n *\n * Features:\n * - Provides navigation controls for paginated data\n * - Supports compound components for flexible pagination layouts\n * - Includes list, items, overflow menu, items per page menu, and total count\n * - Accessible navigation with proper ARIA roles\n * - Customizable styling and layout\n *\n * @example\n * <Pagination>\n * <Pagination.List>\n * <Pagination.Item>1</Pagination.Item>\n * <Pagination.Item>2</Pagination.Item>\n * <Pagination.OverflowMenu />\n * <Pagination.Item>10</Pagination.Item>\n * </Pagination.List>\n * <Pagination.ItemsPerPageMenu />\n * <Pagination.TotalCount />\n * </Pagination>\n */\nexport const Pagination = Object.assign(PaginationElement, {\n List: PaginationList,\n Item: PaginationItem,\n OverflowMenu: PaginationOverflowMenu,\n ItemsPerPageMenu: PaginationItemsPerPageMenu,\n TotalCount: PaginationTotalCount,\n});\n","import { useMemo, useRef } from \"react\";\n\nexport type PageArrayItem =\n | { type: \"page\"; page: number }\n | { type: \"overflow\"; startPage: number; endPage: number; length: number };\n\n/**\n * Custom hook for managing pagination array state and generation.\n *\n * Features:\n * - Automatically generates pagination array based on current page and total pages\n * - Avoids unnecessary regeneration if the current page is already visible\n * - Updates array when page or total pages change and the visible set must change\n * - Handles jumps to first/last page with overflow between current and target\n * - Provides stable reference for the current pagination array\n *\n * @param page The currently selected page\n * @param totalPages Total number of pages\n * @param maxArrayLength Maximum length of the pagination array (including overflows)\n * @returns The current pagination array\n *\n * @example\n * const pageArray = usePaginationArray({\n * page: 5,\n * totalPages: 10,\n * maxArrayLength: 7\n * });\n */\nexport const usePaginationArray = ({\n page,\n totalPages,\n maxArrayLength = 7,\n}: {\n page: number;\n totalPages: number;\n maxArrayLength?: number;\n}): PageArrayItem[] => {\n const prevRef = useRef<{\n array: PageArrayItem[];\n totalPages: number;\n maxArrayLength: number;\n prevPage: number;\n } | null>(null);\n\n return useMemo(() => {\n const maxPagesToShow = maxArrayLength - 2;\n let result: PageArrayItem[] = [];\n const addRange = (start: number, end: number) => {\n const count = end - start + 1;\n if (count === 1) {\n result.push({ type: \"page\", page: start });\n } else if (count >= 2) {\n result.push({\n type: \"overflow\",\n startPage: start,\n endPage: end,\n length: count,\n });\n }\n };\n\n if (totalPages <= maxArrayLength) {\n result = Array.from({ length: totalPages }, (_, i) => ({\n type: \"page\" as const,\n page: i + 1,\n }));\n } else if (page <= maxPagesToShow) {\n // Leading section\n for (let i = 1; i <= maxPagesToShow; i++) {\n result.push({ type: \"page\", page: i });\n }\n addRange(maxArrayLength - 1, totalPages - 1);\n result.push({ type: \"page\", page: totalPages });\n } else if (page >= totalPages - maxPagesToShow + 1) {\n // Trailing section\n result.push({ type: \"page\", page: 1 });\n addRange(2, totalPages - maxPagesToShow);\n for (let i = totalPages - (maxPagesToShow - 1); i <= totalPages; i++) {\n result.push({ type: \"page\", page: i });\n }\n } else {\n // Middle section\n result.push({ type: \"page\", page: 1 });\n addRange(2, page - 2);\n result.push({ type: \"page\", page: page - 1 });\n result.push({ type: \"page\", page: page });\n result.push({ type: \"page\", page: page + 1 });\n addRange(page + 2, totalPages - 1);\n result.push({ type: \"page\", page: totalPages });\n }\n\n const prev = prevRef.current;\n\n // Check if we should remake array due to overflow between pages or new page being in overflow\n let shouldRemakeForJump = false;\n if (\n prev &&\n prev.totalPages === totalPages &&\n prev.maxArrayLength === maxArrayLength\n ) {\n // Check if there is overflow between the new page and the current page\n const start = Math.min(prev.prevPage, page);\n const end = Math.max(prev.prevPage, page);\n const hasOverflowBetween = prev.array.some(\n (item) =>\n item.type === \"overflow\" &&\n // Check if overflow intersects with the range (not completely covers)\n !(item.endPage < start || item.startPage > end),\n );\n\n // Check if the new page is part of an overflow\n const newPageInOverflow = prev.array.some(\n (item) =>\n item.type === \"overflow\" &&\n item.startPage <= page &&\n item.endPage >= page,\n );\n\n shouldRemakeForJump = hasOverflowBetween || newPageInOverflow;\n }\n\n // If we should remake for jump, always return the new array\n if (shouldRemakeForJump) {\n prevRef.current = {\n array: result,\n totalPages,\n maxArrayLength,\n prevPage: page,\n };\n return result;\n }\n\n // Optimization: if the new page is already present in the previous array, reuse the array\n if (\n prev &&\n prev.totalPages === totalPages &&\n prev.maxArrayLength === maxArrayLength &&\n prev.array.some((item) => item.type === \"page\" && item.page === page)\n ) {\n return prev.array;\n }\n\n prevRef.current = {\n array: result,\n totalPages,\n maxArrayLength,\n prevPage: page,\n };\n return result;\n }, [page, totalPages, maxArrayLength]);\n};\n","import { forwardRef, useLayoutEffect, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { core } from \"@servicetitan/hammer-token\";\n\nimport { DataTrackingId } from \"../../types\";\nimport { SrOnly } from \"../SrOnly\";\nimport { useTrackingId, useMergeRefs } from \"../../hooks\";\n\nimport {\n Pagination as BasePagination,\n type PaginationProps as BasePaginationProps,\n} from \"./internal/Pagination\";\nimport { usePaginationArray } from \"./internal/usePaginationArray\";\n\nimport styles from \"./Pagination.module.scss\";\n\n/**\n * Props for the Pagination component\n * @property {number} page - The current page number\n * @property {number} itemsPerPage - Number of items displayed per page\n * @property {number[]} [itemsPerPageOptions] - Available options for items per page selection\n * @property {number} [totalItemCount] - Total number of items across all pages\n * @property {boolean} [showCount] - Whether to display the item count information\n * @property {(page: number) => void} [onPageChange] - Callback when page changes\n * @property {(itemsPerPage: number) => void} [onItemsPerPageChange] - Callback when items per page changes\n * @extends Omit<BasePaginationProps, \"children\">\n * @extends DataTrackingId\n */\nexport type PaginationProps = Omit<BasePaginationProps, \"children\"> &\n DataTrackingId & {\n page: number;\n itemsPerPage: number;\n itemsPerPageOptions?: number[];\n totalItemCount?: number;\n showCount?: boolean;\n onPageChange?: (page: number) => void;\n onItemsPerPageChange?: (itemsPerPage: number) => void;\n };\n\n/**\n * Pagination component for navigating through paginated content with automatic page array generation.\n *\n * Features:\n * - Automatic page array generation with overflow handling\n * - Supports items per page selection with customizable options\n * - Displays item count information with screen reader support\n * - Handles edge cases like invalid page numbers\n * - Includes previous/next navigation buttons\n * - Supports overflow menus for large page ranges\n * - Fully accessible with proper ARIA attributes\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Pagination\n * page={1}\n * itemsPerPage={10}\n * totalItemCount={100}\n * itemsPerPageOptions={[10, 20, 50]}\n * showCount={true}\n * onPageChange={(page) => console.log('Page changed to:', page)}\n * onItemsPerPageChange={(itemsPerPage) => console.log('Items per page:', itemsPerPage)}\n * />\n */\nexport const Pagination = forwardRef<HTMLDivElement, PaginationProps>(\n (props, ref) => {\n const {\n \"aria-label\": ariaLabel,\n page,\n itemsPerPage,\n itemsPerPageOptions,\n totalItemCount: totalItemCountProp,\n showCount,\n onPageChange,\n onItemsPerPageChange,\n className,\n ...rest\n } = props;\n\n const data = {\n \"aria-label\": ariaLabel,\n };\n\n const trackingId = useTrackingId({\n name: \"Pagination\",\n data,\n hasOverride: !!rest[\"data-tracking-id\"],\n });\n const totalItemCount = totalItemCountProp ?? 0;\n const totalPages = Math.ceil(totalItemCount / itemsPerPage);\n const elRef = useRef<HTMLDivElement>(null);\n const combinedRef = useMergeRefs([elRef, ref]);\n const [isNarrow, setIsNarrow] = useState(false);\n\n const pageArray = usePaginationArray({\n page,\n totalPages,\n maxArrayLength: 7,\n });\n\n // Check if current page is available in the pageArray, fallback to page 1 if not\n const isPageAvailable = pageArray.some(\n (item) => item.type === \"page\" && item.page === page,\n );\n\n if (!isPageAvailable && page !== 1 && totalPages > 0) {\n // Use requestAnimationFrame to avoid calling onPageChange during render\n requestAnimationFrame(() => {\n onPageChange?.(1);\n });\n }\n\n const firstItem = 1 + (page - 1) * itemsPerPage;\n const lastItem = firstItem - 1 + itemsPerPage;\n const itemRangeText = `${firstItem} - ${lastItem} ${\n totalItemCount ? `of ${totalItemCount}` : \"\"\n } items`;\n\n useLayoutEffect(() => {\n const resizeObserver = new ResizeObserver((entries) => {\n const entry = entries[0];\n if (entry) {\n setIsNarrow(\n entry.contentRect.width <\n Number(core.primitive.BreakpointSm.value.replace(\"px\", \"\")),\n );\n }\n });\n if (elRef.current) {\n resizeObserver.observe(elRef.current);\n }\n return () => {\n resizeObserver.disconnect();\n };\n }, []);\n\n return (\n <BasePagination\n ref={combinedRef}\n data-tracking-id={trackingId}\n className={cx(styles.pagination, className)}\n >\n <BasePagination.List\n page={page}\n totalPages={totalPages}\n onPageChange={(page) => onPageChange?.(page)}\n >\n {pageArray.map((item) => {\n if (item.type === \"page\") {\n return (\n <BasePagination.Item\n key={item.page}\n page={item.page}\n isActive={item.page === page}\n onClick={() => onPageChange?.(item.page)}\n />\n );\n }\n return (\n <BasePagination.OverflowMenu\n key={item.startPage}\n startPage={item.startPage}\n endPage={item.endPage}\n length={item.length}\n onItemClick={(item) => onPageChange?.(item)}\n />\n );\n })}\n </BasePagination.List>\n {isNarrow === false && (\n <>\n {itemsPerPageOptions && (\n <BasePagination.ItemsPerPageMenu\n itemsPerPage={itemsPerPage}\n itemsPerPageOptions={itemsPerPageOptions}\n onItemsPerPageChange={(itemsPerPage) =>\n onItemsPerPageChange?.(itemsPerPage)\n }\n />\n )}\n {showCount && (\n <BasePagination.TotalCount\n firstItem={firstItem}\n lastItem={lastItem}\n totalCount={totalItemCount}\n />\n )}\n </>\n )}\n {!showCount || isNarrow ? (\n <SrOnly aria-live=\"polite\" aria-atomic=\"true\">\n {itemRangeText}\n </SrOnly>\n ) : null}\n </BasePagination>\n );\n },\n);\n\nPagination.displayName = \"Pagination\";\n"],"names":["styles","IconMoreHoriz","ref","IconKeyboardArrowDown","IconKeyboardArrowLeft","IconKeyboardArrowRight","Pagination","core.primitive.BreakpointSm","BasePagination","page","item","itemsPerPage"],"mappings":"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"}
|
package/dist/Pagination.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { P as Pagination, P as default } from './Pagination-
|
|
1
|
+
export { P as Pagination, P as default } from './Pagination-BJsCppgW.js';
|
|
2
2
|
//# sourceMappingURL=Pagination.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchField-BKXkoWPs.js","sources":["../../hammer-icon/mdi/round/search.svg","../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgSearch = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" }));\nexport default SvgSearch;\n","import {\n forwardRef,\n ComponentPropsWithoutRef,\n useId,\n useRef,\n ChangeEvent,\n useState,\n useEffect,\n} from \"react\";\nimport cx from \"classnames\";\n\nimport textfieldStyles from \"../TextField/TextField.module.scss\";\nimport Close from \"@servicetitan/hammer-icon/mdi/round/close.svg\";\nimport Search from \"@servicetitan/hammer-icon/mdi/round/search.svg\";\nimport styles from \"./SearchField.module.scss\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { SrOnly } from \"../SrOnly\";\nimport { Icon } from \"../Icon\";\nimport { useTrackingId, useMergeRefs } from \"../../hooks\";\nimport { DataTrackingId, LayoutUtilProps, Size } from \"../../types\";\n\n/**\n * Props for the SearchField component\n * @extends Omit<ComponentPropsWithoutRef<\"input\">, \"size\" | \"prefix\" | \"required\" | \"children\">\n * @extends LayoutUtilProps\n */\nexport type SearchFieldProps = Omit<\n ComponentPropsWithoutRef<\"input\">,\n \"size\" | \"prefix\" | \"required\" | \"children\"\n> &\n LayoutUtilProps & {\n /**\n * Size of the search field\n * @default \"medium\"\n */\n size?: Extract<Size, \"small\" | \"medium\" | \"large\">;\n /**\n * Whether the search field is disabled\n * @default false\n */\n disabled?: boolean;\n /**\n * Callback when the clear button is clicked\n */\n onClear?: () => void;\n } & DataTrackingId;\n\n/**\n * SearchField component for text input with search functionality.\n *\n * Features:\n * - Search icon prefix for visual clarity\n * - Clear button that appears when input has value\n * - Multiple size variants (small, medium, large)\n * - Controlled and uncontrolled modes\n * - Disabled and read-only states\n * - Accessibility support with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Automatic value detection for clear button visibility\n * - Search-specific input type and autocomplete settings\n * - Screen reader support with placeholder announcements\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <SearchField\n * placeholder=\"Search users...\"\n * onChange={(e) => setSearchTerm(e.target.value)}\n * onClear={() => setSearchTerm(\"\")}\n * />\n *\n * @example\n * <SearchField\n * size=\"large\"\n * value={searchValue}\n * onChange={(e) => setSearchValue(e.target.value)}\n * disabled={isLoading}\n * />\n */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n function SearchField(props, ref) {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n className,\n size,\n onChange,\n onClear,\n id: idProp,\n disabled,\n style,\n value,\n placeholder = \"Search...\",\n autoComplete = \"off\",\n ...rest\n } = componentProps;\n\n const [hasValue, setHasValue] = useState(\n rest.defaultValue || value ? true : false,\n );\n const placeholderUid = useId();\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const styleCombined = { ...style, ...layoutStyles };\n\n const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (e.target.value) {\n setHasValue(true);\n } else {\n setHasValue(false);\n }\n onChange?.(e);\n };\n\n useEffect(() => {\n if (typeof value === \"undefined\") return;\n if (value === \"\" || !value) {\n setHasValue(false);\n } else {\n setHasValue(true);\n }\n }, [value]);\n\n const handleClear = () => {\n if (!inputRef.current) return;\n if (disabled || rest.readOnly) return;\n onClear?.();\n if (value) {\n return;\n }\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n \"value\",\n )?.set;\n nativeInputValueSetter?.call(inputRef.current, \"\");\n inputRef.current.dispatchEvent(new Event(\"input\", { bubbles: true }));\n setHasValue(false);\n };\n\n const data = {\n value: props.value,\n defaultValue: props.defaultValue,\n disabled: props.disabled,\n readOnly: props.readOnly,\n size: props.size,\n };\n\n const trackingId = useTrackingId({\n name: \"SearchField\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n\n return (\n <div\n className={cx(\n textfieldStyles[\"textfield\"],\n styles[\"searchfield\"],\n className,\n )}\n data-anv=\"SearchField\"\n style={styleCombined}\n >\n <div\n className={cx(\n textfieldStyles[\"input-wrapper\"],\n styles[\"input-wrapper\"],\n {\n [textfieldStyles[\"small\"]]: size === \"small\",\n [textfieldStyles[\"large\"]]: size === \"large\",\n },\n )}\n role=\"presentation\"\n onClick={() => inputRef.current?.focus()}\n >\n <div aria-hidden className={textfieldStyles[\"prefix\"]}>\n <Icon aria-label=\"search\" svg={Search} />\n </div>\n <input\n className={cx(textfieldStyles[\"input\"])}\n ref={useMergeRefs([ref, inputRef])}\n onChange={handleOnChange}\n placeholder={placeholder}\n value={value}\n type=\"search\"\n autoComplete={autoComplete}\n disabled={disabled}\n aria-labelledby={placeholderUid}\n data-tracking-id={trackingId}\n {...rest}\n />\n <Icon\n aria-label=\"cancel\"\n svg={Close}\n role=\"button\"\n onClick={handleClear}\n className={styles[\"clear\"]}\n aria-disabled={disabled}\n style={{\n visibility: hasValue ? \"visible\" : \"hidden\",\n }}\n />\n </div>\n <SrOnly id={placeholderUid}>{placeholder}</SrOnly>\n </div>\n );\n },\n);\n"],"names":["SearchField","Search","Close"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SearchField-Bb0uObwG.js","sources":["../../hammer-icon/mdi/round/search.svg","../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgSearch = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" }));\nexport default SvgSearch;\n","import {\n forwardRef,\n ComponentPropsWithoutRef,\n useId,\n useRef,\n ChangeEvent,\n useState,\n useEffect,\n} from \"react\";\nimport cx from \"classnames\";\n\nimport textfieldStyles from \"../TextField/TextField.module.scss\";\nimport Close from \"@servicetitan/hammer-icon/mdi/round/close.svg\";\nimport Search from \"@servicetitan/hammer-icon/mdi/round/search.svg\";\nimport styles from \"./SearchField.module.scss\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { SrOnly } from \"../SrOnly\";\nimport { Icon } from \"../Icon\";\nimport { useTrackingId, useMergeRefs } from \"../../hooks\";\nimport { DataTrackingId, LayoutUtilProps, Size } from \"../../types\";\n\n/**\n * Props for the SearchField component\n * @extends Omit<ComponentPropsWithoutRef<\"input\">, \"size\" | \"prefix\" | \"required\" | \"children\">\n * @extends LayoutUtilProps\n */\nexport type SearchFieldProps = Omit<\n ComponentPropsWithoutRef<\"input\">,\n \"size\" | \"prefix\" | \"required\" | \"children\"\n> &\n LayoutUtilProps & {\n /**\n * Size of the search field\n * @default \"medium\"\n */\n size?: Extract<Size, \"small\" | \"medium\" | \"large\">;\n /**\n * Whether the search field is disabled\n * @default false\n */\n disabled?: boolean;\n /**\n * Callback when the clear button is clicked\n */\n onClear?: () => void;\n } & DataTrackingId;\n\n/**\n * SearchField component for text input with search functionality.\n *\n * Features:\n * - Search icon prefix for visual clarity\n * - Clear button that appears when input has value\n * - Multiple size variants (small, medium, large)\n * - Controlled and uncontrolled modes\n * - Disabled and read-only states\n * - Accessibility support with proper ARIA attributes\n * - Layout utility props for positioning and spacing\n * - Automatic value detection for clear button visibility\n * - Search-specific input type and autocomplete settings\n * - Screen reader support with placeholder announcements\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <SearchField\n * placeholder=\"Search users...\"\n * onChange={(e) => setSearchTerm(e.target.value)}\n * onClear={() => setSearchTerm(\"\")}\n * />\n *\n * @example\n * <SearchField\n * size=\"large\"\n * value={searchValue}\n * onChange={(e) => setSearchValue(e.target.value)}\n * disabled={isLoading}\n * />\n */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n function SearchField(props, ref) {\n const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n const {\n className,\n size,\n onChange,\n onClear,\n id: idProp,\n disabled,\n style,\n value,\n placeholder = \"Search...\",\n autoComplete = \"off\",\n ...rest\n } = componentProps;\n\n const [hasValue, setHasValue] = useState(\n rest.defaultValue || value ? true : false,\n );\n const placeholderUid = useId();\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const styleCombined = { ...style, ...layoutStyles };\n\n const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (e.target.value) {\n setHasValue(true);\n } else {\n setHasValue(false);\n }\n onChange?.(e);\n };\n\n useEffect(() => {\n if (typeof value === \"undefined\") return;\n if (value === \"\" || !value) {\n setHasValue(false);\n } else {\n setHasValue(true);\n }\n }, [value]);\n\n const handleClear = () => {\n if (!inputRef.current) return;\n if (disabled || rest.readOnly) return;\n onClear?.();\n if (value) {\n return;\n }\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n \"value\",\n )?.set;\n nativeInputValueSetter?.call(inputRef.current, \"\");\n inputRef.current.dispatchEvent(new Event(\"input\", { bubbles: true }));\n setHasValue(false);\n };\n\n const data = {\n value: props.value,\n defaultValue: props.defaultValue,\n disabled: props.disabled,\n readOnly: props.readOnly,\n size: props.size,\n };\n\n const trackingId = useTrackingId({\n name: \"SearchField\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n\n return (\n <div\n className={cx(\n textfieldStyles[\"textfield\"],\n styles[\"searchfield\"],\n className,\n )}\n data-anv=\"SearchField\"\n style={styleCombined}\n >\n <div\n className={cx(\n textfieldStyles[\"input-wrapper\"],\n styles[\"input-wrapper\"],\n {\n [textfieldStyles[\"small\"]]: size === \"small\",\n [textfieldStyles[\"large\"]]: size === \"large\",\n },\n )}\n role=\"presentation\"\n onClick={() => inputRef.current?.focus()}\n >\n <div aria-hidden className={textfieldStyles[\"prefix\"]}>\n <Icon aria-label=\"search\" svg={Search} />\n </div>\n <input\n className={cx(textfieldStyles[\"input\"])}\n ref={useMergeRefs([ref, inputRef])}\n onChange={handleOnChange}\n placeholder={placeholder}\n value={value}\n type=\"search\"\n autoComplete={autoComplete}\n disabled={disabled}\n aria-labelledby={placeholderUid}\n data-tracking-id={trackingId}\n {...rest}\n />\n <Icon\n aria-label=\"cancel\"\n svg={Close}\n role=\"button\"\n onClick={handleClear}\n className={styles[\"clear\"]}\n aria-disabled={disabled}\n style={{\n visibility: hasValue ? \"visible\" : \"hidden\",\n }}\n />\n </div>\n <SrOnly id={placeholderUid}>{placeholder}</SrOnly>\n </div>\n );\n },\n);\n"],"names":["SearchField","Search","Close"],"mappings":"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"}
|
package/dist/SearchField.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { S as SearchField } from './SearchField-
|
|
1
|
+
export { S as SearchField } from './SearchField-Bb0uObwG.js';
|
|
2
2
|
//# sourceMappingURL=SearchField.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { useContext, createContext, useState, useId, forwardRef, useLayoutEffect } from 'react';
|
|
3
3
|
import { c as cx } from './index-tZvMCc77.js';
|
|
4
|
-
import { C as CheckboxGroup, a as Checkbox } from './Checkbox-
|
|
4
|
+
import { C as CheckboxGroup, a as Checkbox } from './Checkbox-Dl4KTwEJ.js';
|
|
5
5
|
import { R as RadioGroup, a as Radio } from './RadioGroup-C_4buUtG.js';
|
|
6
6
|
import { C as Card } from './Card-vTYeSkxt.js';
|
|
7
7
|
import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
|
|
@@ -221,4 +221,4 @@ const SelectCard = Object.assign(SelectCardElement, {
|
|
|
221
221
|
});
|
|
222
222
|
|
|
223
223
|
export { SelectCard as S, SelectCardElement as a, SelectCardGroup as b };
|
|
224
|
-
//# sourceMappingURL=SelectCard-
|
|
224
|
+
//# sourceMappingURL=SelectCard-BTYZg9TG.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectCard-BWh8Yp7T.js","sources":["../src/components/SelectCard/internal/SelectCardProvider.tsx","../src/components/SelectCard/SelectCardGroup.tsx","../src/components/SelectCard/SelectCard.tsx"],"sourcesContent":["import {\n ChangeEvent,\n ReactNode,\n createContext,\n useContext,\n useId,\n useState,\n} from \"react\";\n\n/**\n * Interface for the select card state\n */\ninterface ISelectCardState {\n /**\n * When `true`, adds the item to the selected state holder.\n */\n checked: boolean;\n\n /**\n * Gives an explicit id to each item in the set.\n */\n id?: string | number;\n}\n\n/**\n * Interface for the select card onChange options\n */\ninterface ISelectCardOnChangeOptions {\n /**\n * When `true`, doesn't fire the user's `onChange`\n */\n internal?: boolean;\n}\n\n/**\n * Interface for the select card context\n */\nexport interface ISelectCardContext {\n /**\n * Callback function that is triggered when the selection state changes.\n *\n * @callback OnChangeCallback\n * @param {ChangeEvent<HTMLInputElement>} [e] - The native HTML input change event.\n * @param {ISelectCardState} [state] - The current state of the select card component after the change.\n * @returns {void}\n */\n onChange: (\n e?: ChangeEvent<HTMLInputElement>,\n state?: ISelectCardState,\n options?: ISelectCardOnChangeOptions,\n ) => void;\n\n /**\n * Sets how many cards the user can select, either 'single' (radio buttons) or 'multiple' (checkboxes)\n */\n selectionMode: \"single\" | \"multiple\";\n\n /**\n * Used internally to create a UUID for the HTML `name` property on radios.\n */\n radioName: string;\n\n /**\n * Creates a set of ids that are selected.\n */\n selection: Set<string | number>;\n}\n\n/**\n * Props for the SelectCardProvider component\n * @extends Omit<ISelectCardContext, \"radioName\" | \"selection\">\n */\ninterface ISelectCardProviderProps\n extends Omit<ISelectCardContext, \"radioName\" | \"selection\"> {\n children: ReactNode;\n}\n\nconst SelectCardContext = createContext<ISelectCardContext | null>(null);\n\n/**\n * SelectCardProvider component for managing selection state across SelectCard components.\n *\n * Features:\n * - Provides context for SelectCard components to share selection state\n * - Manages selection mode (single vs multiple)\n * - Handles selection state updates and callbacks\n * - Generates unique radio button names for single selection mode\n * - Maintains a set of selected card IDs\n * - Integrates with SelectCardGroup for automatic context provision\n *\n * @example\n * <SelectCardProvider\n * selectionMode=\"multiple\"\n * onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n * <SelectCard id=\"1\" onChange={() => {}}>Option 1</SelectCard>\n * <SelectCard id=\"2\" onChange={() => {}}>Option 2</SelectCard>\n * </SelectCardProvider>\n */\nexport const SelectCardProvider = ({\n children,\n onChange,\n selectionMode,\n}: ISelectCardProviderProps) => {\n const [selection, setSelection] = useState<Set<string | number>>(new Set());\n\n const radioName = useId();\n\n const handleChange = (\n e?: ChangeEvent<HTMLInputElement>,\n state?: ISelectCardState,\n options?: ISelectCardOnChangeOptions,\n ) => {\n if (!state || !state.id) {\n if (!options?.internal) {\n onChange(e, state);\n }\n\n return;\n }\n\n // Set internal selection\n if (selectionMode === \"single\") {\n if (state.checked) {\n setSelection(new Set([state.id]));\n } else {\n setSelection(new Set());\n }\n } else {\n if (state.checked) {\n setSelection(selection.add(state.id));\n } else {\n selection.delete(state.id);\n setSelection(selection);\n }\n }\n\n if (!options?.internal) {\n onChange(e, state);\n }\n };\n\n const context = {\n selectionMode,\n onChange: handleChange,\n radioName,\n selection,\n };\n\n return (\n <SelectCardContext.Provider value={context}>\n {children}\n </SelectCardContext.Provider>\n );\n};\n\n/**\n * Custom hook for accessing the SelectCard context.\n * @returns The SelectCard context or null if not within a SelectCardProvider\n */\nexport const useSelectCardContext = () => useContext(SelectCardContext);\n","import { forwardRef, ReactNode } from \"react\";\nimport { CheckboxGroup, CheckboxGroupProps } from \"../Checkbox/CheckboxGroup\";\nimport { RadioGroup } from \"../Radio\";\nimport {\n ISelectCardContext,\n SelectCardProvider,\n} from \"./internal/SelectCardProvider\";\n\n/**\n * Props for the SelectCardGroup component\n * @extends Omit<ISelectCardContext, \"radioName\" | \"selection\">\n */\nexport interface SelectCardGroupProps\n extends Omit<ISelectCardContext, \"radioName\" | \"selection\"> {\n /**\n * Associates the legend with content below.\n */\n ariaLabelledBy?: string;\n\n children?: ReactNode;\n\n /**\n * Sets the legend on the group.\n */\n legend: CheckboxGroupProps[\"legend\"];\n\n /**\n * When `true`, sets \"required\" text in label.\n * @accessibility This does not enforce error when nothing is selected.\n * @default false\n */\n required?: boolean;\n}\n\n/**\n * SelectCardGroup component for managing groups of selectable cards.\n *\n * Features:\n * - Manages selection state for multiple SelectCard components\n * - Supports both single and multiple selection modes\n * - Provides proper accessibility with legends and ARIA labels\n * - Handles required field validation\n * - Automatic radio button grouping for single selection\n * - Context provider for child SelectCard components\n * - Integrates with CheckboxGroup and RadioGroup for proper form semantics\n *\n * @example\n * <SelectCardGroup\n * legend=\"Choose your plan\"\n * selectionMode=\"single\"\n * onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n * <SelectCard id=\"basic\" onChange={() => {}}>\n * <Text variant=\"headline\" size=\"small\" el=\"h3\">Basic Plan</Text>\n * </SelectCard>\n * <SelectCard id=\"premium\" onChange={() => {}}>\n * <Text variant=\"headline\" size=\"small\" el=\"h3\">Premium Plan</Text>\n * </SelectCard>\n * </SelectCardGroup>\n */\nexport const SelectCardGroup = forwardRef<\n HTMLInputElement,\n SelectCardGroupProps\n>((props, _ref) => {\n const {\n ariaLabelledBy,\n children,\n legend,\n onChange,\n required = false,\n selectionMode,\n ...rest\n } = props;\n\n return (\n <SelectCardProvider onChange={onChange} selectionMode={selectionMode}>\n {selectionMode === \"multiple\" && (\n <CheckboxGroup\n aria-labelledby={ariaLabelledBy}\n legend={legend}\n required={required}\n {...rest}\n >\n {children}\n </CheckboxGroup>\n )}\n {selectionMode === \"single\" && (\n <RadioGroup\n aria-labelledby={ariaLabelledBy}\n legend={legend}\n required={required}\n {...rest}\n >\n {children}\n </RadioGroup>\n )}\n </SelectCardProvider>\n );\n});\n\nSelectCardGroup.displayName = \"SelectCardGroup\";\n","import { useLayoutEffect, useState, forwardRef, type ChangeEvent } from \"react\";\nimport cx from \"classnames\";\n\nimport { SelectCardGroup } from \"./SelectCardGroup\";\nimport { Card, CardProps } from \"../Card\";\nimport { Radio, RadioProps } from \"../Radio/internal/Radio\";\nimport { Checkbox, CheckboxProps } from \"../Checkbox/internal/Checkbox\";\n\nimport { useSelectCardContext } from \"./internal/SelectCardProvider\";\nimport { useOptionallyControlledState } from \"../../internal/hooks\";\n\nimport styles from \"./SelectCard.module.scss\";\n\n/**\n * Props for the SelectCard component\n * @extends Omit<CardProps, \"onChange\" | \"id\">\n */\nexport interface SelectCardProps extends Omit<CardProps, \"onChange\" | \"id\"> {\n /**\n * Passes props to the underlying `<Checkbox />` component.\n */\n checkboxProps?: Omit<CheckboxProps, \"label\">;\n\n /**\n * Controlled state. When provided, the component becomes controlled.\n */\n checked?: boolean;\n\n /**\n * Uncontrolled state.\n */\n defaultChecked?: boolean;\n\n /**\n * When `true`, disables the card.\n */\n disabled?: boolean;\n\n /**\n * When `true`, sets error styling on the card.\n */\n errored?: boolean;\n\n /**\n * A unique identifier for the card, used to track the selection state.\n */\n id: string | number;\n\n /**\n * Function called on selection state change.\n */\n onChange: (value: boolean) => void;\n\n /**\n * Passes props to the underlying `<Radio />` component.\n */\n radioProps?: Omit<RadioProps, \"label\">;\n\n /**\n * Removes the drop shadow effect on the card.\n */\n removeDropShadow?: boolean;\n}\n\nexport const SelectCardElement = forwardRef<HTMLInputElement, SelectCardProps>(\n (props, ref) => {\n const {\n checkboxProps,\n children,\n checked: checkedProp,\n className,\n defaultChecked: defaultCheckedProp,\n disabled,\n errored,\n radioProps,\n onChange,\n removeDropShadow,\n id,\n ...rest\n } = props;\n\n const [checked, setChecked] = useOptionallyControlledState<boolean>({\n controlledValue: checkedProp,\n defaultValue: defaultCheckedProp || false,\n onChange,\n });\n\n const context = useSelectCardContext();\n\n // we need to re-render after setting the initial selection state on context\n const [_, setForceRenderCount] = useState(0);\n useLayoutEffect(() => {\n if (defaultCheckedProp) {\n context?.onChange(\n undefined,\n {\n id,\n checked: defaultCheckedProp,\n },\n { internal: true },\n );\n\n setForceRenderCount((prev) => prev + 1);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleChange = (event?: ChangeEvent<HTMLInputElement>) => {\n const newChecked = event ? event.target.checked : false;\n setChecked(newChecked);\n context?.onChange(event, {\n id,\n checked: newChecked,\n });\n };\n\n // A selection in the group context supersedes the normal checked state of the card\n const isChecked = context ? context.selection.has(id) : checked;\n\n return (\n <>\n {(!context || context?.selectionMode === \"multiple\") && (\n <Checkbox\n {...checkboxProps}\n defaultChecked={defaultCheckedProp}\n onChange={handleChange}\n disabled={disabled}\n ref={ref}\n label={\n <Card\n {...rest}\n className={cx(styles[\"select-card\"], className, {\n [styles[\"select-card--remove-drop-shadow\"]]: removeDropShadow,\n [styles[\"select-card--selected\"]]: isChecked && !errored,\n [styles[\"select-card--errored\"]]: errored,\n [styles[\"select-card--disabled\"]]: disabled,\n })}\n >\n {children}\n </Card>\n }\n hideCheckbox\n />\n )}\n {context?.selectionMode === \"single\" && (\n <Radio\n {...radioProps}\n defaultChecked={defaultCheckedProp}\n onChange={handleChange}\n disabled={disabled}\n ref={ref}\n name={context.radioName}\n label={\n <Card\n {...rest}\n className={cx(styles[\"select-card\"], className, {\n [styles[\"select-card--remove-drop-shadow\"]]: removeDropShadow,\n [styles[\"select-card--selected\"]]: isChecked && !errored,\n [styles[\"select-card--errored\"]]: errored,\n [styles[\"select-card--disabled\"]]: disabled,\n })}\n >\n {children}\n </Card>\n }\n hideRadio\n />\n )}\n </>\n );\n },\n);\n\nSelectCardElement.displayName = \"SelectCard\";\n\n/**\n * SelectCard component for creating interactive card-based selection interfaces.\n *\n * Features:\n * - Supports both single selection (radio) and multiple selection (checkbox) modes\n * - Automatic context detection for selection behavior\n * - Visual feedback for selected, disabled, and error states\n * - Accessible with proper ARIA roles and keyboard navigation\n * - Customizable styling through Card component props\n * - Hover and focus states with smooth transitions\n * - Integration with SelectCardGroup for grouped selection\n *\n * @example\n * <SelectCard\n * id=\"option-1\"\n * onChange={(checked) => console.log('Selected:', checked)}\n * >\n * <Text variant=\"headline\" size=\"small\">Option 1</Text>\n * <Text>Description of option 1</Text>\n * </SelectCard>\n */\nexport const SelectCard = Object.assign(SelectCardElement, {\n /**\n * SelectCardGroup component for managing groups of selectable cards.\n *\n * Features:\n * - Manages selection state for multiple SelectCard components\n * - Supports both single and multiple selection modes\n * - Provides proper accessibility with legends and ARIA labels\n * - Handles required field validation\n * - Automatic radio button grouping for single selection\n * - Context provider for child SelectCard components\n *\n * @example\n * <SelectCard.Group\n * legend=\"Choose your plan\"\n * selectionMode=\"single\"\n * onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n * <SelectCard id=\"basic\" onChange={() => {}}>\n * <Text variant=\"headline\" size=\"small\">Basic Plan</Text>\n * </SelectCard>\n * <SelectCard id=\"premium\" onChange={() => {}}>\n * <Text variant=\"headline\" size=\"small\">Premium Plan</Text>\n * </SelectCard>\n * </SelectCard.Group>\n */\n Group: SelectCardGroup,\n});\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SelectCard-BTYZg9TG.js","sources":["../src/components/SelectCard/internal/SelectCardProvider.tsx","../src/components/SelectCard/SelectCardGroup.tsx","../src/components/SelectCard/SelectCard.tsx"],"sourcesContent":["import {\n ChangeEvent,\n ReactNode,\n createContext,\n useContext,\n useId,\n useState,\n} from \"react\";\n\n/**\n * Interface for the select card state\n */\ninterface ISelectCardState {\n /**\n * When `true`, adds the item to the selected state holder.\n */\n checked: boolean;\n\n /**\n * Gives an explicit id to each item in the set.\n */\n id?: string | number;\n}\n\n/**\n * Interface for the select card onChange options\n */\ninterface ISelectCardOnChangeOptions {\n /**\n * When `true`, doesn't fire the user's `onChange`\n */\n internal?: boolean;\n}\n\n/**\n * Interface for the select card context\n */\nexport interface ISelectCardContext {\n /**\n * Callback function that is triggered when the selection state changes.\n *\n * @callback OnChangeCallback\n * @param {ChangeEvent<HTMLInputElement>} [e] - The native HTML input change event.\n * @param {ISelectCardState} [state] - The current state of the select card component after the change.\n * @returns {void}\n */\n onChange: (\n e?: ChangeEvent<HTMLInputElement>,\n state?: ISelectCardState,\n options?: ISelectCardOnChangeOptions,\n ) => void;\n\n /**\n * Sets how many cards the user can select, either 'single' (radio buttons) or 'multiple' (checkboxes)\n */\n selectionMode: \"single\" | \"multiple\";\n\n /**\n * Used internally to create a UUID for the HTML `name` property on radios.\n */\n radioName: string;\n\n /**\n * Creates a set of ids that are selected.\n */\n selection: Set<string | number>;\n}\n\n/**\n * Props for the SelectCardProvider component\n * @extends Omit<ISelectCardContext, \"radioName\" | \"selection\">\n */\ninterface ISelectCardProviderProps\n extends Omit<ISelectCardContext, \"radioName\" | \"selection\"> {\n children: ReactNode;\n}\n\nconst SelectCardContext = createContext<ISelectCardContext | null>(null);\n\n/**\n * SelectCardProvider component for managing selection state across SelectCard components.\n *\n * Features:\n * - Provides context for SelectCard components to share selection state\n * - Manages selection mode (single vs multiple)\n * - Handles selection state updates and callbacks\n * - Generates unique radio button names for single selection mode\n * - Maintains a set of selected card IDs\n * - Integrates with SelectCardGroup for automatic context provision\n *\n * @example\n * <SelectCardProvider\n * selectionMode=\"multiple\"\n * onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n * <SelectCard id=\"1\" onChange={() => {}}>Option 1</SelectCard>\n * <SelectCard id=\"2\" onChange={() => {}}>Option 2</SelectCard>\n * </SelectCardProvider>\n */\nexport const SelectCardProvider = ({\n children,\n onChange,\n selectionMode,\n}: ISelectCardProviderProps) => {\n const [selection, setSelection] = useState<Set<string | number>>(new Set());\n\n const radioName = useId();\n\n const handleChange = (\n e?: ChangeEvent<HTMLInputElement>,\n state?: ISelectCardState,\n options?: ISelectCardOnChangeOptions,\n ) => {\n if (!state || !state.id) {\n if (!options?.internal) {\n onChange(e, state);\n }\n\n return;\n }\n\n // Set internal selection\n if (selectionMode === \"single\") {\n if (state.checked) {\n setSelection(new Set([state.id]));\n } else {\n setSelection(new Set());\n }\n } else {\n if (state.checked) {\n setSelection(selection.add(state.id));\n } else {\n selection.delete(state.id);\n setSelection(selection);\n }\n }\n\n if (!options?.internal) {\n onChange(e, state);\n }\n };\n\n const context = {\n selectionMode,\n onChange: handleChange,\n radioName,\n selection,\n };\n\n return (\n <SelectCardContext.Provider value={context}>\n {children}\n </SelectCardContext.Provider>\n );\n};\n\n/**\n * Custom hook for accessing the SelectCard context.\n * @returns The SelectCard context or null if not within a SelectCardProvider\n */\nexport const useSelectCardContext = () => useContext(SelectCardContext);\n","import { forwardRef, ReactNode } from \"react\";\nimport { CheckboxGroup, CheckboxGroupProps } from \"../Checkbox/CheckboxGroup\";\nimport { RadioGroup } from \"../Radio\";\nimport {\n ISelectCardContext,\n SelectCardProvider,\n} from \"./internal/SelectCardProvider\";\n\n/**\n * Props for the SelectCardGroup component\n * @extends Omit<ISelectCardContext, \"radioName\" | \"selection\">\n */\nexport interface SelectCardGroupProps\n extends Omit<ISelectCardContext, \"radioName\" | \"selection\"> {\n /**\n * Associates the legend with content below.\n */\n ariaLabelledBy?: string;\n\n children?: ReactNode;\n\n /**\n * Sets the legend on the group.\n */\n legend: CheckboxGroupProps[\"legend\"];\n\n /**\n * When `true`, sets \"required\" text in label.\n * @accessibility This does not enforce error when nothing is selected.\n * @default false\n */\n required?: boolean;\n}\n\n/**\n * SelectCardGroup component for managing groups of selectable cards.\n *\n * Features:\n * - Manages selection state for multiple SelectCard components\n * - Supports both single and multiple selection modes\n * - Provides proper accessibility with legends and ARIA labels\n * - Handles required field validation\n * - Automatic radio button grouping for single selection\n * - Context provider for child SelectCard components\n * - Integrates with CheckboxGroup and RadioGroup for proper form semantics\n *\n * @example\n * <SelectCardGroup\n * legend=\"Choose your plan\"\n * selectionMode=\"single\"\n * onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n * <SelectCard id=\"basic\" onChange={() => {}}>\n * <Text variant=\"headline\" size=\"small\" el=\"h3\">Basic Plan</Text>\n * </SelectCard>\n * <SelectCard id=\"premium\" onChange={() => {}}>\n * <Text variant=\"headline\" size=\"small\" el=\"h3\">Premium Plan</Text>\n * </SelectCard>\n * </SelectCardGroup>\n */\nexport const SelectCardGroup = forwardRef<\n HTMLInputElement,\n SelectCardGroupProps\n>((props, _ref) => {\n const {\n ariaLabelledBy,\n children,\n legend,\n onChange,\n required = false,\n selectionMode,\n ...rest\n } = props;\n\n return (\n <SelectCardProvider onChange={onChange} selectionMode={selectionMode}>\n {selectionMode === \"multiple\" && (\n <CheckboxGroup\n aria-labelledby={ariaLabelledBy}\n legend={legend}\n required={required}\n {...rest}\n >\n {children}\n </CheckboxGroup>\n )}\n {selectionMode === \"single\" && (\n <RadioGroup\n aria-labelledby={ariaLabelledBy}\n legend={legend}\n required={required}\n {...rest}\n >\n {children}\n </RadioGroup>\n )}\n </SelectCardProvider>\n );\n});\n\nSelectCardGroup.displayName = \"SelectCardGroup\";\n","import { useLayoutEffect, useState, forwardRef, type ChangeEvent } from \"react\";\nimport cx from \"classnames\";\n\nimport { SelectCardGroup } from \"./SelectCardGroup\";\nimport { Card, CardProps } from \"../Card\";\nimport { Radio, RadioProps } from \"../Radio/internal/Radio\";\nimport { Checkbox, CheckboxProps } from \"../Checkbox/internal/Checkbox\";\n\nimport { useSelectCardContext } from \"./internal/SelectCardProvider\";\nimport { useOptionallyControlledState } from \"../../internal/hooks\";\n\nimport styles from \"./SelectCard.module.scss\";\n\n/**\n * Props for the SelectCard component\n * @extends Omit<CardProps, \"onChange\" | \"id\">\n */\nexport interface SelectCardProps extends Omit<CardProps, \"onChange\" | \"id\"> {\n /**\n * Passes props to the underlying `<Checkbox />` component.\n */\n checkboxProps?: Omit<CheckboxProps, \"label\">;\n\n /**\n * Controlled state. When provided, the component becomes controlled.\n */\n checked?: boolean;\n\n /**\n * Uncontrolled state.\n */\n defaultChecked?: boolean;\n\n /**\n * When `true`, disables the card.\n */\n disabled?: boolean;\n\n /**\n * When `true`, sets error styling on the card.\n */\n errored?: boolean;\n\n /**\n * A unique identifier for the card, used to track the selection state.\n */\n id: string | number;\n\n /**\n * Function called on selection state change.\n */\n onChange: (value: boolean) => void;\n\n /**\n * Passes props to the underlying `<Radio />` component.\n */\n radioProps?: Omit<RadioProps, \"label\">;\n\n /**\n * Removes the drop shadow effect on the card.\n */\n removeDropShadow?: boolean;\n}\n\nexport const SelectCardElement = forwardRef<HTMLInputElement, SelectCardProps>(\n (props, ref) => {\n const {\n checkboxProps,\n children,\n checked: checkedProp,\n className,\n defaultChecked: defaultCheckedProp,\n disabled,\n errored,\n radioProps,\n onChange,\n removeDropShadow,\n id,\n ...rest\n } = props;\n\n const [checked, setChecked] = useOptionallyControlledState<boolean>({\n controlledValue: checkedProp,\n defaultValue: defaultCheckedProp || false,\n onChange,\n });\n\n const context = useSelectCardContext();\n\n // we need to re-render after setting the initial selection state on context\n const [_, setForceRenderCount] = useState(0);\n useLayoutEffect(() => {\n if (defaultCheckedProp) {\n context?.onChange(\n undefined,\n {\n id,\n checked: defaultCheckedProp,\n },\n { internal: true },\n );\n\n setForceRenderCount((prev) => prev + 1);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleChange = (event?: ChangeEvent<HTMLInputElement>) => {\n const newChecked = event ? event.target.checked : false;\n setChecked(newChecked);\n context?.onChange(event, {\n id,\n checked: newChecked,\n });\n };\n\n // A selection in the group context supersedes the normal checked state of the card\n const isChecked = context ? context.selection.has(id) : checked;\n\n return (\n <>\n {(!context || context?.selectionMode === \"multiple\") && (\n <Checkbox\n {...checkboxProps}\n defaultChecked={defaultCheckedProp}\n onChange={handleChange}\n disabled={disabled}\n ref={ref}\n label={\n <Card\n {...rest}\n className={cx(styles[\"select-card\"], className, {\n [styles[\"select-card--remove-drop-shadow\"]]: removeDropShadow,\n [styles[\"select-card--selected\"]]: isChecked && !errored,\n [styles[\"select-card--errored\"]]: errored,\n [styles[\"select-card--disabled\"]]: disabled,\n })}\n >\n {children}\n </Card>\n }\n hideCheckbox\n />\n )}\n {context?.selectionMode === \"single\" && (\n <Radio\n {...radioProps}\n defaultChecked={defaultCheckedProp}\n onChange={handleChange}\n disabled={disabled}\n ref={ref}\n name={context.radioName}\n label={\n <Card\n {...rest}\n className={cx(styles[\"select-card\"], className, {\n [styles[\"select-card--remove-drop-shadow\"]]: removeDropShadow,\n [styles[\"select-card--selected\"]]: isChecked && !errored,\n [styles[\"select-card--errored\"]]: errored,\n [styles[\"select-card--disabled\"]]: disabled,\n })}\n >\n {children}\n </Card>\n }\n hideRadio\n />\n )}\n </>\n );\n },\n);\n\nSelectCardElement.displayName = \"SelectCard\";\n\n/**\n * SelectCard component for creating interactive card-based selection interfaces.\n *\n * Features:\n * - Supports both single selection (radio) and multiple selection (checkbox) modes\n * - Automatic context detection for selection behavior\n * - Visual feedback for selected, disabled, and error states\n * - Accessible with proper ARIA roles and keyboard navigation\n * - Customizable styling through Card component props\n * - Hover and focus states with smooth transitions\n * - Integration with SelectCardGroup for grouped selection\n *\n * @example\n * <SelectCard\n * id=\"option-1\"\n * onChange={(checked) => console.log('Selected:', checked)}\n * >\n * <Text variant=\"headline\" size=\"small\">Option 1</Text>\n * <Text>Description of option 1</Text>\n * </SelectCard>\n */\nexport const SelectCard = Object.assign(SelectCardElement, {\n /**\n * SelectCardGroup component for managing groups of selectable cards.\n *\n * Features:\n * - Manages selection state for multiple SelectCard components\n * - Supports both single and multiple selection modes\n * - Provides proper accessibility with legends and ARIA labels\n * - Handles required field validation\n * - Automatic radio button grouping for single selection\n * - Context provider for child SelectCard components\n *\n * @example\n * <SelectCard.Group\n * legend=\"Choose your plan\"\n * selectionMode=\"single\"\n * onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n * <SelectCard id=\"basic\" onChange={() => {}}>\n * <Text variant=\"headline\" size=\"small\">Basic Plan</Text>\n * </SelectCard>\n * <SelectCard id=\"premium\" onChange={() => {}}>\n * <Text variant=\"headline\" size=\"small\">Premium Plan</Text>\n * </SelectCard>\n * </SelectCard.Group>\n */\n Group: SelectCardGroup,\n});\n"],"names":[],"mappings":"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"}
|
package/dist/SelectCard.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { S as SelectCard, a as SelectCardElement, b as SelectCardGroup, S as default } from './SelectCard-
|
|
1
|
+
export { S as SelectCard, a as SelectCardElement, b as SelectCardGroup, S as default } from './SelectCard-BTYZg9TG.js';
|
|
2
2
|
//# sourceMappingURL=SelectCard.js.map
|