@ngrok/mantle 0.1.59 → 0.1.60

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.
@@ -1,2 +1,2 @@
1
- import{a as z,c as b,d as v,e as x,g as y}from"./chunk-O5Z6DOXW.js";import{b as d}from"./chunk-Q7RN2OC6.js";import{a as P,b as C}from"./chunk-A7RPXAZX.js";import"./chunk-AIC74XBY.js";import"./chunk-MODFDUXR.js";import"./chunk-YPS473FU.js";import"./chunk-GJVJTVHQ.js";import"./chunk-NREABJ6Y.js";import{a as p}from"./chunk-A5H52ODC.js";import{CaretLeft as U}from"@phosphor-icons/react/dist/icons/CaretLeft";import{CaretRight as V}from"@phosphor-icons/react/dist/icons/CaretRight";import{createContext as k,forwardRef as m,useContext as F,useState as $}from"react";import f from"tiny-invariant";import{jsx as r,jsxs as l}from"react/jsx-runtime";var h=k(void 0),N=m(({className:s,children:n,defaultPageSize:a,...o},i)=>{let[e,t]=$(a);return r(h.Provider,{value:{defaultPageSize:a,pageSize:e,setPageSize:t},children:r("div",{className:p("inline-flex items-center justify-between gap-2",s),ref:i,...o,children:n})})});N.displayName="CursorPagination";var B=m(({hasNextPage:s,hasPreviousPage:n,onNextPage:a,onPreviousPage:o,...i},e)=>l(C,{appearance:"panel",ref:e,...i,children:[r(P,{appearance:"ghost",disabled:!n,icon:r(U,{}),label:"Previous page",onClick:o,size:"sm",type:"button"}),r(d,{orientation:"vertical",className:"min-h-5"}),r(P,{appearance:"ghost",disabled:!s,icon:r(V,{}),label:"Next page",onClick:a,size:"sm",type:"button"})]}));B.displayName="CursorButtons";var D=[5,10,20,50,100],O=m(({className:s,pageSizes:n=D,onChangePageSize:a,...o},i)=>{let e=F(h);return f(e,"CursorPageSizeSelect must be used as a child of a CursorPagination component"),f(n.includes(e.defaultPageSize),"defaultPageSize must be included in pageSizes"),f(n.includes(e.pageSize),"pageSize must be included in pageSizes"),l(z,{defaultValue:`${e.pageSize}`,onChange:t=>{let g=Number.parseInt(t,10);Number.isNaN(g)&&(g=e.defaultPageSize),e.setPageSize(g),a?.(g)},children:[r(v,{ref:i,className:p("w-auto min-w-36",s),value:e.pageSize,...o,children:r(b,{})}),r(x,{width:"trigger",children:n.map(t=>l(y,{value:`${t}`,children:[t," per page"]},t))})]})});O.displayName="CursorPageSizeSelect";import{useState as T}from"react";function H({listSize:s,pageSize:n}){let[a,o]=T(1),[i,e]=T(n),t=Math.ceil(s/i),g=(a-1)*i,c=a>1,S=a<t;function w(u){let L=Math.max(1,Math.min(u,t));o(L)}function M(){S&&o(u=>Math.min(u+1,t))}function R(){c&&o(u=>Math.max(u-1,1))}function E(u){e(u),o(1)}function G(){o(t)}function I(){o(1)}return{currentPage:a,goToFirstPage:I,goToLastPage:G,goToPage:w,hasNextPage:S,hasPreviousPage:c,nextPage:M,offset:g,pageSize:i,previousPage:R,setPageSize:E,totalPages:t}}export{B as CursorButtons,O as CursorPageSizeSelect,N as CursorPagination,H as useOffsetPagination};
1
+ import{a as b,c as z,d as v,e as x,g as y}from"./chunk-O5Z6DOXW.js";import{b as d}from"./chunk-Q7RN2OC6.js";import{a as P,b as C}from"./chunk-A7RPXAZX.js";import"./chunk-AIC74XBY.js";import"./chunk-MODFDUXR.js";import"./chunk-YPS473FU.js";import"./chunk-GJVJTVHQ.js";import"./chunk-NREABJ6Y.js";import{a as p}from"./chunk-A5H52ODC.js";import{CaretLeft as V}from"@phosphor-icons/react/dist/icons/CaretLeft";import{CaretRight as k}from"@phosphor-icons/react/dist/icons/CaretRight";import{createContext as F,forwardRef as m,useContext as $,useState as D}from"react";import f from"tiny-invariant";import{jsx as n,jsxs as c}from"react/jsx-runtime";var h=F(void 0),N=m(({className:s,children:a,defaultPageSize:r,...e},i)=>{let[t,o]=D(r);return n(h.Provider,{value:{defaultPageSize:r,pageSize:t,setPageSize:o},children:n("div",{className:p("inline-flex items-center justify-between gap-2",s),ref:i,...e,children:a})})});N.displayName="CursorPagination";var B=m(({hasNextPage:s,hasPreviousPage:a,onNextPage:r,onPreviousPage:e,...i},t)=>c(C,{appearance:"panel",ref:t,...i,children:[n(P,{appearance:"ghost",disabled:!a,icon:n(V,{}),label:"Previous page",onClick:e,size:"sm",type:"button"}),n(d,{orientation:"vertical",className:"min-h-5"}),n(P,{appearance:"ghost",disabled:!s,icon:n(k,{}),label:"Next page",onClick:r,size:"sm",type:"button"})]}));B.displayName="CursorButtons";var H=[5,10,20,50,100],O=m(({className:s,pageSizes:a=H,onChangePageSize:r,...e},i)=>{let t=$(h);return f(t,"CursorPageSizeSelect must be used as a child of a CursorPagination component"),f(a.includes(t.defaultPageSize),"defaultPageSize must be included in pageSizes"),f(a.includes(t.pageSize),"pageSize must be included in pageSizes"),c(b,{defaultValue:`${t.pageSize}`,onChange:o=>{let g=Number.parseInt(o,10);Number.isNaN(g)&&(g=t.defaultPageSize),t.setPageSize(g),r?.(g)},children:[n(v,{ref:i,className:p("w-auto min-w-36",s),value:t.pageSize,...e,children:n(z,{})}),n(x,{width:"trigger",children:a.map(o=>c(y,{value:`${o}`,children:[o," per page"]},o))})]})});O.displayName="CursorPageSizeSelect";import{useEffect as T,useState as w}from"react";function j({listSize:s,pageSize:a}){let[r,e]=w(1),[i,t]=w(a);T(()=>{t(a),e(1)},[a]),T(()=>{e(1)},[s]);let o=Math.ceil(s/i),g=(r-1)*i,l=r>1,S=r<o;function M(u){let U=Math.max(1,Math.min(u,o));e(U)}function E(){S&&e(u=>Math.min(u+1,o))}function R(){l&&e(u=>Math.max(u-1,1))}function G(u){t(u),e(1)}function I(){e(o)}function L(){e(1)}return{currentPage:r,goToFirstPage:L,goToLastPage:I,goToPage:M,hasNextPage:S,hasPreviousPage:l,nextPage:E,offset:g,pageSize:i,previousPage:R,setPageSize:G,totalPages:o}}export{B as CursorButtons,O as CursorPageSizeSelect,N as CursorPagination,j as useOffsetPagination};
2
2
  //# sourceMappingURL=pagination.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../packages/pagination/src/cursor-pagination.tsx","../packages/pagination/src/use-offset-pagination.tsx"],"sourcesContent":["import { CaretLeft } from \"@phosphor-icons/react/dist/icons/CaretLeft\";\nimport { CaretRight } from \"@phosphor-icons/react/dist/icons/CaretRight\";\nimport { createContext, forwardRef, useContext, useState, type ComponentProps, type ElementRef } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { ButtonGroup, IconButton } from \"../../button\";\nimport { cx } from \"../../cx\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"../../select\";\nimport { Separator } from \"../../separator\";\n\ntype CursorPaginationContextValue = {\n\tdefaultPageSize: number;\n\tpageSize: number;\n\tsetPageSize: (value: number) => void;\n};\n\nconst CursorPaginationContext = createContext<CursorPaginationContextValue | undefined>(undefined);\n\ntype CursorPaginationProps = ComponentProps<\"div\"> & {\n\tdefaultPageSize: number;\n};\n\n/**\n * A pagination component for use with cursor-based pagination.\n *\n * Cursor-based pagination is a way of loading data in chunks by using a cursor\n * from the last item on the current page to know where to start the next set,\n * making sure nothing is missed or repeated. Like a linked list, but for chunks\n * of data. It doesn't let you jump to a specific page or know how many total pages\n * there are, but it's more efficient for large or real-time data sets.\n */\nconst CursorPagination = forwardRef<HTMLDivElement, CursorPaginationProps>(\n\t({ className, children, defaultPageSize, ...props }, ref) => {\n\t\tconst [pageSize, setPageSize] = useState<number>(defaultPageSize);\n\n\t\treturn (\n\t\t\t<CursorPaginationContext.Provider value={{ defaultPageSize, pageSize, setPageSize }}>\n\t\t\t\t<div className={cx(\"inline-flex items-center justify-between gap-2\", className)} ref={ref} {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</CursorPaginationContext.Provider>\n\t\t);\n\t},\n);\nCursorPagination.displayName = \"CursorPagination\";\n\ntype CursorButtonsProps = Omit<ComponentProps<typeof ButtonGroup>, \"appearance\"> & {\n\thasNextPage: boolean;\n\thasPreviousPage: boolean;\n\tonNextPage?: () => void;\n\tonPreviousPage?: () => void;\n};\n\n/**\n * A pair of buttons for navigating between pages of data when using cursor-based pagination.\n */\nconst CursorButtons = forwardRef<ElementRef<typeof ButtonGroup>, CursorButtonsProps>(\n\t({ hasNextPage, hasPreviousPage, onNextPage, onPreviousPage, ...props }, ref) => {\n\t\t// TODO(cody): this _feels_ like a good spot for left and right arrow keys to navigate between pages when focused on the buttons\n\n\t\treturn (\n\t\t\t<ButtonGroup appearance=\"panel\" ref={ref} {...props}>\n\t\t\t\t<IconButton\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasPreviousPage}\n\t\t\t\t\ticon={<CaretLeft />}\n\t\t\t\t\tlabel=\"Previous page\"\n\t\t\t\t\tonClick={onPreviousPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t\t<Separator orientation=\"vertical\" className=\"min-h-5\" />\n\t\t\t\t<IconButton\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasNextPage}\n\t\t\t\t\ticon={<CaretRight />}\n\t\t\t\t\tlabel=\"Next page\"\n\t\t\t\t\tonClick={onNextPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t</ButtonGroup>\n\t\t);\n\t},\n);\nCursorButtons.displayName = \"CursorButtons\";\n\nconst defaultPageSizes = [5, 10, 20, 50, 100] as const;\n\ntype CursorPageSizeSelectProps = Omit<ComponentProps<typeof SelectTrigger>, \"children\"> & {\n\tpageSizes?: readonly number[];\n\tonChangePageSize?: (value: number) => void;\n};\n\n/**\n * A select input for changing the number of items per page when using cursor-based pagination.\n */\nconst CursorPageSizeSelect = forwardRef<ElementRef<typeof SelectTrigger>, CursorPageSizeSelectProps>(\n\t({ className, pageSizes = defaultPageSizes, onChangePageSize, ...rest }, ref) => {\n\t\tconst ctx = useContext(CursorPaginationContext);\n\n\t\tinvariant(ctx, \"CursorPageSizeSelect must be used as a child of a CursorPagination component\");\n\n\t\tinvariant(pageSizes.includes(ctx.defaultPageSize), \"defaultPageSize must be included in pageSizes\");\n\n\t\tinvariant(pageSizes.includes(ctx.pageSize), \"pageSize must be included in pageSizes\");\n\n\t\treturn (\n\t\t\t<Select\n\t\t\t\tdefaultValue={`${ctx.pageSize}`}\n\t\t\t\tonChange={(value) => {\n\t\t\t\t\tlet newPageSize = Number.parseInt(value, 10);\n\t\t\t\t\tif (Number.isNaN(newPageSize)) {\n\t\t\t\t\t\tnewPageSize = ctx.defaultPageSize;\n\t\t\t\t\t}\n\t\t\t\t\tctx.setPageSize(newPageSize);\n\t\t\t\t\tonChangePageSize?.(newPageSize);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SelectTrigger ref={ref} className={cx(\"w-auto min-w-36\", className)} value={ctx.pageSize} {...rest}>\n\t\t\t\t\t<SelectValue />\n\t\t\t\t</SelectTrigger>\n\t\t\t\t<SelectContent width=\"trigger\">\n\t\t\t\t\t{pageSizes.map((size) => (\n\t\t\t\t\t\t<SelectItem key={size} value={`${size}`}>\n\t\t\t\t\t\t\t{size} per page\n\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t))}\n\t\t\t\t</SelectContent>\n\t\t\t</Select>\n\t\t);\n\t},\n);\nCursorPageSizeSelect.displayName = \"CursorPageSizeSelect\";\n\nexport {\n\t//,\n\tCursorPagination,\n\tCursorButtons,\n\tCursorPageSizeSelect,\n};\n\nexport type {\n\t//,\n\tCursorPaginationProps,\n\tCursorButtonsProps,\n\tCursorPageSizeSelectProps,\n};\n","import { useState } from \"react\";\n\ntype UseOffsetPaginationProps = {\n\t/**\n\t * The total number of items in the list to be paginated.\n\t */\n\tlistSize: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n};\n\ntype OffsetPaginationState = {\n\t/**\n\t * The current page number, 1-indexed (starting at 1).\n\t */\n\tcurrentPage: number;\n\t/**\n\t * Whether there is a previous page.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * Whether there is a next page.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Go to a specific page.\n\t */\n\tgoToPage: (page: number) => void;\n\t/**\n\t * Go to the first page.\n\t */\n\tgoToFirstPage: () => void;\n\t/**\n\t * Go to the last page.\n\t */\n\tgoToLastPage: () => void;\n\t/**\n\t * Go to the next page.\n\t */\n\tnextPage: () => void;\n\t/**\n\t * The offset of the current page in the list.\n\t */\n\toffset: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * Go to the previous page.\n\t */\n\tpreviousPage: () => void;\n\t/**\n\t * Set the number of items per page. This will reset the current page to the first page.\n\t */\n\tsetPageSize: (size: number) => void;\n\t/**\n\t * The total number of pages.\n\t */\n\ttotalPages: number;\n};\n\n/**\n * A headless hook for managing offset-based pagination state\n */\nfunction useOffsetPagination({ listSize, pageSize }: UseOffsetPaginationProps): OffsetPaginationState {\n\tconst [currentPage, setCurrentPage] = useState(1);\n\tconst [currentPageSize, setCurrentPageSize] = useState(pageSize);\n\n\tconst totalPages = Math.ceil(listSize / currentPageSize);\n\tconst offset = (currentPage - 1) * currentPageSize;\n\n\tconst hasPreviousPage = currentPage > 1;\n\tconst hasNextPage = currentPage < totalPages;\n\n\tfunction goToPage(page: number) {\n\t\tconst nextPage = Math.max(1, Math.min(page, totalPages));\n\t\tsetCurrentPage(nextPage);\n\t}\n\n\tfunction nextPage() {\n\t\tif (hasNextPage) {\n\t\t\tsetCurrentPage((prev) => Math.min(prev + 1, totalPages));\n\t\t}\n\t}\n\n\tfunction previousPage() {\n\t\tif (hasPreviousPage) {\n\t\t\tsetCurrentPage((prev) => Math.max(prev - 1, 1));\n\t\t}\n\t}\n\n\tfunction setPageSize(size: number) {\n\t\tsetCurrentPageSize(size);\n\t\tsetCurrentPage(1); // reset to the first page when page size changes\n\t}\n\n\tfunction goToLastPage() {\n\t\tsetCurrentPage(totalPages);\n\t}\n\n\tfunction goToFirstPage() {\n\t\tsetCurrentPage(1);\n\t}\n\n\treturn {\n\t\tcurrentPage,\n\t\tgoToFirstPage,\n\t\tgoToLastPage,\n\t\tgoToPage,\n\t\thasNextPage,\n\t\thasPreviousPage,\n\t\tnextPage,\n\t\toffset,\n\t\tpageSize: currentPageSize,\n\t\tpreviousPage,\n\t\tsetPageSize,\n\t\ttotalPages,\n\t};\n}\n\nexport {\n\t//,\n\tuseOffsetPagination,\n};\n\nexport type {\n\t//,\n\tUseOffsetPaginationProps,\n\tOffsetPaginationState,\n};\n"],"mappings":"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","names":["CaretLeft","CaretRight","createContext","forwardRef","useContext","useState","invariant","jsx","jsxs","CursorPaginationContext","createContext","CursorPagination","forwardRef","className","children","defaultPageSize","props","ref","pageSize","setPageSize","useState","cx","CursorButtons","hasNextPage","hasPreviousPage","onNextPage","onPreviousPage","ButtonGroup","IconButton","CaretLeft","Separator","CaretRight","defaultPageSizes","CursorPageSizeSelect","pageSizes","onChangePageSize","rest","ctx","useContext","invariant","Select","value","newPageSize","SelectTrigger","SelectValue","SelectContent","size","SelectItem","useState","useOffsetPagination","listSize","pageSize","currentPage","setCurrentPage","currentPageSize","setCurrentPageSize","totalPages","offset","hasPreviousPage","hasNextPage","goToPage","page","nextPage","prev","previousPage","setPageSize","size","goToLastPage","goToFirstPage"]}
1
+ {"version":3,"sources":["../packages/pagination/src/cursor-pagination.tsx","../packages/pagination/src/use-offset-pagination.tsx"],"sourcesContent":["import { CaretLeft } from \"@phosphor-icons/react/dist/icons/CaretLeft\";\nimport { CaretRight } from \"@phosphor-icons/react/dist/icons/CaretRight\";\nimport { createContext, forwardRef, useContext, useState, type ComponentProps, type ElementRef } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { ButtonGroup, IconButton } from \"../../button\";\nimport { cx } from \"../../cx\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"../../select\";\nimport { Separator } from \"../../separator\";\n\ntype CursorPaginationContextValue = {\n\tdefaultPageSize: number;\n\tpageSize: number;\n\tsetPageSize: (value: number) => void;\n};\n\nconst CursorPaginationContext = createContext<CursorPaginationContextValue | undefined>(undefined);\n\ntype CursorPaginationProps = ComponentProps<\"div\"> & {\n\tdefaultPageSize: number;\n};\n\n/**\n * A pagination component for use with cursor-based pagination.\n *\n * Cursor-based pagination is a way of loading data in chunks by using a cursor\n * from the last item on the current page to know where to start the next set,\n * making sure nothing is missed or repeated. Like a linked list, but for chunks\n * of data. It doesn't let you jump to a specific page or know how many total pages\n * there are, but it's more efficient for large or real-time data sets.\n */\nconst CursorPagination = forwardRef<HTMLDivElement, CursorPaginationProps>(\n\t({ className, children, defaultPageSize, ...props }, ref) => {\n\t\tconst [pageSize, setPageSize] = useState<number>(defaultPageSize);\n\n\t\treturn (\n\t\t\t<CursorPaginationContext.Provider value={{ defaultPageSize, pageSize, setPageSize }}>\n\t\t\t\t<div className={cx(\"inline-flex items-center justify-between gap-2\", className)} ref={ref} {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</CursorPaginationContext.Provider>\n\t\t);\n\t},\n);\nCursorPagination.displayName = \"CursorPagination\";\n\ntype CursorButtonsProps = Omit<ComponentProps<typeof ButtonGroup>, \"appearance\"> & {\n\thasNextPage: boolean;\n\thasPreviousPage: boolean;\n\tonNextPage?: () => void;\n\tonPreviousPage?: () => void;\n};\n\n/**\n * A pair of buttons for navigating between pages of data when using cursor-based pagination.\n */\nconst CursorButtons = forwardRef<ElementRef<typeof ButtonGroup>, CursorButtonsProps>(\n\t({ hasNextPage, hasPreviousPage, onNextPage, onPreviousPage, ...props }, ref) => {\n\t\t// TODO(cody): this _feels_ like a good spot for left and right arrow keys to navigate between pages when focused on the buttons\n\n\t\treturn (\n\t\t\t<ButtonGroup appearance=\"panel\" ref={ref} {...props}>\n\t\t\t\t<IconButton\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasPreviousPage}\n\t\t\t\t\ticon={<CaretLeft />}\n\t\t\t\t\tlabel=\"Previous page\"\n\t\t\t\t\tonClick={onPreviousPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t\t<Separator orientation=\"vertical\" className=\"min-h-5\" />\n\t\t\t\t<IconButton\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasNextPage}\n\t\t\t\t\ticon={<CaretRight />}\n\t\t\t\t\tlabel=\"Next page\"\n\t\t\t\t\tonClick={onNextPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t</ButtonGroup>\n\t\t);\n\t},\n);\nCursorButtons.displayName = \"CursorButtons\";\n\nconst defaultPageSizes = [5, 10, 20, 50, 100] as const;\n\ntype CursorPageSizeSelectProps = Omit<ComponentProps<typeof SelectTrigger>, \"children\"> & {\n\tpageSizes?: readonly number[];\n\tonChangePageSize?: (value: number) => void;\n};\n\n/**\n * A select input for changing the number of items per page when using cursor-based pagination.\n */\nconst CursorPageSizeSelect = forwardRef<ElementRef<typeof SelectTrigger>, CursorPageSizeSelectProps>(\n\t({ className, pageSizes = defaultPageSizes, onChangePageSize, ...rest }, ref) => {\n\t\tconst ctx = useContext(CursorPaginationContext);\n\n\t\tinvariant(ctx, \"CursorPageSizeSelect must be used as a child of a CursorPagination component\");\n\n\t\tinvariant(pageSizes.includes(ctx.defaultPageSize), \"defaultPageSize must be included in pageSizes\");\n\n\t\tinvariant(pageSizes.includes(ctx.pageSize), \"pageSize must be included in pageSizes\");\n\n\t\treturn (\n\t\t\t<Select\n\t\t\t\tdefaultValue={`${ctx.pageSize}`}\n\t\t\t\tonChange={(value) => {\n\t\t\t\t\tlet newPageSize = Number.parseInt(value, 10);\n\t\t\t\t\tif (Number.isNaN(newPageSize)) {\n\t\t\t\t\t\tnewPageSize = ctx.defaultPageSize;\n\t\t\t\t\t}\n\t\t\t\t\tctx.setPageSize(newPageSize);\n\t\t\t\t\tonChangePageSize?.(newPageSize);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SelectTrigger ref={ref} className={cx(\"w-auto min-w-36\", className)} value={ctx.pageSize} {...rest}>\n\t\t\t\t\t<SelectValue />\n\t\t\t\t</SelectTrigger>\n\t\t\t\t<SelectContent width=\"trigger\">\n\t\t\t\t\t{pageSizes.map((size) => (\n\t\t\t\t\t\t<SelectItem key={size} value={`${size}`}>\n\t\t\t\t\t\t\t{size} per page\n\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t))}\n\t\t\t\t</SelectContent>\n\t\t\t</Select>\n\t\t);\n\t},\n);\nCursorPageSizeSelect.displayName = \"CursorPageSizeSelect\";\n\nexport {\n\t//,\n\tCursorPagination,\n\tCursorButtons,\n\tCursorPageSizeSelect,\n};\n\nexport type {\n\t//,\n\tCursorPaginationProps,\n\tCursorButtonsProps,\n\tCursorPageSizeSelectProps,\n};\n","import { useEffect, useState } from \"react\";\n\ntype UseOffsetPaginationProps = {\n\t/**\n\t * The total number of items in the list to be paginated.\n\t */\n\tlistSize: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n};\n\ntype OffsetPaginationState = {\n\t/**\n\t * The current page number, 1-indexed (starting at 1).\n\t */\n\tcurrentPage: number;\n\t/**\n\t * Whether there is a previous page.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * Whether there is a next page.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Go to a specific page.\n\t */\n\tgoToPage: (page: number) => void;\n\t/**\n\t * Go to the first page.\n\t */\n\tgoToFirstPage: () => void;\n\t/**\n\t * Go to the last page.\n\t */\n\tgoToLastPage: () => void;\n\t/**\n\t * Go to the next page.\n\t */\n\tnextPage: () => void;\n\t/**\n\t * The offset of the current page in the list.\n\t */\n\toffset: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * Go to the previous page.\n\t */\n\tpreviousPage: () => void;\n\t/**\n\t * Set the number of items per page. This will reset the current page to the first page.\n\t */\n\tsetPageSize: (size: number) => void;\n\t/**\n\t * The total number of pages.\n\t */\n\ttotalPages: number;\n};\n\n/**\n * A headless hook for managing offset-based pagination state\n */\nfunction useOffsetPagination({ listSize, pageSize }: UseOffsetPaginationProps): OffsetPaginationState {\n\tconst [currentPage, setCurrentPage] = useState(1);\n\tconst [currentPageSize, setCurrentPageSize] = useState(pageSize);\n\n\t// Reset the current page to 1 when the page size prop changes\n\tuseEffect(() => {\n\t\tsetCurrentPageSize(pageSize);\n\t\tsetCurrentPage(1);\n\t}, [pageSize]);\n\n\t// Reset the current page to 1 when the list size prop changes\n\tuseEffect(() => {\n\t\tsetCurrentPage(1);\n\t}, [listSize]);\n\n\tconst totalPages = Math.ceil(listSize / currentPageSize);\n\tconst offset = (currentPage - 1) * currentPageSize;\n\n\tconst hasPreviousPage = currentPage > 1;\n\tconst hasNextPage = currentPage < totalPages;\n\n\tfunction goToPage(page: number) {\n\t\tconst nextPage = Math.max(1, Math.min(page, totalPages));\n\t\tsetCurrentPage(nextPage);\n\t}\n\n\tfunction nextPage() {\n\t\tif (hasNextPage) {\n\t\t\tsetCurrentPage((prev) => Math.min(prev + 1, totalPages));\n\t\t}\n\t}\n\n\tfunction previousPage() {\n\t\tif (hasPreviousPage) {\n\t\t\tsetCurrentPage((prev) => Math.max(prev - 1, 1));\n\t\t}\n\t}\n\n\tfunction setPageSize(size: number) {\n\t\tsetCurrentPageSize(size);\n\t\tsetCurrentPage(1); // reset to the first page when page size changes\n\t}\n\n\tfunction goToLastPage() {\n\t\tsetCurrentPage(totalPages);\n\t}\n\n\tfunction goToFirstPage() {\n\t\tsetCurrentPage(1);\n\t}\n\n\treturn {\n\t\tcurrentPage,\n\t\tgoToFirstPage,\n\t\tgoToLastPage,\n\t\tgoToPage,\n\t\thasNextPage,\n\t\thasPreviousPage,\n\t\tnextPage,\n\t\toffset,\n\t\tpageSize: currentPageSize,\n\t\tpreviousPage,\n\t\tsetPageSize,\n\t\ttotalPages,\n\t};\n}\n\nexport {\n\t//,\n\tuseOffsetPagination,\n};\n\nexport type {\n\t//,\n\tUseOffsetPaginationProps,\n\tOffsetPaginationState,\n};\n"],"mappings":"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","names":["CaretLeft","CaretRight","createContext","forwardRef","useContext","useState","invariant","jsx","jsxs","CursorPaginationContext","createContext","CursorPagination","forwardRef","className","children","defaultPageSize","props","ref","pageSize","setPageSize","useState","cx","CursorButtons","hasNextPage","hasPreviousPage","onNextPage","onPreviousPage","ButtonGroup","IconButton","CaretLeft","Separator","CaretRight","defaultPageSizes","CursorPageSizeSelect","pageSizes","onChangePageSize","rest","ctx","useContext","invariant","Select","value","newPageSize","SelectTrigger","SelectValue","SelectContent","size","SelectItem","useEffect","useState","useOffsetPagination","listSize","pageSize","currentPage","setCurrentPage","currentPageSize","setCurrentPageSize","totalPages","offset","hasPreviousPage","hasNextPage","goToPage","page","nextPage","prev","previousPage","setPageSize","size","goToLastPage","goToFirstPage"]}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "mantle is ngrok's UI library and design system.",
4
4
  "author": "ngrok",
5
5
  "license": "MIT",
6
- "version": "0.1.59",
6
+ "version": "0.1.60",
7
7
  "homepage": "https://mantle.ngrok.com",
8
8
  "repository": {
9
9
  "type": "git",