@dxos/react-ui 0.1.21 → 0.1.22
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 +4 -2
- 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 +2 -1
- package/dist/types/src/layouts/PanelSidebar/PanelSidebar.d.ts.map +1 -1
- package/package.json +8 -8
- package/src/layouts/PanelSidebar/PanelSidebar.tsx +6 -6
|
@@ -72,6 +72,7 @@ function _extends2() {
|
|
|
72
72
|
};
|
|
73
73
|
return _extends2.apply(this, arguments);
|
|
74
74
|
}
|
|
75
|
+
var sidebarWidth = 272;
|
|
75
76
|
var PanelSidebarContext = /* @__PURE__ */ createContext({
|
|
76
77
|
displayState: "hide",
|
|
77
78
|
setDisplayState: () => {
|
|
@@ -85,7 +86,7 @@ var useTogglePanelSidebar = () => {
|
|
|
85
86
|
displayState
|
|
86
87
|
]);
|
|
87
88
|
};
|
|
88
|
-
var PanelSidebarProvider = ({ children,
|
|
89
|
+
var PanelSidebarProvider = ({ children, slots }) => {
|
|
89
90
|
var _a, _b;
|
|
90
91
|
const { t } = useTranslation("os");
|
|
91
92
|
const [displayState, setInternalDisplayState] = useState("hide");
|
|
@@ -114,7 +115,7 @@ var PanelSidebarProvider = ({ children, inlineStart, slots }) => {
|
|
|
114
115
|
open: isOpen,
|
|
115
116
|
modal: !isLg
|
|
116
117
|
}, /* @__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", "bg-neutral-50 dark:bg-neutral-950", transitionShow ? "inline-start-0" :
|
|
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", "bg-neutral-50 dark:bg-neutral-950", transitionShow ? "inline-start-0" : `inline-start-[-${sidebarWidth}px]`)
|
|
118
119
|
}, /* @__PURE__ */ React2.createElement(DialogPrimitive.Title, {
|
|
119
120
|
className: "sr-only"
|
|
120
121
|
}, t("sidebar label")), /* @__PURE__ */ React2.createElement(Fragment, _extends2({}, slots == null ? void 0 : slots.content))), (slots == null ? void 0 : slots.fixedBlockStart) && /* @__PURE__ */ React2.createElement("div", _extends2({
|
|
@@ -223,6 +224,7 @@ export {
|
|
|
223
224
|
defaultArrow,
|
|
224
225
|
defaultPanel,
|
|
225
226
|
osTranslations,
|
|
227
|
+
sidebarWidth,
|
|
226
228
|
useTogglePanelSidebar
|
|
227
229
|
};
|
|
228
230
|
//# 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 Fragment,\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 Fragment>;\n fixedBlockStart?: ComponentProps<'div'>;\n fixedBlockEnd?: ComponentProps<'div'>;\n}\n\nexport interface PanelSidebarProviderProps {\n inlineStart?: boolean;\n slots?: PanelSidebarProviderSlots;\n}\n\nexport const PanelSidebarProvider = ({
|
|
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,eAEAC,UAGAC,aACAC,YACAC,gBACK;AAEP,SAASC,gBAAgBC,MAAAA,KAAIC,eAAeC,sBAAsB;AAblE,SAAAC,YAAA;;;;;;;;;;;;;;
|
|
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", "Fragment", "useCallback", "useContext", "useState", "defaultOverlay", "mx", "useMediaQuery", "useTranslation", "_extends", "PanelSidebarContext", "displayState", "setDisplayState", "useTogglePanelSidebar", "PanelSidebarProvider", "children", "
|
|
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 Fragment,\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 const sidebarWidth = 272;\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 Fragment>;\n fixedBlockStart?: ComponentProps<'div'>;\n fixedBlockEnd?: ComponentProps<'div'>;\n}\n\nexport interface PanelSidebarProviderProps {\n inlineStart?: boolean;\n slots?: PanelSidebarProviderSlots;\n}\n\nexport const PanelSidebarProvider = ({ children, slots }: PropsWithChildren<PanelSidebarProviderProps>) => {\n const { t } = useTranslation('os');\n const [displayState, setInternalDisplayState] = useState<PanelSidebarState>('hide');\n const [transitionShow, setTransitionShow] = useState(false);\n const isOpen = displayState === 'show';\n\n const [isLg] = useMediaQuery('lg');\n\n const internalHide = () => {\n setTransitionShow(false);\n setTimeout(() => {\n setInternalDisplayState('hide');\n }, 200);\n };\n\n const internalShow = () => {\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={isOpen} modal={!isLg}>\n <DialogPrimitive.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',\n 'bg-neutral-50 dark:bg-neutral-950',\n transitionShow ? 'inline-start-0' : `inline-start-[-${sidebarWidth}px]`\n )}\n >\n <DialogPrimitive.Title className='sr-only'>{t('sidebar label')}</DialogPrimitive.Title>\n <Fragment {...slots?.content} />\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", "Fragment", "useCallback", "useContext", "useState", "defaultOverlay", "mx", "useMediaQuery", "useTranslation", "_extends", "sidebarWidth", "PanelSidebarContext", "displayState", "setDisplayState", "useTogglePanelSidebar", "PanelSidebarProvider", "children", "slots", "t", "setInternalDisplayState", "transitionShow", "setTransitionShow", "isOpen", "isLg", "internalHide", "setTimeout", "internalShow", "Provider", "value", "Root", "open", "modal", "Content", "className", "Title", "content", "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":12079,"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":13967},"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","sidebarWidth","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":3504},"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":8993}}}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { ComponentProps, Dispatch, Fragment, PropsWithChildren, SetStateAction } from 'react';
|
|
2
2
|
export declare type PanelSidebarState = 'show' | 'hide';
|
|
3
|
+
export declare const sidebarWidth = 272;
|
|
3
4
|
export interface PanelSidebarContextValue {
|
|
4
5
|
setDisplayState: Dispatch<SetStateAction<PanelSidebarState>>;
|
|
5
6
|
displayState: PanelSidebarState;
|
|
@@ -15,5 +16,5 @@ export interface PanelSidebarProviderProps {
|
|
|
15
16
|
inlineStart?: boolean;
|
|
16
17
|
slots?: PanelSidebarProviderSlots;
|
|
17
18
|
}
|
|
18
|
-
export declare const PanelSidebarProvider: ({ children,
|
|
19
|
+
export declare const PanelSidebarProvider: ({ children, slots }: PropsWithChildren<PanelSidebarProviderProps>) => JSX.Element;
|
|
19
20
|
//# sourceMappingURL=PanelSidebar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PanelSidebar.d.ts","sourceRoot":"","sources":["../../../../../src/layouts/PanelSidebar/PanelSidebar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EACZ,cAAc,EAEd,QAAQ,EACR,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,QAAQ,CAAC,CAAC;IAC1C,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,
|
|
1
|
+
{"version":3,"file":"PanelSidebar.d.ts","sourceRoot":"","sources":["../../../../../src/layouts/PanelSidebar/PanelSidebar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EACZ,cAAc,EAEd,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,cAAc,EAIf,MAAM,OAAO,CAAC;AAIf,oBAAY,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhD,eAAO,MAAM,YAAY,MAAM,CAAC;AAEhC,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,QAAQ,CAAC,CAAC;IAC1C,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,wBAAyB,kBAAkB,yBAAyB,CAAC,gBA0ErG,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.22",
|
|
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.22",
|
|
21
|
+
"@dxos/config": "0.1.22",
|
|
22
|
+
"@dxos/debug": "0.1.22",
|
|
23
|
+
"@dxos/keys": "0.1.22",
|
|
24
|
+
"@dxos/react-client": "0.1.22",
|
|
25
|
+
"@dxos/react-components": "0.1.22",
|
|
26
|
+
"@dxos/util": "0.1.22"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@types/debug": "^4.1.7",
|
|
@@ -19,6 +19,8 @@ import { defaultOverlay, mx, useMediaQuery, useTranslation } from '@dxos/react-c
|
|
|
19
19
|
|
|
20
20
|
export type PanelSidebarState = 'show' | 'hide';
|
|
21
21
|
|
|
22
|
+
export const sidebarWidth = 272;
|
|
23
|
+
|
|
22
24
|
export interface PanelSidebarContextValue {
|
|
23
25
|
setDisplayState: Dispatch<SetStateAction<PanelSidebarState>>;
|
|
24
26
|
displayState: PanelSidebarState;
|
|
@@ -47,11 +49,7 @@ export interface PanelSidebarProviderProps {
|
|
|
47
49
|
slots?: PanelSidebarProviderSlots;
|
|
48
50
|
}
|
|
49
51
|
|
|
50
|
-
export const PanelSidebarProvider = ({
|
|
51
|
-
children,
|
|
52
|
-
inlineStart,
|
|
53
|
-
slots
|
|
54
|
-
}: PropsWithChildren<PanelSidebarProviderProps>) => {
|
|
52
|
+
export const PanelSidebarProvider = ({ children, slots }: PropsWithChildren<PanelSidebarProviderProps>) => {
|
|
55
53
|
const { t } = useTranslation('os');
|
|
56
54
|
const [displayState, setInternalDisplayState] = useState<PanelSidebarState>('hide');
|
|
57
55
|
const [transitionShow, setTransitionShow] = useState(false);
|
|
@@ -65,6 +63,7 @@ export const PanelSidebarProvider = ({
|
|
|
65
63
|
setInternalDisplayState('hide');
|
|
66
64
|
}, 200);
|
|
67
65
|
};
|
|
66
|
+
|
|
68
67
|
const internalShow = () => {
|
|
69
68
|
setInternalDisplayState('show');
|
|
70
69
|
setTimeout(() => {
|
|
@@ -72,6 +71,7 @@ export const PanelSidebarProvider = ({
|
|
|
72
71
|
// todo (thure): this may be a race condition in certain situations
|
|
73
72
|
}, 0);
|
|
74
73
|
};
|
|
74
|
+
|
|
75
75
|
const setDisplayState = (displayState: SetStateAction<PanelSidebarState>) =>
|
|
76
76
|
displayState === 'show' ? internalShow() : internalHide();
|
|
77
77
|
|
|
@@ -82,7 +82,7 @@ export const PanelSidebarProvider = ({
|
|
|
82
82
|
className={mx(
|
|
83
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
84
|
'bg-neutral-50 dark:bg-neutral-950',
|
|
85
|
-
transitionShow ? 'inline-start-0' :
|
|
85
|
+
transitionShow ? 'inline-start-0' : `inline-start-[-${sidebarWidth}px]`
|
|
86
86
|
)}
|
|
87
87
|
>
|
|
88
88
|
<DialogPrimitive.Title className='sr-only'>{t('sidebar label')}</DialogPrimitive.Title>
|