@dxos/react-ui 0.1.22 → 0.1.23
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/dist/lib/browser/index.mjs +17 -16
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/layouts/PanelSidebar/PanelSidebar.d.ts +4 -4
- package/dist/types/src/layouts/PanelSidebar/PanelSidebar.d.ts.map +1 -1
- package/package.json +8 -8
- package/src/layouts/PanelSidebar/PanelSidebar.tsx +19 -15
|
@@ -56,7 +56,7 @@ var PanelPopover = ({ slots, children, ...popoverProps }) => {
|
|
|
56
56
|
|
|
57
57
|
// packages/apps/patterns/react-ui/src/layouts/PanelSidebar/PanelSidebar.tsx
|
|
58
58
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
59
|
-
import React2, { createContext,
|
|
59
|
+
import React2, { createContext, useCallback, useContext, useState } from "react";
|
|
60
60
|
import { defaultOverlay, mx as mx2, useMediaQuery, useTranslation } from "@dxos/react-components";
|
|
61
61
|
function _extends2() {
|
|
62
62
|
_extends2 = Object.assign || function(target) {
|
|
@@ -72,7 +72,6 @@ function _extends2() {
|
|
|
72
72
|
};
|
|
73
73
|
return _extends2.apply(this, arguments);
|
|
74
74
|
}
|
|
75
|
-
var sidebarWidth = 272;
|
|
76
75
|
var PanelSidebarContext = /* @__PURE__ */ createContext({
|
|
77
76
|
displayState: "hide",
|
|
78
77
|
setDisplayState: () => {
|
|
@@ -86,20 +85,23 @@ var useTogglePanelSidebar = () => {
|
|
|
86
85
|
displayState
|
|
87
86
|
]);
|
|
88
87
|
};
|
|
89
|
-
var PanelSidebarProvider = ({ children, slots }) => {
|
|
90
|
-
var _a, _b;
|
|
88
|
+
var PanelSidebarProvider = ({ children, inlineStart, slots }) => {
|
|
89
|
+
var _a, _b, _c, _d;
|
|
91
90
|
const { t } = useTranslation("os");
|
|
92
|
-
const [displayState, setInternalDisplayState] = useState("hide");
|
|
93
|
-
const [transitionShow, setTransitionShow] = useState(false);
|
|
94
|
-
const isOpen = displayState === "show";
|
|
95
91
|
const [isLg] = useMediaQuery("lg");
|
|
92
|
+
const [displayState, setInternalDisplayState] = useState(isLg ? "show" : "hide");
|
|
93
|
+
const isOpen = displayState === "show";
|
|
94
|
+
const [transitionShow, setTransitionShow] = useState(isOpen);
|
|
95
|
+
const [domShow, setDomShow] = useState(isOpen);
|
|
96
96
|
const internalHide = () => {
|
|
97
97
|
setTransitionShow(false);
|
|
98
|
+
setInternalDisplayState("hide");
|
|
98
99
|
setTimeout(() => {
|
|
99
|
-
|
|
100
|
+
setDomShow(false);
|
|
100
101
|
}, 200);
|
|
101
102
|
};
|
|
102
103
|
const internalShow = () => {
|
|
104
|
+
setDomShow(true);
|
|
103
105
|
setInternalDisplayState("show");
|
|
104
106
|
setTimeout(() => {
|
|
105
107
|
setTransitionShow(true);
|
|
@@ -112,17 +114,17 @@ var PanelSidebarProvider = ({ children, slots }) => {
|
|
|
112
114
|
displayState
|
|
113
115
|
}
|
|
114
116
|
}, /* @__PURE__ */ React2.createElement(DialogPrimitive.Root, {
|
|
115
|
-
open:
|
|
117
|
+
open: domShow,
|
|
116
118
|
modal: !isLg
|
|
117
|
-
}, /* @__PURE__ */ React2.createElement(DialogPrimitive.Content, {
|
|
118
|
-
className: mx2("fixed block-start-0 block-end-0 is-[272px] z-50 transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out
|
|
119
|
-
}, /* @__PURE__ */ React2.createElement(DialogPrimitive.Title, {
|
|
119
|
+
}, /* @__PURE__ */ React2.createElement(DialogPrimitive.Content, _extends2({}, slots == null ? void 0 : slots.content, {
|
|
120
|
+
className: mx2("fixed block-start-0 block-end-0 is-[272px] z-50 transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out overflow-x-hidden overflow-y-auto", transitionShow ? "inline-start-0" : "inline-start-[-272px]", (_a = slots == null ? void 0 : slots.content) == null ? void 0 : _a.className)
|
|
121
|
+
}), /* @__PURE__ */ React2.createElement(DialogPrimitive.Title, {
|
|
120
122
|
className: "sr-only"
|
|
121
|
-
}, t("sidebar label")),
|
|
123
|
+
}, t("sidebar label")), (_b = slots == null ? void 0 : slots.content) == null ? void 0 : _b.children), (slots == null ? void 0 : slots.fixedBlockStart) && /* @__PURE__ */ React2.createElement("div", _extends2({
|
|
122
124
|
role: "none"
|
|
123
125
|
}, slots == null ? void 0 : slots.fixedBlockStart, {
|
|
124
|
-
className: mx2("fixed inline-end-0 block-start-0 z-[49] transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out", transitionShow ? "inline-start-[272px]" : "inline-start-0", (
|
|
125
|
-
}), (
|
|
126
|
+
className: mx2("fixed inline-end-0 block-start-0 z-[49] transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out", transitionShow ? "inline-start-[272px]" : "inline-start-0", (_c = slots == null ? void 0 : slots.fixedBlockStart) == null ? void 0 : _c.className)
|
|
127
|
+
}), (_d = slots == null ? void 0 : slots.fixedBlockStart) == null ? void 0 : _d.children), !isLg && /* @__PURE__ */ React2.createElement(DialogPrimitive.Overlay, {
|
|
126
128
|
className: mx2(defaultOverlay, "transition-opacity duration-200 ease-in-out", transitionShow ? "opacity-100" : "opacity-0"),
|
|
127
129
|
onClick: internalHide
|
|
128
130
|
}), /* @__PURE__ */ React2.createElement("div", {
|
|
@@ -224,7 +226,6 @@ export {
|
|
|
224
226
|
defaultArrow,
|
|
225
227
|
defaultPanel,
|
|
226
228
|
osTranslations,
|
|
227
|
-
sidebarWidth,
|
|
228
229
|
useTogglePanelSidebar
|
|
229
230
|
};
|
|
230
231
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/composites/IdentityPopover/IdentityPopover.tsx", "../../../src/layouts/PanelPopover/PanelPopover.tsx", "../../../src/styles/panelStyles.ts", "../../../src/layouts/PanelSidebar/PanelSidebar.tsx", "../../../src/panels/IdentityPanel/IdentityPanel.tsx", "../../../src/translations/locales/en-US.ts", "../../../src/translations/index.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { ComponentProps } from 'react';\n\nimport { Profile } from '@dxos/client';\nimport { Avatar, mx } from '@dxos/react-components';\n\nimport { PanelPopover } from '../../layouts';\nimport { IdentityPanel } from '../../panels';\n\nexport interface IdentityPopoverProps extends Partial<ComponentProps<typeof PanelPopover>> {\n identity: Profile;\n onClickManageProfile?: () => void;\n}\n\nexport const IdentityPopover = ({\n identity,\n openTrigger,\n slots,\n triggerIsInToolbar = true,\n onClickManageProfile,\n ...popoverProps\n}: IdentityPopoverProps) => {\n return (\n <PanelPopover\n {...popoverProps}\n openTrigger={\n openTrigger ?? (\n <Avatar\n size={10}\n variant='circle'\n fallbackValue={identity.identityKey.toHex()}\n label={identity.displayName ?? ''}\n />\n )\n }\n slots={{\n ...slots,\n trigger: {\n ...slots?.trigger,\n className: mx(\n 'flex justify-self-end pointer-events-auto bg-white dark:bg-neutral-700 p-0.5 button-elevation rounded-full',\n slots?.trigger?.className\n )\n }\n }}\n triggerIsInToolbar={triggerIsInToolbar}\n >\n <IdentityPanel {...{ identity, onClickManageProfile }} />\n </PanelPopover>\n );\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport React, { ComponentProps } from 'react';\n\nimport { mx, Popover } from '@dxos/react-components';\n\nimport { defaultPanel, defaultArrow } from '../../styles';\n\n/**\n * This component essentially sets default styles for popovers which have panels as their content\n * @param slots\n * @param children\n * @param popoverProps\n * @constructor\n */\nexport const PanelPopover = ({ slots, children, ...popoverProps }: ComponentProps<typeof Popover>) => {\n return (\n <Popover\n slots={{\n arrow: { ...slots?.arrow, className: mx(defaultArrow, slots?.arrow?.className) },\n content: {\n collisionPadding: 8,\n sideOffset: 4,\n ...slots?.content,\n className: mx(defaultPanel, slots?.content?.className)\n },\n trigger: {\n ...slots?.trigger,\n className: mx('', slots?.trigger?.className)\n },\n ...slots\n }}\n {...popoverProps}\n >\n {children}\n </Popover>\n );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nexport const defaultPanel = 'p-2 backdrop-blur-md bg-neutral-50/[.66] dark:bg-neutral-950/[.66]';\nexport const defaultArrow = 'text-neutral-50/[.66] dark:text-neutral-950/[.66]';\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport React, {\n ComponentProps,\n createContext,\n Dispatch,\n
|
|
5
|
-
"mappings": ";;;;;;;AAIA,OAAOA,YAA+B;AAGtC,SAASC,UAAAA,SAAQC,MAAAA,WAAU;;;ACH3B,OAAOC,WAA+B;AAEtC,SAASC,IAAIC,eAAe;;;ACFrB,IAAMC,eAAe;AACrB,IAAMC,eAAe;;;ADD5B,SAAA,WAAA;;;;;;;;;;;;;;AAaO,IAAMC,eAAe,CAAC,EAAEC,OAAOC,UAAU,GAAGC,aAAAA,MAAmD;AAjBtG;AAkBE,SACE,sBAAA,cAACC,SAAAA,SAAAA;IACCH,OAAO;MACLI,OAAO;QAAE,GAAGJ,+BAAOI;QAAOC,WAAWC,GAAGC,eAAcP,oCAAOI,UAAPJ,mBAAcK,SAAAA;MAAW;MAC/EG,SAAS;QACPC,kBAAkB;QAClBC,YAAY;QACZ,GAAGV,+BAAOQ;QACVH,WAAWC,GAAGK,eAAcX,oCAAOQ,YAAPR,mBAAgBK,SAAAA;MAC9C;MACAO,SAAS;QACP,GAAGZ,+BAAOY;QACVP,WAAWC,GAAG,KAAIN,oCAAOY,YAAPZ,mBAAgBK,SAAAA;MACpC;MACA,GAAGL;IACL;KACIE,YAAAA,GAEHD,QAAAA;AAGP;;;AEnCA,YAAYY,qBAAqB;AACjC,OAAOC,UAELC,
|
|
6
|
-
"names": ["React", "Avatar", "mx", "React", "mx", "Popover", "defaultPanel", "defaultArrow", "PanelPopover", "slots", "children", "popoverProps", "Popover", "arrow", "className", "mx", "defaultArrow", "content", "collisionPadding", "sideOffset", "defaultPanel", "trigger", "DialogPrimitive", "React", "createContext", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { ComponentProps } from 'react';\n\nimport { Profile } from '@dxos/client';\nimport { Avatar, mx } from '@dxos/react-components';\n\nimport { PanelPopover } from '../../layouts';\nimport { IdentityPanel } from '../../panels';\n\nexport interface IdentityPopoverProps extends Partial<ComponentProps<typeof PanelPopover>> {\n identity: Profile;\n onClickManageProfile?: () => void;\n}\n\nexport const IdentityPopover = ({\n identity,\n openTrigger,\n slots,\n triggerIsInToolbar = true,\n onClickManageProfile,\n ...popoverProps\n}: IdentityPopoverProps) => {\n return (\n <PanelPopover\n {...popoverProps}\n openTrigger={\n openTrigger ?? (\n <Avatar\n size={10}\n variant='circle'\n fallbackValue={identity.identityKey.toHex()}\n label={identity.displayName ?? ''}\n />\n )\n }\n slots={{\n ...slots,\n trigger: {\n ...slots?.trigger,\n className: mx(\n 'flex justify-self-end pointer-events-auto bg-white dark:bg-neutral-700 p-0.5 button-elevation rounded-full',\n slots?.trigger?.className\n )\n }\n }}\n triggerIsInToolbar={triggerIsInToolbar}\n >\n <IdentityPanel {...{ identity, onClickManageProfile }} />\n </PanelPopover>\n );\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nimport React, { ComponentProps } from 'react';\n\nimport { mx, Popover } from '@dxos/react-components';\n\nimport { defaultPanel, defaultArrow } from '../../styles';\n\n/**\n * This component essentially sets default styles for popovers which have panels as their content\n * @param slots\n * @param children\n * @param popoverProps\n * @constructor\n */\nexport const PanelPopover = ({ slots, children, ...popoverProps }: ComponentProps<typeof Popover>) => {\n return (\n <Popover\n slots={{\n arrow: { ...slots?.arrow, className: mx(defaultArrow, slots?.arrow?.className) },\n content: {\n collisionPadding: 8,\n sideOffset: 4,\n ...slots?.content,\n className: mx(defaultPanel, slots?.content?.className)\n },\n trigger: {\n ...slots?.trigger,\n className: mx('', slots?.trigger?.className)\n },\n ...slots\n }}\n {...popoverProps}\n >\n {children}\n </Popover>\n );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nexport const defaultPanel = 'p-2 backdrop-blur-md bg-neutral-50/[.66] dark:bg-neutral-950/[.66]';\nexport const defaultArrow = 'text-neutral-50/[.66] dark:text-neutral-950/[.66]';\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport React, {\n ComponentProps,\n createContext,\n Dispatch,\n PropsWithChildren,\n SetStateAction,\n useCallback,\n useContext,\n useState\n} from 'react';\n\nimport { defaultOverlay, mx, useMediaQuery, useTranslation } from '@dxos/react-components';\n\nexport type PanelSidebarState = 'show' | 'hide';\n\nexport interface PanelSidebarContextValue {\n setDisplayState: Dispatch<SetStateAction<PanelSidebarState>>;\n displayState: PanelSidebarState;\n}\n\nexport const PanelSidebarContext = createContext<PanelSidebarContextValue>({\n displayState: 'hide',\n setDisplayState: () => {}\n});\n\nexport const useTogglePanelSidebar = () => {\n const { displayState, setDisplayState } = useContext(PanelSidebarContext);\n return useCallback(() => {\n setDisplayState(displayState === 'hide' ? 'show' : 'hide');\n }, [displayState]);\n};\n\nexport interface PanelSidebarProviderSlots {\n content?: ComponentProps<typeof DialogPrimitive.Content>;\n fixedBlockStart?: ComponentProps<'div'>;\n fixedBlockEnd?: ComponentProps<'div'>;\n}\n\nexport interface PanelSidebarProviderProps {\n inlineStart?: boolean;\n slots?: PanelSidebarProviderSlots;\n}\n\nexport const PanelSidebarProvider = ({\n children,\n inlineStart,\n slots\n}: PropsWithChildren<PanelSidebarProviderProps>) => {\n const { t } = useTranslation('os');\n const [isLg] = useMediaQuery('lg');\n const [displayState, setInternalDisplayState] = useState<PanelSidebarState>(isLg ? 'show' : 'hide');\n const isOpen = displayState === 'show';\n const [transitionShow, setTransitionShow] = useState(isOpen);\n const [domShow, setDomShow] = useState(isOpen);\n\n const internalHide = () => {\n setTransitionShow(false);\n setInternalDisplayState('hide');\n setTimeout(() => {\n setDomShow(false);\n }, 200);\n };\n\n const internalShow = () => {\n setDomShow(true);\n setInternalDisplayState('show');\n setTimeout(() => {\n setTransitionShow(true);\n // todo (thure): this may be a race condition in certain situations\n }, 0);\n };\n\n const setDisplayState = (displayState: SetStateAction<PanelSidebarState>) =>\n displayState === 'show' ? internalShow() : internalHide();\n\n return (\n <PanelSidebarContext.Provider value={{ setDisplayState, displayState }}>\n <DialogPrimitive.Root open={domShow} modal={!isLg}>\n <DialogPrimitive.Content\n {...slots?.content}\n className={mx(\n 'fixed block-start-0 block-end-0 is-[272px] z-50 transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out overflow-x-hidden overflow-y-auto',\n transitionShow ? 'inline-start-0' : 'inline-start-[-272px]',\n slots?.content?.className\n )}\n >\n <DialogPrimitive.Title className='sr-only'>{t('sidebar label')}</DialogPrimitive.Title>\n {slots?.content?.children}\n </DialogPrimitive.Content>\n {slots?.fixedBlockStart && (\n <div\n role='none'\n {...slots?.fixedBlockStart}\n className={mx(\n 'fixed inline-end-0 block-start-0 z-[49] transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out',\n transitionShow ? 'inline-start-[272px]' : 'inline-start-0',\n slots?.fixedBlockStart?.className\n )}\n >\n {slots?.fixedBlockStart?.children}\n </div>\n )}\n {!isLg && (\n <DialogPrimitive.Overlay\n className={mx(\n defaultOverlay,\n 'transition-opacity duration-200 ease-in-out',\n transitionShow ? 'opacity-100' : 'opacity-0'\n )}\n onClick={internalHide}\n />\n )}\n <div\n role='none'\n className={mx(\n 'bs-full transition-[padding-inline-start] duration-200 ease-in-out',\n isLg && isOpen ? 'pis-[272px]' : 'pis-0'\n )}\n >\n {children}\n </div>\n </DialogPrimitive.Root>\n </PanelSidebarContext.Provider>\n );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\nimport React from 'react';\n\nimport type { Profile } from '@dxos/client';\nimport { useClient } from '@dxos/react-client';\nimport { Avatar, Button, ThemeContext, useTranslation } from '@dxos/react-components';\n\nexport const IdentityPanel = ({\n identity,\n onClickManageProfile\n}: {\n identity: Profile;\n onClickManageProfile?: () => void;\n}) => {\n const { t } = useTranslation('os');\n const client = useClient();\n const defaultManageProfile = () => {\n const remoteSource = new URL(client?.config.get('runtime.client.remoteSource') || 'https://halo.dxos.org');\n const tab = window.open(remoteSource.origin, '_blank');\n tab?.focus();\n };\n return (\n <ThemeContext.Provider value={{ themeVariant: 'os' }}>\n <div className='flex flex-col gap-2 justify-center items-center'>\n <Avatar\n size={16}\n variant='circle'\n fallbackValue={identity.identityKey.toHex()}\n label={identity.displayName ?? ''}\n />\n <Button compact onClick={onClickManageProfile ?? defaultManageProfile} className='is-full'>\n {t('manage profile label')}\n </Button>\n </div>\n </ThemeContext.Provider>\n );\n};\n", "//\n// Copyright 2022 DXOS.org\n//\n\nexport const os = {\n 'manage profile label': 'Manage identity',\n 'identity offline description': 'Offline',\n 'sidebar label': 'DXOS sidebar'\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport * as enUS from './locales/en-US';\n\nexport const osTranslations = { 'en-US': enUS };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "Avatar", "mx", "React", "mx", "Popover", "defaultPanel", "defaultArrow", "PanelPopover", "slots", "children", "popoverProps", "Popover", "arrow", "className", "mx", "defaultArrow", "content", "collisionPadding", "sideOffset", "defaultPanel", "trigger", "DialogPrimitive", "React", "createContext", "useCallback", "useContext", "useState", "defaultOverlay", "mx", "useMediaQuery", "useTranslation", "_extends", "PanelSidebarContext", "displayState", "setDisplayState", "useTogglePanelSidebar", "PanelSidebarProvider", "children", "inlineStart", "slots", "t", "isLg", "setInternalDisplayState", "isOpen", "transitionShow", "setTransitionShow", "domShow", "setDomShow", "internalHide", "setTimeout", "internalShow", "Provider", "value", "Root", "open", "modal", "Content", "content", "className", "Title", "fixedBlockStart", "div", "role", "Overlay", "onClick", "React", "useClient", "Avatar", "Button", "ThemeContext", "useTranslation", "IdentityPanel", "identity", "onClickManageProfile", "t", "client", "defaultManageProfile", "remoteSource", "URL", "config", "get", "tab", "window", "open", "origin", "focus", "Provider", "value", "themeVariant", "div", "className", "size", "variant", "fallbackValue", "identityKey", "toHex", "label", "displayName", "compact", "onClick", "_extends", "IdentityPopover", "identity", "openTrigger", "slots", "triggerIsInToolbar", "onClickManageProfile", "popoverProps", "React", "PanelPopover", "Avatar", "size", "variant", "fallbackValue", "identityKey", "toHex", "label", "displayName", "trigger", "className", "mx", "IdentityPanel", "os", "osTranslations", "enUS"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/apps/patterns/react-ui/src/styles/panelStyles.ts":{"bytes":831,"imports":[]},"packages/apps/patterns/react-ui/src/styles/index.ts":{"bytes":387,"imports":[{"path":"packages/apps/patterns/react-ui/src/styles/panelStyles.ts","kind":"import-statement","original":"./panelStyles"}]},"packages/apps/patterns/react-ui/src/layouts/PanelPopover/PanelPopover.tsx":{"bytes":4042,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-components","kind":"import-statement","external":true},{"path":"packages/apps/patterns/react-ui/src/styles/index.ts","kind":"import-statement","original":"../../styles"}]},"packages/apps/patterns/react-ui/src/layouts/PanelPopover/index.ts":{"bytes":388,"imports":[{"path":"packages/apps/patterns/react-ui/src/layouts/PanelPopover/PanelPopover.tsx","kind":"import-statement","original":"./PanelPopover"}]},"packages/apps/patterns/react-ui/src/layouts/PanelSidebar/PanelSidebar.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/apps/patterns/react-ui/src/styles/panelStyles.ts":{"bytes":831,"imports":[]},"packages/apps/patterns/react-ui/src/styles/index.ts":{"bytes":387,"imports":[{"path":"packages/apps/patterns/react-ui/src/styles/panelStyles.ts","kind":"import-statement","original":"./panelStyles"}]},"packages/apps/patterns/react-ui/src/layouts/PanelPopover/PanelPopover.tsx":{"bytes":4042,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-components","kind":"import-statement","external":true},{"path":"packages/apps/patterns/react-ui/src/styles/index.ts","kind":"import-statement","original":"../../styles"}]},"packages/apps/patterns/react-ui/src/layouts/PanelPopover/index.ts":{"bytes":388,"imports":[{"path":"packages/apps/patterns/react-ui/src/layouts/PanelPopover/PanelPopover.tsx","kind":"import-statement","original":"./PanelPopover"}]},"packages/apps/patterns/react-ui/src/layouts/PanelSidebar/PanelSidebar.tsx":{"bytes":12446,"imports":[{"path":"@radix-ui/react-dialog","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-components","kind":"import-statement","external":true}]},"packages/apps/patterns/react-ui/src/layouts/PanelSidebar/index.ts":{"bytes":388,"imports":[{"path":"packages/apps/patterns/react-ui/src/layouts/PanelSidebar/PanelSidebar.tsx","kind":"import-statement","original":"./PanelSidebar"}]},"packages/apps/patterns/react-ui/src/layouts/index.ts":{"bytes":488,"imports":[{"path":"packages/apps/patterns/react-ui/src/layouts/PanelPopover/index.ts","kind":"import-statement","original":"./PanelPopover"},{"path":"packages/apps/patterns/react-ui/src/layouts/PanelSidebar/index.ts","kind":"import-statement","original":"./PanelSidebar"}]},"packages/apps/patterns/react-ui/src/panels/IdentityPanel/IdentityPanel.tsx":{"bytes":4491,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-client","kind":"import-statement","external":true},{"path":"@dxos/react-components","kind":"import-statement","external":true}]},"packages/apps/patterns/react-ui/src/panels/IdentityPanel/index.ts":{"bytes":389,"imports":[{"path":"packages/apps/patterns/react-ui/src/panels/IdentityPanel/IdentityPanel.tsx","kind":"import-statement","original":"./IdentityPanel"}]},"packages/apps/patterns/react-ui/src/panels/index.ts":{"bytes":389,"imports":[{"path":"packages/apps/patterns/react-ui/src/panels/IdentityPanel/index.ts","kind":"import-statement","original":"./IdentityPanel"}]},"packages/apps/patterns/react-ui/src/composites/IdentityPopover/IdentityPopover.tsx":{"bytes":4772,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-components","kind":"import-statement","external":true},{"path":"packages/apps/patterns/react-ui/src/layouts/index.ts","kind":"import-statement","original":"../../layouts"},{"path":"packages/apps/patterns/react-ui/src/panels/index.ts","kind":"import-statement","original":"../../panels"}]},"packages/apps/patterns/react-ui/src/composites/IdentityPopover/index.ts":{"bytes":395,"imports":[{"path":"packages/apps/patterns/react-ui/src/composites/IdentityPopover/IdentityPopover.tsx","kind":"import-statement","original":"./IdentityPopover"}]},"packages/apps/patterns/react-ui/src/composites/index.ts":{"bytes":391,"imports":[{"path":"packages/apps/patterns/react-ui/src/composites/IdentityPopover/index.ts","kind":"import-statement","original":"./IdentityPopover"}]},"packages/apps/patterns/react-ui/src/translations/locales/en-US.ts":{"bytes":745,"imports":[]},"packages/apps/patterns/react-ui/src/translations/index.ts":{"bytes":630,"imports":[{"path":"packages/apps/patterns/react-ui/src/translations/locales/en-US.ts","kind":"import-statement","original":"./locales/en-US"}]},"packages/apps/patterns/react-ui/src/index.ts":{"bytes":733,"imports":[{"path":"packages/apps/patterns/react-ui/src/composites/index.ts","kind":"import-statement","original":"./composites"},{"path":"packages/apps/patterns/react-ui/src/layouts/index.ts","kind":"import-statement","original":"./layouts"},{"path":"packages/apps/patterns/react-ui/src/panels/index.ts","kind":"import-statement","original":"./panels"},{"path":"packages/apps/patterns/react-ui/src/styles/index.ts","kind":"import-statement","original":"./styles"},{"path":"packages/apps/patterns/react-ui/src/translations/index.ts","kind":"import-statement","original":"./translations"}]}},"outputs":{"packages/apps/patterns/react-ui/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":14211},"packages/apps/patterns/react-ui/dist/lib/browser/index.mjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-components","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-components","kind":"import-statement","external":true},{"path":"@radix-ui/react-dialog","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-components","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-client","kind":"import-statement","external":true},{"path":"@dxos/react-components","kind":"import-statement","external":true}],"exports":["IdentityPanel","IdentityPopover","PanelPopover","PanelSidebarContext","PanelSidebarProvider","defaultArrow","defaultPanel","osTranslations","useTogglePanelSidebar"],"entryPoint":"packages/apps/patterns/react-ui/src/index.ts","inputs":{"packages/apps/patterns/react-ui/src/composites/IdentityPopover/IdentityPopover.tsx":{"bytesInOutput":1444},"packages/apps/patterns/react-ui/src/layouts/PanelPopover/PanelPopover.tsx":{"bytesInOutput":1286},"packages/apps/patterns/react-ui/src/styles/panelStyles.ts":{"bytesInOutput":161},"packages/apps/patterns/react-ui/src/styles/index.ts":{"bytesInOutput":0},"packages/apps/patterns/react-ui/src/layouts/PanelPopover/index.ts":{"bytesInOutput":0},"packages/apps/patterns/react-ui/src/layouts/index.ts":{"bytesInOutput":0},"packages/apps/patterns/react-ui/src/layouts/PanelSidebar/PanelSidebar.tsx":{"bytesInOutput":3698},"packages/apps/patterns/react-ui/src/layouts/PanelSidebar/index.ts":{"bytesInOutput":0},"packages/apps/patterns/react-ui/src/panels/IdentityPanel/IdentityPanel.tsx":{"bytesInOutput":1256},"packages/apps/patterns/react-ui/src/panels/IdentityPanel/index.ts":{"bytesInOutput":0},"packages/apps/patterns/react-ui/src/panels/index.ts":{"bytesInOutput":0},"packages/apps/patterns/react-ui/src/composites/IdentityPopover/index.ts":{"bytesInOutput":0},"packages/apps/patterns/react-ui/src/composites/index.ts":{"bytesInOutput":0},"packages/apps/patterns/react-ui/src/index.ts":{"bytesInOutput":0},"packages/apps/patterns/react-ui/src/translations/locales/en-US.ts":{"bytesInOutput":207},"packages/apps/patterns/react-ui/src/translations/index.ts":{"bytesInOutput":51}},"bytes":9171}}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
2
|
+
import React, { ComponentProps, Dispatch, PropsWithChildren, SetStateAction } from 'react';
|
|
2
3
|
export declare type PanelSidebarState = 'show' | 'hide';
|
|
3
|
-
export declare const sidebarWidth = 272;
|
|
4
4
|
export interface PanelSidebarContextValue {
|
|
5
5
|
setDisplayState: Dispatch<SetStateAction<PanelSidebarState>>;
|
|
6
6
|
displayState: PanelSidebarState;
|
|
@@ -8,7 +8,7 @@ export interface PanelSidebarContextValue {
|
|
|
8
8
|
export declare const PanelSidebarContext: React.Context<PanelSidebarContextValue>;
|
|
9
9
|
export declare const useTogglePanelSidebar: () => () => void;
|
|
10
10
|
export interface PanelSidebarProviderSlots {
|
|
11
|
-
content?: ComponentProps<typeof
|
|
11
|
+
content?: ComponentProps<typeof DialogPrimitive.Content>;
|
|
12
12
|
fixedBlockStart?: ComponentProps<'div'>;
|
|
13
13
|
fixedBlockEnd?: ComponentProps<'div'>;
|
|
14
14
|
}
|
|
@@ -16,5 +16,5 @@ export interface PanelSidebarProviderProps {
|
|
|
16
16
|
inlineStart?: boolean;
|
|
17
17
|
slots?: PanelSidebarProviderSlots;
|
|
18
18
|
}
|
|
19
|
-
export declare const PanelSidebarProvider: ({ children, slots }: PropsWithChildren<PanelSidebarProviderProps>) => JSX.Element;
|
|
19
|
+
export declare const PanelSidebarProvider: ({ children, inlineStart, slots }: PropsWithChildren<PanelSidebarProviderProps>) => JSX.Element;
|
|
20
20
|
//# sourceMappingURL=PanelSidebar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PanelSidebar.d.ts","sourceRoot":"","sources":["../../../../../src/layouts/PanelSidebar/PanelSidebar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PanelSidebar.d.ts","sourceRoot":"","sources":["../../../../../src/layouts/PanelSidebar/PanelSidebar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,KAAK,EAAE,EACZ,cAAc,EAEd,QAAQ,EACR,iBAAiB,EACjB,cAAc,EAIf,MAAM,OAAO,CAAC;AAIf,oBAAY,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhD,MAAM,WAAW,wBAAwB;IACvC,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAC7D,YAAY,EAAE,iBAAiB,CAAC;CACjC;AAED,eAAO,MAAM,mBAAmB,yCAG9B,CAAC;AAEH,eAAO,MAAM,qBAAqB,kBAKjC,CAAC;AAEF,MAAM,WAAW,yBAAyB;IACxC,OAAO,CAAC,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;IACzD,eAAe,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IACxC,aAAa,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;CACvC;AAED,MAAM,WAAW,yBAAyB;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,yBAAyB,CAAC;CACnC;AAED,eAAO,MAAM,oBAAoB,qCAI9B,kBAAkB,yBAAyB,CAAC,gBA6E9C,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.23",
|
|
4
4
|
"description": "A React component library for DXOS’s OS experiences",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -17,13 +17,13 @@
|
|
|
17
17
|
"@react-hook/async": "^3.1.1",
|
|
18
18
|
"debug": "^4.3.3",
|
|
19
19
|
"url-join": "^5.0.0",
|
|
20
|
-
"@dxos/client": "0.1.
|
|
21
|
-
"@dxos/config": "0.1.
|
|
22
|
-
"@dxos/debug": "0.1.
|
|
23
|
-
"@dxos/keys": "0.1.
|
|
24
|
-
"@dxos/react-client": "0.1.
|
|
25
|
-
"@dxos/react-components": "0.1.
|
|
26
|
-
"@dxos/util": "0.1.
|
|
20
|
+
"@dxos/client": "0.1.23",
|
|
21
|
+
"@dxos/config": "0.1.23",
|
|
22
|
+
"@dxos/debug": "0.1.23",
|
|
23
|
+
"@dxos/keys": "0.1.23",
|
|
24
|
+
"@dxos/react-client": "0.1.23",
|
|
25
|
+
"@dxos/react-components": "0.1.23",
|
|
26
|
+
"@dxos/util": "0.1.23"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@types/debug": "^4.1.7",
|
|
@@ -7,7 +7,6 @@ import React, {
|
|
|
7
7
|
ComponentProps,
|
|
8
8
|
createContext,
|
|
9
9
|
Dispatch,
|
|
10
|
-
Fragment,
|
|
11
10
|
PropsWithChildren,
|
|
12
11
|
SetStateAction,
|
|
13
12
|
useCallback,
|
|
@@ -19,8 +18,6 @@ import { defaultOverlay, mx, useMediaQuery, useTranslation } from '@dxos/react-c
|
|
|
19
18
|
|
|
20
19
|
export type PanelSidebarState = 'show' | 'hide';
|
|
21
20
|
|
|
22
|
-
export const sidebarWidth = 272;
|
|
23
|
-
|
|
24
21
|
export interface PanelSidebarContextValue {
|
|
25
22
|
setDisplayState: Dispatch<SetStateAction<PanelSidebarState>>;
|
|
26
23
|
displayState: PanelSidebarState;
|
|
@@ -39,7 +36,7 @@ export const useTogglePanelSidebar = () => {
|
|
|
39
36
|
};
|
|
40
37
|
|
|
41
38
|
export interface PanelSidebarProviderSlots {
|
|
42
|
-
content?: ComponentProps<typeof
|
|
39
|
+
content?: ComponentProps<typeof DialogPrimitive.Content>;
|
|
43
40
|
fixedBlockStart?: ComponentProps<'div'>;
|
|
44
41
|
fixedBlockEnd?: ComponentProps<'div'>;
|
|
45
42
|
}
|
|
@@ -49,22 +46,28 @@ export interface PanelSidebarProviderProps {
|
|
|
49
46
|
slots?: PanelSidebarProviderSlots;
|
|
50
47
|
}
|
|
51
48
|
|
|
52
|
-
export const PanelSidebarProvider = ({
|
|
49
|
+
export const PanelSidebarProvider = ({
|
|
50
|
+
children,
|
|
51
|
+
inlineStart,
|
|
52
|
+
slots
|
|
53
|
+
}: PropsWithChildren<PanelSidebarProviderProps>) => {
|
|
53
54
|
const { t } = useTranslation('os');
|
|
54
|
-
const [displayState, setInternalDisplayState] = useState<PanelSidebarState>('hide');
|
|
55
|
-
const [transitionShow, setTransitionShow] = useState(false);
|
|
56
|
-
const isOpen = displayState === 'show';
|
|
57
|
-
|
|
58
55
|
const [isLg] = useMediaQuery('lg');
|
|
56
|
+
const [displayState, setInternalDisplayState] = useState<PanelSidebarState>(isLg ? 'show' : 'hide');
|
|
57
|
+
const isOpen = displayState === 'show';
|
|
58
|
+
const [transitionShow, setTransitionShow] = useState(isOpen);
|
|
59
|
+
const [domShow, setDomShow] = useState(isOpen);
|
|
59
60
|
|
|
60
61
|
const internalHide = () => {
|
|
61
62
|
setTransitionShow(false);
|
|
63
|
+
setInternalDisplayState('hide');
|
|
62
64
|
setTimeout(() => {
|
|
63
|
-
|
|
65
|
+
setDomShow(false);
|
|
64
66
|
}, 200);
|
|
65
67
|
};
|
|
66
68
|
|
|
67
69
|
const internalShow = () => {
|
|
70
|
+
setDomShow(true);
|
|
68
71
|
setInternalDisplayState('show');
|
|
69
72
|
setTimeout(() => {
|
|
70
73
|
setTransitionShow(true);
|
|
@@ -77,16 +80,17 @@ export const PanelSidebarProvider = ({ children, slots }: PropsWithChildren<Pane
|
|
|
77
80
|
|
|
78
81
|
return (
|
|
79
82
|
<PanelSidebarContext.Provider value={{ setDisplayState, displayState }}>
|
|
80
|
-
<DialogPrimitive.Root open={
|
|
83
|
+
<DialogPrimitive.Root open={domShow} modal={!isLg}>
|
|
81
84
|
<DialogPrimitive.Content
|
|
85
|
+
{...slots?.content}
|
|
82
86
|
className={mx(
|
|
83
|
-
'fixed block-start-0 block-end-0 is-[272px] z-50 transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out',
|
|
84
|
-
'
|
|
85
|
-
|
|
87
|
+
'fixed block-start-0 block-end-0 is-[272px] z-50 transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out overflow-x-hidden overflow-y-auto',
|
|
88
|
+
transitionShow ? 'inline-start-0' : 'inline-start-[-272px]',
|
|
89
|
+
slots?.content?.className
|
|
86
90
|
)}
|
|
87
91
|
>
|
|
88
92
|
<DialogPrimitive.Title className='sr-only'>{t('sidebar label')}</DialogPrimitive.Title>
|
|
89
|
-
|
|
93
|
+
{slots?.content?.children}
|
|
90
94
|
</DialogPrimitive.Content>
|
|
91
95
|
{slots?.fixedBlockStart && (
|
|
92
96
|
<div
|