@nixxie-cms/core 1.0.0 → 1.0.2

package/src/{___internal-do-not-use-will-break-in-patch → internal-unstable}/admin-ui/pages/ListPage/PaginationControls.tsx

@@ -1,170 +1,170 @@
-import { ActionButton } from '@keystar/ui/button'
-import { Icon } from '@keystar/ui/icon'
-import { chevronLeftIcon } from '@keystar/ui/icon/icons/chevronLeftIcon'
-import { chevronRightIcon } from '@keystar/ui/icon/icons/chevronRightIcon'
-import { undo2Icon } from '@keystar/ui/icon/icons/undo2Icon'
-import { HStack } from '@keystar/ui/layout'
-import { Picker } from '@keystar/ui/picker'
-import { Item } from '@keystar/ui/tag'
-import { Tooltip, TooltipTrigger } from '@keystar/ui/tooltip'
-import { Text } from '@keystar/ui/typography'
-import type { ReactNode } from 'react'
-import { useMemo } from 'react'
-
-type PageItem = {
-  label: string
-  id: number
-}
-
-export function PaginationControls(props: {
-  singular: string
-  plural: string
-  currentPage: number
-  pageSize: number
-  total: number
-  defaultPageSize?: number
-  onChangePage: (page: number) => void
-  onChangePageSize: (pageSize: number) => void
-  extraActions?: ReactNode
-}) {
-  const { currentPage, total, pageSize, defaultPageSize } = props
-  const { stats } = getPaginationStats(props)
-
-  const nextPage = currentPage + 1
-  const prevPage = currentPage - 1
-  const lastPage = Math.max(Math.ceil(total / pageSize), 1)
-
-  const pageItems = useMemo(() => {
-    const result: PageItem[] = []
-    for (let page = 1; page <= lastPage; page++) {
-      result.push({
-        id: page,
-        label: String(page),
-      })
-    }
-    return result
-  }, [lastPage])
-
-  return (
-    <HStack
-      as="nav"
-      role="navigation"
-      aria-label="Pagination"
-      // alignItems="center"
-      justifyContent="space-between"
-    >
-      {/*
-        left-side
-        mobile: counts
-        desktop^: items per page (picker), counts
-      */}
-      <HStack gap="large" alignItems="center">
-        <HStack isHidden={{ below: 'desktop' }} gap="regular" alignItems="center">
-          <Text id="items-per-page">{props.plural} per page:</Text>
-          <Picker
-            aria-labelledby="items-per-page"
-            items={PAGE_SIZES.map(n => ({ label: String(n), id: n }))}
-            onSelectionChange={key => {
-              props.onChangePageSize(Number(key))
-            }}
-            selectedKey={pageSize}
-            width="scale.1000"
-          >
-            {item => <Item>{item.label}</Item>}
-          </Picker>
-          {defaultPageSize !== undefined && pageSize !== defaultPageSize ? (
-            <TooltipTrigger>
-              <ActionButton
-                aria-label="reset"
-                onPress={() => props.onChangePageSize(defaultPageSize)}
-                prominence="low"
-              >
-                <Icon src={undo2Icon} />
-              </ActionButton>
-              <Tooltip>Reset to defaults</Tooltip>
-            </TooltipTrigger>
-          ) : null}
-        </HStack>
-        <Text color="neutralSecondary">{stats}</Text>
-      </HStack>
-
-      {/*
-        right-side
-        mobile: next/prev
-        desktop^: current page (picker), next/prev
-      */}
-      <HStack gap="large" alignItems="center">
-        <HStack isHidden={{ below: 'desktop' }} gap="regular" alignItems="center">
-          <Picker
-            // prominence="low"
-            aria-label={`Page number, of ${lastPage} pages`}
-            items={pageItems}
-            onSelectionChange={page => {
-              props.onChangePage(Number(page))
-            }}
-            selectedKey={currentPage}
-            width="scale.1000"
-          >
-            {item => <Item>{item.label}</Item>}
-          </Picker>
-          <Text>of {lastPage} pages</Text>
-        </HStack>
-        <HStack gap="regular">
-          <ActionButton
-            aria-label="Previous page"
-            isDisabled={prevPage < 1}
-            onPress={() => props.onChangePage(prevPage)}
-            // prominence="low"
-          >
-            <Icon src={chevronLeftIcon} />
-          </ActionButton>
-          <ActionButton
-            aria-label="Next page"
-            isDisabled={nextPage > lastPage}
-            onPress={() => props.onChangePage(nextPage)}
-            // prominence="low"
-          >
-            <Icon src={chevronRightIcon} />
-          </ActionButton>
-          {props.extraActions}
-        </HStack>
-      </HStack>
-    </HStack>
-  )
-}
-
-function getPaginationStats({
-  singular,
-  plural,
-  pageSize,
-  currentPage,
-  total,
-}: {
-  singular: string
-  plural: string
-  pageSize: number
-  currentPage: number
-  total: number
-}) {
-  let stats = ''
-  if (total > pageSize) {
-    const start = pageSize * (currentPage - 1) + 1
-    const end = Math.min(start + pageSize - 1, total)
-    stats = `${start} - ${end} of ${total} ${plural}`
-  } else {
-    if (total > 1 && plural) {
-      stats = `${total} ${plural}`
-    } else if (total === 1 && singular) {
-      stats = `${total} ${singular}`
-    }
-  }
-  return { stats }
-}
-
-const PAGE_SIZES = [10, 25, 50, 100]
-
-export function snapValueToClosest(input: number, range = PAGE_SIZES) {
-  return range.reduce((prev, curr) =>
-    Math.abs(curr - input) < Math.abs(prev - input) ? curr : prev
-  )
-}
+import { ActionButton } from '@keystar/ui/button'
+import { Icon } from '@keystar/ui/icon'
+import { chevronLeftIcon } from '@keystar/ui/icon/icons/chevronLeftIcon'
+import { chevronRightIcon } from '@keystar/ui/icon/icons/chevronRightIcon'
+import { undo2Icon } from '@keystar/ui/icon/icons/undo2Icon'
+import { HStack } from '@keystar/ui/layout'
+import { Picker } from '@keystar/ui/picker'
+import { Item } from '@keystar/ui/tag'
+import { Tooltip, TooltipTrigger } from '@keystar/ui/tooltip'
+import { Text } from '@keystar/ui/typography'
+import type { ReactNode } from 'react'
+import { useMemo } from 'react'
+
+type PageItem = {
+  label: string
+  id: number
+}
+
+export function PaginationControls(props: {
+  singular: string
+  plural: string
+  currentPage: number
+  pageSize: number
+  total: number
+  defaultPageSize?: number
+  onChangePage: (page: number) => void
+  onChangePageSize: (pageSize: number) => void
+  extraActions?: ReactNode
+}) {
+  const { currentPage, total, pageSize, defaultPageSize } = props
+  const { stats } = getPaginationStats(props)
+
+  const nextPage = currentPage + 1
+  const prevPage = currentPage - 1
+  const lastPage = Math.max(Math.ceil(total / pageSize), 1)
+
+  const pageItems = useMemo(() => {
+    const result: PageItem[] = []
+    for (let page = 1; page <= lastPage; page++) {
+      result.push({
+        id: page,
+        label: String(page),
+      })
+    }
+    return result
+  }, [lastPage])
+
+  return (
+    <HStack
+      as="nav"
+      role="navigation"
+      aria-label="Pagination"
+      // alignItems="center"
+      justifyContent="space-between"
+    >
+      {/*
+        left-side
+        mobile: counts
+        desktop^: items per page (picker), counts
+      */}
+      <HStack gap="large" alignItems="center">
+        <HStack isHidden={{ below: 'desktop' }} gap="regular" alignItems="center">
+          <Text id="items-per-page">{props.plural} per page:</Text>
+          <Picker
+            aria-labelledby="items-per-page"
+            items={PAGE_SIZES.map(n => ({ label: String(n), id: n }))}
+            onSelectionChange={key => {
+              props.onChangePageSize(Number(key))
+            }}
+            selectedKey={pageSize}
+            width="scale.1000"
+          >
+            {item => <Item>{item.label}</Item>}
+          </Picker>
+          {defaultPageSize !== undefined && pageSize !== defaultPageSize ? (
+            <TooltipTrigger>
+              <ActionButton
+                aria-label="reset"
+                onPress={() => props.onChangePageSize(defaultPageSize)}
+                prominence="low"
+              >
+                <Icon src={undo2Icon} />
+              </ActionButton>
+              <Tooltip>Reset to defaults</Tooltip>
+            </TooltipTrigger>
+          ) : null}
+        </HStack>
+        <Text color="neutralSecondary">{stats}</Text>
+      </HStack>
+
+      {/*
+        right-side
+        mobile: next/prev
+        desktop^: current page (picker), next/prev
+      */}
+      <HStack gap="large" alignItems="center">
+        <HStack isHidden={{ below: 'desktop' }} gap="regular" alignItems="center">
+          <Picker
+            // prominence="low"
+            aria-label={`Page number, of ${lastPage} pages`}
+            items={pageItems}
+            onSelectionChange={page => {
+              props.onChangePage(Number(page))
+            }}
+            selectedKey={currentPage}
+            width="scale.1000"
+          >
+            {item => <Item>{item.label}</Item>}
+          </Picker>
+          <Text>of {lastPage} pages</Text>
+        </HStack>
+        <HStack gap="regular">
+          <ActionButton
+            aria-label="Previous page"
+            isDisabled={prevPage < 1}
+            onPress={() => props.onChangePage(prevPage)}
+            // prominence="low"
+          >
+            <Icon src={chevronLeftIcon} />
+          </ActionButton>
+          <ActionButton
+            aria-label="Next page"
+            isDisabled={nextPage > lastPage}
+            onPress={() => props.onChangePage(nextPage)}
+            // prominence="low"
+          >
+            <Icon src={chevronRightIcon} />
+          </ActionButton>
+          {props.extraActions}
+        </HStack>
+      </HStack>
+    </HStack>
+  )
+}
+
+function getPaginationStats({
+  singular,
+  plural,
+  pageSize,
+  currentPage,
+  total,
+}: {
+  singular: string
+  plural: string
+  pageSize: number
+  currentPage: number
+  total: number
+}) {
+  let stats = ''
+  if (total > pageSize) {
+    const start = pageSize * (currentPage - 1) + 1
+    const end = Math.min(start + pageSize - 1, total)
+    stats = `${start} - ${end} of ${total} ${plural}`
+  } else {
+    if (total > 1 && plural) {
+      stats = `${total} ${plural}`
+    } else if (total === 1 && singular) {
+      stats = `${total} ${singular}`
+    }
+  }
+  return { stats }
+}
+
+const PAGE_SIZES = [10, 25, 50, 100]
+
+export function snapValueToClosest(input: number, range = PAGE_SIZES) {
+  return range.reduce((prev, curr) =>
+    Math.abs(curr - input) < Math.abs(prev - input) ? curr : prev
+  )
+}

package/src/{___internal-do-not-use-will-break-in-patch → internal-unstable}/admin-ui/pages/ListPage/Tag.tsx

@@ -1,72 +1,72 @@
-import { type ReactNode, useId } from 'react'
-
-import { ActionButton } from '@keystar/ui/button'
-import { Icon } from '@keystar/ui/icon'
-import { xIcon } from '@keystar/ui/icon/icons/xIcon'
-import { SlotProvider } from '@keystar/ui/slots'
-import { css, tokenSchema } from '@keystar/ui/style'
-import { composeId } from '@keystar/ui/utils'
-
-type TagProps = {
-  children: ReactNode
-  onRemove?: () => void
-}
-
-// TODO: move to @keystar/ui and implement properly
-export function Tag(props: TagProps) {
-  const { children, onRemove } = props
-  const rootId = useId()
-  const textId = composeId(rootId, 'label')
-  const removeId = composeId(rootId, 'remove')
-
-  return (
-    <ActionButton
-      aria-labelledby={[textId, removeId].join(' ')}
-      onKeyDown={e => {
-        if (!onRemove) {
-          return
-        }
-
-        if (e.key === 'Backspace' || e.key === 'Delete') {
-          onRemove()
-        }
-      }}
-      UNSAFE_className={css({
-        borderRadius: tokenSchema.size.radius.full,
-        height: tokenSchema.size.element.small,
-        paddingInlineStart: tokenSchema.size.space.small,
-        paddingInlineEnd: 0,
-      })}
-    >
-      <SlotProvider slots={{ text: { id: textId } }}>{children}</SlotProvider>
-
-      {onRemove && (
-        <span
-          role="button"
-          className={css({
-            alignItems: 'center',
-            borderRadius: '50%',
-            display: 'flex',
-            justifyContent: 'center',
-            height: tokenSchema.size.element.small,
-            width: tokenSchema.size.element.small,
-
-            ':hover': {
-              backgroundColor: tokenSchema.color.alias.backgroundHovered,
-            },
-            ':active': {
-              backgroundColor: tokenSchema.color.alias.backgroundPressed,
-            },
-          })}
-          onClick={e => {
-            e.preventDefault()
-            e.stopPropagation()
-            onRemove()
-          }}
-        >
-          <Icon id={removeId} src={xIcon} aria-label="backspace to remove" />
-        </span>
-      )}
-    </ActionButton>
-  )
-}
+import { type ReactNode, useId } from 'react'
+
+import { ActionButton } from '@keystar/ui/button'
+import { Icon } from '@keystar/ui/icon'
+import { xIcon } from '@keystar/ui/icon/icons/xIcon'
+import { SlotProvider } from '@keystar/ui/slots'
+import { css, tokenSchema } from '@keystar/ui/style'
+import { composeId } from '@keystar/ui/utils'
+
+type TagProps = {
+  children: ReactNode
+  onRemove?: () => void
+}
+
+// TODO: move to @keystar/ui and implement properly
+export function Tag(props: TagProps) {
+  const { children, onRemove } = props
+  const rootId = useId()
+  const textId = composeId(rootId, 'label')
+  const removeId = composeId(rootId, 'remove')
+
+  return (
+    <ActionButton
+      aria-labelledby={[textId, removeId].join(' ')}
+      onKeyDown={e => {
+        if (!onRemove) {
+          return
+        }
+
+        if (e.key === 'Backspace' || e.key === 'Delete') {
+          onRemove()
+        }
+      }}
+      UNSAFE_className={css({
+        borderRadius: tokenSchema.size.radius.full,
+        height: tokenSchema.size.element.small,
+        paddingInlineStart: tokenSchema.size.space.small,
+        paddingInlineEnd: 0,
+      })}
+    >
+      <SlotProvider slots={{ text: { id: textId } }}>{children}</SlotProvider>
+
+      {onRemove && (
+        <span
+          role="button"
+          className={css({
+            alignItems: 'center',
+            borderRadius: '50%',
+            display: 'flex',
+            justifyContent: 'center',
+            height: tokenSchema.size.element.small,
+            width: tokenSchema.size.element.small,
+
+            ':hover': {
+              backgroundColor: tokenSchema.color.alias.backgroundHovered,
+            },
+            ':active': {
+              backgroundColor: tokenSchema.color.alias.backgroundPressed,
+            },
+          })}
+          onClick={e => {
+            e.preventDefault()
+            e.stopPropagation()
+            onRemove()
+          }}
+        >
+          <Icon id={removeId} src={xIcon} aria-label="backspace to remove" />
+        </span>
+      )}
+    </ActionButton>
+  )
+}