Upgrade design system

.changeset/admin-meta-rename.md

@@ -0,0 +1,5 @@
+---
+"@keystone-6/core": minor
+---
+
+Renames `isHidden` to `hideNavigation` on the AdminMeta list GraphQL type, `isHidden` is now deprecated and will be removed in a breaking change

.changeset/admin-ui-navigation.md

@@ -0,0 +1,5 @@
+---
+"@keystone-6/core": major
+---
+
+Removes `authenticatedItem` from `@keystone-6/core/admin-ui/components` exports

.changeset/remove-end-session.md

@@ -0,0 +1,5 @@
+---
+"@keystone-6/core": major
+---
+
+Removes the `EndSession` GraphQL mutation addition when `context.session.end` is defined, extend this yourself if required

design-system/packages/button/package.json

@@ -6,6 +6,7 @@
   "module": "dist/keystone-ui-button.esm.js",
   "exports": {
     ".": {
+      "types": "./dist/keystone-ui-button.cjs.js",
       "module": "./dist/keystone-ui-button.esm.js",
       "default": "./dist/keystone-ui-button.cjs.js"
     },

design-system/packages/core/package.json

@@ -6,6 +6,7 @@
   "module": "dist/keystone-ui-core.esm.js",
   "exports": {
     ".": {
+      "types": "./dist/keystone-ui-core.cjs.js",
       "module": "./dist/keystone-ui-core.esm.js",
       "default": "./dist/keystone-ui-core.cjs.js"
     },

design-system/packages/core/src/components/Core.tsx

@@ -51,7 +51,7 @@ const BaseCSS = ({ includeNormalize, optimizeLegibility }: BaseCSSProps) => {
             color: colors.foreground,
             fontSize: '1rem',
             fontWeight: typography.fontWeight.regular,
-            lineHeight: typography.leading.base,
+            // lineHeight: typography.leading.base,
             fontFamily: typography.fontFamily.body,
 
             // optimize legibility

design-system/packages/fields/package.json

@@ -6,6 +6,7 @@
   "module": "dist/keystone-ui-fields.esm.js",
   "exports": {
     ".": {
+      "types": "./dist/keystone-ui-fields.cjs.js",
       "module": "./dist/keystone-ui-fields.esm.js",
       "default": "./dist/keystone-ui-fields.cjs.js"
     },

design-system/packages/loading/package.json

@@ -6,6 +6,7 @@
   "module": "dist/keystone-ui-loading.esm.js",
   "exports": {
     ".": {
+      "types": "./dist/keystone-ui-loading.cjs.js",
       "module": "./dist/keystone-ui-loading.esm.js",
       "default": "./dist/keystone-ui-loading.cjs.js"
     },

design-system/packages/modals/package.json

@@ -6,6 +6,7 @@
   "module": "dist/keystone-ui-modals.esm.js",
   "exports": {
     ".": {
+      "types": "./dist/keystone-ui-modals.cjs.js",
       "module": "./dist/keystone-ui-modals.esm.js",
       "default": "./dist/keystone-ui-modals.cjs.js"
     },

design-system/packages/notice/package.json

@@ -6,6 +6,7 @@
   "module": "dist/keystone-ui-notice.esm.js",
   "exports": {
     ".": {
+      "types": "./dist/keystone-ui-notice.cjs.js",
       "module": "./dist/keystone-ui-notice.esm.js",
       "default": "./dist/keystone-ui-notice.cjs.js"
     },

design-system/packages/options/package.json

@@ -6,6 +6,7 @@
   "module": "dist/keystone-ui-options.esm.js",
   "exports": {
     ".": {
+      "types": "./dist/keystone-ui-options.cjs.js",
       "module": "./dist/keystone-ui-options.esm.js",
       "default": "./dist/keystone-ui-options.cjs.js"
     },

design-system/packages/pill/package.json

@@ -6,6 +6,7 @@
   "module": "dist/keystone-ui-pill.esm.js",
   "exports": {
     ".": {
+      "types": "./dist/keystone-ui-pill.cjs.js",
       "module": "./dist/keystone-ui-pill.esm.js",
       "default": "./dist/keystone-ui-pill.cjs.js"
     },

design-system/packages/popover/package.json

@@ -6,6 +6,7 @@
   "module": "dist/keystone-ui-popover.esm.js",
   "exports": {
     ".": {
+      "types": "./dist/keystone-ui-popover.cjs.js",
       "module": "./dist/keystone-ui-popover.esm.js",
       "default": "./dist/keystone-ui-popover.cjs.js"
     },

design-system/packages/segmented-control/package.json

@@ -6,6 +6,7 @@
   "module": "dist/keystone-ui-segmented-control.esm.js",
   "exports": {
     ".": {
+      "types": "./dist/keystone-ui-segmented-control.cjs.js",
       "module": "./dist/keystone-ui-segmented-control.esm.js",
       "default": "./dist/keystone-ui-segmented-control.cjs.js"
     },

design-system/packages/toast/package.json

@@ -6,6 +6,7 @@
   "module": "dist/keystone-ui-toast.esm.js",
   "exports": {
     ".": {
+      "types": "./dist/keystone-ui-toast.cjs.js",
       "module": "./dist/keystone-ui-toast.esm.js",
       "default": "./dist/keystone-ui-toast.cjs.js"
     },

design-system/packages/tooltip/package.json

@@ -6,6 +6,7 @@
   "module": "dist/keystone-ui-tooltip.esm.js",
   "exports": {
     ".": {
+      "types": "./dist/keystone-ui-tooltip.cjs.js",
       "module": "./dist/keystone-ui-tooltip.esm.js",
       "default": "./dist/keystone-ui-tooltip.cjs.js"
     },

design-system/packages/tooltip/src/Tooltip.tsx

@@ -136,6 +136,14 @@ export const TooltipElement = memo(
       const { elevation, radii, colors, spacing, typography } = useTheme()
       const arrowStyles = useArrowStyles()
 
+      // Fix for hidden tooltips breaking responsive layout. There's no
+      // animation so not sure why we weren't doing this already.
+      // Leaving everything else as is for now. We should replace instances with
+      // Keystar UI components eventually.
+      if (!isVisible) {
+        return null
+      }
+
       return (
         <Portal>
           <div

design-system/website/components/Navigation.tsx

@@ -6,7 +6,7 @@ import { jsx, useTheme } from '@keystone-ui/core'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
-const Brand = () => {
+function Brand () {
   const { palette } = useTheme()
   return (
     <h2>
@@ -25,7 +25,7 @@ const Brand = () => {
 }
 
 type SectionProps = { label: string, children: ReactNode }
-const Section = ({ label, children }: SectionProps) => {
+function Section ({ label, children }: SectionProps) {
   return (
     <Fragment>
       <h3>{label}</h3>
@@ -35,7 +35,7 @@ const Section = ({ label, children }: SectionProps) => {
 }
 
 type NavItemProps = { href: string, children: ReactNode }
-const NavItem = ({ href, children }: NavItemProps) => {
+function NavItem ({ href, children }: NavItemProps) {
   const { palette, radii, spacing } = useTheme()
   const router = useRouter()
   const isSelected = router.pathname === href
@@ -68,7 +68,7 @@ const NavItem = ({ href, children }: NavItemProps) => {
   )
 }
 
-export const Navigation = () => {
+export function Navigation () {
   return (
     <Fragment>
       <Brand />

docs/content/docs/config/auth.md

@@ -81,6 +81,7 @@ The following elements will be added to the GraphQL API.
 ```graphql
 type Mutation {
   authenticateUserWithPassword(email: String!, password: String!): UserAuthenticationWithPasswordResult!
+  endSession: Boolean!
 }
 
 type Query {

docs/content/docs/config/lists.md

@@ -81,7 +81,7 @@ Options:
   It is always possible to search by an id and `'id'` should not be specified in this option.
   By default, the `labelField` is used if it has a string `contains` filter, otherwise none.
 - `description` (default: `undefined`): Sets the list description displayed in the Admin UI.
-- `isHidden` (default: `false`): Controls whether the list is visible in the navigation elements of the Admin UI.
+- `hideNavigation` (default: `false`): Controls whether the list is visible in the navigation elements of the Admin UI.
   Can be either a boolean value or an async function with an argument `{ session, context }` that returns a boolean value.
 - `hideCreate` (default: `false`): Controls whether the `create` button is available in the Admin UI for this list.
   Can be either a boolean value or an async function with an argument `{ session, context }` that returns a boolean value.
@@ -124,7 +124,7 @@ export default config({
         labelField: 'name',
         searchFields: ['name', 'alternativeName'],
         description: '...',
-        isHidden: ({ session, context }) => false,
+        hideNavigation: ({ session, context }) => false,
         hideCreate: ({ session, context }) => false,
         hideDelete: ({ session, context }) => false,
         createView: {

docs/content/docs/fields/relationship.md

@@ -11,23 +11,11 @@ Read our [relationships guide](../guides/relationships) for details on Keystone
 - `many` (default: `false`): Configures the cardinality of the relationship.
 - `db.foreignKey`: When `true` or an object, ensures the foreign Key for two-sided relationships is stored in the table for this list (only available on single relationships, and not on both sides of a 1:1 relationship)
   - `map`: Changes the column name in the database
-- `ui` (default: `{ hideCreate: false, displayMode: 'select' }`): Configures the display mode of the field in the Admin UI.
-  - `hideCreate` (default: `false`). If `true`, the "Create related item" button is not shown in the item view.
-  - `displayMode` (default: `'select'`): Controls the mode used to display the field in the item view. The mode `'select'` displays related items in a select component, while `'cards'` displays the related items in a card layout. Each display mode supports further configuration.
-- `displayMode === 'select'` options:
+- `ui`: Configures the display mode of the field in the Admin UI
+  - `displayMode` (default: `select`): If `count`, only `many: true` relationships are supported
   - `labelField`: The field path from the related list to use for item labels in the select. Defaults to the `labelField` configured on the related list.
-- `searchFields`: The fields used by the Admin UI when searching by this relationship on the list view and in relationship fields. Nominated fields need to support the `contains` filter.
-- `displayMode === 'cards'` options:
-  - `cardFields`: A list of field paths from the related list to render in the card component. Defaults to `'id'` and the `labelField` configured on the related list.
-  - `linkToItem` (default `false`): If `true`, the default card component will render as a link to navigate to the related item.
-  - `removeMode` (default: `'disconnect'`): Controls whether the `Remove` button is present in the card. If `'disconnect'`, the button will be present. If `'none'`, the button will not be present.
-  - `inlineCreate` (default: `null`): If not `null`, an object of the form `{ fields: [...] }`, where `fields` is a list of field paths from the related list should be provided. An inline `Create` button will be included in the cards allowing a new related item to be created based on the configured field paths.
-  - `inlineEdit` (default: `null`): If not `null`, an object of the form `{ fields: [...] }`, where `fields` is a list of field paths from the related list should be provided. An `Edit` button will be included in each card, allowing the configured fields to be edited for each related item.
-  - `inlineConnect` (default: `false`): If `true`, an inline `Link existing item` button will be present, allowing existing items of the related list to be connected in this field.
-Alternatively this can be an object with the properties:
-	- `labelField`: The field path from the related list to use for item labels in select. Defaults to the `labelField` configured on the related list.
-	- `searchFields`: The fields used by the UI to search for this item, in context of this relationship field. Defaults to `searchFields` configured on the related list.
-- `displayMode === 'count'` only supports `many` relationships
+  - `searchFields`: The fields used by the Admin UI when searching by this relationship on the list view and in relationship fields. Nominated fields need to support the `contains` filter. Defaults to `ui.listView.searchFieldon the related list.
+  - `hideCreate` (default: `false`). If `true`, the "Create related item" button is not shown in the item view.
 
 ```typescript
 import { config, list } from '@keystone-6/core';