@dxos/react-ui 0.1.21 → 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 +16 -13
- 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 +3 -2
- package/dist/types/src/layouts/PanelSidebar/PanelSidebar.d.ts.map +1 -1
- package/package.json +8 -8
- package/src/layouts/PanelSidebar/PanelSidebar.tsx +16 -12
|
@@ -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) {
|
|
@@ -86,19 +86,22 @@ var useTogglePanelSidebar = () => {
|
|
|
86
86
|
]);
|
|
87
87
|
};
|
|
88
88
|
var PanelSidebarProvider = ({ children, inlineStart, slots }) => {
|
|
89
|
-
var _a, _b;
|
|
89
|
+
var _a, _b, _c, _d;
|
|
90
90
|
const { t } = useTranslation("os");
|
|
91
|
-
const [displayState, setInternalDisplayState] = useState("hide");
|
|
92
|
-
const [transitionShow, setTransitionShow] = useState(false);
|
|
93
|
-
const isOpen = displayState === "show";
|
|
94
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);
|
|
95
96
|
const internalHide = () => {
|
|
96
97
|
setTransitionShow(false);
|
|
98
|
+
setInternalDisplayState("hide");
|
|
97
99
|
setTimeout(() => {
|
|
98
|
-
|
|
100
|
+
setDomShow(false);
|
|
99
101
|
}, 200);
|
|
100
102
|
};
|
|
101
103
|
const internalShow = () => {
|
|
104
|
+
setDomShow(true);
|
|
102
105
|
setInternalDisplayState("show");
|
|
103
106
|
setTimeout(() => {
|
|
104
107
|
setTransitionShow(true);
|
|
@@ -111,17 +114,17 @@ var PanelSidebarProvider = ({ children, inlineStart, slots }) => {
|
|
|
111
114
|
displayState
|
|
112
115
|
}
|
|
113
116
|
}, /* @__PURE__ */ React2.createElement(DialogPrimitive.Root, {
|
|
114
|
-
open:
|
|
117
|
+
open: domShow,
|
|
115
118
|
modal: !isLg
|
|
116
|
-
}, /* @__PURE__ */ React2.createElement(DialogPrimitive.Content, {
|
|
117
|
-
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
|
|
118
|
-
}, /* @__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, {
|
|
119
122
|
className: "sr-only"
|
|
120
|
-
}, 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({
|
|
121
124
|
role: "none"
|
|
122
125
|
}, slots == null ? void 0 : slots.fixedBlockStart, {
|
|
123
|
-
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", (
|
|
124
|
-
}), (
|
|
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, {
|
|
125
128
|
className: mx2(defaultOverlay, "transition-opacity duration-200 ease-in-out", transitionShow ? "opacity-100" : "opacity-0"),
|
|
126
129
|
onClick: internalHide
|
|
127
130
|
}), /* @__PURE__ */ React2.createElement("div", {
|
|
@@ -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,4 +1,5 @@
|
|
|
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
4
|
export interface PanelSidebarContextValue {
|
|
4
5
|
setDisplayState: Dispatch<SetStateAction<PanelSidebarState>>;
|
|
@@ -7,7 +8,7 @@ export interface PanelSidebarContextValue {
|
|
|
7
8
|
export declare const PanelSidebarContext: React.Context<PanelSidebarContextValue>;
|
|
8
9
|
export declare const useTogglePanelSidebar: () => () => void;
|
|
9
10
|
export interface PanelSidebarProviderSlots {
|
|
10
|
-
content?: ComponentProps<typeof
|
|
11
|
+
content?: ComponentProps<typeof DialogPrimitive.Content>;
|
|
11
12
|
fixedBlockStart?: ComponentProps<'div'>;
|
|
12
13
|
fixedBlockEnd?: ComponentProps<'div'>;
|
|
13
14
|
}
|
|
@@ -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,
|
|
@@ -37,7 +36,7 @@ export const useTogglePanelSidebar = () => {
|
|
|
37
36
|
};
|
|
38
37
|
|
|
39
38
|
export interface PanelSidebarProviderSlots {
|
|
40
|
-
content?: ComponentProps<typeof
|
|
39
|
+
content?: ComponentProps<typeof DialogPrimitive.Content>;
|
|
41
40
|
fixedBlockStart?: ComponentProps<'div'>;
|
|
42
41
|
fixedBlockEnd?: ComponentProps<'div'>;
|
|
43
42
|
}
|
|
@@ -53,40 +52,45 @@ export const PanelSidebarProvider = ({
|
|
|
53
52
|
slots
|
|
54
53
|
}: PropsWithChildren<PanelSidebarProviderProps>) => {
|
|
55
54
|
const { t } = useTranslation('os');
|
|
56
|
-
const [displayState, setInternalDisplayState] = useState<PanelSidebarState>('hide');
|
|
57
|
-
const [transitionShow, setTransitionShow] = useState(false);
|
|
58
|
-
const isOpen = displayState === 'show';
|
|
59
|
-
|
|
60
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);
|
|
61
60
|
|
|
62
61
|
const internalHide = () => {
|
|
63
62
|
setTransitionShow(false);
|
|
63
|
+
setInternalDisplayState('hide');
|
|
64
64
|
setTimeout(() => {
|
|
65
|
-
|
|
65
|
+
setDomShow(false);
|
|
66
66
|
}, 200);
|
|
67
67
|
};
|
|
68
|
+
|
|
68
69
|
const internalShow = () => {
|
|
70
|
+
setDomShow(true);
|
|
69
71
|
setInternalDisplayState('show');
|
|
70
72
|
setTimeout(() => {
|
|
71
73
|
setTransitionShow(true);
|
|
72
74
|
// todo (thure): this may be a race condition in certain situations
|
|
73
75
|
}, 0);
|
|
74
76
|
};
|
|
77
|
+
|
|
75
78
|
const setDisplayState = (displayState: SetStateAction<PanelSidebarState>) =>
|
|
76
79
|
displayState === 'show' ? internalShow() : internalHide();
|
|
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
|