Bring in latest master changes

.github/workflows/tests.yml

@@ -255,6 +255,7 @@ jobs:
             'default-values.test.ts',
             'extend-graphql-schema.test.ts',
             'json.test.ts',
+            'rest-api.test.ts',
             'roles.test.ts',
             'task-manager.test.ts',
             'testing.test.ts',
@@ -314,7 +315,7 @@ jobs:
       DATABASE_URL: 'file:./test.db'
     strategy:
       matrix:
-        test: ['init.test.ts', 'list-view-crud.test.ts', 'navigation.test.ts']
+        test: ['init.test.ts', 'filters.test.ts', 'list-view-crud.test.ts', 'navigation.test.ts']
       fail-fast: false
     steps:
       - name: Checkout Repo

RELEASE.md

@@ -160,3 +160,41 @@ Add release to release page index under `/docs/pages/releases/index.mdx` with a
 Commit website update and open PR to add to `master`.
 
 Have PR reviewed and merged into `master`.
+
+## GitHub branch sync
+
+When we do a release we need to make sure `master` and `website_live` are both in sync with each other, this is done by:
+
+Creating a branch off `master` such as `bring-in-latest-website-changes` and merging in `website_live` changes, opening a PR and getting it merged, example - <https://github.com/keystonejs/keystone/pull/6470>
+
+Then the other way around, create a branch off `website_live` such as `bring-in-latest-master-changes`, and merging in `master` changes, opening a PR and getting it merged, example - <https://github.com/keystonejs/keystone/pull/6472>
+
+Once this is done, the histories will be out of sync, GitHub will state that `website_live` is still x commits behind, if you look at the branches page - <https://github.com/keystonejs/keystone/branches>
+
+To resolve this in the CLI:
+
+Go to the `website_live` branch
+
+`git checkout website_live`
+
+Check that we're identical to master
+
+`git diff master`
+
+Do a merge that should just update the parents of the new commit
+
+`git merge master`
+
+This should be empty
+
+`git diff origin/website_live`
+
+This should be empty
+
+`git diff master`
+
+Force push `website_live` (after turning off branch protection in github)
+
+`git push --force`
+
+Branches should now be nicely aligned.

design-system/packages/button/package.json

@@ -5,10 +5,10 @@
   "main": "dist/button.cjs.js",
   "module": "dist/button.esm.js",
   "devDependencies": {
-    "@types/react": "^17.0.19"
+    "@types/react": "^17.0.27"
   },
   "dependencies": {
-    "@babel/runtime": "^7.15.3",
+    "@babel/runtime": "^7.15.4",
     "@keystone-ui/core": "^3.2.0",
     "@keystone-ui/icons": "^4.0.1",
     "@keystone-ui/loading": "^4.0.1",

design-system/packages/core/package.json

@@ -5,7 +5,7 @@
   "main": "dist/core.cjs.js",
   "module": "dist/core.esm.js",
   "devDependencies": {
-    "@types/react": "^17.0.19",
+    "@types/react": "^17.0.27",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
@@ -14,7 +14,7 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
-    "@babel/runtime": "^7.15.3",
+    "@babel/runtime": "^7.15.4",
     "@emotion/react": "^11.4.1",
     "@types/facepaint": "^1.2.2",
     "facepaint": "^1.2.1"

design-system/packages/fields/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @keystone-ui/fields
 
+## 5.0.0
+
+### Major Changes
+
+- [#6674](https://github.com/keystonejs/keystone/pull/6674) [`f963966ab`](https://github.com/keystonejs/keystone/commit/f963966ab138a315a8f18d83ed7a676f7423a51d) Thanks [@mitchellhamilton](https://github.com/mitchellhamilton)! - The `onBlur` prop on `DatePicker` now actually works and it does not recieve an actual blur event.
+
+### Patch Changes
+
+- Updated dependencies [[`6d3798fdb`](https://github.com/keystonejs/keystone/commit/6d3798fdbd0a9f1567821e90b7176cf7dd208fda)]:
+  - @keystone-ui/[email protected]
+
 ## 4.1.3
 
 ### Patch Changes

design-system/packages/fields/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@keystone-ui/fields",
-  "version": "4.1.3",
+  "version": "5.0.0",
   "license": "MIT",
   "main": "dist/fields.cjs.js",
   "module": "dist/fields.esm.js",
   "devDependencies": {
-    "@types/react": "^17.0.19"
+    "@types/react": "^17.0.27"
   },
   "dependencies": {
-    "@babel/runtime": "^7.15.3",
+    "@babel/runtime": "^7.15.4",
     "@keystone-ui/core": "^3.2.0",
     "@keystone-ui/icons": "^4.0.1",
-    "@keystone-ui/popover": "^4.0.3",
-    "@types/react-select": "^4.0.17",
-    "date-fns": "^2.23.0",
+    "@keystone-ui/popover": "^4.0.4",
+    "@types/react-select": "^4.0.18",
+    "date-fns": "^2.24.0",
     "react": "^17.0.2",
     "react-day-picker": "npm:react-day-picker@^7.4.8",
     "react-focus-lock": "^2.5.2",
-    "react-select": "^4.3.1"
+    "react-select": "^5.0.0"
   },
   "engines": {
     "node": "^12.20 || >= 14.13"

design-system/packages/fields/src/DatePicker/index.tsx

@@ -1,10 +1,10 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 
-import React, { Fragment, useCallback } from 'react';
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import FocusLock from 'react-focus-lock';
 import { jsx } from '@keystone-ui/core';
-import { PopoverDialog, usePopover } from '@keystone-ui/popover';
+import { PopoverDialog, useControlledPopover } from '@keystone-ui/popover';
 
 import { formatDMY, formatDateType } from '../utils/dateFormatters';
 import { DateType } from '../types';
@@ -16,22 +16,60 @@ export type DateInputValue = string | undefined;
 export type DatePickerProps = {
   onUpdate: (value: DateType) => void;
   onClear: () => void;
-  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onBlur?: () => void;
   value: DateType;
 };
 
-export const DatePicker = ({ value, onUpdate, onClear, onBlur, ...props }: DatePickerProps) => {
-  const { isOpen, setOpen, dialog, trigger, arrow } = usePopover({
-    placement: 'bottom-start',
-    modifiers: [
-      {
-        name: 'offset',
-        options: {
-          offset: [0, 8],
-        },
-      },
-    ],
+export function useEventCallback<Func extends (...args: any) => any>(callback: Func): Func {
+  const callbackRef = useRef(callback);
+  const cb = useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return cb as any;
+}
+
+export const DatePicker = ({
+  value,
+  onUpdate,
+  onClear,
+  onBlur: _onBlur,
+  ...props
+}: DatePickerProps) => {
+  const [isOpen, _setOpen] = useState(false);
+  const onBlur = useEventCallback(() => {
+    _onBlur?.();
   });
+  const setOpen = useCallback(
+    (val: boolean) => {
+      _setOpen(val);
+      if (!val) {
+        onBlur?.();
+      }
+    },
+    [onBlur]
+  );
+  const { dialog, trigger, arrow } = useControlledPopover(
+    {
+      isOpen,
+      onClose: useCallback(() => {
+        setOpen(false);
+      }, [setOpen]),
+    },
+    {
+      placement: 'bottom-start',
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 8],
+          },
+        },
+      ],
+    }
+  );
 
   const handleDayClick = useCallback(
     (day: Date) => {
@@ -52,7 +90,14 @@ export const DatePicker = ({ value, onUpdate, onClear, onBlur, ...props }: DateP
       <InputButton
         aria-label={'Choose date' + (formattedDate ? `, selected date is ${formattedDate}` : '')}
         onClick={() => setOpen(true)}
-        onClear={value ? onClear : undefined}
+        onClear={
+          value
+            ? () => {
+                onClear();
+                onBlur?.();
+              }
+            : undefined
+        }
         isSelected={isOpen}
         ref={trigger.ref}
         {...props}

design-system/packages/fields/src/Select.tsx

@@ -1,21 +1,21 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx, useTheme } from '@keystone-ui/core';
-import ReactSelect, { OptionsType, mergeStyles, NamedProps } from 'react-select';
+import ReactSelect, { Options, mergeStyles, Props } from 'react-select';
 import { useInputTokens } from './hooks/inputs';
 import { WidthType } from './types';
 
 type Option = { label: string; value: string; isDisabled?: boolean };
 
 type BaseSelectProps = Omit<
-  NamedProps<Option, boolean>,
+  Props<Option, boolean>,
   'value' | 'onChange' | 'isMulti' | 'isOptionDisabled'
 > & { width?: WidthType };
 
 export { components as selectComponents } from 'react-select';
 
 type ControlState = {
-  isDisabled: boolean;
+  isDisabled?: boolean;
   isFocused: boolean;
 };
 
@@ -153,9 +153,9 @@ export function MultiSelect({
   styles,
   ...props
 }: BaseSelectProps & {
-  value: OptionsType<Option>;
+  value: Options<Option>;
   portalMenu?: true;
-  onChange(value: OptionsType<Option>): void;
+  onChange(value: Options<Option>): void;
 }) {
   const tokens = useInputTokens({ width: widthKey });
   const defaultStyles = useStyles({ tokens, multi: true });

design-system/packages/icons/package.json

@@ -12,7 +12,7 @@
     "@svgr/plugin-jsx": "^5.5.0",
     "@svgr/plugin-prettier": "^5.5.0",
     "@svgr/plugin-svgo": "^5.5.0",
-    "@types/react": "^17.0.19",
+    "@types/react": "^17.0.27",
     "chalk": "^4.1.2",
     "feather-icons": "^4.28.0",
     "fs-extra": "^10.0.0",
@@ -21,7 +21,7 @@
     "to-pascal-case": "^1.0.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.15.3",
+    "@babel/runtime": "^7.15.4",
     "@keystone-ui/core": "^3.2.0"
   },
   "peerDependencies": {

design-system/packages/loading/package.json

@@ -5,10 +5,10 @@
   "main": "dist/loading.cjs.js",
   "module": "dist/loading.esm.js",
   "devDependencies": {
-    "@types/react": "^17.0.19"
+    "@types/react": "^17.0.27"
   },
   "dependencies": {
-    "@babel/runtime": "^7.15.3",
+    "@babel/runtime": "^7.15.4",
     "@keystone-ui/core": "^3.2.0",
     "react": "^17.0.2"
   },

design-system/packages/modals/package.json

@@ -5,10 +5,10 @@
   "main": "dist/modals.cjs.js",
   "module": "dist/modals.esm.js",
   "devDependencies": {
-    "@types/react": "^17.0.19"
+    "@types/react": "^17.0.27"
   },
   "dependencies": {
-    "@babel/runtime": "^7.15.3",
+    "@babel/runtime": "^7.15.4",
     "@keystone-ui/button": "^5.0.1",
     "@keystone-ui/core": "^3.2.0",
     "react": "^17.0.2",

design-system/packages/notice/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @keystone-ui/notice
 
+## 4.1.0
+
+### Minor Changes
+
+- [#6508](https://github.com/keystonejs/keystone/pull/6508) [`3cfc2a383`](https://github.com/keystonejs/keystone/commit/3cfc2a3839142dd3ccdbf1dd86768257e9acc0dc) Thanks [@JedWatson](https://github.com/JedWatson)! - Add Margin to error messages in the Admin UI Item Form
+
 ## 4.0.2
 
 ### Patch Changes

design-system/packages/notice/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@keystone-ui/notice",
-  "version": "4.0.2",
+  "version": "4.1.0",
   "license": "MIT",
   "main": "dist/notice.cjs.js",
   "module": "dist/notice.esm.js",
   "devDependencies": {
-    "@types/react": "^17.0.19"
+    "@types/react": "^17.0.27"
   },
   "dependencies": {
-    "@babel/runtime": "^7.15.3",
+    "@babel/runtime": "^7.15.4",
     "@keystone-ui/button": "^5.0.1",
     "@keystone-ui/core": "^3.2.0",
     "@keystone-ui/icons": "^4.0.1",

design-system/packages/notice/src/Notice.tsx

@@ -2,7 +2,7 @@
 /** @jsx jsx */
 
 import { ReactNode, useMemo } from 'react';
-import { jsx, makeId, useId, Stack } from '@keystone-ui/core';
+import { jsx, makeId, useId, Stack, MarginProps, Box } from '@keystone-ui/core';
 import { AlertOctagonIcon } from '@keystone-ui/icons/icons/AlertOctagonIcon';
 import { AlertCircleIcon } from '@keystone-ui/icons/icons/AlertCircleIcon';
 import { AlertTriangleIcon } from '@keystone-ui/icons/icons/AlertTriangleIcon';
@@ -36,7 +36,7 @@ type NoticeProps = {
   tone?: ToneKey;
   title?: string;
   className?: string;
-} /* TODO: & MarginProps */;
+} & MarginProps;
 
 export const Notice = ({
   actions,
@@ -60,7 +60,7 @@ export const Notice = ({
 
   return (
     <ButtonProvider {...buttonContext}>
-      <div
+      <Box
         css={{
           display: 'flex',
           flex: 1,
@@ -97,7 +97,7 @@ export const Notice = ({
             </Stack>
           )}
         </div>
-      </div>
+      </Box>
     </ButtonProvider>
   );
 };