@elliemae/ds-pagination 3.57.0-next.5 → 3.57.0-next.51
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/dist/cjs/{Pagination.js → DSPagination.js} +8 -8
- package/dist/cjs/DSPagination.js.map +7 -0
- package/dist/cjs/config/usePagination.js +51 -0
- package/dist/cjs/config/usePagination.js.map +7 -0
- package/dist/cjs/{PaginationDataTestID.js → config/useValidateProps.js} +9 -13
- package/dist/cjs/config/useValidateProps.js.map +7 -0
- package/dist/cjs/{DSPaginationDefinitions.js → constants/index.js} +22 -19
- package/dist/cjs/constants/index.js.map +7 -0
- package/dist/cjs/index.js +29 -18
- package/dist/cjs/index.js.map +3 -3
- package/dist/cjs/package.json +4 -1
- package/dist/cjs/parts/{DSPageNextButton.js → DSPageNextButton/DSPageNextButton.js} +46 -18
- package/dist/cjs/parts/DSPageNextButton/DSPageNextButton.js.map +7 -0
- package/dist/cjs/parts/DSPageNextButton/config/usePageNextButton.js +55 -0
- package/dist/cjs/parts/DSPageNextButton/config/usePageNextButton.js.map +7 -0
- package/dist/cjs/parts/DSPageNextButton/config/useValidateProps.js +40 -0
- package/dist/cjs/parts/DSPageNextButton/config/useValidateProps.js.map +7 -0
- package/dist/cjs/parts/DSPageNextButton/constants/index.js +48 -0
- package/dist/cjs/parts/DSPageNextButton/constants/index.js.map +7 -0
- package/dist/cjs/parts/DSPageNextButton/index.js +41 -0
- package/dist/cjs/parts/DSPageNextButton/index.js.map +7 -0
- package/dist/cjs/parts/DSPageNextButton/react-desc-prop-types.js +51 -0
- package/dist/cjs/parts/DSPageNextButton/react-desc-prop-types.js.map +7 -0
- package/dist/cjs/parts/DSPageNextButton/typescript-testing/slot-props.js +32 -0
- package/dist/cjs/parts/DSPageNextButton/typescript-testing/slot-props.js.map +7 -0
- package/dist/cjs/{typescript-testing/typescript-page-next-button-valid.js → parts/DSPageNextButton/typescript-testing/typescript-testing.js} +1 -1
- package/dist/cjs/parts/DSPageNextButton/typescript-testing/typescript-testing.js.map +7 -0
- package/dist/cjs/parts/{DSPagePrevButton.js → DSPagePrevButton/DSPagePrevButton.js} +46 -18
- package/dist/cjs/parts/DSPagePrevButton/DSPagePrevButton.js.map +7 -0
- package/dist/cjs/parts/DSPagePrevButton/config/usePagePrevButton.js +55 -0
- package/dist/cjs/parts/DSPagePrevButton/config/usePagePrevButton.js.map +7 -0
- package/dist/cjs/parts/DSPagePrevButton/config/useValidateProps.js +40 -0
- package/dist/cjs/parts/DSPagePrevButton/config/useValidateProps.js.map +7 -0
- package/dist/cjs/parts/DSPagePrevButton/constants/index.js +48 -0
- package/dist/cjs/parts/DSPagePrevButton/constants/index.js.map +7 -0
- package/dist/cjs/parts/DSPagePrevButton/index.js +41 -0
- package/dist/cjs/parts/DSPagePrevButton/index.js.map +7 -0
- package/dist/cjs/parts/DSPagePrevButton/react-desc-prop-types.js +51 -0
- package/dist/cjs/parts/DSPagePrevButton/react-desc-prop-types.js.map +7 -0
- package/dist/cjs/parts/DSPagePrevButton/typescript-testing/slot-props.js +32 -0
- package/dist/cjs/parts/DSPagePrevButton/typescript-testing/slot-props.js.map +7 -0
- package/dist/cjs/{typescript-testing/typescript-page-prev-button-valid.js → parts/DSPagePrevButton/typescript-testing/typescript-testing.js} +1 -1
- package/dist/cjs/parts/DSPagePrevButton/typescript-testing/typescript-testing.js.map +7 -0
- package/dist/cjs/parts/{DSPaginationContainer.js → DSPaginationContainer/DSPaginationContainer.js} +26 -12
- package/dist/cjs/parts/DSPaginationContainer/DSPaginationContainer.js.map +7 -0
- package/dist/cjs/parts/DSPaginationContainer/config/usePaginationContainer.js +60 -0
- package/dist/cjs/parts/DSPaginationContainer/config/usePaginationContainer.js.map +7 -0
- package/dist/cjs/parts/DSPaginationContainer/config/useValidateProps.js +40 -0
- package/dist/cjs/parts/DSPaginationContainer/config/useValidateProps.js.map +7 -0
- package/dist/cjs/parts/DSPaginationContainer/constants/index.js +50 -0
- package/dist/cjs/parts/DSPaginationContainer/constants/index.js.map +7 -0
- package/dist/cjs/parts/DSPaginationContainer/index.js +41 -0
- package/dist/cjs/parts/DSPaginationContainer/index.js.map +7 -0
- package/dist/cjs/parts/DSPaginationContainer/react-desc-prop-types.js +48 -0
- package/dist/cjs/parts/DSPaginationContainer/react-desc-prop-types.js.map +7 -0
- package/dist/cjs/parts/DSPaginationContainer/typescript-testing/slot-props.js +34 -0
- package/dist/cjs/parts/DSPaginationContainer/typescript-testing/slot-props.js.map +7 -0
- package/dist/cjs/parts/DSPaginationSeparator/DSPaginationSeparator.js +68 -0
- package/dist/cjs/parts/DSPaginationSeparator/DSPaginationSeparator.js.map +7 -0
- package/dist/cjs/parts/DSPaginationSeparator/config/usePaginationSeparator.js +60 -0
- package/dist/cjs/parts/DSPaginationSeparator/config/usePaginationSeparator.js.map +7 -0
- package/dist/cjs/parts/DSPaginationSeparator/config/useValidateProps.js +40 -0
- package/dist/cjs/parts/DSPaginationSeparator/config/useValidateProps.js.map +7 -0
- package/dist/cjs/parts/DSPaginationSeparator/constants/index.js +45 -0
- package/dist/cjs/parts/DSPaginationSeparator/constants/index.js.map +7 -0
- package/dist/cjs/parts/DSPaginationSeparator/index.js +41 -0
- package/dist/cjs/parts/DSPaginationSeparator/index.js.map +7 -0
- package/dist/cjs/parts/DSPaginationSeparator/react-desc-prop-types.js +46 -0
- package/dist/cjs/parts/DSPaginationSeparator/react-desc-prop-types.js.map +7 -0
- package/dist/cjs/parts/DSPaginator/DSPaginator.js +212 -0
- package/dist/cjs/parts/DSPaginator/DSPaginator.js.map +7 -0
- package/dist/cjs/parts/DSPaginator/{createPaginatorHeader.js → config/createPaginatorHeader.js} +11 -6
- package/dist/cjs/parts/DSPaginator/config/createPaginatorHeader.js.map +7 -0
- package/dist/cjs/parts/DSPaginator/{getOptions.js → config/getOptions.js} +4 -4
- package/dist/cjs/parts/DSPaginator/config/getOptions.js.map +7 -0
- package/dist/cjs/parts/DSPaginator/{usePaginationSearch.js.map → config/usePaginationSearch.js.map} +1 -1
- package/dist/cjs/parts/DSPaginator/{usePaginator.js → config/usePaginator.js} +62 -38
- package/dist/cjs/parts/DSPaginator/config/usePaginator.js.map +7 -0
- package/dist/cjs/parts/DSPaginator/config/useValidateProps.js +40 -0
- package/dist/cjs/parts/DSPaginator/config/useValidateProps.js.map +7 -0
- package/dist/cjs/parts/DSPaginator/constants/index.js +45 -0
- package/dist/cjs/parts/DSPaginator/constants/index.js.map +7 -0
- package/dist/cjs/parts/DSPaginator/index.js +7 -112
- package/dist/cjs/parts/DSPaginator/index.js.map +3 -3
- package/dist/cjs/parts/DSPaginator/react-desc-prop-types.js +59 -0
- package/dist/cjs/parts/DSPaginator/react-desc-prop-types.js.map +7 -0
- package/dist/cjs/parts/DSPaginator/styled.js +135 -0
- package/dist/cjs/parts/DSPaginator/styled.js.map +7 -0
- package/dist/cjs/parts/DSPaginator/typescript-testing/slot-props.js +32 -0
- package/dist/cjs/parts/DSPaginator/typescript-testing/slot-props.js.map +7 -0
- package/dist/cjs/{typescript-testing/typescript-paginator-valid.js → parts/DSPaginator/typescript-testing/typescript-testing.js} +1 -1
- package/dist/cjs/parts/DSPaginator/typescript-testing/typescript-testing.js.map +7 -0
- package/dist/cjs/parts/DSPerPageSelector/DSPerPageSelector.js +125 -0
- package/dist/cjs/parts/DSPerPageSelector/DSPerPageSelector.js.map +7 -0
- package/dist/cjs/parts/DSPerPageSelector/{getOptions.js.map → config/getOptions.js.map} +1 -1
- package/dist/cjs/parts/DSPerPageSelector/{usePerPageSelector.js → config/usePerPageSelector.js} +29 -19
- package/dist/cjs/parts/DSPerPageSelector/config/usePerPageSelector.js.map +7 -0
- package/dist/cjs/parts/DSPerPageSelector/config/useValidateProps.js +40 -0
- package/dist/cjs/parts/DSPerPageSelector/config/useValidateProps.js.map +7 -0
- package/dist/cjs/parts/DSPerPageSelector/constants/index.js +50 -0
- package/dist/cjs/parts/DSPerPageSelector/constants/index.js.map +7 -0
- package/dist/cjs/parts/DSPerPageSelector/index.js +7 -70
- package/dist/cjs/parts/DSPerPageSelector/index.js.map +3 -3
- package/dist/cjs/parts/DSPerPageSelector/react-desc-prop-types.js +58 -0
- package/dist/cjs/parts/DSPerPageSelector/react-desc-prop-types.js.map +7 -0
- package/dist/cjs/{styled.js → parts/DSPerPageSelector/styled.js} +36 -41
- package/dist/cjs/parts/DSPerPageSelector/styled.js.map +7 -0
- package/dist/cjs/parts/DSPerPageSelector/typescript-testing/slots-props.js +32 -0
- package/dist/cjs/parts/DSPerPageSelector/typescript-testing/slots-props.js.map +7 -0
- package/dist/cjs/{typescript-testing/typescript-per-page-selector-valid.js → parts/DSPerPageSelector/typescript-testing/typescript-testing.js} +1 -1
- package/dist/cjs/parts/DSPerPageSelector/typescript-testing/typescript-testing.js.map +7 -0
- package/dist/cjs/parts/PaginationContent.js +7 -9
- package/dist/cjs/parts/PaginationContent.js.map +2 -2
- package/dist/cjs/parts/index.js +25 -4
- package/dist/cjs/parts/index.js.map +2 -2
- package/dist/cjs/parts/{DSPaginator → shared}/useOnElementOnResize.js.map +1 -1
- package/dist/cjs/react-desc-prop-types.js +1 -86
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/{Pagination.js → DSPagination.js} +6 -6
- package/dist/esm/DSPagination.js.map +7 -0
- package/dist/esm/config/usePagination.js +21 -0
- package/dist/esm/config/usePagination.js.map +7 -0
- package/dist/esm/config/useValidateProps.js +10 -0
- package/dist/esm/config/useValidateProps.js.map +7 -0
- package/dist/esm/constants/index.js +27 -0
- package/dist/esm/constants/index.js.map +7 -0
- package/dist/esm/index.js +45 -13
- package/dist/esm/index.js.map +3 -3
- package/dist/esm/package.json +4 -1
- package/dist/esm/parts/DSPageNextButton/DSPageNextButton.js +74 -0
- package/dist/esm/parts/DSPageNextButton/DSPageNextButton.js.map +7 -0
- package/dist/esm/parts/DSPageNextButton/config/usePageNextButton.js +30 -0
- package/dist/esm/parts/DSPageNextButton/config/usePageNextButton.js.map +7 -0
- package/dist/esm/parts/DSPageNextButton/config/useValidateProps.js +10 -0
- package/dist/esm/parts/DSPageNextButton/config/useValidateProps.js.map +7 -0
- package/dist/esm/parts/DSPageNextButton/constants/index.js +18 -0
- package/dist/esm/parts/DSPageNextButton/constants/index.js.map +7 -0
- package/dist/esm/parts/DSPageNextButton/index.js +11 -0
- package/dist/esm/parts/DSPageNextButton/index.js.map +7 -0
- package/dist/esm/parts/DSPageNextButton/react-desc-prop-types.js +26 -0
- package/dist/esm/parts/DSPageNextButton/react-desc-prop-types.js.map +7 -0
- package/dist/esm/parts/DSPageNextButton/typescript-testing/slot-props.js +9 -0
- package/dist/esm/parts/DSPageNextButton/typescript-testing/slot-props.js.map +7 -0
- package/dist/esm/{typescript-testing/typescript-page-next-button-valid.js → parts/DSPageNextButton/typescript-testing/typescript-testing.js} +1 -1
- package/dist/esm/parts/DSPageNextButton/typescript-testing/typescript-testing.js.map +7 -0
- package/dist/esm/parts/DSPagePrevButton/DSPagePrevButton.js +74 -0
- package/dist/esm/parts/DSPagePrevButton/DSPagePrevButton.js.map +7 -0
- package/dist/esm/parts/DSPagePrevButton/config/usePagePrevButton.js +30 -0
- package/dist/esm/parts/DSPagePrevButton/config/usePagePrevButton.js.map +7 -0
- package/dist/esm/parts/DSPagePrevButton/config/useValidateProps.js +10 -0
- package/dist/esm/parts/DSPagePrevButton/config/useValidateProps.js.map +7 -0
- package/dist/esm/parts/DSPagePrevButton/constants/index.js +18 -0
- package/dist/esm/parts/DSPagePrevButton/constants/index.js.map +7 -0
- package/dist/esm/parts/DSPagePrevButton/index.js +11 -0
- package/dist/esm/parts/DSPagePrevButton/index.js.map +7 -0
- package/dist/esm/parts/DSPagePrevButton/react-desc-prop-types.js +26 -0
- package/dist/esm/parts/DSPagePrevButton/react-desc-prop-types.js.map +7 -0
- package/dist/esm/parts/DSPagePrevButton/typescript-testing/slot-props.js +9 -0
- package/dist/esm/parts/DSPagePrevButton/typescript-testing/slot-props.js.map +7 -0
- package/dist/esm/{typescript-testing/typescript-page-prev-button-valid.js → parts/DSPagePrevButton/typescript-testing/typescript-testing.js} +1 -1
- package/dist/esm/parts/DSPagePrevButton/typescript-testing/typescript-testing.js.map +7 -0
- package/dist/esm/parts/DSPaginationContainer/DSPaginationContainer.js +50 -0
- package/dist/esm/parts/DSPaginationContainer/DSPaginationContainer.js.map +7 -0
- package/dist/esm/parts/DSPaginationContainer/config/usePaginationContainer.js +38 -0
- package/dist/esm/parts/DSPaginationContainer/config/usePaginationContainer.js.map +7 -0
- package/dist/esm/parts/DSPaginationContainer/config/useValidateProps.js +10 -0
- package/dist/esm/parts/DSPaginationContainer/config/useValidateProps.js.map +7 -0
- package/dist/esm/parts/DSPaginationContainer/constants/index.js +20 -0
- package/dist/esm/parts/DSPaginationContainer/constants/index.js.map +7 -0
- package/dist/esm/parts/DSPaginationContainer/index.js +15 -0
- package/dist/esm/parts/DSPaginationContainer/index.js.map +7 -0
- package/dist/esm/parts/DSPaginationContainer/react-desc-prop-types.js +18 -0
- package/dist/esm/parts/DSPaginationContainer/react-desc-prop-types.js.map +7 -0
- package/dist/esm/parts/DSPaginationContainer/typescript-testing/slot-props.js +11 -0
- package/dist/esm/parts/DSPaginationContainer/typescript-testing/slot-props.js.map +7 -0
- package/dist/esm/parts/DSPaginationSeparator/DSPaginationSeparator.js +43 -0
- package/dist/esm/parts/DSPaginationSeparator/DSPaginationSeparator.js.map +7 -0
- package/dist/esm/parts/DSPaginationSeparator/config/usePaginationSeparator.js +38 -0
- package/dist/esm/parts/DSPaginationSeparator/config/usePaginationSeparator.js.map +7 -0
- package/dist/esm/parts/DSPaginationSeparator/config/useValidateProps.js +10 -0
- package/dist/esm/parts/DSPaginationSeparator/config/useValidateProps.js.map +7 -0
- package/dist/esm/parts/DSPaginationSeparator/constants/index.js +15 -0
- package/dist/esm/parts/DSPaginationSeparator/constants/index.js.map +7 -0
- package/dist/esm/parts/DSPaginationSeparator/index.js +15 -0
- package/dist/esm/parts/DSPaginationSeparator/index.js.map +7 -0
- package/dist/esm/parts/DSPaginationSeparator/react-desc-prop-types.js +16 -0
- package/dist/esm/parts/DSPaginationSeparator/react-desc-prop-types.js.map +7 -0
- package/dist/esm/parts/DSPaginator/DSPaginator.js +182 -0
- package/dist/esm/parts/DSPaginator/DSPaginator.js.map +7 -0
- package/dist/esm/parts/DSPaginator/config/createPaginatorHeader.js +24 -0
- package/dist/esm/parts/DSPaginator/config/createPaginatorHeader.js.map +7 -0
- package/dist/esm/parts/DSPaginator/{getOptions.js → config/getOptions.js} +4 -4
- package/dist/esm/parts/DSPaginator/config/getOptions.js.map +7 -0
- package/dist/esm/parts/DSPaginator/{usePaginationSearch.js.map → config/usePaginationSearch.js.map} +1 -1
- package/dist/esm/parts/DSPaginator/config/usePaginator.js +88 -0
- package/dist/esm/parts/DSPaginator/config/usePaginator.js.map +7 -0
- package/dist/esm/parts/DSPaginator/config/useValidateProps.js +10 -0
- package/dist/esm/parts/DSPaginator/config/useValidateProps.js.map +7 -0
- package/dist/esm/parts/DSPaginator/constants/index.js +15 -0
- package/dist/esm/parts/DSPaginator/constants/index.js.map +7 -0
- package/dist/esm/parts/DSPaginator/index.js +6 -111
- package/dist/esm/parts/DSPaginator/index.js.map +3 -3
- package/dist/esm/parts/DSPaginator/react-desc-prop-types.js +34 -0
- package/dist/esm/parts/DSPaginator/react-desc-prop-types.js.map +7 -0
- package/dist/esm/parts/DSPaginator/styled.js +105 -0
- package/dist/esm/parts/DSPaginator/styled.js.map +7 -0
- package/dist/esm/parts/DSPaginator/typescript-testing/slot-props.js +9 -0
- package/dist/esm/parts/DSPaginator/typescript-testing/slot-props.js.map +7 -0
- package/dist/esm/{typescript-testing/typescript-paginator-valid.js → parts/DSPaginator/typescript-testing/typescript-testing.js} +1 -1
- package/dist/esm/parts/DSPaginator/typescript-testing/typescript-testing.js.map +7 -0
- package/dist/esm/parts/DSPerPageSelector/DSPerPageSelector.js +95 -0
- package/dist/esm/parts/DSPerPageSelector/DSPerPageSelector.js.map +7 -0
- package/dist/esm/parts/DSPerPageSelector/{getOptions.js.map → config/getOptions.js.map} +1 -1
- package/dist/esm/parts/DSPerPageSelector/config/usePerPageSelector.js +55 -0
- package/dist/esm/parts/DSPerPageSelector/config/usePerPageSelector.js.map +7 -0
- package/dist/esm/parts/DSPerPageSelector/config/useValidateProps.js +10 -0
- package/dist/esm/parts/DSPerPageSelector/config/useValidateProps.js.map +7 -0
- package/dist/esm/parts/DSPerPageSelector/constants/index.js +20 -0
- package/dist/esm/parts/DSPerPageSelector/constants/index.js.map +7 -0
- package/dist/esm/parts/DSPerPageSelector/index.js +6 -69
- package/dist/esm/parts/DSPerPageSelector/index.js.map +3 -3
- package/dist/esm/parts/DSPerPageSelector/react-desc-prop-types.js +33 -0
- package/dist/esm/parts/DSPerPageSelector/react-desc-prop-types.js.map +7 -0
- package/dist/esm/parts/DSPerPageSelector/styled.js +87 -0
- package/dist/esm/parts/DSPerPageSelector/styled.js.map +7 -0
- package/dist/esm/parts/DSPerPageSelector/typescript-testing/slots-props.js +9 -0
- package/dist/esm/parts/DSPerPageSelector/typescript-testing/slots-props.js.map +7 -0
- package/dist/esm/{typescript-testing/typescript-per-page-selector-valid.js → parts/DSPerPageSelector/typescript-testing/typescript-testing.js} +1 -1
- package/dist/esm/parts/DSPerPageSelector/typescript-testing/typescript-testing.js.map +7 -0
- package/dist/esm/parts/PaginationContent.js +7 -9
- package/dist/esm/parts/PaginationContent.js.map +2 -2
- package/dist/esm/parts/index.js +63 -6
- package/dist/esm/parts/index.js.map +2 -2
- package/dist/esm/parts/{DSPaginator → shared}/useOnElementOnResize.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +1 -86
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/config/usePagination.d.ts +5 -0
- package/dist/types/config/useValidateProps.d.ts +3 -0
- package/dist/types/constants/index.d.ts +29 -0
- package/dist/types/index.d.ts +3 -7
- package/dist/types/parts/DSPageNextButton/DSPageNextButton.d.ts +5 -0
- package/dist/types/parts/DSPageNextButton/config/usePageNextButton.d.ts +377 -0
- package/dist/types/parts/DSPageNextButton/config/useValidateProps.d.ts +3 -0
- package/dist/types/parts/DSPageNextButton/constants/index.d.ts +9 -0
- package/dist/types/parts/DSPageNextButton/index.d.ts +3 -0
- package/dist/types/parts/DSPageNextButton/react-desc-prop-types.d.ts +23 -0
- package/dist/types/parts/DSPageNextButton/tests/DSPageNextButton.get-owner-props.test.d.ts +1 -0
- package/dist/types/parts/DSPageNextButton/tests/DSPageNextButton.keyboard.test.d.ts +1 -0
- package/dist/types/parts/DSPageNextButton/tests/utils/NextButtonTestRender.d.ts +2 -0
- package/dist/types/parts/DSPageNextButton/typescript-testing/slot-props.d.ts +1 -0
- package/dist/types/parts/DSPageNextButton/typescript-testing/typescript-testing.d.ts +1 -0
- package/dist/types/parts/DSPagePrevButton/DSPagePrevButton.d.ts +5 -0
- package/dist/types/parts/DSPagePrevButton/config/usePagePrevButton.d.ts +377 -0
- package/dist/types/parts/DSPagePrevButton/config/useValidateProps.d.ts +3 -0
- package/dist/types/parts/DSPagePrevButton/constants/index.d.ts +9 -0
- package/dist/types/parts/DSPagePrevButton/index.d.ts +3 -0
- package/dist/types/parts/DSPagePrevButton/react-desc-prop-types.d.ts +23 -0
- package/dist/types/parts/DSPagePrevButton/tests/DSPagePrevButton.a11y.test.d.ts +1 -0
- package/dist/types/parts/DSPagePrevButton/tests/DSPagePrevButton.callbacks.test.d.ts +1 -0
- package/dist/types/parts/DSPagePrevButton/tests/DSPagePrevButton.data-testid.test.d.ts +1 -0
- package/dist/types/parts/DSPagePrevButton/tests/DSPagePrevButton.export.test.d.ts +1 -0
- package/dist/types/parts/DSPagePrevButton/tests/DSPagePrevButton.get-owner-props.test.d.ts +1 -0
- package/dist/types/parts/DSPagePrevButton/tests/DSPagePrevButton.keyboard.test.d.ts +1 -0
- package/dist/types/parts/DSPagePrevButton/tests/utils/PrevButtonTestRender.d.ts +1 -0
- package/dist/types/parts/DSPagePrevButton/typescript-testing/slot-props.d.ts +1 -0
- package/dist/types/parts/DSPagePrevButton/typescript-testing/typescript-testing.d.ts +1 -0
- package/dist/types/parts/DSPaginationContainer/DSPaginationContainer.d.ts +5 -0
- package/dist/types/parts/DSPaginationContainer/config/usePaginationContainer.d.ts +377 -0
- package/dist/types/parts/DSPaginationContainer/config/useValidateProps.d.ts +3 -0
- package/dist/types/parts/DSPaginationContainer/constants/index.d.ts +11 -0
- package/dist/types/parts/DSPaginationContainer/index.d.ts +3 -0
- package/dist/types/parts/DSPaginationContainer/react-desc-prop-types.d.ts +22 -0
- package/dist/types/parts/DSPaginationContainer/tests/DSPaginationContainer.data-testid.test.d.ts +1 -0
- package/dist/types/parts/DSPaginationContainer/tests/DSPaginationContainer.exports.test.d.ts +1 -0
- package/dist/types/parts/DSPaginationContainer/tests/DSPaginationContainer.get-owner-props.test.d.ts +1 -0
- package/dist/types/parts/DSPaginationContainer/tests/utils/PaginationContainerRender.d.ts +1 -0
- package/dist/types/parts/DSPaginationContainer/typescript-testing/slot-props.d.ts +1 -0
- package/dist/types/parts/DSPaginationSeparator/DSPaginationSeparator.d.ts +7 -0
- package/dist/types/parts/DSPaginationSeparator/config/usePaginationSeparator.d.ts +377 -0
- package/dist/types/parts/DSPaginationSeparator/config/useValidateProps.d.ts +3 -0
- package/dist/types/parts/DSPaginationSeparator/constants/index.d.ts +9 -0
- package/dist/types/parts/DSPaginationSeparator/index.d.ts +3 -0
- package/dist/types/parts/DSPaginationSeparator/react-desc-prop-types.d.ts +18 -0
- package/dist/types/parts/DSPaginationSeparator/tests/DSPaginationSeparator.data-testid.test.d.ts +1 -0
- package/dist/types/parts/DSPaginationSeparator/tests/DSPaginationSeparator.exports.test.d.ts +1 -0
- package/dist/types/parts/DSPaginationSeparator/tests/DSPaginationSeparator.get-owner-props.test.d.ts +1 -0
- package/dist/types/parts/DSPaginationSeparator/tests/utils/DSPaginationSeparatorTestRender.d.ts +1 -0
- package/dist/types/parts/DSPaginator/DSPaginator.d.ts +5 -0
- package/dist/types/parts/DSPaginator/config/createPaginatorHeader.d.ts +8 -0
- package/dist/types/parts/DSPaginator/{getOptions.d.ts → config/getOptions.d.ts} +1 -0
- package/dist/types/parts/DSPaginator/config/usePaginator.d.ts +390 -0
- package/dist/types/parts/DSPaginator/config/useValidateProps.d.ts +3 -0
- package/dist/types/parts/DSPaginator/constants/index.d.ts +9 -0
- package/dist/types/parts/DSPaginator/index.d.ts +3 -4
- package/dist/types/parts/DSPaginator/react-desc-prop-types.d.ts +27 -0
- package/dist/types/parts/DSPaginator/styled.d.ts +5 -0
- package/dist/types/parts/DSPaginator/tests/DSPaginator.a11y.test.d.ts +1 -0
- package/dist/types/parts/DSPaginator/tests/DSPaginator.data-testid.test.d.ts +1 -0
- package/dist/types/parts/DSPaginator/tests/DSPaginator.exports.test.d.ts +1 -0
- package/dist/types/parts/DSPaginator/tests/DSPaginator.get-owner-props.test.d.ts +1 -0
- package/dist/types/parts/DSPaginator/tests/DSPaginator.keyboard.test.d.ts +1 -0
- package/dist/types/parts/DSPaginator/tests/utils/DSPaginatorTestRender.d.ts +1 -0
- package/dist/types/parts/DSPaginator/typescript-testing/slot-props.d.ts +1 -0
- package/dist/types/parts/DSPaginator/typescript-testing/typescript-testing.d.ts +1 -0
- package/dist/types/parts/DSPerPageSelector/DSPerPageSelector.d.ts +5 -0
- package/dist/types/parts/DSPerPageSelector/config/usePerPageSelector.d.ts +384 -0
- package/dist/types/parts/DSPerPageSelector/config/useValidateProps.d.ts +3 -0
- package/dist/types/parts/DSPerPageSelector/constants/index.d.ts +13 -0
- package/dist/types/parts/DSPerPageSelector/index.d.ts +3 -4
- package/dist/types/parts/DSPerPageSelector/react-desc-prop-types.d.ts +28 -0
- package/dist/types/parts/DSPerPageSelector/styled.d.ts +3 -0
- package/dist/types/parts/DSPerPageSelector/tests/DSPerPageSelector.a11y.test.d.ts +1 -0
- package/dist/types/parts/DSPerPageSelector/tests/DSPerPageSelector.data-testid.test.d.ts +1 -0
- package/dist/types/parts/DSPerPageSelector/tests/DSPerPageSelector.exports.test.d.ts +1 -0
- package/dist/types/parts/DSPerPageSelector/tests/DSPerPageSelector.get-owner-props.test.d.ts +1 -0
- package/dist/types/parts/DSPerPageSelector/tests/DSPerPageSelector.keyboard.test.d.ts +1 -0
- package/dist/types/parts/DSPerPageSelector/tests/utils/PerPageSelectorTestRender.d.ts +1 -0
- package/dist/types/parts/DSPerPageSelector/typescript-testing/slots-props.d.ts +1 -0
- package/dist/types/parts/DSPerPageSelector/typescript-testing/typescript-testing.d.ts +1 -0
- package/dist/types/parts/index.d.ts +6 -5
- package/dist/types/react-desc-prop-types.d.ts +9 -540
- package/dist/types/tests/DSPagination.data-testid.test.d.ts +1 -0
- package/dist/types/tests/DSPagination.exports.test.d.ts +1 -0
- package/dist/types/tests/DSPagination.get-owner-props.test.d.ts +1 -0
- package/package.json +35 -31
- package/dist/cjs/DSPaginationDefinitions.js.map +0 -7
- package/dist/cjs/Pagination.js.map +0 -7
- package/dist/cjs/PaginationDataTestID.js.map +0 -7
- package/dist/cjs/parts/DSPageNextButton.js.map +0 -7
- package/dist/cjs/parts/DSPagePrevButton.js.map +0 -7
- package/dist/cjs/parts/DSPaginationContainer.js.map +0 -7
- package/dist/cjs/parts/DSPaginator/createPaginatorHeader.js.map +0 -7
- package/dist/cjs/parts/DSPaginator/getOptions.js.map +0 -7
- package/dist/cjs/parts/DSPaginator/usePaginator.js.map +0 -7
- package/dist/cjs/parts/DSPerPageSelector/usePerPageSelector.js.map +0 -7
- package/dist/cjs/props.js +0 -85
- package/dist/cjs/props.js.map +0 -7
- package/dist/cjs/styled.js.map +0 -7
- package/dist/cjs/typescript-testing/typescript-page-next-button-valid.js.map +0 -7
- package/dist/cjs/typescript-testing/typescript-page-prev-button-valid.js.map +0 -7
- package/dist/cjs/typescript-testing/typescript-paginator-valid.js.map +0 -7
- package/dist/cjs/typescript-testing/typescript-per-page-selector-valid.js.map +0 -7
- package/dist/esm/DSPaginationDefinitions.js +0 -24
- package/dist/esm/DSPaginationDefinitions.js.map +0 -7
- package/dist/esm/Pagination.js.map +0 -7
- package/dist/esm/PaginationDataTestID.js +0 -14
- package/dist/esm/PaginationDataTestID.js.map +0 -7
- package/dist/esm/parts/DSPageNextButton.js +0 -47
- package/dist/esm/parts/DSPageNextButton.js.map +0 -7
- package/dist/esm/parts/DSPagePrevButton.js +0 -47
- package/dist/esm/parts/DSPagePrevButton.js.map +0 -7
- package/dist/esm/parts/DSPaginationContainer.js +0 -31
- package/dist/esm/parts/DSPaginationContainer.js.map +0 -7
- package/dist/esm/parts/DSPaginator/createPaginatorHeader.js +0 -19
- package/dist/esm/parts/DSPaginator/createPaginatorHeader.js.map +0 -7
- package/dist/esm/parts/DSPaginator/getOptions.js.map +0 -7
- package/dist/esm/parts/DSPaginator/usePaginator.js +0 -59
- package/dist/esm/parts/DSPaginator/usePaginator.js.map +0 -7
- package/dist/esm/parts/DSPerPageSelector/usePerPageSelector.js +0 -40
- package/dist/esm/parts/DSPerPageSelector/usePerPageSelector.js.map +0 -7
- package/dist/esm/props.js +0 -55
- package/dist/esm/props.js.map +0 -7
- package/dist/esm/styled.js +0 -92
- package/dist/esm/styled.js.map +0 -7
- package/dist/esm/typescript-testing/typescript-page-next-button-valid.js.map +0 -7
- package/dist/esm/typescript-testing/typescript-page-prev-button-valid.js.map +0 -7
- package/dist/esm/typescript-testing/typescript-paginator-valid.js.map +0 -7
- package/dist/esm/typescript-testing/typescript-per-page-selector-valid.js.map +0 -7
- package/dist/types/DSPaginationDefinitions.d.ts +0 -12
- package/dist/types/PaginationDataTestID.d.ts +0 -9
- package/dist/types/parts/DSPageNextButton.d.ts +0 -4
- package/dist/types/parts/DSPagePrevButton.d.ts +0 -4
- package/dist/types/parts/DSPaginationContainer.d.ts +0 -4
- package/dist/types/parts/DSPaginator/createPaginatorHeader.d.ts +0 -6
- package/dist/types/parts/DSPaginator/usePaginator.d.ts +0 -381
- package/dist/types/parts/DSPerPageSelector/usePerPageSelector.d.ts +0 -377
- package/dist/types/props.d.ts +0 -20
- package/dist/types/styled.d.ts +0 -7
- /package/dist/cjs/parts/DSPaginator/{usePaginationSearch.js → config/usePaginationSearch.js} +0 -0
- /package/dist/cjs/parts/DSPerPageSelector/{getOptions.js → config/getOptions.js} +0 -0
- /package/dist/cjs/parts/{DSPaginator → shared}/useOnElementOnResize.js +0 -0
- /package/dist/esm/parts/DSPaginator/{usePaginationSearch.js → config/usePaginationSearch.js} +0 -0
- /package/dist/esm/parts/DSPerPageSelector/{getOptions.js → config/getOptions.js} +0 -0
- /package/dist/esm/parts/{DSPaginator → shared}/useOnElementOnResize.js +0 -0
- /package/dist/types/{Pagination.d.ts → DSPagination.d.ts} +0 -0
- /package/dist/types/{typescript-testing/typescript-page-next-button-valid.d.ts → parts/DSPageNextButton/tests/DSPageNextButton.a11y.test.d.ts} +0 -0
- /package/dist/types/{typescript-testing/typescript-page-prev-button-valid.d.ts → parts/DSPageNextButton/tests/DSPageNextButton.callbacks.test.d.ts} +0 -0
- /package/dist/types/{typescript-testing/typescript-paginator-valid.d.ts → parts/DSPageNextButton/tests/DSPageNextButton.data-testid.test.d.ts} +0 -0
- /package/dist/types/{typescript-testing/typescript-per-page-selector-valid.d.ts → parts/DSPageNextButton/tests/DSPageNextButton.export.test.d.ts} +0 -0
- /package/dist/types/parts/DSPaginator/{usePaginationSearch.d.ts → config/usePaginationSearch.d.ts} +0 -0
- /package/dist/types/parts/DSPerPageSelector/{getOptions.d.ts → config/getOptions.d.ts} +0 -0
- /package/dist/types/parts/{DSPaginator → shared}/useOnElementOnResize.d.ts +0 -0
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import {
|
|
3
|
+
PropTypes,
|
|
4
|
+
getPropsPerSlotPropTypes,
|
|
5
|
+
globalAttributesPropTypes,
|
|
6
|
+
xstyledPropTypes
|
|
7
|
+
} from "@elliemae/ds-props-helpers";
|
|
8
|
+
import { DSPaginationName, PAGINATOR_SLOTS } from "./constants/index.js";
|
|
9
|
+
const defaultProps = {
|
|
10
|
+
pageCount: 0,
|
|
11
|
+
isLoadingPageCount: false,
|
|
12
|
+
pageIndex: 1,
|
|
13
|
+
onPageChange: () => null,
|
|
14
|
+
pageDetails: [],
|
|
15
|
+
pageDetailsTitle: ""
|
|
16
|
+
};
|
|
17
|
+
const DSPaginatorPropTypes = {
|
|
18
|
+
...getPropsPerSlotPropTypes(DSPaginationName, PAGINATOR_SLOTS),
|
|
19
|
+
...globalAttributesPropTypes,
|
|
20
|
+
...xstyledPropTypes,
|
|
21
|
+
pageIndex: PropTypes.number.description("Index of the current page, starting from 1").defaultValue(1),
|
|
22
|
+
pageCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("How many pages are there"),
|
|
23
|
+
onPageChange: PropTypes.func.description("Function invoked when the page changes").defaultValue(() => null),
|
|
24
|
+
isLoadingPageCount: PropTypes.bool.description("Whether the page count is loading or not").defaultValue(false),
|
|
25
|
+
pageDetails: PropTypes.arrayOf(PropTypes.string).description("Details to provide for each page").defaultValue([]),
|
|
26
|
+
pageDetailsTitle: PropTypes.string.description("The title of the details (usually a column of your dataset)").defaultValue("")
|
|
27
|
+
};
|
|
28
|
+
const DSPaginatorPropTypesSchema = DSPaginatorPropTypes;
|
|
29
|
+
export {
|
|
30
|
+
DSPaginatorPropTypes,
|
|
31
|
+
DSPaginatorPropTypesSchema,
|
|
32
|
+
defaultProps
|
|
33
|
+
};
|
|
34
|
+
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/react-desc-prop-types.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\n\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSPaginationName, PAGINATOR_SLOTS } from './constants/index.js';\n\nexport declare namespace DSPaginatorT {\n export type SlotFunctionArguments = {\n dsPaginationPaginator: () => object;\n };\n export interface RequiredProps {}\n\n export interface DefaultProps {\n pageCount: number | string;\n isLoadingPageCount: boolean;\n pageIndex: number;\n onPageChange: (page: number) => void;\n pageDetails: string[] | readonly string[];\n pageDetailsTitle: string;\n }\n\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSPaginationName, typeof PAGINATOR_SLOTS> {}\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSPaginatorT.DefaultProps = {\n pageCount: 0,\n isLoadingPageCount: false,\n pageIndex: 1,\n onPageChange: () => null,\n pageDetails: [],\n pageDetailsTitle: '',\n};\n\nexport const DSPaginatorPropTypes: DSPropTypesSchema<DSPaginatorT.Props> = {\n ...getPropsPerSlotPropTypes(DSPaginationName, PAGINATOR_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n pageCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('How many pages are there'),\n onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n isLoadingPageCount: PropTypes.bool.description('Whether the page count is loading or not').defaultValue(false),\n pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),\n pageDetailsTitle: PropTypes.string\n .description('The title of the details (usually a column of your dataset)')\n .defaultValue(''),\n};\n\nexport const DSPaginatorPropTypesSchema = DSPaginatorPropTypes as unknown as ValidationMap<DSPaginatorT.Props>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,kBAAkB,uBAAuB;AAkC3C,MAAM,eAA0C;AAAA,EACrD,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,EACpB,aAAa,CAAC;AAAA,EACd,kBAAkB;AACpB;AAEO,MAAM,uBAA8D;AAAA,EACzE,GAAG,yBAAyB,kBAAkB,eAAe;AAAA,EAC7D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,WAAW,UAAU,OAAO,YAAY,4CAA4C,EAAE,aAAa,CAAC;AAAA,EACpG,WAAW,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,0BAA0B;AAAA,EAC3G,cAAc,UAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,MAAM,IAAI;AAAA,EAC1G,oBAAoB,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EAC7G,aAAa,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,kCAAkC,EAAE,aAAa,CAAC,CAAC;AAAA,EAChH,kBAAkB,UAAU,OACzB,YAAY,6DAA6D,EACzE,aAAa,EAAE;AACpB;AAEO,MAAM,6BAA6B;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { DSButtonV3 } from "@elliemae/ds-button-v2";
|
|
3
|
+
import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu-v2";
|
|
4
|
+
import Grid from "@elliemae/ds-grid";
|
|
5
|
+
import { css, styled } from "@elliemae/ds-system";
|
|
6
|
+
import { DSPaginationName, PAGINATOR_SLOTS } from "./constants/index.js";
|
|
7
|
+
const fontSize13Base13 = 13 / 13;
|
|
8
|
+
const fontSize13Base16 = 13 / 16;
|
|
9
|
+
const fontSize18Base13 = 18 / 13;
|
|
10
|
+
const fontSize18Base16 = 18 / 16;
|
|
11
|
+
const fontSize12Base13 = 12 / 13;
|
|
12
|
+
const fontSize12Base16 = 12 / 16;
|
|
13
|
+
const styledFocusCss = css`
|
|
14
|
+
&:after {
|
|
15
|
+
display: block;
|
|
16
|
+
content: ' ';
|
|
17
|
+
position: absolute;
|
|
18
|
+
top: 0;
|
|
19
|
+
left: 0;
|
|
20
|
+
right: 0;
|
|
21
|
+
bottom: 0;
|
|
22
|
+
border: 2px solid ${({ theme }) => theme.colors.brand[700]};
|
|
23
|
+
pointer-events: none;
|
|
24
|
+
z-index: 7;
|
|
25
|
+
}
|
|
26
|
+
`;
|
|
27
|
+
const InvisibleDiv = styled.div`
|
|
28
|
+
opacity: 0;
|
|
29
|
+
white-space: nowrap;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
text-overflow: ellipsis;
|
|
32
|
+
position: absolute;
|
|
33
|
+
`;
|
|
34
|
+
const paginationDropdownButtonCommonStyles = css`
|
|
35
|
+
min-height: 42px;
|
|
36
|
+
display: grid;
|
|
37
|
+
grid-auto-flow: column;
|
|
38
|
+
justify-content: center;
|
|
39
|
+
align-items: center;
|
|
40
|
+
position: relative;
|
|
41
|
+
padding-left: 16px;
|
|
42
|
+
padding-right: 16px;
|
|
43
|
+
grid-gap: 8px;
|
|
44
|
+
font-size: 13px;
|
|
45
|
+
color: neutral-700;
|
|
46
|
+
cursor: pointer;
|
|
47
|
+
border-radius: 0;
|
|
48
|
+
font-weight: ${(props) => props.theme.fontWeights.regular};
|
|
49
|
+
:focus {
|
|
50
|
+
${styledFocusCss}
|
|
51
|
+
}
|
|
52
|
+
&[aria-disabled='true'] {
|
|
53
|
+
cursor: not-allowed;
|
|
54
|
+
}
|
|
55
|
+
white-space: nowrap;
|
|
56
|
+
`;
|
|
57
|
+
const PaginationDropdownButtonPaginator = styled(DSButtonV3, {
|
|
58
|
+
name: DSPaginationName,
|
|
59
|
+
slot: PAGINATOR_SLOTS.PAGINATOR,
|
|
60
|
+
preserveLegacyDataTestId: true
|
|
61
|
+
})`
|
|
62
|
+
${paginationDropdownButtonCommonStyles}
|
|
63
|
+
`;
|
|
64
|
+
const StyledDropdown = styled(DSDropdownMenuV2)`
|
|
65
|
+
/**
|
|
66
|
+
* Pagination uses DSTypography internally, but each typography variant defines
|
|
67
|
+
* its own font-size. When these components are placed inside a styled() wrapper,
|
|
68
|
+
* trying to style them via styled(DSTypography) triggers TypeScript errors
|
|
69
|
+
* because DSTypography exposes "as" props and variant-specific overrides.
|
|
70
|
+
*
|
|
71
|
+
* Instead of wrapping DSTypography directly in styled(), we target the
|
|
72
|
+
* underlying rendered elements via className/id. This avoids the TS conflicts
|
|
73
|
+
* while still allowing us to override their font-size reliably.
|
|
74
|
+
*/
|
|
75
|
+
#typography-page-index {
|
|
76
|
+
font-size: ${fontSize18Base16}rem;
|
|
77
|
+
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
78
|
+
font-size: ${fontSize18Base13}rem;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
.typography-page-info-and-detail {
|
|
82
|
+
font-size: ${fontSize13Base16}rem;
|
|
83
|
+
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
84
|
+
font-size: ${fontSize13Base13}rem;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
`;
|
|
88
|
+
const StyledHeader = styled(Grid)`
|
|
89
|
+
font-size: ${fontSize12Base16}rem;
|
|
90
|
+
@media (min-width: ${({ theme }) => theme.breakpoints.small}) {
|
|
91
|
+
font-size: ${fontSize12Base13}rem;
|
|
92
|
+
}
|
|
93
|
+
`;
|
|
94
|
+
const StyledPageInfo = styled.div`
|
|
95
|
+
display: flex;
|
|
96
|
+
gap: 4px;
|
|
97
|
+
`;
|
|
98
|
+
export {
|
|
99
|
+
InvisibleDiv,
|
|
100
|
+
PaginationDropdownButtonPaginator,
|
|
101
|
+
StyledDropdown,
|
|
102
|
+
StyledHeader,
|
|
103
|
+
StyledPageInfo
|
|
104
|
+
};
|
|
105
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/styled.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV3 } from '@elliemae/ds-button-v2';\n\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu-v2';\nimport Grid from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport type {} from '@xstyled/system';\nimport { DSPaginationName, PAGINATOR_SLOTS } from './constants/index.js';\n\nconst fontSize13Base13 = 13 / 13;\nconst fontSize13Base16 = 13 / 16;\nconst fontSize18Base13 = 18 / 13;\nconst fontSize18Base16 = 18 / 16;\nconst fontSize12Base13 = 12 / 13;\nconst fontSize12Base16 = 12 / 16;\n\nconst styledFocusCss = css`\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n pointer-events: none;\n z-index: 7;\n }\n`;\n\nexport const InvisibleDiv = styled.div`\n opacity: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n position: absolute;\n`;\n\nconst paginationDropdownButtonCommonStyles = css`\n min-height: 42px;\n display: grid;\n grid-auto-flow: column;\n justify-content: center;\n align-items: center;\n position: relative;\n padding-left: 16px;\n padding-right: 16px;\n grid-gap: 8px;\n font-size: 13px;\n color: neutral-700;\n cursor: pointer;\n border-radius: 0;\n font-weight: ${(props) => props.theme.fontWeights.regular};\n :focus {\n ${styledFocusCss}\n }\n &[aria-disabled='true'] {\n cursor: not-allowed;\n }\n white-space: nowrap;\n`;\nexport const PaginationDropdownButtonPaginator = styled(DSButtonV3, {\n name: DSPaginationName,\n slot: PAGINATOR_SLOTS.PAGINATOR,\n preserveLegacyDataTestId: true,\n})`\n ${paginationDropdownButtonCommonStyles}\n`;\n\nexport const StyledDropdown = styled(DSDropdownMenuV2)`\n /**\n * Pagination uses DSTypography internally, but each typography variant defines\n * its own font-size. When these components are placed inside a styled() wrapper,\n * trying to style them via styled(DSTypography) triggers TypeScript errors\n * because DSTypography exposes \"as\" props and variant-specific overrides.\n *\n * Instead of wrapping DSTypography directly in styled(), we target the\n * underlying rendered elements via className/id. This avoids the TS conflicts\n * while still allowing us to override their font-size reliably.\n */\n #typography-page-index {\n font-size: ${fontSize18Base16}rem;\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${fontSize18Base13}rem;\n }\n }\n .typography-page-info-and-detail {\n font-size: ${fontSize13Base16}rem;\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${fontSize13Base13}rem;\n }\n }\n`;\nexport const StyledHeader = styled(Grid)`\n font-size: ${fontSize12Base16}rem;\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${fontSize12Base13}rem;\n }\n`;\n\nexport const StyledPageInfo = styled.div`\n display: flex;\n gap: 4px;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAE3B,SAAS,wBAAwB;AACjC,OAAO,UAAU;AACjB,SAAS,KAAK,cAAc;AAE5B,SAAS,kBAAkB,uBAAuB;AAElD,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAE9B,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvD,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQnC,MAAM,uCAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAc5B,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA,MAErD,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOb,MAAM,oCAAoC,OAAO,YAAY;AAAA,EAClE,MAAM;AAAA,EACN,MAAM,gBAAgB;AAAA,EACtB,0BAA0B;AAC5B,CAAC;AAAA,IACG,oCAAoC;AAAA;AAGjC,MAAM,iBAAiB,OAAO,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAYpC,gBAAgB;AAAA,yBACR,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,gBAAgB;AAAA;AAAA;AAAA;AAAA,iBAIlB,gBAAgB;AAAA,yBACR,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,gBAAgB;AAAA;AAAA;AAAA;AAI5B,MAAM,eAAe,OAAO,IAAI;AAAA,eACxB,gBAAgB;AAAA,uBACR,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,iBAC5C,gBAAgB;AAAA;AAAA;AAI1B,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const SlotPropsAsObj = {
|
|
3
|
+
dsPaginationPaginator: { "aria-label": "just a typescript test" }
|
|
4
|
+
};
|
|
5
|
+
const SlotPropsAsFunctions = {
|
|
6
|
+
dsPaginationPaginator: () => ({ "aria-label": "just a typescript test" })
|
|
7
|
+
};
|
|
8
|
+
const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
|
|
9
|
+
//# sourceMappingURL=slot-props.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/typescript-testing/slot-props.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSPaginationName, PAGINATOR_SLOTS } from '../constants/index.js';\nimport type { DSPaginatorT } from '../react-desc-prop-types.js';\n\nconst SlotPropsAsObj: Partial<DSPaginatorT.Props> = {\n dsPaginationPaginator: { 'aria-label': 'just a typescript test' },\n};\nconst SlotPropsAsFunctions: DSPaginatorT.SlotFunctionArguments = {\n dsPaginationPaginator: () => ({ 'aria-label': 'just a typescript test' }),\n};\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n TypescriptHelpersT.PropsForSlots<typeof DSPaginationName, typeof PAGINATOR_SLOTS>\n> = SlotPropsAsFunctions;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACMvB,MAAM,iBAA8C;AAAA,EAClD,uBAAuB,EAAE,cAAc,yBAAyB;AAClE;AACA,MAAM,uBAA2D;AAAA,EAC/D,uBAAuB,OAAO,EAAE,cAAc,yBAAyB;AACzE;AACA,MAAM,6CAEF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/typescript-testing/typescript-testing.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSPaginator } from '../index.js';\nimport type { DSPaginatorT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSPaginatorT.Props;\ntype ComponentPropsInternals = DSPaginatorT.InternalProps;\ntype ComponentPropsDefaultProps = DSPaginatorT.DefaultProps;\ntype ComponentPropsOptionalProps = DSPaginatorT.OptionalProps;\ntype ComponentPropsRequiredProps = DSPaginatorT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n pageCount: 0,\n isLoadingPageCount: false,\n onPageChange: () => null,\n};\n\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n pageCount: 0,\n isLoadingPageCount: false,\n pageIndex: 1,\n onPageChange: () => null,\n pageDetails: [],\n pageDetailsTitle: '',\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n pageCount: 0,\n isLoadingPageCount: false,\n pageIndex: 1,\n onPageChange: () => null,\n pageDetails: [],\n pageDetailsTitle: '',\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n pageCount: 0,\n isLoadingPageCount: false,\n pageIndex: 1,\n onPageChange: () => null,\n pageDetails: [],\n pageDetailsTitle: '',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n pageCount: 0,\n isLoadingPageCount: false,\n pageIndex: 1,\n onPageChange: () => null,\n pageDetails: [],\n pageDetailsTitle: '',\n} as const;\n\nconst ExampleUsageComponent = () => (\n <>\n {/* works with explicitly casted props, all syntaxes */}\n <DSPaginator {...testExplicitDefinition} />\n <DSPaginator {...testInferedTypeCompatibility} />\n <DSPaginator {...testDefinitionAsConst} />\n {/* works with inline values */}\n <DSPaginator\n pageCount={0}\n isLoadingPageCount={false}\n pageIndex={1}\n onPageChange={() => null}\n pageDetails={[]}\n pageDetailsTitle=\"\"\n />\n </>\n);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACuFrB,mBAEE,KAFF;AAtFF,SAAS,mBAAmB;AAU5B,MAAM,oBAAiD,CAAC;AAExD,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D;AAAA,EAC/D,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,cAAc,MAAM;AACtB;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,EACpB,aAAa,CAAC;AAAA,EACd,kBAAkB;AACpB;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,EACpB,aAAa,CAAC;AAAA,EACd,kBAAkB;AACpB;AAGA,MAAM,+BAA+B;AAAA,EACnC,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,EACpB,aAAa,CAAC;AAAA,EACd,kBAAkB;AACpB;AAEA,MAAM,wBAAwB;AAAA,EAC5B,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,EACpB,aAAa,CAAC;AAAA,EACd,kBAAkB;AACpB;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,eAAa,GAAG,wBAAwB;AAAA,EACzC,oBAAC,eAAa,GAAG,8BAA8B;AAAA,EAC/C,oBAAC,eAAa,GAAG,uBAAuB;AAAA,EAExC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,cAAc,MAAM;AAAA,MACpB,aAAa,CAAC;AAAA,MACd,kBAAiB;AAAA;AAAA,EACnB;AAAA,GACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu-v2";
|
|
4
|
+
import { ChevronDown } from "@elliemae/ds-icons";
|
|
5
|
+
import { describe } from "@elliemae/ds-props-helpers";
|
|
6
|
+
import { DSTypography } from "@elliemae/ds-typography";
|
|
7
|
+
import { useMemo } from "react";
|
|
8
|
+
import { usePerPageSelector } from "./config/usePerPageSelector.js";
|
|
9
|
+
import { DSPerPageSelectorName, PER_PAGE_SELECTOR_DATA_TESTID } from "./constants/index.js";
|
|
10
|
+
import { DSPerPageSelectorPropTypesSchema } from "./react-desc-prop-types.js";
|
|
11
|
+
import { PaginationDropdownButtonPerPageSelector, StyledHeader } from "./styled.js";
|
|
12
|
+
const Header = () => /* @__PURE__ */ jsx(StyledHeader, { children: "Per Page" });
|
|
13
|
+
const DSPerPageSelector = (props) => {
|
|
14
|
+
const {
|
|
15
|
+
propsWithDefault: { pageSize, onPageSizeChange },
|
|
16
|
+
xstyledProps,
|
|
17
|
+
globalAttributes,
|
|
18
|
+
ownerPropsConfig,
|
|
19
|
+
actionRef,
|
|
20
|
+
btnRef,
|
|
21
|
+
chevronRef,
|
|
22
|
+
chevronWidth,
|
|
23
|
+
isOpened,
|
|
24
|
+
options,
|
|
25
|
+
setIsOpened
|
|
26
|
+
} = usePerPageSelector(props);
|
|
27
|
+
const buttonOnClick = useMemo(() => {
|
|
28
|
+
if (globalAttributes.onClick) return globalAttributes.onClick;
|
|
29
|
+
return () => setIsOpened((prev) => !prev);
|
|
30
|
+
}, [globalAttributes.onClick, setIsOpened]);
|
|
31
|
+
const maxOptionsLength = useMemo(() => {
|
|
32
|
+
const maxLength = options.reduce((acc, cur) => Math.max(acc, ("label" in cur ? cur.label : "").length), 0);
|
|
33
|
+
return maxLength;
|
|
34
|
+
}, [options]);
|
|
35
|
+
return /* @__PURE__ */ jsx(
|
|
36
|
+
DSDropdownMenuV2,
|
|
37
|
+
{
|
|
38
|
+
isOpened,
|
|
39
|
+
options,
|
|
40
|
+
selectedOptions: { [pageSize.toString()]: true },
|
|
41
|
+
onOptionClick: (_, clickedOption) => {
|
|
42
|
+
onPageSizeChange(clickedOption.value);
|
|
43
|
+
setIsOpened(false);
|
|
44
|
+
btnRef.current?.focus();
|
|
45
|
+
},
|
|
46
|
+
onClickOutside: () => {
|
|
47
|
+
setIsOpened(false);
|
|
48
|
+
btnRef.current?.focus();
|
|
49
|
+
},
|
|
50
|
+
customOffset: [-(chevronWidth + 7), 2],
|
|
51
|
+
startPlacementPreference: "top-start",
|
|
52
|
+
actionRef,
|
|
53
|
+
minWidth: `calc(${chevronWidth + 60}px + ${maxOptionsLength}ch)`,
|
|
54
|
+
maxHeight: 300,
|
|
55
|
+
HeaderComp: Header,
|
|
56
|
+
children: /* @__PURE__ */ jsxs(
|
|
57
|
+
PaginationDropdownButtonPerPageSelector,
|
|
58
|
+
{
|
|
59
|
+
buttonType: "raw",
|
|
60
|
+
innerRef: btnRef,
|
|
61
|
+
"aria-pressed": isOpened,
|
|
62
|
+
"aria-label": `${pageSize} rows per page. Press to select rows per page`,
|
|
63
|
+
"data-testid": PER_PAGE_SELECTOR_DATA_TESTID.PER_PAGE_SELECTOR,
|
|
64
|
+
...globalAttributes,
|
|
65
|
+
...xstyledProps,
|
|
66
|
+
...ownerPropsConfig,
|
|
67
|
+
onClick: buttonOnClick,
|
|
68
|
+
children: [
|
|
69
|
+
/* @__PURE__ */ jsxs(
|
|
70
|
+
DSTypography,
|
|
71
|
+
{
|
|
72
|
+
variant: "b1",
|
|
73
|
+
as: "span",
|
|
74
|
+
className: "typography-per-page-selector",
|
|
75
|
+
children: [
|
|
76
|
+
pageSize,
|
|
77
|
+
" / page"
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
),
|
|
81
|
+
/* @__PURE__ */ jsx(ChevronDown, { color: ["brand-primary", "700"], innerRef: chevronRef })
|
|
82
|
+
]
|
|
83
|
+
}
|
|
84
|
+
)
|
|
85
|
+
}
|
|
86
|
+
);
|
|
87
|
+
};
|
|
88
|
+
DSPerPageSelector.displayName = DSPerPageSelectorName;
|
|
89
|
+
const DSPerPageSelectorWithSchema = describe(DSPerPageSelector);
|
|
90
|
+
DSPerPageSelectorWithSchema.propTypes = DSPerPageSelectorPropTypesSchema;
|
|
91
|
+
export {
|
|
92
|
+
DSPerPageSelector,
|
|
93
|
+
DSPerPageSelectorWithSchema
|
|
94
|
+
};
|
|
95
|
+
//# sourceMappingURL=DSPerPageSelector.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPerPageSelector/DSPerPageSelector.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSButtonT } from '@elliemae/ds-button-v2';\nimport { DSDropdownMenuV2, type DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport React, { useMemo } from 'react';\nimport { usePerPageSelector } from './config/usePerPageSelector.js';\nimport { DSPerPageSelectorName, PER_PAGE_SELECTOR_DATA_TESTID } from './constants/index.js';\nimport { DSPerPageSelectorPropTypesSchema, type DSPerPageSelectorT } from './react-desc-prop-types.js';\nimport { PaginationDropdownButtonPerPageSelector, StyledHeader } from './styled.js';\n\nconst Header = () => <StyledHeader>Per Page</StyledHeader>;\n\nconst DSPerPageSelector: React.ComponentType<DSPerPageSelectorT.Props> = (props) => {\n const {\n propsWithDefault: { pageSize, onPageSizeChange },\n xstyledProps,\n globalAttributes,\n ownerPropsConfig,\n actionRef,\n btnRef,\n chevronRef,\n chevronWidth,\n isOpened,\n options,\n setIsOpened,\n } = usePerPageSelector(props);\n const buttonOnClick: DSButtonT.Props['onClick'] = useMemo(() => {\n if (globalAttributes.onClick) return globalAttributes.onClick as DSButtonT.Props['onClick'];\n return () => setIsOpened((prev) => !prev);\n }, [globalAttributes.onClick, setIsOpened]);\n\n const maxOptionsLength = useMemo(() => {\n const maxLength = options.reduce((acc, cur) => Math.max(acc, ('label' in cur ? cur.label : '').length), 0);\n return maxLength;\n }, [options]);\n\n return (\n <DSDropdownMenuV2\n isOpened={isOpened}\n options={options}\n selectedOptions={{ [pageSize.toString()]: true }}\n onOptionClick={(_, clickedOption) => {\n onPageSizeChange((clickedOption as DSDropdownMenuT.ItemSingleOptions).value as number);\n setIsOpened(false);\n btnRef.current?.focus();\n }}\n onClickOutside={() => {\n setIsOpened(false);\n btnRef.current?.focus();\n }}\n customOffset={[-(chevronWidth + 7), 2]}\n startPlacementPreference=\"top-start\"\n actionRef={actionRef}\n /**\n * Calculate the dynamic minWidth for the Dropdown:\n *\n * Structure of the width:\n * 16px (left padding)\n * + chevronWidth (size of the chevron icon)\n * + 8px (spacing between chevron and text)\n * + maxOptionsLength ch (longest option label measured in characters)\n * + 16px (right padding)\n * + a small scrollbar placeholder (to avoid text wrapping when scrollbars appear)\n *\n * Why `calc()`?\n * - When using pure px values, the initial render works correctly.\n * - But when switching between different stories in Storybook \u2014 especially those\n * that modify font-size or typography scale \u2014 the measured width from the ref\n * becomes outdated and ends up returning a smaller value than it should.\n * - That incorrect (underestimated) width causes the longest option label to wrap,\n * even though there is actually enough space.\n *\n * By using `calc()` + `ch` units, the component stays responsive to font-size changes\n * without requiring an extra ref to measure the page size text width.\n */\n minWidth={`calc(${chevronWidth + 60}px + ${maxOptionsLength}ch)`}\n maxHeight={300}\n HeaderComp={Header}\n >\n <PaginationDropdownButtonPerPageSelector\n buttonType=\"raw\"\n innerRef={btnRef}\n aria-pressed={isOpened}\n aria-label={`${pageSize} rows per page. Press to select rows per page`}\n data-testid={PER_PAGE_SELECTOR_DATA_TESTID.PER_PAGE_SELECTOR}\n {...globalAttributes}\n {...xstyledProps}\n {...ownerPropsConfig}\n onClick={buttonOnClick}\n >\n <DSTypography\n variant=\"b1\"\n as=\"span\"\n /**\n * Pagination uses DSTypography internally, but each typography variant defines\n * its own font-size. When these components are placed inside a styled() wrapper,\n * trying to style them via styled(DSTypography) triggers TypeScript errors\n * because DSTypography exposes \"as\" props and variant-specific overrides.\n *\n * Instead of wrapping DSTypography directly in styled(), we target the\n * underlying rendered elements via className/id. This avoids the TS conflicts\n * while still allowing us to override their font-size reliably.\n */\n className=\"typography-per-page-selector\"\n >\n {pageSize} / page\n </DSTypography>\n\n <ChevronDown color={['brand-primary', '700']} innerRef={chevronRef} />\n </PaginationDropdownButtonPerPageSelector>\n </DSDropdownMenuV2>\n );\n};\n\nDSPerPageSelector.displayName = DSPerPageSelectorName;\nconst DSPerPageSelectorWithSchema = describe(DSPerPageSelector);\nDSPerPageSelectorWithSchema.propTypes = DSPerPageSelectorPropTypesSchema;\n\nexport { DSPerPageSelector, DSPerPageSelectorWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACWF,cAgFb,YAhFa;AAVrB,SAAS,wBAA8C;AACvD,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAgB,eAAe;AAC/B,SAAS,0BAA0B;AACnC,SAAS,uBAAuB,qCAAqC;AACrE,SAAS,wCAAiE;AAC1E,SAAS,yCAAyC,oBAAoB;AAEtE,MAAM,SAAS,MAAM,oBAAC,gBAAa,sBAAQ;AAE3C,MAAM,oBAAmE,CAAC,UAAU;AAClF,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,iBAAiB;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB,KAAK;AAC5B,QAAM,gBAA4C,QAAQ,MAAM;AAC9D,QAAI,iBAAiB,QAAS,QAAO,iBAAiB;AACtD,WAAO,MAAM,YAAY,CAAC,SAAS,CAAC,IAAI;AAAA,EAC1C,GAAG,CAAC,iBAAiB,SAAS,WAAW,CAAC;AAE1C,QAAM,mBAAmB,QAAQ,MAAM;AACrC,UAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,QAAQ,KAAK,IAAI,MAAM,WAAW,MAAM,IAAI,QAAQ,IAAI,MAAM,GAAG,CAAC;AACzG,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,iBAAiB,EAAE,CAAC,SAAS,SAAS,CAAC,GAAG,KAAK;AAAA,MAC/C,eAAe,CAAC,GAAG,kBAAkB;AACnC,yBAAkB,cAAoD,KAAe;AACrF,oBAAY,KAAK;AACjB,eAAO,SAAS,MAAM;AAAA,MACxB;AAAA,MACA,gBAAgB,MAAM;AACpB,oBAAY,KAAK;AACjB,eAAO,SAAS,MAAM;AAAA,MACxB;AAAA,MACA,cAAc,CAAC,EAAE,eAAe,IAAI,CAAC;AAAA,MACrC,0BAAyB;AAAA,MACzB;AAAA,MAuBA,UAAU,QAAQ,eAAe,EAAE,QAAQ,gBAAgB;AAAA,MAC3D,WAAW;AAAA,MACX,YAAY;AAAA,MAEZ;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,UAAU;AAAA,UACV,gBAAc;AAAA,UACd,cAAY,GAAG,QAAQ;AAAA,UACvB,eAAa,8BAA8B;AAAA,UAC1C,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,SAAS;AAAA,UAET;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,IAAG;AAAA,gBAWH,WAAU;AAAA,gBAET;AAAA;AAAA,kBAAS;AAAA;AAAA;AAAA,YACZ;AAAA,YAEA,oBAAC,eAAY,OAAO,CAAC,iBAAiB,KAAK,GAAG,UAAU,YAAY;AAAA;AAAA;AAAA,MACtE;AAAA;AAAA,EACF;AAEJ;AAEA,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["
|
|
3
|
+
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/config/getOptions.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { range } from 'lodash-es';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\n\nexport const generateOption = (\n value: number | DSDropdownMenuT.ItemSingleOptions,\n): DSDropdownMenuT.ItemSingleOptions => {\n if (typeof value === 'object') {\n return value;\n }\n return {\n dsId: value.toString(),\n value,\n label: value.toString(),\n type: 'single',\n } as const;\n};\n\nexport const getOptions = (step: number, min: number, max: number) => {\n const options = range(min, max + step, step).map(generateOption);\n return min === 0 ? options.slice(1, options.length) : options;\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa;AAGf,MAAM,iBAAiB,CAC5B,UACsC;AACtC,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA,EACT;AACA,SAAO;AAAA,IACL,MAAM,MAAM,SAAS;AAAA,IACrB;AAAA,IACA,OAAO,MAAM,SAAS;AAAA,IACtB,MAAM;AAAA,EACR;AACF;AAEO,MAAM,aAAa,CAAC,MAAc,KAAa,QAAgB;AACpE,QAAM,UAAU,MAAM,KAAK,MAAM,MAAM,IAAI,EAAE,IAAI,cAAc;AAC/D,SAAO,QAAQ,IAAI,QAAQ,MAAM,GAAG,QAAQ,MAAM,IAAI;AACxD;",
|
|
6
6
|
"names": []
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import {
|
|
3
|
+
useGetGlobalAttributes,
|
|
4
|
+
useGetXstyledProps,
|
|
5
|
+
useMemoMergePropsWithDefault,
|
|
6
|
+
useOwnerProps
|
|
7
|
+
} from "@elliemae/ds-props-helpers";
|
|
8
|
+
import React2, { useEffect, useMemo, useRef, useState } from "react";
|
|
9
|
+
import { DSPerPageSelectorPropTypesSchema, defaultProps } from "../react-desc-prop-types.js";
|
|
10
|
+
import { useValidateProps } from "./useValidateProps.js";
|
|
11
|
+
import { generateOption, getOptions } from "./getOptions.js";
|
|
12
|
+
import { useOnElementResize } from "../../shared/useOnElementOnResize.js";
|
|
13
|
+
const usePerPageSelector = (propsFromUser) => {
|
|
14
|
+
const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
|
|
15
|
+
useValidateProps(propsWithDefault, DSPerPageSelectorPropTypesSchema);
|
|
16
|
+
const xstyledProps = useGetXstyledProps(propsWithDefault);
|
|
17
|
+
const globalAttributes = useGetGlobalAttributes(propsWithDefault);
|
|
18
|
+
const ownerPropsConfig = useOwnerProps(propsWithDefault);
|
|
19
|
+
const { pageSize, perPageOptions, perPageStep, minPerPage, maxPerPage } = propsWithDefault;
|
|
20
|
+
const [isOpened, setIsOpened] = useState(false);
|
|
21
|
+
const options = useMemo(() => {
|
|
22
|
+
if (perPageOptions) return perPageOptions.map(generateOption);
|
|
23
|
+
return getOptions(perPageStep, minPerPage, maxPerPage);
|
|
24
|
+
}, [maxPerPage, minPerPage, perPageOptions, perPageStep]);
|
|
25
|
+
const actionRef = useRef({});
|
|
26
|
+
const btnRef = useRef(null);
|
|
27
|
+
const chevronRef = useRef(null);
|
|
28
|
+
const { width: chevronWidth } = useOnElementResize(chevronRef);
|
|
29
|
+
useEffect(() => {
|
|
30
|
+
if (isOpened) {
|
|
31
|
+
actionRef.current.setActiveDescendant(pageSize.toString());
|
|
32
|
+
actionRef.current.scrollOptionIntoView(pageSize.toString());
|
|
33
|
+
}
|
|
34
|
+
}, [isOpened]);
|
|
35
|
+
return React2.useMemo(
|
|
36
|
+
() => ({
|
|
37
|
+
propsWithDefault,
|
|
38
|
+
xstyledProps,
|
|
39
|
+
globalAttributes,
|
|
40
|
+
ownerPropsConfig,
|
|
41
|
+
actionRef,
|
|
42
|
+
btnRef,
|
|
43
|
+
chevronRef,
|
|
44
|
+
chevronWidth,
|
|
45
|
+
isOpened,
|
|
46
|
+
options,
|
|
47
|
+
setIsOpened
|
|
48
|
+
}),
|
|
49
|
+
[propsWithDefault, xstyledProps, globalAttributes, ownerPropsConfig, isOpened, options, chevronRef, chevronWidth]
|
|
50
|
+
);
|
|
51
|
+
};
|
|
52
|
+
export {
|
|
53
|
+
usePerPageSelector
|
|
54
|
+
};
|
|
55
|
+
//# sourceMappingURL=usePerPageSelector.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/config/usePerPageSelector.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport {\n useGetGlobalAttributes,\n useGetXstyledProps,\n useMemoMergePropsWithDefault,\n useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { type DSPerPageSelectorT, DSPerPageSelectorPropTypesSchema, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { generateOption, getOptions } from './getOptions.js';\nimport { useOnElementResize } from '../../shared/useOnElementOnResize.js';\n\nexport const usePerPageSelector = (propsFromUser: DSPerPageSelectorT.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSPerPageSelectorT.InternalProps>(propsFromUser, defaultProps);\n useValidateProps(propsWithDefault, DSPerPageSelectorPropTypesSchema);\n // =============================================================================\n // XSTYLED PROPS\n // =============================================================================\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n // =============================================================================\n // GLOBAL ATTRIBUTES\n // =============================================================================\n const globalAttributes = useGetGlobalAttributes<\n DSPerPageSelectorT.InternalProps,\n HTMLButtonElement,\n DSButtonV3T.Props\n >(propsWithDefault);\n // =============================================================================\n // OWNER PROPS\n // =============================================================================\n const ownerPropsConfig = useOwnerProps(propsWithDefault);\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n // custom code goes here, this is an example\n // const instanceUid = React.useMemo(() => `ds-per-page-selector-${uid(5)}`, []);\n\n const { pageSize, perPageOptions, perPageStep, minPerPage, maxPerPage } = propsWithDefault;\n const [isOpened, setIsOpened] = useState(false);\n const options = useMemo(() => {\n if (perPageOptions) return perPageOptions.map(generateOption);\n return getOptions(perPageStep, minPerPage, maxPerPage);\n }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);\n\n const actionRef = useRef<Record<string, (dsId: string) => void>>({});\n const btnRef = useRef<HTMLButtonElement>(null);\n\n const chevronRef = useRef<HTMLElement>(null);\n const { width: chevronWidth } = useOnElementResize(chevronRef);\n\n useEffect(() => {\n if (isOpened) {\n actionRef.current.setActiveDescendant(pageSize.toString());\n actionRef.current.scrollOptionIntoView(pageSize.toString());\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpened]);\n\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n xstyledProps,\n globalAttributes,\n ownerPropsConfig,\n actionRef,\n btnRef,\n chevronRef,\n chevronWidth,\n isOpened,\n options,\n setIsOpened,\n }),\n [propsWithDefault, xstyledProps, globalAttributes, ownerPropsConfig, isOpened, options, chevronRef, chevronWidth],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAOA,UAAS,WAAW,SAAS,QAAQ,gBAAgB;AAE5D,SAAkC,kCAAkC,oBAAoB;AACxF,SAAS,wBAAwB;AACjC,SAAS,gBAAgB,kBAAkB;AAC3C,SAAS,0BAA0B;AAE5B,MAAM,qBAAqB,CAAC,kBAA4C;AAI7E,QAAM,mBAAmB,6BAA+D,eAAe,YAAY;AACnH,mBAAiB,kBAAkB,gCAAgC;AAInE,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,mBAAmB,uBAIvB,gBAAgB;AAIlB,QAAM,mBAAmB,cAAc,gBAAgB;AAMvD,QAAM,EAAE,UAAU,gBAAgB,aAAa,YAAY,WAAW,IAAI;AAC1E,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,eAAgB,QAAO,eAAe,IAAI,cAAc;AAC5D,WAAO,WAAW,aAAa,YAAY,UAAU;AAAA,EACvD,GAAG,CAAC,YAAY,YAAY,gBAAgB,WAAW,CAAC;AAExD,QAAM,YAAY,OAA+C,CAAC,CAAC;AACnE,QAAM,SAAS,OAA0B,IAAI;AAE7C,QAAM,aAAa,OAAoB,IAAI;AAC3C,QAAM,EAAE,OAAO,aAAa,IAAI,mBAAmB,UAAU;AAE7D,YAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAoB,SAAS,SAAS,CAAC;AACzD,gBAAU,QAAQ,qBAAqB,SAAS,SAAS,CAAC;AAAA,IAC5D;AAAA,EAEF,GAAG,CAAC,QAAQ,CAAC;AAOb,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,cAAc,kBAAkB,kBAAkB,UAAU,SAAS,YAAY,YAAY;AAAA,EAClH;AACF;",
|
|
6
|
+
"names": ["React"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
|
|
3
|
+
import { DSPerPageSelectorName } from "../constants/index.js";
|
|
4
|
+
const useValidateProps = (props, propTypes) => {
|
|
5
|
+
useValidateTypescriptPropTypes(props, propTypes, DSPerPageSelectorName);
|
|
6
|
+
};
|
|
7
|
+
export {
|
|
8
|
+
useValidateProps
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=useValidateProps.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/config/useValidateProps.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSPerPageSelectorT } from '../react-desc-prop-types.js';\nimport { DSPerPageSelectorName } from '../constants/index.js';\n\nexport const useValidateProps = (\n props: DSPerPageSelectorT.InternalProps,\n propTypes: ValidationMap<DSPerPageSelectorT.Props>,\n): void => {\n // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n useValidateTypescriptPropTypes(props, propTypes, DSPerPageSelectorName);\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,6BAA6B;AAE/B,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,iCAA+B,OAAO,WAAW,qBAAqB;AACxE;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { slotObjectToDataTestIds } from "@elliemae/ds-system";
|
|
3
|
+
import { DSPaginationName } from "../../../constants/index.js";
|
|
4
|
+
const DSPerPageSelectorName = "DSPerPageSelector";
|
|
5
|
+
const EXAMPLE_CONSTANTS = {
|
|
6
|
+
HELLO: "WORLD",
|
|
7
|
+
FOO: "BAR"
|
|
8
|
+
};
|
|
9
|
+
const PER_PAGE_SELECTOR_SLOTS = {
|
|
10
|
+
PER_PAGE_SELECTOR: "per-page-selector"
|
|
11
|
+
};
|
|
12
|
+
const PER_PAGE_SELECTOR_DATA_TESTID = slotObjectToDataTestIds(DSPaginationName, PER_PAGE_SELECTOR_SLOTS);
|
|
13
|
+
export {
|
|
14
|
+
DSPaginationName,
|
|
15
|
+
DSPerPageSelectorName,
|
|
16
|
+
EXAMPLE_CONSTANTS,
|
|
17
|
+
PER_PAGE_SELECTOR_DATA_TESTID,
|
|
18
|
+
PER_PAGE_SELECTOR_SLOTS
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/constants/index.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { DSPaginationName } from '../../../constants/index.js';\nexport { DSPaginationName };\n\n// This should be used only for displayName, and useValidateProps.\n// For slots definition, use parent component name\nexport const DSPerPageSelectorName = 'DSPerPageSelector';\n\nexport const EXAMPLE_CONSTANTS = {\n HELLO: 'WORLD',\n FOO: 'BAR',\n} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PER_PAGE_SELECTOR_SLOTS = {\n PER_PAGE_SELECTOR: 'per-page-selector',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PER_PAGE_SELECTOR_DATA_TESTID = slotObjectToDataTestIds(DSPaginationName, PER_PAGE_SELECTOR_SLOTS);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AACxC,SAAS,wBAAwB;AAK1B,MAAM,wBAAwB;AAE9B,MAAM,oBAAoB;AAAA,EAC/B,OAAO;AAAA,EACP,KAAK;AACP;AAGO,MAAM,0BAA0B;AAAA,EACrC,mBAAmB;AACrB;AAGO,MAAM,gCAAgC,wBAAwB,kBAAkB,uBAAuB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,74 +1,11 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
|
|
5
|
-
import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu-v2";
|
|
6
|
-
import { ChevronDown } from "@elliemae/ds-icons";
|
|
7
|
-
import { perPageSelectorDefaultProps, DSPerPageSelectorPropTypesSchema } from "../../react-desc-prop-types.js";
|
|
8
|
-
import { PaginationDropdownButton } from "../../styled.js";
|
|
9
|
-
import { PerPageSelectorName } from "../../DSPaginationDefinitions.js";
|
|
10
|
-
import { usePerPageSelector } from "./usePerPageSelector.js";
|
|
11
|
-
import { PAGINATION_DATA_TESTID } from "../../PaginationDataTestID.js";
|
|
12
|
-
const Header = () => /* @__PURE__ */ jsx(Fragment, { children: "Per Page" });
|
|
13
|
-
const DSPerPageSelector = (props) => {
|
|
14
|
-
const propsWithDefault = useMemoMergePropsWithDefault(
|
|
15
|
-
props,
|
|
16
|
-
perPageSelectorDefaultProps
|
|
17
|
-
);
|
|
18
|
-
useValidateTypescriptPropTypes(propsWithDefault, DSPerPageSelectorPropTypesSchema, PerPageSelectorName);
|
|
19
|
-
const { pageSize, onPageSizeChange } = propsWithDefault;
|
|
20
|
-
const { actionRef, btnRef, width, isOpened, setIsOpened, options, globalAttributes, xstyledAttributes } = usePerPageSelector(propsWithDefault);
|
|
21
|
-
const buttonOnClick = useMemo(() => {
|
|
22
|
-
if (globalAttributes.onClick) return globalAttributes.onClick;
|
|
23
|
-
return () => setIsOpened((prev) => !prev);
|
|
24
|
-
}, [globalAttributes.onClick, setIsOpened]);
|
|
25
|
-
return /* @__PURE__ */ jsx(
|
|
26
|
-
DSDropdownMenuV2,
|
|
27
|
-
{
|
|
28
|
-
isOpened,
|
|
29
|
-
options,
|
|
30
|
-
selectedOptions: { [pageSize.toString()]: true },
|
|
31
|
-
onOptionClick: (_, clickedOption) => {
|
|
32
|
-
onPageSizeChange(clickedOption.value);
|
|
33
|
-
setIsOpened(false);
|
|
34
|
-
btnRef.current?.focus();
|
|
35
|
-
},
|
|
36
|
-
onClickOutside: () => {
|
|
37
|
-
setIsOpened(false);
|
|
38
|
-
btnRef.current?.focus();
|
|
39
|
-
},
|
|
40
|
-
customOffset: [-23, 2],
|
|
41
|
-
startPlacementPreference: "top-start",
|
|
42
|
-
actionRef,
|
|
43
|
-
minWidth: width,
|
|
44
|
-
maxHeight: 300,
|
|
45
|
-
HeaderComp: Header,
|
|
46
|
-
children: /* @__PURE__ */ jsxs(
|
|
47
|
-
PaginationDropdownButton,
|
|
48
|
-
{
|
|
49
|
-
buttonType: "raw",
|
|
50
|
-
innerRef: btnRef,
|
|
51
|
-
"aria-pressed": isOpened,
|
|
52
|
-
"aria-label": `${pageSize} rows per page. Press to select rows per page`,
|
|
53
|
-
"data-testid": PAGINATION_DATA_TESTID.PER_PAGE_SELECTOR,
|
|
54
|
-
...globalAttributes,
|
|
55
|
-
...xstyledAttributes,
|
|
56
|
-
onClick: buttonOnClick,
|
|
57
|
-
children: [
|
|
58
|
-
pageSize,
|
|
59
|
-
" / page",
|
|
60
|
-
/* @__PURE__ */ jsx(ChevronDown, { color: ["brand-primary", "700"] })
|
|
61
|
-
]
|
|
62
|
-
}
|
|
63
|
-
)
|
|
64
|
-
}
|
|
65
|
-
);
|
|
66
|
-
};
|
|
67
|
-
DSPerPageSelector.displayName = PerPageSelectorName;
|
|
68
|
-
const DSPerPageSelectorWithSchema = describe(DSPerPageSelector).description("Per Page Selector");
|
|
69
|
-
DSPerPageSelectorWithSchema.propTypes = DSPerPageSelectorPropTypesSchema;
|
|
2
|
+
import { DSPerPageSelector, DSPerPageSelectorWithSchema } from "./DSPerPageSelector.js";
|
|
3
|
+
import { DSPerPageSelectorName, PER_PAGE_SELECTOR_DATA_TESTID, PER_PAGE_SELECTOR_SLOTS } from "./constants/index.js";
|
|
70
4
|
export {
|
|
71
5
|
DSPerPageSelector,
|
|
72
|
-
|
|
6
|
+
DSPerPageSelectorName,
|
|
7
|
+
DSPerPageSelectorWithSchema,
|
|
8
|
+
PER_PAGE_SELECTOR_DATA_TESTID,
|
|
9
|
+
PER_PAGE_SELECTOR_SLOTS
|
|
73
10
|
};
|
|
74
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPerPageSelector/index.
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
3
|
+
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPerPageSelector/index.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSPerPageSelector, DSPerPageSelectorWithSchema } from './DSPerPageSelector.js';\nexport { DSPerPageSelectorName, PER_PAGE_SELECTOR_DATA_TESTID, PER_PAGE_SELECTOR_SLOTS } from './constants/index.js';\nexport type { DSPerPageSelectorT } from './react-desc-prop-types.js';\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mBAAmB,mCAAmC;AAC/D,SAAS,uBAAuB,+BAA+B,+BAA+B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import {
|
|
3
|
+
PropTypes,
|
|
4
|
+
getPropsPerSlotPropTypes,
|
|
5
|
+
globalAttributesPropTypes,
|
|
6
|
+
xstyledPropTypes
|
|
7
|
+
} from "@elliemae/ds-props-helpers";
|
|
8
|
+
import { DSPaginationName, PER_PAGE_SELECTOR_SLOTS } from "./constants/index.js";
|
|
9
|
+
const defaultProps = {
|
|
10
|
+
pageSize: 10,
|
|
11
|
+
onPageSizeChange: () => null,
|
|
12
|
+
perPageStep: 5,
|
|
13
|
+
minPerPage: 0,
|
|
14
|
+
maxPerPage: 100
|
|
15
|
+
};
|
|
16
|
+
const DSPerPageSelectorPropTypes = {
|
|
17
|
+
...getPropsPerSlotPropTypes(DSPaginationName, PER_PAGE_SELECTOR_SLOTS),
|
|
18
|
+
...globalAttributesPropTypes,
|
|
19
|
+
...xstyledPropTypes,
|
|
20
|
+
pageSize: PropTypes.number.description("The current page size").defaultValue(10),
|
|
21
|
+
onPageSizeChange: PropTypes.func.description("Function invoked when the page size changes").defaultValue(() => null),
|
|
22
|
+
perPageOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.object])).description("The available options for page size").defaultValue([10]),
|
|
23
|
+
minPerPage: PropTypes.number.description("Min for the per page options").defaultValue(0),
|
|
24
|
+
maxPerPage: PropTypes.number.description("Max for the per page options").defaultValue(100),
|
|
25
|
+
perPageStep: PropTypes.number.description("Step for the per page options").defaultValue(5)
|
|
26
|
+
};
|
|
27
|
+
const DSPerPageSelectorPropTypesSchema = DSPerPageSelectorPropTypes;
|
|
28
|
+
export {
|
|
29
|
+
DSPerPageSelectorPropTypes,
|
|
30
|
+
DSPerPageSelectorPropTypesSchema,
|
|
31
|
+
defaultProps
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPerPageSelector/react-desc-prop-types.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n PropTypes,\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSPaginationName, PER_PAGE_SELECTOR_SLOTS } from './constants/index.js';\n\nexport declare namespace DSPerPageSelectorT {\n export type SlotFunctionArguments = {\n dsPaginationPerPageSelector: () => object;\n };\n export interface RequiredProps {}\n\n export interface DefaultProps {\n pageSize: number;\n onPageSizeChange: (pageSize: number) => void;\n perPageStep: number;\n minPerPage: number;\n maxPerPage: number;\n }\n\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSPaginationName, typeof PER_PAGE_SELECTOR_SLOTS> {\n perPageOptions?: (number | DSDropdownMenuT.ItemSingleOptions)[];\n }\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps {}\n}\n\nexport const defaultProps: DSPerPageSelectorT.DefaultProps = {\n pageSize: 10,\n onPageSizeChange: () => null,\n perPageStep: 5,\n minPerPage: 0,\n maxPerPage: 100,\n};\n\nexport const DSPerPageSelectorPropTypes: DSPropTypesSchema<DSPerPageSelectorT.Props> = {\n ...getPropsPerSlotPropTypes(DSPaginationName, PER_PAGE_SELECTOR_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n pageSize: PropTypes.number.description('The current page size').defaultValue(10),\n onPageSizeChange: PropTypes.func.description('Function invoked when the page size changes').defaultValue(() => null),\n perPageOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.object]))\n .description('The available options for page size')\n .defaultValue([10]),\n minPerPage: PropTypes.number.description('Min for the per page options').defaultValue(0),\n maxPerPage: PropTypes.number.description('Max for the per page options').defaultValue(100),\n perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n};\n\nexport const DSPerPageSelectorPropTypesSchema =\n DSPerPageSelectorPropTypes as unknown as ValidationMap<DSPerPageSelectorT.Props>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,kBAAkB,+BAA+B;AAmCnD,MAAM,eAAgD;AAAA,EAC3D,UAAU;AAAA,EACV,kBAAkB,MAAM;AAAA,EACxB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AACd;AAEO,MAAM,6BAA0E;AAAA,EACrF,GAAG,yBAAyB,kBAAkB,uBAAuB;AAAA,EACrE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,kBAAkB,UAAU,KAAK,YAAY,6CAA6C,EAAE,aAAa,MAAM,IAAI;AAAA,EACnH,gBAAgB,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC,EACxF,YAAY,qCAAqC,EACjD,aAAa,CAAC,EAAE,CAAC;AAAA,EACpB,YAAY,UAAU,OAAO,YAAY,8BAA8B,EAAE,aAAa,CAAC;AAAA,EACvF,YAAY,UAAU,OAAO,YAAY,8BAA8B,EAAE,aAAa,GAAG;AAAA,EACzF,aAAa,UAAU,OAAO,YAAY,+BAA+B,EAAE,aAAa,CAAC;AAC3F;AAEO,MAAM,mCACX;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|