next-sanity 3.1.4 → 3.1.6
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/README.md +9 -3
- package/dist/studio/index.cjs +9 -18
- package/dist/studio/index.cjs.map +1 -1
- package/dist/studio/index.d.ts +2 -20
- package/dist/studio/index.js +12 -21
- package/dist/studio/index.js.map +1 -1
- package/package.json +15 -15
- package/src/studio/NextStudio.tsx +2 -13
- package/src/studio/NextStudioLayout.tsx +1 -19
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
- [Client-side live real-time preview for authenticated users](#live-real-time-preview)
|
|
8
8
|
- [GROQ syntax highlighting](https://marketplace.visualstudio.com/items?itemName=sanity-io.vscode-sanity)
|
|
9
|
-
- [Embed](#next-sanitystudio
|
|
9
|
+
- [Embed](#next-sanitystudio) [Studio v3](https://www.sanity.io/studio-v3) in [Next.js](https://nextjs.org/) apps
|
|
10
10
|
|
|
11
11
|
## Table of contents
|
|
12
12
|
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
- [Next 13 `appDir`](#next-13-appdir-1)
|
|
24
24
|
- [Starters](#starters)
|
|
25
25
|
- [Limits](#limits)
|
|
26
|
-
- [`next-sanity/studio`
|
|
26
|
+
- [`next-sanity/studio`](#next-sanitystudio)
|
|
27
27
|
- [Usage](#usage)
|
|
28
28
|
- [Next 13 `app/studio`](#next-13-appstudio)
|
|
29
29
|
- [Next 12 or `pages/studio`](#next-12-or-pagesstudio)
|
|
@@ -439,10 +439,16 @@ export const usePreview = definePreview({
|
|
|
439
439
|
|
|
440
440
|
We have plans for optimizations in the roadmap.
|
|
441
441
|
|
|
442
|
-
## `next-sanity/studio`
|
|
442
|
+
## `next-sanity/studio`
|
|
443
443
|
|
|
444
444
|
> [See it live](https://next.sanity.build/studio)
|
|
445
445
|
|
|
446
|
+
In order to use this feature, you need to install the following peer dependencies:
|
|
447
|
+
|
|
448
|
+
```sh
|
|
449
|
+
npm install @sanity/ui react-is sanity styled-components
|
|
450
|
+
```
|
|
451
|
+
|
|
446
452
|
The latest version of Sanity Studio allows you to embed a near-infinitely configurable content editing interface into any React application. This opens up many possibilities:
|
|
447
453
|
|
|
448
454
|
- Any service that hosts Next.js apps can now host your Studio.
|
package/dist/studio/index.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
const _excluded = ["children", "config", "
|
|
4
|
-
var _templateObject
|
|
3
|
+
const _excluded = ["children", "config", "unstable__noScript", "scheme"];
|
|
4
|
+
var _templateObject;
|
|
5
5
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
6
6
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
7
7
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
@@ -37,7 +37,7 @@ function NextStudioClientOnly(_ref) {
|
|
|
37
37
|
children: mounted ? children : fallback
|
|
38
38
|
});
|
|
39
39
|
}
|
|
40
|
-
const Layout = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-family: ", ";\n background-color: ", ";\n height: 100vh;\n max-height: 100dvh;\n overscroll-behavior: none;\n -webkit-font-smoothing: antialiased;\n overflow: auto;\n
|
|
40
|
+
const Layout = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-family: ", ";\n background-color: ", ";\n height: 100vh;\n max-height: 100dvh;\n overscroll-behavior: none;\n -webkit-font-smoothing: antialiased;\n overflow: auto;\n"])), _ref2 => {
|
|
41
41
|
let {
|
|
42
42
|
$fontFamily
|
|
43
43
|
} = _ref2;
|
|
@@ -47,38 +47,30 @@ const Layout = styled__default.default.div(_templateObject || (_templateObject =
|
|
|
47
47
|
$bg
|
|
48
48
|
} = _ref3;
|
|
49
49
|
return $bg;
|
|
50
|
-
}, _ref4 => {
|
|
51
|
-
let {
|
|
52
|
-
$unstable__tailwindSvgFix
|
|
53
|
-
} = _ref4;
|
|
54
|
-
return $unstable__tailwindSvgFix ? styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n /* override tailwind reset */\n *:not([data-ui='Popover__arrow']):not([data-ui='Tooltip__arrow']) > svg {\n display: inline;\n }\n "]))) : "";
|
|
55
50
|
});
|
|
56
|
-
const NextStudioLayoutComponent =
|
|
51
|
+
const NextStudioLayoutComponent = _ref4 => {
|
|
57
52
|
let {
|
|
58
53
|
children,
|
|
59
54
|
config,
|
|
60
|
-
scheme = "light"
|
|
61
|
-
|
|
62
|
-
} = _ref5;
|
|
55
|
+
scheme = "light"
|
|
56
|
+
} = _ref4;
|
|
63
57
|
const theme = NextStudioLoading.useTheme(config);
|
|
64
58
|
return /* @__PURE__ */jsxRuntime.jsx(Layout, {
|
|
65
59
|
"data-ui": "NextStudioLayout",
|
|
66
|
-
$unstable__tailwindSvgFix: unstable__tailwindSvgFix,
|
|
67
60
|
$fontFamily: theme.fonts.text.family,
|
|
68
61
|
$bg: theme.color[scheme].default.base.bg,
|
|
69
62
|
children
|
|
70
63
|
});
|
|
71
64
|
};
|
|
72
65
|
const NextStudioLayout = react.memo(NextStudioLayoutComponent);
|
|
73
|
-
const NextStudioComponent =
|
|
66
|
+
const NextStudioComponent = _ref5 => {
|
|
74
67
|
let {
|
|
75
68
|
children,
|
|
76
69
|
config,
|
|
77
|
-
unstable__tailwindSvgFix = true,
|
|
78
70
|
unstable__noScript,
|
|
79
71
|
scheme
|
|
80
|
-
} =
|
|
81
|
-
props = _objectWithoutProperties(
|
|
72
|
+
} = _ref5,
|
|
73
|
+
props = _objectWithoutProperties(_ref5, _excluded);
|
|
82
74
|
return /* @__PURE__ */jsxRuntime.jsx(NextStudioClientOnly, {
|
|
83
75
|
fallback: /* @__PURE__ */jsxRuntime.jsx(NextStudioLoading.NextStudioLoading, {
|
|
84
76
|
unstable__noScript,
|
|
@@ -88,7 +80,6 @@ const NextStudioComponent = _ref6 => {
|
|
|
88
80
|
children: /* @__PURE__ */jsxRuntime.jsx(NextStudioLayout, {
|
|
89
81
|
config,
|
|
90
82
|
scheme,
|
|
91
|
-
unstable__tailwindSvgFix,
|
|
92
83
|
children: children || /* @__PURE__ */jsxRuntime.jsx(sanity.Studio, _objectSpread({
|
|
93
84
|
config,
|
|
94
85
|
scheme,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/studio/NextStudioClientOnly.tsx","../../src/studio/NextStudioLayout.tsx","../../src/studio/NextStudio.tsx","../../src/studio/usePrefersColorScheme.ts"],"sourcesContent":["import {type ReactNode, startTransition, useEffect, useState} from 'react'\n\n/** @alpha */\nexport type NextStudioClientOnlyProps = {\n children: ReactNode\n fallback: ReactNode\n}\n\n/** @alpha */\nexport function NextStudioClientOnly({children, fallback}: NextStudioClientOnlyProps) {\n const [mounted, setMounted] = useState(false)\n useEffect(() => startTransition(() => setMounted(true)), [])\n\n return <>{mounted ? children : fallback}</>\n}\n","/* eslint-disable camelcase */\nimport {memo} from 'react'\nimport type {StudioProps} from 'sanity'\nimport styled
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/studio/NextStudioClientOnly.tsx","../../src/studio/NextStudioLayout.tsx","../../src/studio/NextStudio.tsx","../../src/studio/usePrefersColorScheme.ts"],"sourcesContent":["import {type ReactNode, startTransition, useEffect, useState} from 'react'\n\n/** @alpha */\nexport type NextStudioClientOnlyProps = {\n children: ReactNode\n fallback: ReactNode\n}\n\n/** @alpha */\nexport function NextStudioClientOnly({children, fallback}: NextStudioClientOnlyProps) {\n const [mounted, setMounted] = useState(false)\n useEffect(() => startTransition(() => setMounted(true)), [])\n\n return <>{mounted ? children : fallback}</>\n}\n","/* eslint-disable camelcase */\nimport {memo} from 'react'\nimport type {StudioProps} from 'sanity'\nimport styled from 'styled-components'\n\nimport {useTheme} from './useTheme'\n\n/** @alpha */\nexport interface NextStudioLayoutProps extends Pick<StudioProps, 'config' | 'scheme'> {\n children: React.ReactNode\n}\n\ntype LayoutProps = {\n $bg: string\n $fontFamily: string\n}\nconst Layout = styled.div<LayoutProps>`\n font-family: ${({$fontFamily}) => $fontFamily};\n background-color: ${({$bg}: any) => $bg};\n height: 100vh;\n max-height: 100dvh;\n overscroll-behavior: none;\n -webkit-font-smoothing: antialiased;\n overflow: auto;\n`\n\nconst NextStudioLayoutComponent = ({\n children,\n config,\n scheme = 'light',\n}: NextStudioLayoutProps) => {\n const theme = useTheme(config)\n\n return (\n <Layout\n data-ui=\"NextStudioLayout\"\n $fontFamily={theme.fonts.text.family}\n $bg={theme.color[scheme].default.base.bg}\n >\n {children}\n </Layout>\n )\n}\n\n/** @alpha */\nexport const NextStudioLayout = memo(NextStudioLayoutComponent)\n","import {memo} from 'react'\nimport {type StudioProps, Studio} from 'sanity'\n\nimport {NextStudioClientOnly} from './NextStudioClientOnly'\nimport {NextStudioLayout} from './NextStudioLayout'\nimport {type NextStudioLoadingProps, NextStudioLoading} from './NextStudioLoading'\n\nexport type {NextStudioLoadingProps}\n\n// eslint-disable-next-line no-warning-comments\n// FIXME: https://github.com/vercel/next.js/issues/43147\n// const Studio = memo(lazy(() => import('./LazyStudio')))\n\n/** @beta */\nexport interface NextStudioProps extends StudioProps {\n children?: React.ReactNode\n /**\n * Render the <noscript> tag\n * @defaultValue true\n * @alpha\n */\n unstable__noScript?: NextStudioLoadingProps['unstable__noScript']\n}\n/**\n * Intended to render at the root of a page, letting the Studio own that page and render much like it would if you used `npx sanity start` to render\n * It's a drop-in replacement for `import {Studio} from 'sanity'`\n */\nconst NextStudioComponent = ({\n children,\n config,\n unstable__noScript,\n scheme,\n ...props\n}: NextStudioProps) => (\n <NextStudioClientOnly\n fallback={\n <NextStudioLoading\n unstable__noScript={unstable__noScript}\n config={config}\n scheme={scheme}\n />\n }\n >\n <NextStudioLayout config={config} scheme={scheme}>\n {children || <Studio config={config} scheme={scheme} unstable_globalStyles {...props} />}\n </NextStudioLayout>\n </NextStudioClientOnly>\n)\n\n/**\n * Override how the Studio renders by passing children.\n * This is useful for advanced use cases where you're using StudioProvider and StudioLayout instead of Studio:\n * ```\n * import {StudioProvider, StudioLayout} from 'sanity'\n * import {NextStudio} from 'next-sanity/studio'\n * <NextStudio config={config}>\n * <StudioProvider config={config}>\n * <CustomComponentThatUsesContextFromStudioProvider />\n * <StudioLayout />\n * </StudioProvider>\n * </NextStudio>\n * ```\n * @beta\n */\nexport const NextStudio = memo(NextStudioComponent)\n","/* eslint-disable @typescript-eslint/no-empty-function */\nimport type {ThemeColorSchemeKey} from '@sanity/ui'\nimport {useSyncExternalStore} from 'react'\n\nfunction createStore() {\n if (typeof document === 'undefined') {\n return {\n subscribe: () => () => {},\n getSnapshot: () => 'light' as const,\n getServerSnapshot: () => 'light' as const,\n }\n }\n\n const matchMedia = window.matchMedia('(prefers-color-scheme: dark)')\n\n return {\n subscribe: (onStoreChange: () => void) => {\n matchMedia.addEventListener('change', onStoreChange)\n return () => matchMedia.removeEventListener('change', onStoreChange)\n },\n getSnapshot: () => (matchMedia.matches ? 'dark' : 'light'),\n getServerSnapshot: () => 'light' as const,\n }\n}\nconst store = createStore()\n\n/** @alpha */\nexport function usePrefersColorScheme(): ThemeColorSchemeKey {\n return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot)\n}\n"],"names":["NextStudioClientOnly","children","fallback","mounted","setMounted","useState","useEffect","startTransition","jsx","Fragment","Layout","styled","default","div","$fontFamily","$bg","NextStudioLayoutComponent","config","scheme","theme","useTheme","fonts","text","family","color","base","bg","NextStudioLayout","memo","NextStudioComponent","unstable__noScript","props","NextStudioLoading","Studio","unstable_globalStyles","NextStudio","createStore","document","subscribe","getSnapshot","getServerSnapshot","matchMedia","window","onStoreChange","addEventListener","removeEventListener","matches","store","usePrefersColorScheme","useSyncExternalStore"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,SAASA,oBAAqB,OAAiD;EAAA,IAAjD;IAACC,QAAU;IAAAC;GAAsC;EACpF,MAAM,CAACC,OAAA,EAASC,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA;EAClCC,KAAA,CAAAA,SAAA,CAAA,MAAMC,KAAAA,CAAAA,gBAAgB,MAAMH,UAAA,CAAW,IAAI,CAAC,CAAA,EAAG,EAAE,CAAA;EAEpD,OAAAI,eAAAA,UAAAA,CAAAA,GAAA,CAAAC,UAAAA,CAAAA,QAAA,EAAA;IAAGR,QAAU,EAAAE,OAAA,GAAAF,QAAA,GAAWC;EAAS,CAAA,CAAA;AAC1C;ACEA,MAAMQ,SAASC,eAAO,CAAAC,OAAA,CAAAC,GAAA,2PACL;EAAA,IAAC;IAACC;EAAiB,CAAA;EAAA,OAAAA,WAAA;AAAA,GACd;EAAA,IAAC;IAACC;EAAc,CAAA;EAAA,OAAAA,GAAA;AAAA,EAAA;AAQtC,MAAMC,4BAA4B,SAIL;EAAA,IAJM;IACjCf,QAAA;IACAgB,MAAA;IACAC,MAAS,GAAA;EACX,CAA6B;EACrB,MAAAC,KAAA,GAAQC,2BAASH,MAAM,CAAA;EAG3B,sBAAAT,UAAA,CAAAA,GAAA,CAACE,MAAA,EAAA;IACC,SAAQ,EAAA,kBAAA;IACRI,WAAA,EAAaK,KAAM,CAAAE,KAAA,CAAMC,IAAK,CAAAC,MAAA;IAC9BR,GAAK,EAAAI,KAAA,CAAMK,KAAM,CAAAN,MAAA,CAAA,CAAQN,QAAQa,IAAK,CAAAC,EAAA;IAErCzB;EAAA,CAAA,CACH;AAEJ,CAAA;AAGa,MAAA0B,gBAAA,GAAmBC,WAAKZ,yBAAyB,CAAA;AClB9D,MAAMa,sBAAsB;EAAA,IAAC;MAC3B5B,QAAA;MACAgB,MAAA;MACAa,kBAAA;MACAZ;IAEF,CACE;IAFGa,KAAA;EAAA,sBAEHvB,UAAA,CAAAA,GAAA,CAACR,oBAAA,EAAA;IACCE,QACE,iBAAAM,UAAA,CAAAA,GAAA,CAACwB,iBAAA,CAAAA,iBAAA,EAAA;MACCF,kBAAA;MACAb,MAAA;MACAC;IAAA,CAAA,CACF;IAGFjB,QAAC,EAAA,eAAAO,UAAA,CAAAA,GAAA,CAAAmB,gBAAA,EAAA;MAAiBV,MAAgB;MAAAC,MAAA;MAC/BjB,QAAY,EAAAA,QAAA,IAAAO,eAAAA,UAAAA,CAAAA,GAAA,CAACyB,MAAAA,CAAAA,MAAO;QAAAhB,MAAA;QAAgBC,MAAgB;QAAAgB,qBAAA,EAAqB;MAAE,GAAGH;KACjF;EAAA,CAAA,CACF;AAAA;AAkBW,MAAAI,UAAA,GAAaP,WAAKC,mBAAmB,CAAA;AC5DlD,SAASO,WAAc,GAAA;EACjB,IAAA,OAAOC,aAAa,WAAa,EAAA;IAC5B,OAAA;MACLC,SAAA,EAAW,MAAM,MAAM,CAAC,CAAA;MACxBC,aAAa,MAAM,OAAA;MACnBC,mBAAmB,MAAM;IAAA,CAC3B;EACF;EAEM,MAAAC,UAAA,GAAaC,MAAO,CAAAD,UAAA,CAAW,8BAA8B,CAAA;EAE5D,OAAA;IACLH,SAAA,EAAYK,aAA8B,IAAA;MAC7BF,UAAA,CAAAG,gBAAA,CAAiB,UAAUD,aAAa,CAAA;MACnD,OAAO,MAAMF,UAAA,CAAWI,mBAAoB,CAAA,QAAA,EAAUF,aAAa,CAAA;IACrE,CAAA;IACAJ,WAAa,EAAA,MAAOE,UAAW,CAAAK,OAAA,GAAU,MAAS,GAAA,OAAA;IAClDN,mBAAmB,MAAM;EAAA,CAC3B;AACF;AACA,MAAMO,QAAQX,WAAY,EAAA;AAGnB,SAASY,qBAA6C,GAAA;EAC3D,OAAOC,KAAAA,CAAAA,qBAAqBF,KAAM,CAAAT,SAAA,EAAWS,KAAM,CAAAR,WAAA,EAAaQ,MAAMP,iBAAiB,CAAA;AACzF;;;;;;"}
|
package/dist/studio/index.d.ts
CHANGED
|
@@ -24,14 +24,7 @@ import type {ThemeColorSchemeKey} from '@sanity/ui'
|
|
|
24
24
|
* @beta
|
|
25
25
|
*/
|
|
26
26
|
export declare const NextStudio: MemoExoticComponent<
|
|
27
|
-
({
|
|
28
|
-
children,
|
|
29
|
-
config,
|
|
30
|
-
unstable__tailwindSvgFix,
|
|
31
|
-
unstable__noScript,
|
|
32
|
-
scheme,
|
|
33
|
-
...props
|
|
34
|
-
}: NextStudioProps) => JSX.Element
|
|
27
|
+
({children, config, unstable__noScript, scheme, ...props}: NextStudioProps) => JSX.Element
|
|
35
28
|
>
|
|
36
29
|
|
|
37
30
|
/** @alpha */
|
|
@@ -48,17 +41,12 @@ export declare type NextStudioClientOnlyProps = {
|
|
|
48
41
|
|
|
49
42
|
/** @alpha */
|
|
50
43
|
export declare const NextStudioLayout: MemoExoticComponent<
|
|
51
|
-
({children, config, scheme
|
|
44
|
+
({children, config, scheme}: NextStudioLayoutProps) => JSX.Element
|
|
52
45
|
>
|
|
53
46
|
|
|
54
47
|
/** @alpha */
|
|
55
48
|
export declare interface NextStudioLayoutProps extends Pick<StudioProps, 'config' | 'scheme'> {
|
|
56
49
|
children: React.ReactNode
|
|
57
|
-
/**
|
|
58
|
-
* Apply fix with SVG icon centering that happens if TailwindCSS is loaded
|
|
59
|
-
* @defaultValue true
|
|
60
|
-
*/
|
|
61
|
-
unstable__tailwindSvgFix?: boolean
|
|
62
50
|
}
|
|
63
51
|
|
|
64
52
|
/** @alpha */
|
|
@@ -81,12 +69,6 @@ export declare const NextStudioNoScript: () => JSX.Element
|
|
|
81
69
|
/** @beta */
|
|
82
70
|
export declare interface NextStudioProps extends StudioProps {
|
|
83
71
|
children?: React.ReactNode
|
|
84
|
-
/**
|
|
85
|
-
* Apply fix with SVG icon centering that happens if TailwindCSS is loaded
|
|
86
|
-
* @defaultValue true
|
|
87
|
-
* @alpha
|
|
88
|
-
*/
|
|
89
|
-
unstable__tailwindSvgFix?: NextStudioLayoutProps['unstable__tailwindSvgFix']
|
|
90
72
|
/**
|
|
91
73
|
* Render the <noscript> tag
|
|
92
74
|
* @defaultValue true
|
package/dist/studio/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
const _excluded = ["children", "config", "
|
|
2
|
-
var _templateObject
|
|
1
|
+
const _excluded = ["children", "config", "unstable__noScript", "scheme"];
|
|
2
|
+
var _templateObject;
|
|
3
3
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
4
4
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
5
5
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
@@ -11,9 +11,9 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
|
|
|
11
11
|
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
12
12
|
import { useState, useEffect, startTransition, memo, useSyncExternalStore } from 'react';
|
|
13
13
|
import { Studio } from 'sanity';
|
|
14
|
-
import styled
|
|
14
|
+
import styled from 'styled-components';
|
|
15
15
|
import { useTheme, NextStudioLoading } from '../_chunks/NextStudioLoading-4b938208.js';
|
|
16
|
-
export { NextStudioNoScript
|
|
16
|
+
export { NextStudioNoScript } from '../_chunks/NextStudioLoading-4b938208.js';
|
|
17
17
|
import '@sanity/icons';
|
|
18
18
|
import '@sanity/ui';
|
|
19
19
|
function NextStudioClientOnly(_ref) {
|
|
@@ -27,7 +27,7 @@ function NextStudioClientOnly(_ref) {
|
|
|
27
27
|
children: mounted ? children : fallback
|
|
28
28
|
});
|
|
29
29
|
}
|
|
30
|
-
const Layout = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-family: ", ";\n background-color: ", ";\n height: 100vh;\n max-height: 100dvh;\n overscroll-behavior: none;\n -webkit-font-smoothing: antialiased;\n overflow: auto;\n
|
|
30
|
+
const Layout = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-family: ", ";\n background-color: ", ";\n height: 100vh;\n max-height: 100dvh;\n overscroll-behavior: none;\n -webkit-font-smoothing: antialiased;\n overflow: auto;\n"])), _ref2 => {
|
|
31
31
|
let {
|
|
32
32
|
$fontFamily
|
|
33
33
|
} = _ref2;
|
|
@@ -37,38 +37,30 @@ const Layout = styled.div(_templateObject || (_templateObject = _taggedTemplateL
|
|
|
37
37
|
$bg
|
|
38
38
|
} = _ref3;
|
|
39
39
|
return $bg;
|
|
40
|
-
}, _ref4 => {
|
|
41
|
-
let {
|
|
42
|
-
$unstable__tailwindSvgFix
|
|
43
|
-
} = _ref4;
|
|
44
|
-
return $unstable__tailwindSvgFix ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n /* override tailwind reset */\n *:not([data-ui='Popover__arrow']):not([data-ui='Tooltip__arrow']) > svg {\n display: inline;\n }\n "]))) : "";
|
|
45
40
|
});
|
|
46
|
-
const NextStudioLayoutComponent =
|
|
41
|
+
const NextStudioLayoutComponent = _ref4 => {
|
|
47
42
|
let {
|
|
48
43
|
children,
|
|
49
44
|
config,
|
|
50
|
-
scheme = "light"
|
|
51
|
-
|
|
52
|
-
} = _ref5;
|
|
45
|
+
scheme = "light"
|
|
46
|
+
} = _ref4;
|
|
53
47
|
const theme = useTheme(config);
|
|
54
48
|
return /* @__PURE__ */jsx(Layout, {
|
|
55
49
|
"data-ui": "NextStudioLayout",
|
|
56
|
-
$unstable__tailwindSvgFix: unstable__tailwindSvgFix,
|
|
57
50
|
$fontFamily: theme.fonts.text.family,
|
|
58
51
|
$bg: theme.color[scheme].default.base.bg,
|
|
59
52
|
children
|
|
60
53
|
});
|
|
61
54
|
};
|
|
62
55
|
const NextStudioLayout = memo(NextStudioLayoutComponent);
|
|
63
|
-
const NextStudioComponent =
|
|
56
|
+
const NextStudioComponent = _ref5 => {
|
|
64
57
|
let {
|
|
65
58
|
children,
|
|
66
59
|
config,
|
|
67
|
-
unstable__tailwindSvgFix = true,
|
|
68
60
|
unstable__noScript,
|
|
69
61
|
scheme
|
|
70
|
-
} =
|
|
71
|
-
props = _objectWithoutProperties(
|
|
62
|
+
} = _ref5,
|
|
63
|
+
props = _objectWithoutProperties(_ref5, _excluded);
|
|
72
64
|
return /* @__PURE__ */jsx(NextStudioClientOnly, {
|
|
73
65
|
fallback: /* @__PURE__ */jsx(NextStudioLoading, {
|
|
74
66
|
unstable__noScript,
|
|
@@ -78,7 +70,6 @@ const NextStudioComponent = _ref6 => {
|
|
|
78
70
|
children: /* @__PURE__ */jsx(NextStudioLayout, {
|
|
79
71
|
config,
|
|
80
72
|
scheme,
|
|
81
|
-
unstable__tailwindSvgFix,
|
|
82
73
|
children: children || /* @__PURE__ */jsx(Studio, _objectSpread({
|
|
83
74
|
config,
|
|
84
75
|
scheme,
|
|
@@ -110,5 +101,5 @@ const store = createStore();
|
|
|
110
101
|
function usePrefersColorScheme() {
|
|
111
102
|
return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);
|
|
112
103
|
}
|
|
113
|
-
export { NextStudio, NextStudioClientOnly, NextStudioLayout, usePrefersColorScheme };
|
|
104
|
+
export { NextStudio, NextStudioClientOnly, NextStudioLayout, usePrefersColorScheme, useTheme };
|
|
114
105
|
//# sourceMappingURL=index.js.map
|
package/dist/studio/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/studio/NextStudioClientOnly.tsx","../../src/studio/NextStudioLayout.tsx","../../src/studio/NextStudio.tsx","../../src/studio/usePrefersColorScheme.ts"],"sourcesContent":["import {type ReactNode, startTransition, useEffect, useState} from 'react'\n\n/** @alpha */\nexport type NextStudioClientOnlyProps = {\n children: ReactNode\n fallback: ReactNode\n}\n\n/** @alpha */\nexport function NextStudioClientOnly({children, fallback}: NextStudioClientOnlyProps) {\n const [mounted, setMounted] = useState(false)\n useEffect(() => startTransition(() => setMounted(true)), [])\n\n return <>{mounted ? children : fallback}</>\n}\n","/* eslint-disable camelcase */\nimport {memo} from 'react'\nimport type {StudioProps} from 'sanity'\nimport styled
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/studio/NextStudioClientOnly.tsx","../../src/studio/NextStudioLayout.tsx","../../src/studio/NextStudio.tsx","../../src/studio/usePrefersColorScheme.ts"],"sourcesContent":["import {type ReactNode, startTransition, useEffect, useState} from 'react'\n\n/** @alpha */\nexport type NextStudioClientOnlyProps = {\n children: ReactNode\n fallback: ReactNode\n}\n\n/** @alpha */\nexport function NextStudioClientOnly({children, fallback}: NextStudioClientOnlyProps) {\n const [mounted, setMounted] = useState(false)\n useEffect(() => startTransition(() => setMounted(true)), [])\n\n return <>{mounted ? children : fallback}</>\n}\n","/* eslint-disable camelcase */\nimport {memo} from 'react'\nimport type {StudioProps} from 'sanity'\nimport styled from 'styled-components'\n\nimport {useTheme} from './useTheme'\n\n/** @alpha */\nexport interface NextStudioLayoutProps extends Pick<StudioProps, 'config' | 'scheme'> {\n children: React.ReactNode\n}\n\ntype LayoutProps = {\n $bg: string\n $fontFamily: string\n}\nconst Layout = styled.div<LayoutProps>`\n font-family: ${({$fontFamily}) => $fontFamily};\n background-color: ${({$bg}: any) => $bg};\n height: 100vh;\n max-height: 100dvh;\n overscroll-behavior: none;\n -webkit-font-smoothing: antialiased;\n overflow: auto;\n`\n\nconst NextStudioLayoutComponent = ({\n children,\n config,\n scheme = 'light',\n}: NextStudioLayoutProps) => {\n const theme = useTheme(config)\n\n return (\n <Layout\n data-ui=\"NextStudioLayout\"\n $fontFamily={theme.fonts.text.family}\n $bg={theme.color[scheme].default.base.bg}\n >\n {children}\n </Layout>\n )\n}\n\n/** @alpha */\nexport const NextStudioLayout = memo(NextStudioLayoutComponent)\n","import {memo} from 'react'\nimport {type StudioProps, Studio} from 'sanity'\n\nimport {NextStudioClientOnly} from './NextStudioClientOnly'\nimport {NextStudioLayout} from './NextStudioLayout'\nimport {type NextStudioLoadingProps, NextStudioLoading} from './NextStudioLoading'\n\nexport type {NextStudioLoadingProps}\n\n// eslint-disable-next-line no-warning-comments\n// FIXME: https://github.com/vercel/next.js/issues/43147\n// const Studio = memo(lazy(() => import('./LazyStudio')))\n\n/** @beta */\nexport interface NextStudioProps extends StudioProps {\n children?: React.ReactNode\n /**\n * Render the <noscript> tag\n * @defaultValue true\n * @alpha\n */\n unstable__noScript?: NextStudioLoadingProps['unstable__noScript']\n}\n/**\n * Intended to render at the root of a page, letting the Studio own that page and render much like it would if you used `npx sanity start` to render\n * It's a drop-in replacement for `import {Studio} from 'sanity'`\n */\nconst NextStudioComponent = ({\n children,\n config,\n unstable__noScript,\n scheme,\n ...props\n}: NextStudioProps) => (\n <NextStudioClientOnly\n fallback={\n <NextStudioLoading\n unstable__noScript={unstable__noScript}\n config={config}\n scheme={scheme}\n />\n }\n >\n <NextStudioLayout config={config} scheme={scheme}>\n {children || <Studio config={config} scheme={scheme} unstable_globalStyles {...props} />}\n </NextStudioLayout>\n </NextStudioClientOnly>\n)\n\n/**\n * Override how the Studio renders by passing children.\n * This is useful for advanced use cases where you're using StudioProvider and StudioLayout instead of Studio:\n * ```\n * import {StudioProvider, StudioLayout} from 'sanity'\n * import {NextStudio} from 'next-sanity/studio'\n * <NextStudio config={config}>\n * <StudioProvider config={config}>\n * <CustomComponentThatUsesContextFromStudioProvider />\n * <StudioLayout />\n * </StudioProvider>\n * </NextStudio>\n * ```\n * @beta\n */\nexport const NextStudio = memo(NextStudioComponent)\n","/* eslint-disable @typescript-eslint/no-empty-function */\nimport type {ThemeColorSchemeKey} from '@sanity/ui'\nimport {useSyncExternalStore} from 'react'\n\nfunction createStore() {\n if (typeof document === 'undefined') {\n return {\n subscribe: () => () => {},\n getSnapshot: () => 'light' as const,\n getServerSnapshot: () => 'light' as const,\n }\n }\n\n const matchMedia = window.matchMedia('(prefers-color-scheme: dark)')\n\n return {\n subscribe: (onStoreChange: () => void) => {\n matchMedia.addEventListener('change', onStoreChange)\n return () => matchMedia.removeEventListener('change', onStoreChange)\n },\n getSnapshot: () => (matchMedia.matches ? 'dark' : 'light'),\n getServerSnapshot: () => 'light' as const,\n }\n}\nconst store = createStore()\n\n/** @alpha */\nexport function usePrefersColorScheme(): ThemeColorSchemeKey {\n return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot)\n}\n"],"names":["NextStudioClientOnly","children","fallback","mounted","setMounted","useState","useEffect","startTransition","jsx","Fragment","Layout","styled","div","$fontFamily","$bg","NextStudioLayoutComponent","config","scheme","theme","useTheme","fonts","text","family","color","default","base","bg","NextStudioLayout","memo","NextStudioComponent","unstable__noScript","props","NextStudioLoading","Studio","unstable_globalStyles","NextStudio","createStore","document","subscribe","getSnapshot","getServerSnapshot","matchMedia","window","onStoreChange","addEventListener","removeEventListener","matches","store","usePrefersColorScheme","useSyncExternalStore"],"mappings":";;;;;;;;;;;;;;;;;;AASO,SAASA,oBAAqB,OAAiD;EAAA,IAAjD;IAACC,QAAU;IAAAC;GAAsC;EACpF,MAAM,CAACC,OAAA,EAASC,UAAU,CAAA,GAAIC,SAAS,KAAK,CAAA;EAClCC,SAAA,CAAA,MAAMC,gBAAgB,MAAMH,UAAA,CAAW,IAAI,CAAC,CAAA,EAAG,EAAE,CAAA;EAEpD,OAAA,eAAAI,GAAA,CAAAC,QAAA,EAAA;IAAGR,QAAU,EAAAE,OAAA,GAAAF,QAAA,GAAWC;EAAS,CAAA,CAAA;AAC1C;ACEA,MAAMQ,SAASC,MAAO,CAAAC,GAAA,2PACL;EAAA,IAAC;IAACC;EAAiB,CAAA;EAAA,OAAAA,WAAA;AAAA,GACd;EAAA,IAAC;IAACC;EAAc,CAAA;EAAA,OAAAA,GAAA;AAAA,EAAA;AAQtC,MAAMC,4BAA4B,SAIL;EAAA,IAJM;IACjCd,QAAA;IACAe,MAAA;IACAC,MAAS,GAAA;EACX,CAA6B;EACrB,MAAAC,KAAA,GAAQC,SAASH,MAAM,CAAA;EAG3B,sBAAAR,GAAA,CAACE,MAAA,EAAA;IACC,SAAQ,EAAA,kBAAA;IACRG,WAAA,EAAaK,KAAM,CAAAE,KAAA,CAAMC,IAAK,CAAAC,MAAA;IAC9BR,GAAK,EAAAI,KAAA,CAAMK,KAAM,CAAAN,MAAA,CAAA,CAAQO,QAAQC,IAAK,CAAAC,EAAA;IAErCzB;EAAA,CAAA,CACH;AAEJ,CAAA;AAGa,MAAA0B,gBAAA,GAAmBC,KAAKb,yBAAyB,CAAA;AClB9D,MAAMc,sBAAsB;EAAA,IAAC;MAC3B5B,QAAA;MACAe,MAAA;MACAc,kBAAA;MACAb;IAEF,CACE;IAFGc,KAAA;EAAA,sBAEHvB,GAAA,CAACR,oBAAA,EAAA;IACCE,QACE,iBAAAM,GAAA,CAACwB,iBAAA,EAAA;MACCF,kBAAA;MACAd,MAAA;MACAC;IAAA,CAAA,CACF;IAGFhB,QAAC,EAAA,eAAAO,GAAA,CAAAmB,gBAAA,EAAA;MAAiBX,MAAgB;MAAAC,MAAA;MAC/BhB,QAAY,EAAAA,QAAA,IAAA,eAAAO,GAAA,CAACyB,MAAO;QAAAjB,MAAA;QAAgBC,MAAgB;QAAAiB,qBAAA,EAAqB;MAAE,GAAGH;KACjF;EAAA,CAAA,CACF;AAAA;AAkBW,MAAAI,UAAA,GAAaP,KAAKC,mBAAmB,CAAA;AC5DlD,SAASO,WAAc,GAAA;EACjB,IAAA,OAAOC,aAAa,WAAa,EAAA;IAC5B,OAAA;MACLC,SAAA,EAAW,MAAM,MAAM,CAAC,CAAA;MACxBC,aAAa,MAAM,OAAA;MACnBC,mBAAmB,MAAM;IAAA,CAC3B;EACF;EAEM,MAAAC,UAAA,GAAaC,MAAO,CAAAD,UAAA,CAAW,8BAA8B,CAAA;EAE5D,OAAA;IACLH,SAAA,EAAYK,aAA8B,IAAA;MAC7BF,UAAA,CAAAG,gBAAA,CAAiB,UAAUD,aAAa,CAAA;MACnD,OAAO,MAAMF,UAAA,CAAWI,mBAAoB,CAAA,QAAA,EAAUF,aAAa,CAAA;IACrE,CAAA;IACAJ,WAAa,EAAA,MAAOE,UAAW,CAAAK,OAAA,GAAU,MAAS,GAAA,OAAA;IAClDN,mBAAmB,MAAM;EAAA,CAC3B;AACF;AACA,MAAMO,QAAQX,WAAY,EAAA;AAGnB,SAASY,qBAA6C,GAAA;EAC3D,OAAOC,qBAAqBF,KAAM,CAAAT,SAAA,EAAWS,KAAM,CAAAR,WAAA,EAAaQ,MAAMP,iBAAiB,CAAA;AACzF;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "next-sanity",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.6",
|
|
4
4
|
"description": "Sanity.io toolkit for Next.js",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"sanity",
|
|
@@ -136,7 +136,7 @@
|
|
|
136
136
|
},
|
|
137
137
|
"dependencies": {
|
|
138
138
|
"@sanity/client": "^3.4.1",
|
|
139
|
-
"@sanity/preview-kit": "^1.2.
|
|
139
|
+
"@sanity/preview-kit": "^1.2.12",
|
|
140
140
|
"@sanity/webhook": "^2.0.0",
|
|
141
141
|
"groq": "^2.33.2"
|
|
142
142
|
},
|
|
@@ -145,19 +145,19 @@
|
|
|
145
145
|
"@rollup/plugin-url": "^8.0.1",
|
|
146
146
|
"@sanity/eslint-config-studio": "^2.0.1",
|
|
147
147
|
"@sanity/image-url": "^1.0.1",
|
|
148
|
-
"@sanity/pkg-utils": "^
|
|
148
|
+
"@sanity/pkg-utils": "^2.0.0",
|
|
149
149
|
"@sanity/semantic-release-preset": "^2.0.4",
|
|
150
|
-
"@sanity/vision": "^3.
|
|
150
|
+
"@sanity/vision": "^3.1.2",
|
|
151
151
|
"@testing-library/react-hooks": "^8.0.1",
|
|
152
152
|
"@types/eventsource": "^1.1.10",
|
|
153
153
|
"@types/jest": "^29.2.4",
|
|
154
154
|
"@types/react": "^18.0.26",
|
|
155
|
-
"@types/react-dom": "^18.0.
|
|
155
|
+
"@types/react-dom": "^18.0.10",
|
|
156
156
|
"@types/styled-components": "^5.1.26",
|
|
157
|
-
"@typescript-eslint/eslint-plugin": "^5.
|
|
157
|
+
"@typescript-eslint/eslint-plugin": "^5.47.0",
|
|
158
158
|
"autoprefixer": "^10.4.13",
|
|
159
159
|
"eslint": "^8.30.0",
|
|
160
|
-
"eslint-config-next": "13.0.8-canary.
|
|
160
|
+
"eslint-config-next": "13.0.8-canary.5",
|
|
161
161
|
"eslint-config-prettier": "^8.5.0",
|
|
162
162
|
"eslint-config-sanity": "^6.0.0",
|
|
163
163
|
"eslint-gitignore": "^0.1.0",
|
|
@@ -166,7 +166,7 @@
|
|
|
166
166
|
"groqd": "^0.1.2",
|
|
167
167
|
"jest": "^29.3.1",
|
|
168
168
|
"jest-environment-jsdom": "^29.3.1",
|
|
169
|
-
"next": "13.0.8-canary.
|
|
169
|
+
"next": "13.0.8-canary.5",
|
|
170
170
|
"postcss": "^8.4.20",
|
|
171
171
|
"prettier": "^2.8.1",
|
|
172
172
|
"prettier-plugin-packagejson": "^2.3.0",
|
|
@@ -174,21 +174,21 @@
|
|
|
174
174
|
"react": "^18.2.0",
|
|
175
175
|
"react-dom": "^18.2.0",
|
|
176
176
|
"react-is": "^18.2.0",
|
|
177
|
-
"rollup": "^
|
|
178
|
-
"sanity": "^3.
|
|
177
|
+
"rollup": "^3.8.1",
|
|
178
|
+
"sanity": "^3.1.2",
|
|
179
179
|
"styled-components": "^5.3.6",
|
|
180
180
|
"tailwindcss": "^3.2.4",
|
|
181
181
|
"typescript": "^4.9.4",
|
|
182
182
|
"url-loader": "^4.1.1"
|
|
183
183
|
},
|
|
184
184
|
"peerDependencies": {
|
|
185
|
-
"@sanity/icons": "
|
|
186
|
-
"@sanity/types": "
|
|
187
|
-
"@sanity/ui": "
|
|
185
|
+
"@sanity/icons": "^2",
|
|
186
|
+
"@sanity/types": "^3",
|
|
187
|
+
"@sanity/ui": "^1",
|
|
188
188
|
"next": "^13",
|
|
189
189
|
"react": "^18",
|
|
190
|
-
"sanity": "
|
|
191
|
-
"styled-components": "
|
|
190
|
+
"sanity": "^3",
|
|
191
|
+
"styled-components": "^5.2"
|
|
192
192
|
},
|
|
193
193
|
"peerDependenciesMeta": {
|
|
194
194
|
"@sanity/icons": {
|
|
@@ -2,7 +2,7 @@ import {memo} from 'react'
|
|
|
2
2
|
import {type StudioProps, Studio} from 'sanity'
|
|
3
3
|
|
|
4
4
|
import {NextStudioClientOnly} from './NextStudioClientOnly'
|
|
5
|
-
import {
|
|
5
|
+
import {NextStudioLayout} from './NextStudioLayout'
|
|
6
6
|
import {type NextStudioLoadingProps, NextStudioLoading} from './NextStudioLoading'
|
|
7
7
|
|
|
8
8
|
export type {NextStudioLoadingProps}
|
|
@@ -14,12 +14,6 @@ export type {NextStudioLoadingProps}
|
|
|
14
14
|
/** @beta */
|
|
15
15
|
export interface NextStudioProps extends StudioProps {
|
|
16
16
|
children?: React.ReactNode
|
|
17
|
-
/**
|
|
18
|
-
* Apply fix with SVG icon centering that happens if TailwindCSS is loaded
|
|
19
|
-
* @defaultValue true
|
|
20
|
-
* @alpha
|
|
21
|
-
*/
|
|
22
|
-
unstable__tailwindSvgFix?: NextStudioLayoutProps['unstable__tailwindSvgFix']
|
|
23
17
|
/**
|
|
24
18
|
* Render the <noscript> tag
|
|
25
19
|
* @defaultValue true
|
|
@@ -34,7 +28,6 @@ export interface NextStudioProps extends StudioProps {
|
|
|
34
28
|
const NextStudioComponent = ({
|
|
35
29
|
children,
|
|
36
30
|
config,
|
|
37
|
-
unstable__tailwindSvgFix = true,
|
|
38
31
|
unstable__noScript,
|
|
39
32
|
scheme,
|
|
40
33
|
...props
|
|
@@ -48,11 +41,7 @@ const NextStudioComponent = ({
|
|
|
48
41
|
/>
|
|
49
42
|
}
|
|
50
43
|
>
|
|
51
|
-
<NextStudioLayout
|
|
52
|
-
config={config}
|
|
53
|
-
scheme={scheme}
|
|
54
|
-
unstable__tailwindSvgFix={unstable__tailwindSvgFix}
|
|
55
|
-
>
|
|
44
|
+
<NextStudioLayout config={config} scheme={scheme}>
|
|
56
45
|
{children || <Studio config={config} scheme={scheme} unstable_globalStyles {...props} />}
|
|
57
46
|
</NextStudioLayout>
|
|
58
47
|
</NextStudioClientOnly>
|
|
@@ -1,22 +1,16 @@
|
|
|
1
1
|
/* eslint-disable camelcase */
|
|
2
2
|
import {memo} from 'react'
|
|
3
3
|
import type {StudioProps} from 'sanity'
|
|
4
|
-
import styled
|
|
4
|
+
import styled from 'styled-components'
|
|
5
5
|
|
|
6
6
|
import {useTheme} from './useTheme'
|
|
7
7
|
|
|
8
8
|
/** @alpha */
|
|
9
9
|
export interface NextStudioLayoutProps extends Pick<StudioProps, 'config' | 'scheme'> {
|
|
10
10
|
children: React.ReactNode
|
|
11
|
-
/**
|
|
12
|
-
* Apply fix with SVG icon centering that happens if TailwindCSS is loaded
|
|
13
|
-
* @defaultValue true
|
|
14
|
-
*/
|
|
15
|
-
unstable__tailwindSvgFix?: boolean
|
|
16
11
|
}
|
|
17
12
|
|
|
18
13
|
type LayoutProps = {
|
|
19
|
-
$unstable__tailwindSvgFix: NextStudioLayoutProps['unstable__tailwindSvgFix']
|
|
20
14
|
$bg: string
|
|
21
15
|
$fontFamily: string
|
|
22
16
|
}
|
|
@@ -28,30 +22,18 @@ const Layout = styled.div<LayoutProps>`
|
|
|
28
22
|
overscroll-behavior: none;
|
|
29
23
|
-webkit-font-smoothing: antialiased;
|
|
30
24
|
overflow: auto;
|
|
31
|
-
|
|
32
|
-
${({$unstable__tailwindSvgFix}: any) =>
|
|
33
|
-
$unstable__tailwindSvgFix
|
|
34
|
-
? css`
|
|
35
|
-
/* override tailwind reset */
|
|
36
|
-
*:not([data-ui='Popover__arrow']):not([data-ui='Tooltip__arrow']) > svg {
|
|
37
|
-
display: inline;
|
|
38
|
-
}
|
|
39
|
-
`
|
|
40
|
-
: ''}
|
|
41
25
|
`
|
|
42
26
|
|
|
43
27
|
const NextStudioLayoutComponent = ({
|
|
44
28
|
children,
|
|
45
29
|
config,
|
|
46
30
|
scheme = 'light',
|
|
47
|
-
unstable__tailwindSvgFix = true,
|
|
48
31
|
}: NextStudioLayoutProps) => {
|
|
49
32
|
const theme = useTheme(config)
|
|
50
33
|
|
|
51
34
|
return (
|
|
52
35
|
<Layout
|
|
53
36
|
data-ui="NextStudioLayout"
|
|
54
|
-
$unstable__tailwindSvgFix={unstable__tailwindSvgFix}
|
|
55
37
|
$fontFamily={theme.fonts.text.family}
|
|
56
38
|
$bg={theme.color[scheme].default.base.bg}
|
|
57
39
|
>
|