@dxos/react-ui-stack 0.6.13-staging.1e988a3 → 0.6.14-main.7bd9c89
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 +9 -8
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/testing/index.mjs +1 -1
- package/dist/lib/browser/testing/index.mjs.map +3 -3
- package/dist/lib/node/index.cjs +7 -6
- package/dist/lib/node/index.cjs.map +3 -3
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node/testing/index.cjs.map +2 -2
- package/dist/lib/node-esm/index.mjs +378 -0
- package/dist/lib/node-esm/index.mjs.map +7 -0
- package/dist/lib/node-esm/meta.json +1 -0
- package/dist/lib/node-esm/testing/index.mjs +161 -0
- package/dist/lib/node-esm/testing/index.mjs.map +7 -0
- package/dist/types/src/components/CaretDownUp.d.ts.map +1 -1
- package/dist/types/src/components/Deck.stories.d.ts.map +1 -1
- package/dist/types/src/components/Section.d.ts +2 -3
- package/dist/types/src/components/Section.d.ts.map +1 -1
- package/dist/types/src/components/Stack.d.ts +2 -2
- package/dist/types/src/components/Stack.d.ts.map +1 -1
- package/dist/types/src/next/Stack.d.ts +9 -0
- package/dist/types/src/next/Stack.d.ts.map +1 -0
- package/dist/types/src/next/Stack.stories.d.ts +8 -0
- package/dist/types/src/next/Stack.stories.d.ts.map +1 -0
- package/dist/types/src/next/StackItem.d.ts +14 -0
- package/dist/types/src/next/StackItem.d.ts.map +1 -0
- package/dist/types/src/next/index.d.ts +2 -0
- package/dist/types/src/next/index.d.ts.map +1 -0
- package/dist/types/src/playwright/playwright.config.d.ts +2 -2
- package/dist/types/src/playwright/playwright.config.d.ts.map +1 -1
- package/dist/types/src/testing/TableContent.d.ts.map +1 -1
- package/dist/types/src/testing/generator.d.ts +2 -2
- package/dist/types/src/testing/generator.d.ts.map +1 -1
- package/package.json +30 -21
- package/src/components/CaretDownUp.tsx +1 -0
- package/src/components/ContentTypes.stories.tsx +1 -1
- package/src/components/Deck.stories.tsx +17 -27
- package/src/components/Section.stories.tsx +1 -1
- package/src/components/Section.tsx +9 -18
- package/src/components/Stack.stories.tsx +1 -1
- package/src/components/Stack.tsx +2 -2
- package/src/next/Stack.stories.tsx +148 -0
- package/src/next/Stack.tsx +30 -0
- package/src/next/StackItem.tsx +78 -0
- package/src/next/index.ts +5 -0
- package/src/playwright/playwright.config.ts +13 -2
- package/src/playwright/smoke.spec.ts +11 -19
- package/src/testing/TableContent.tsx +1 -0
- package/src/testing/generator.ts +4 -4
|
@@ -8,11 +8,11 @@ import { dropRingInner } from "@dxos/react-ui-theme";
|
|
|
8
8
|
|
|
9
9
|
// packages/ui/react-ui-stack/src/components/Section.tsx
|
|
10
10
|
import { useFocusableGroup, useTabsterAttributes } from "@fluentui/react-tabster";
|
|
11
|
-
import { ArrowLineDown, ArrowLineUp, ArrowSquareOut, CaretUpDown,
|
|
11
|
+
import { ArrowLineDown, ArrowLineUp, ArrowSquareOut, CaretUpDown, Trash } from "@phosphor-icons/react";
|
|
12
12
|
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
|
|
13
13
|
import React2, { forwardRef, useState } from "react";
|
|
14
|
-
import { Button, DropdownMenu, List, ListItem, ScrollArea, Toolbar, toLocalizedString, useTranslation } from "@dxos/react-ui";
|
|
15
|
-
import {
|
|
14
|
+
import { Button, DropdownMenu, Icon, List, ListItem, ScrollArea, Toolbar, toLocalizedString, useTranslation } from "@dxos/react-ui";
|
|
15
|
+
import { useAttendableAttributes } from "@dxos/react-ui-attention";
|
|
16
16
|
import { DropDownMenuDragHandleTrigger, resizeHandle, resizeHandleHorizontal } from "@dxos/react-ui-deck";
|
|
17
17
|
import { useMosaic } from "@dxos/react-ui-mosaic";
|
|
18
18
|
import { focusRing, getSize, hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx } from "@dxos/react-ui-theme";
|
|
@@ -70,7 +70,7 @@ var translations_default = [
|
|
|
70
70
|
// packages/ui/react-ui-stack/src/components/Section.tsx
|
|
71
71
|
var sectionActionDimensions = "p-1 shrink-0 min-bs-0 is-[--rail-action] bs-min";
|
|
72
72
|
var resizeHandleStyles = mx(resizeHandle, resizeHandleHorizontal, "is-full bs-[--rail-action] col-start-2");
|
|
73
|
-
var Section = /* @__PURE__ */ forwardRef(({ id, title, icon
|
|
73
|
+
var Section = /* @__PURE__ */ forwardRef(({ id, title, icon = "ph--placeholder--regular", size = "intrinsic", collapsed, active, isResizable, draggableProps, draggableStyle, onDelete, onNavigate, onAddBefore, onAddAfter, onCollapseSection, children }, forwardedRef) => {
|
|
74
74
|
const { t } = useTranslation(translationKey);
|
|
75
75
|
const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
|
|
76
76
|
const sectionActionsToolbar = useTabsterAttributes({
|
|
@@ -83,8 +83,7 @@ var Section = /* @__PURE__ */ forwardRef(({ id, title, icon: Icon = DotsNine, si
|
|
|
83
83
|
}
|
|
84
84
|
});
|
|
85
85
|
const sectionContentGroup = useFocusableGroup({});
|
|
86
|
-
const attendableAttrs =
|
|
87
|
-
const hasAttention = useHasAttention(id);
|
|
86
|
+
const attendableAttrs = useAttendableAttributes(id);
|
|
88
87
|
return /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Root, {
|
|
89
88
|
asChild: true,
|
|
90
89
|
open: !collapsed,
|
|
@@ -100,7 +99,7 @@ var Section = /* @__PURE__ */ forwardRef(({ id, title, icon: Icon = DotsNine, si
|
|
|
100
99
|
style: draggableStyle
|
|
101
100
|
}, /* @__PURE__ */ React2.createElement("div", {
|
|
102
101
|
role: "none",
|
|
103
|
-
className: mx("grid col-span-2 grid-cols-subgrid", "bg-base
|
|
102
|
+
className: mx("grid col-span-2 grid-cols-subgrid", "bg-base attention-surface", hoverableControls, hoverableFocusedWithinControls, (active === "origin" || active === "rearrange" || active === "destination") && "opacity-0")
|
|
104
103
|
}, /* @__PURE__ */ React2.createElement("div", {
|
|
105
104
|
role: "toolbar",
|
|
106
105
|
"aria-orientation": "vertical",
|
|
@@ -122,7 +121,9 @@ var Section = /* @__PURE__ */ forwardRef(({ id, title, icon: Icon = DotsNine, si
|
|
|
122
121
|
classNames: "m-0",
|
|
123
122
|
...draggableProps
|
|
124
123
|
}, /* @__PURE__ */ React2.createElement(Icon, {
|
|
125
|
-
|
|
124
|
+
icon,
|
|
125
|
+
size: 5,
|
|
126
|
+
classNames: "transition-opacity"
|
|
126
127
|
})), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null, collapsed ? /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
|
|
127
128
|
onClick: onNavigate,
|
|
128
129
|
"data-testid": "section.navigate-to"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Stack.tsx", "../../../src/components/Section.tsx", "../../../src/components/CaretDownUp.tsx", "../../../src/components/style-fragments.ts", "../../../src/translations.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { useArrowNavigationGroup, useFocusableGroup } from '@fluentui/react-tabster';\nimport React, { forwardRef, useCallback } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { List, useTranslation } from '@dxos/react-ui';\nimport {\n type MosaicContainerProps,\n type MosaicTileComponent,\n Mosaic,\n Path,\n useContainer,\n useItemsWithPreview,\n useMosaic,\n} from '@dxos/react-ui-mosaic';\nimport { dropRingInner } from '@dxos/react-ui-theme';\n\nimport {\n type CollapsedSections,\n type AddSectionPosition,\n SectionTile,\n type StackContextValue,\n type StackItem,\n type StackSectionContent,\n type StackSectionItem,\n} from './Section';\nimport { stackColumns } from './style-fragments';\nimport { translationKey } from '../translations';\n\nexport type Direction = 'horizontal' | 'vertical';\n\nexport type { CollapsedSections, AddSectionPosition };\n\nexport const DEFAULT_TYPE = 'stack-section';\n\nexport type StackProps<TData extends StackSectionContent = StackSectionContent> = Omit<\n MosaicContainerProps<TData, number>,\n 'debug' | 'Component'\n> &\n Omit<StackContextValue<TData>, 'setCollapsedSections'> & {\n items?: StackSectionItem[];\n separation?: boolean; // TODO(burdon): Style.\n onCollapseSection?: (id: string, collapsed: boolean) => void;\n emptyComponent?: React.ReactNode;\n };\n\nexport const Stack = ({\n id,\n type = DEFAULT_TYPE,\n SectionContent,\n items = [],\n separation = true,\n transform,\n onOver,\n onDrop,\n onAddSection,\n onDeleteSection,\n onNavigateToSection,\n onCollapseSection,\n ...props\n}: StackProps) => {\n const { ref: containerRef, width = 0 } = useResizeDetector<HTMLDivElement>({ refreshRate: 200 });\n const { operation, overItem } = useMosaic();\n const itemsWithPreview = useItemsWithPreview({ path: id, items });\n\n const getOverlayStyle = useCallback(() => ({ width }), [width]);\n const getOverlayProps = useCallback(\n () => ({ itemContext: { transform, SectionContent } }),\n [transform, SectionContent],\n );\n\n // TODO(thure): The root cause of the discrepancy between `activeNodeRect.top` and `overlayNodeRect.top` in Composer\n // in particular is not yet known, so this solution may may backfire in unforeseeable cases.\n const stackModifier = useCallback<Exclude<MosaicContainerProps['modifier'], undefined>>(\n (_activeItem, { transform, activeNodeRect, overlayNodeRect }) => {\n if (activeNodeRect && overlayNodeRect) {\n transform.y += activeNodeRect?.top - overlayNodeRect?.top;\n }\n return transform;\n },\n [],\n );\n\n return (\n <Mosaic.Container\n {...{\n id,\n type,\n Component: SectionTile as MosaicTileComponent<StackSectionItem, HTMLDivElement>,\n getOverlayStyle,\n getOverlayProps,\n onOver,\n onDrop,\n modifier: stackModifier,\n }}\n >\n <Mosaic.DroppableTile\n path={id}\n type={type}\n item={{ id, items: itemsWithPreview }}\n // TODO(wittjosiah): Should this actually be a context?\n itemContext={{\n separation,\n transform,\n onDeleteSection,\n onNavigateToSection,\n onAddSection,\n onCollapseSection,\n SectionContent,\n }}\n isOver={\n overItem &&\n !!overItem.path &&\n Path.hasRoot(overItem.path, id) &&\n (operation === 'copy' || operation === 'transfer')\n }\n Component={StackTile}\n {...props}\n ref={containerRef}\n />\n </Mosaic.Container>\n );\n};\n\nconst StackTile: MosaicTileComponent<StackItem, HTMLOListElement, Pick<StackProps, 'emptyComponent'>> = forwardRef(\n ({ classNames, path, isOver, item: { items }, itemContext, type: _type, emptyComponent, ...props }, forwardedRef) => {\n const { t } = useTranslation(translationKey);\n const { Component, type } = useContainer();\n const domAttributes = useArrowNavigationGroup({ axis: 'grid' });\n const { activeItem } = useMosaic();\n\n // NOTE(thure): Ensure “groupper” is available, but no need to use it here.\n const _group = useFocusableGroup();\n\n // NOTE: Keep outer padding the same as MarkdownMain.\n return (\n <List\n ref={forwardedRef}\n classNames={['grid relative', stackColumns, isOver && dropRingInner, classNames]}\n {...(!activeItem && domAttributes)}\n {...props}\n >\n {items.length > 0 ? (\n <Mosaic.SortableContext items={items} direction='vertical'>\n {items.map((item, index) => (\n <Mosaic.SortableTile\n key={item.id}\n item={item}\n itemContext={itemContext}\n path={path}\n type={type}\n position={index}\n Component={Component}\n />\n ))}\n </Mosaic.SortableContext>\n ) : emptyComponent !== undefined ? (\n <>{emptyComponent}</>\n ) : (\n <p\n className='grid col-span-2 text-center p-4 border border-dashed border-neutral-500/50 rounded'\n data-testid='stack.empty'\n >\n {t('empty stack message')}\n </p>\n )}\n </List>\n );\n },\n);\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useFocusableGroup, useTabsterAttributes } from '@fluentui/react-tabster';\nimport {\n ArrowLineDown,\n ArrowLineUp,\n ArrowSquareOut,\n CaretUpDown,\n DotsNine,\n type IconProps,\n Trash,\n} from '@phosphor-icons/react';\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible';\nimport React, {\n forwardRef,\n useState,\n type ForwardRefExoticComponent,\n type RefAttributes,\n type FC,\n type PropsWithChildren,\n type ComponentPropsWithRef,\n} from 'react';\n\nimport {\n Button,\n DropdownMenu,\n type Label,\n List,\n ListItem,\n ScrollArea,\n type ThemedClassName,\n Toolbar,\n toLocalizedString,\n useTranslation,\n} from '@dxos/react-ui';\nimport { createAttendableAttributes, useHasAttention } from '@dxos/react-ui-attention';\nimport { DropDownMenuDragHandleTrigger, resizeHandle, resizeHandleHorizontal } from '@dxos/react-ui-deck';\nimport {\n type MosaicActiveType,\n type MosaicDataItem,\n type MosaicTileComponent,\n type MosaicTileProps,\n useMosaic,\n} from '@dxos/react-ui-mosaic';\nimport {\n focusRing,\n getSize,\n hoverableControlItem,\n hoverableControls,\n hoverableFocusedWithinControls,\n mx,\n} from '@dxos/react-ui-theme';\n\nimport { CaretDownUp } from './CaretDownUp';\nimport { stackColumns } from './style-fragments';\nimport { translationKey } from '../translations';\n\nconst sectionActionDimensions = 'p-1 shrink-0 min-bs-0 is-[--rail-action] bs-min';\n\nexport type StackSectionContent = MosaicDataItem;\n\nexport type CollapsedSections = Record<string, boolean>;\n\nexport type AddSectionPosition = 'before' | 'after' | 'beforeAll' | 'afterAll';\n\nexport type StackContextValue<TData extends StackSectionContent = StackSectionContent> = {\n SectionContent: FC<{ data: TData }>;\n separation?: boolean;\n isResizable?: boolean;\n transform?: (item: MosaicDataItem, type?: string) => StackSectionItem;\n onDeleteSection?: (path: string) => void;\n onAddSection?: (path: string, position: AddSectionPosition) => void;\n onNavigateToSection?: (object: MosaicDataItem) => void;\n onCollapseSection?: (id: string, collapsed: boolean) => void;\n};\n\nexport type StackItem = MosaicDataItem & {\n items: StackSectionItem[];\n};\n\nexport type StackSectionItem = MosaicDataItem & {\n object: StackSectionContent;\n // TODO(wittjosiah): Use effect schema? Share schema with echo.\n view?: {\n title?: string;\n size?: SectionSize;\n height?: number;\n collapsed?: boolean;\n custom?: Record<string, any>;\n };\n // TODO(wittjosiah): Common type? Factor out?\n metadata?: {\n icon?: FC<IconProps>;\n placeholder?: Label;\n viewActions?: (item: StackSectionItem) => StackAction;\n };\n};\n\nexport type StackAction = {\n icon: FC<IconProps>;\n label: Label;\n onClick: () => void;\n};\n\nexport type SectionSize = 'intrinsic' | 'extrinsic';\n\nexport type SectionProps = PropsWithChildren<\n {\n // Data props.\n id: string;\n title: string;\n\n // Tile props.\n active?: MosaicActiveType;\n } & Pick<\n MosaicTileProps,\n 'draggableProps' | 'draggableStyle' | 'onDelete' | 'onNavigate' | 'onAddAfter' | 'onAddBefore'\n > &\n Pick<StackContextValue, 'separation' | 'isResizable' | 'onCollapseSection'> &\n Pick<Required<StackSectionItem>['view'], 'collapsed' | 'size'> &\n Pick<Required<StackSectionItem>['metadata'], 'icon'>\n>;\n\nconst resizeHandleStyles = mx(resizeHandle, resizeHandleHorizontal, 'is-full bs-[--rail-action] col-start-2');\n\nexport const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTMLLIElement>> = forwardRef<\n HTMLLIElement,\n SectionProps\n>(\n (\n {\n id,\n title,\n icon: Icon = DotsNine,\n size = 'intrinsic',\n collapsed,\n active,\n isResizable,\n draggableProps,\n draggableStyle,\n onDelete,\n onNavigate,\n onAddBefore,\n onAddAfter,\n onCollapseSection,\n children,\n },\n forwardedRef,\n ) => {\n const { t } = useTranslation(translationKey);\n const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);\n const sectionActionsToolbar = useTabsterAttributes({\n groupper: {},\n focusable: {},\n mover: { cyclic: true, direction: 1, memorizeCurrent: false },\n });\n const sectionContentGroup = useFocusableGroup({});\n const attendableAttrs = createAttendableAttributes(id);\n const hasAttention = useHasAttention(id);\n\n return (\n <CollapsiblePrimitive.Root\n asChild\n open={!collapsed}\n onOpenChange={(nextOpen) => onCollapseSection?.(id, !nextOpen)}\n >\n <ListItem.Root\n ref={forwardedRef}\n id={id}\n {...attendableAttrs}\n classNames={[\n 'grid col-span-2 group/section',\n active === 'overlay' ? stackColumns : 'grid-cols-subgrid snap-start',\n ]}\n style={draggableStyle}\n >\n <div\n role='none'\n className={mx(\n 'grid col-span-2 grid-cols-subgrid',\n 'bg-base focus-within:border-separator focus-within:attention-within',\n hoverableControls,\n hoverableFocusedWithinControls,\n (active || hasAttention) && 'attention-surface border-separator',\n (active === 'origin' || active === 'rearrange' || active === 'destination') && 'opacity-0',\n )}\n >\n <div\n role='toolbar'\n aria-orientation='vertical'\n aria-label={t('section controls label')}\n {...(!active && { tabIndex: 0 })}\n {...(!active && sectionActionsToolbar)}\n className={mx(\n 'grid grid-cols-subgrid ch-focus-ring rounded-sm grid-rows-[min-content_min-content_1fr] m-1',\n 'group-has-[[role=toolbar][aria-orientation=horizontal]]/section:pbs-[--rail-action]',\n )}\n >\n <div role='none' className='sticky -block-start-px bg-[--sticky-bg]'>\n <DropdownMenu.Root\n {...{\n open: optionsMenuOpen,\n onOpenChange: setOptionsMenuOpen,\n }}\n >\n <DropDownMenuDragHandleTrigger active={!!active} variant='ghost' classNames='m-0' {...draggableProps}>\n <Icon className={mx(getSize(5), 'transition-opacity')} />\n </DropDownMenuDragHandleTrigger>\n <DropdownMenu.Portal>\n <DropdownMenu.Content>\n <DropdownMenu.Viewport>\n {collapsed ? (\n <DropdownMenu.Item onClick={onNavigate} data-testid='section.navigate-to'>\n <ArrowSquareOut className={mx(getSize(5), 'mr-2')} />\n <span className='grow'>{t('navigate to section label')}</span>\n </DropdownMenu.Item>\n ) : (\n <CollapsiblePrimitive.Trigger asChild>\n <DropdownMenu.Item>\n <CaretDownUp className={mx(getSize(5), 'mr-2')} />\n <span className='grow'>{t('collapse label')}</span>\n </DropdownMenu.Item>\n </CollapsiblePrimitive.Trigger>\n )}\n <DropdownMenu.Item onClick={onAddBefore} data-testid='section.add-before'>\n <ArrowLineUp className={mx(getSize(5), 'mr-2')} />\n <span className='grow'>{t('add section before label')}</span>\n </DropdownMenu.Item>\n <DropdownMenu.Item onClick={onAddAfter} data-testid='section.add-after'>\n <ArrowLineDown className={mx(getSize(5), 'mr-2')} />\n <span className='grow'>{t('add section after label')}</span>\n </DropdownMenu.Item>\n <DropdownMenu.Item onClick={() => onDelete?.()} data-testid='section.remove'>\n <Trash className={mx(getSize(5), 'mr-2')} />\n <span className='grow'>{t('remove section label')}</span>\n </DropdownMenu.Item>\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n {collapsed ? (\n <CollapsiblePrimitive.Trigger asChild>\n <Button variant='ghost' classNames={sectionActionDimensions}>\n <span className='sr-only'>{t('expand label')}</span>\n <CaretUpDown className={getSize(4)} />\n </Button>\n </CollapsiblePrimitive.Trigger>\n ) : (\n <Button\n variant='ghost'\n classNames={sectionActionDimensions}\n onClick={onNavigate}\n data-testid='section.navigate-to'\n >\n <ArrowSquareOut className={mx(getSize(4))} />\n <span className='sr-only'>{t('navigate to section label')}</span>\n </Button>\n )}\n </div>\n </div>\n\n {/* Main content */}\n\n <ListItem.Heading\n classNames={collapsed ? ['grid grid-rows-subgrid grid-cols-subgrid items-center', focusRing] : 'sr-only'}\n {...(collapsed && { ...sectionContentGroup, tabIndex: 0 })}\n >\n {/*\n TODO(thure): This needs to be made extensible; Markdown document titles especially are difficult.\n Using `Surface` in a UI package like this would be unprecedented and needs motivation.\n Refactoring to use subcomponents is complicated by sections being a sortable Mosaic Tile.\n Reevaluate when work on collections (Folders, Stacks, etc) settles.\n */}\n <span className='truncate'>{title}</span>\n </ListItem.Heading>\n {size === 'intrinsic' ? (\n <CollapsiblePrimitive.Content\n {...(!collapsed && {\n ...sectionContentGroup,\n tabIndex: 0,\n })}\n // TODO(burdon): Add margin to fragment?\n className={mx(focusRing, 'm-[2px]')}\n >\n {children}\n </CollapsiblePrimitive.Content>\n ) : (\n <CollapsiblePrimitive.Content asChild>\n <ScrollArea.Root\n type='always'\n {...(!collapsed && { ...sectionContentGroup, tabIndex: 0 })}\n classNames={mx(focusRing, 'is-full has-[[data-radix-scroll-area-viewport]]:pbe-4')}\n >\n <ScrollArea.Viewport>{children}</ScrollArea.Viewport>\n <ScrollArea.Scrollbar\n orientation='horizontal'\n variant='coarse'\n classNames='hidden has-[div]:flex !inline-end-[max(.25rem,var(--radix-scroll-area-corner-width))]'\n >\n <ScrollArea.Thumb />\n </ScrollArea.Scrollbar>\n <ScrollArea.Scrollbar orientation='vertical' variant='coarse' classNames='hidden has-[div]:flex'>\n <ScrollArea.Thumb />\n </ScrollArea.Scrollbar>\n <ScrollArea.Corner />\n </ScrollArea.Root>\n </CollapsiblePrimitive.Content>\n )}\n </div>\n {isResizable && !collapsed && (\n <button className={resizeHandleStyles}>\n <span className='sr-only'>{t('resize section label')}</span>\n </button>\n )}\n </ListItem.Root>\n </CollapsiblePrimitive.Root>\n );\n },\n);\n\nexport type SectionToolbarProps = ThemedClassName<ComponentPropsWithRef<'div'>>;\n\n// TODO(burdon): block-start\nexport const sectionToolbarLayout =\n 'bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity';\n\nexport const SectionToolbar = ({ children, classNames }: SectionToolbarProps) => {\n return (\n <Toolbar.Root orientation='horizontal' classNames={[sectionToolbarLayout, hoverableControlItem, classNames]}>\n {children}\n </Toolbar.Root>\n );\n};\n\nexport const SectionTile: MosaicTileComponent<\n StackSectionItem,\n HTMLLIElement\n // TODO(wittjosiah): If props is specified there is a type error with Mosaic.Container.\n // { itemContext: StackContextValue }\n> = forwardRef(({ path, type, active, draggableStyle, draggableProps, item, itemContext }, forwardedRef) => {\n const { t } = useTranslation(translationKey);\n const { activeItem } = useMosaic();\n\n const separation = !!itemContext?.separation;\n const isResizable = !!itemContext?.isResizable;\n const { transform, onDeleteSection, onNavigateToSection, onAddSection, onCollapseSection, SectionContent } =\n itemContext as StackContextValue;\n\n const transformedItem = transform\n ? transform(\n item,\n // TODO(wittjosiah): `active` doesn't always seem to be accurate here.\n activeItem?.item.id === item.id ? activeItem?.type : type,\n )\n : item;\n\n const placeholder = transformedItem.metadata?.placeholder ?? ['untitled section title', { ns: translationKey }];\n const title = transformedItem.view?.title ?? toLocalizedString(placeholder, t);\n\n const section = (\n <Section\n ref={forwardedRef}\n title={title}\n id={transformedItem.id}\n size={transformedItem.view?.size}\n icon={transformedItem.metadata?.icon}\n collapsed={transformedItem.view?.collapsed}\n separation={separation}\n active={active}\n draggableProps={draggableProps}\n draggableStyle={draggableStyle}\n onCollapseSection={onCollapseSection}\n isResizable={isResizable}\n onDelete={() => onDeleteSection?.(path)}\n onNavigate={() => onNavigateToSection?.(transformedItem)}\n onAddAfter={() => onAddSection?.(path, 'after')}\n onAddBefore={() => onAddSection?.(path, 'before')}\n >\n {SectionContent && <SectionContent data={transformedItem.object} />}\n </Section>\n );\n\n return active === 'overlay' ? <List>{section}</List> : section;\n});\n", "//\n// Copyright 2024 DXOS.org\n//\nimport { type IconProps } from '@phosphor-icons/react';\nimport React from 'react';\n\nexport const CaretDownUp = ({ children, weight, ...props }: IconProps) => {\n return (\n <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' {...props}>\n <rect width='256' height='256' fill='none' />\n <polyline\n points='80 224 128 176 176 224'\n fill='none'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n strokeWidth='16'\n />\n <polyline\n points='80 32 128 80 176 32'\n fill='none'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n strokeWidth='16'\n />\n {children}\n </svg>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nexport const stackColumns = 'grid-cols-[var(--rail-size)_calc(100%-var(--rail-size))]';\n", "//\n// Copyright 2023 DXOS.org\n//\n\nexport const translationKey = 'stack';\n\nexport default [\n {\n 'en-US': {\n [translationKey]: {\n 'empty stack message': 'Drag items into the stack.',\n 'remove section label': 'Delete',\n 'navigate to section label': 'Navigate to item',\n 'untitled section title': 'Untitled section',\n 'add section before label': 'Add before',\n 'add section after label': 'Add after',\n 'expand label': 'Expand',\n 'collapse label': 'Collapse',\n },\n },\n },\n];\n"],
|
|
5
|
-
"mappings": ";AAIA,SAASA,yBAAyBC,qBAAAA,0BAAyB;AAC3D,OAAOC,
|
|
6
|
-
"names": ["useArrowNavigationGroup", "useFocusableGroup", "React", "forwardRef", "useCallback", "useResizeDetector", "List", "useTranslation", "Mosaic", "Path", "useContainer", "useItemsWithPreview", "useMosaic", "dropRingInner", "useFocusableGroup", "useTabsterAttributes", "ArrowLineDown", "ArrowLineUp", "ArrowSquareOut", "CaretUpDown", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { useArrowNavigationGroup, useFocusableGroup } from '@fluentui/react-tabster';\nimport React, { type ReactNode, forwardRef, useCallback } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { List, useTranslation } from '@dxos/react-ui';\nimport {\n type MosaicContainerProps,\n type MosaicTileComponent,\n Mosaic,\n Path,\n useContainer,\n useItemsWithPreview,\n useMosaic,\n} from '@dxos/react-ui-mosaic';\nimport { dropRingInner } from '@dxos/react-ui-theme';\n\nimport {\n type CollapsedSections,\n type AddSectionPosition,\n SectionTile,\n type StackContextValue,\n type StackItem,\n type StackSectionContent,\n type StackSectionItem,\n} from './Section';\nimport { stackColumns } from './style-fragments';\nimport { translationKey } from '../translations';\n\nexport type Direction = 'horizontal' | 'vertical';\n\nexport type { CollapsedSections, AddSectionPosition };\n\nexport const DEFAULT_TYPE = 'stack-section';\n\nexport type StackProps<TData extends StackSectionContent = StackSectionContent> = Omit<\n MosaicContainerProps<TData, number>,\n 'debug' | 'Component'\n> &\n Omit<StackContextValue<TData>, 'setCollapsedSections'> & {\n items?: StackSectionItem[];\n separation?: boolean; // TODO(burdon): Style.\n onCollapseSection?: (id: string, collapsed: boolean) => void;\n emptyComponent?: ReactNode;\n };\n\nexport const Stack = ({\n id,\n type = DEFAULT_TYPE,\n SectionContent,\n items = [],\n separation = true,\n transform,\n onOver,\n onDrop,\n onAddSection,\n onDeleteSection,\n onNavigateToSection,\n onCollapseSection,\n ...props\n}: StackProps) => {\n const { ref: containerRef, width = 0 } = useResizeDetector<HTMLDivElement>({ refreshRate: 200 });\n const { operation, overItem } = useMosaic();\n const itemsWithPreview = useItemsWithPreview({ path: id, items });\n\n const getOverlayStyle = useCallback(() => ({ width }), [width]);\n const getOverlayProps = useCallback(\n () => ({ itemContext: { transform, SectionContent } }),\n [transform, SectionContent],\n );\n\n // TODO(thure): The root cause of the discrepancy between `activeNodeRect.top` and `overlayNodeRect.top` in Composer\n // in particular is not yet known, so this solution may may backfire in unforeseeable cases.\n const stackModifier = useCallback<Exclude<MosaicContainerProps['modifier'], undefined>>(\n (_activeItem, { transform, activeNodeRect, overlayNodeRect }) => {\n if (activeNodeRect && overlayNodeRect) {\n transform.y += activeNodeRect?.top - overlayNodeRect?.top;\n }\n return transform;\n },\n [],\n );\n\n return (\n <Mosaic.Container\n {...{\n id,\n type,\n Component: SectionTile as MosaicTileComponent<StackSectionItem, HTMLDivElement>,\n getOverlayStyle,\n getOverlayProps,\n onOver,\n onDrop,\n modifier: stackModifier,\n }}\n >\n <Mosaic.DroppableTile\n path={id}\n type={type}\n item={{ id, items: itemsWithPreview }}\n // TODO(wittjosiah): Should this actually be a context?\n itemContext={{\n separation,\n transform,\n onDeleteSection,\n onNavigateToSection,\n onAddSection,\n onCollapseSection,\n SectionContent,\n }}\n isOver={\n overItem &&\n !!overItem.path &&\n Path.hasRoot(overItem.path, id) &&\n (operation === 'copy' || operation === 'transfer')\n }\n Component={StackTile}\n {...props}\n ref={containerRef}\n />\n </Mosaic.Container>\n );\n};\n\nconst StackTile: MosaicTileComponent<StackItem, HTMLOListElement, Pick<StackProps, 'emptyComponent'>> = forwardRef(\n ({ classNames, path, isOver, item: { items }, itemContext, type: _type, emptyComponent, ...props }, forwardedRef) => {\n const { t } = useTranslation(translationKey);\n const { Component, type } = useContainer();\n const domAttributes = useArrowNavigationGroup({ axis: 'grid' });\n const { activeItem } = useMosaic();\n\n // NOTE(thure): Ensure “groupper” is available, but no need to use it here.\n const _group = useFocusableGroup();\n\n // NOTE: Keep outer padding the same as MarkdownMain.\n return (\n <List\n ref={forwardedRef}\n classNames={['grid relative', stackColumns, isOver && dropRingInner, classNames]}\n {...(!activeItem && domAttributes)}\n {...props}\n >\n {items.length > 0 ? (\n <Mosaic.SortableContext items={items} direction='vertical'>\n {items.map((item, index) => (\n <Mosaic.SortableTile\n key={item.id}\n item={item}\n itemContext={itemContext}\n path={path}\n type={type}\n position={index}\n Component={Component}\n />\n ))}\n </Mosaic.SortableContext>\n ) : emptyComponent !== undefined ? (\n <>{emptyComponent}</>\n ) : (\n <p\n className='grid col-span-2 text-center p-4 border border-dashed border-neutral-500/50 rounded'\n data-testid='stack.empty'\n >\n {t('empty stack message')}\n </p>\n )}\n </List>\n );\n },\n);\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useFocusableGroup, useTabsterAttributes } from '@fluentui/react-tabster';\nimport { ArrowLineDown, ArrowLineUp, ArrowSquareOut, CaretUpDown, Trash } from '@phosphor-icons/react';\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible';\nimport React, {\n forwardRef,\n useState,\n type ForwardRefExoticComponent,\n type RefAttributes,\n type FC,\n type PropsWithChildren,\n type ComponentPropsWithRef,\n} from 'react';\n\nimport {\n Button,\n DropdownMenu,\n Icon,\n type Label,\n List,\n ListItem,\n ScrollArea,\n type ThemedClassName,\n Toolbar,\n toLocalizedString,\n useTranslation,\n} from '@dxos/react-ui';\nimport { useAttendableAttributes } from '@dxos/react-ui-attention';\nimport { DropDownMenuDragHandleTrigger, resizeHandle, resizeHandleHorizontal } from '@dxos/react-ui-deck';\nimport {\n type MosaicActiveType,\n type MosaicDataItem,\n type MosaicTileComponent,\n type MosaicTileProps,\n useMosaic,\n} from '@dxos/react-ui-mosaic';\nimport {\n focusRing,\n getSize,\n hoverableControlItem,\n hoverableControls,\n hoverableFocusedWithinControls,\n mx,\n} from '@dxos/react-ui-theme';\n\nimport { CaretDownUp } from './CaretDownUp';\nimport { stackColumns } from './style-fragments';\nimport { translationKey } from '../translations';\n\nconst sectionActionDimensions = 'p-1 shrink-0 min-bs-0 is-[--rail-action] bs-min';\n\nexport type StackSectionContent = MosaicDataItem;\n\nexport type CollapsedSections = Record<string, boolean>;\n\nexport type AddSectionPosition = 'before' | 'after' | 'beforeAll' | 'afterAll';\n\nexport type StackContextValue<TData extends StackSectionContent = StackSectionContent> = {\n SectionContent: FC<{ data: TData }>;\n separation?: boolean;\n isResizable?: boolean;\n transform?: (item: MosaicDataItem, type?: string) => StackSectionItem;\n onDeleteSection?: (path: string) => void;\n onAddSection?: (path: string, position: AddSectionPosition) => void;\n onNavigateToSection?: (object: MosaicDataItem) => void;\n onCollapseSection?: (id: string, collapsed: boolean) => void;\n};\n\nexport type StackItem = MosaicDataItem & {\n items: StackSectionItem[];\n};\n\nexport type StackSectionItem = MosaicDataItem & {\n object: StackSectionContent;\n // TODO(wittjosiah): Use effect schema? Share schema with echo.\n view?: {\n title?: string;\n size?: SectionSize;\n height?: number;\n collapsed?: boolean;\n custom?: Record<string, any>;\n };\n // TODO(wittjosiah): Common type? Factor out?\n metadata?: {\n icon?: string;\n placeholder?: Label;\n viewActions?: (item: StackSectionItem) => StackAction;\n };\n};\n\nexport type StackAction = {\n icon: string;\n label: Label;\n onClick: () => void;\n};\n\nexport type SectionSize = 'intrinsic' | 'extrinsic';\n\nexport type SectionProps = PropsWithChildren<\n {\n // Data props.\n id: string;\n title: string;\n\n // Tile props.\n active?: MosaicActiveType;\n } & Pick<\n MosaicTileProps,\n 'draggableProps' | 'draggableStyle' | 'onDelete' | 'onNavigate' | 'onAddAfter' | 'onAddBefore'\n > &\n Pick<StackContextValue, 'separation' | 'isResizable' | 'onCollapseSection'> &\n Pick<Required<StackSectionItem>['view'], 'collapsed' | 'size'> &\n Pick<Required<StackSectionItem>['metadata'], 'icon'>\n>;\n\nconst resizeHandleStyles = mx(resizeHandle, resizeHandleHorizontal, 'is-full bs-[--rail-action] col-start-2');\n\nexport const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTMLLIElement>> = forwardRef<\n HTMLLIElement,\n SectionProps\n>(\n (\n {\n id,\n title,\n icon = 'ph--placeholder--regular',\n size = 'intrinsic',\n collapsed,\n active,\n isResizable,\n draggableProps,\n draggableStyle,\n onDelete,\n onNavigate,\n onAddBefore,\n onAddAfter,\n onCollapseSection,\n children,\n },\n forwardedRef,\n ) => {\n const { t } = useTranslation(translationKey);\n const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);\n const sectionActionsToolbar = useTabsterAttributes({\n groupper: {},\n focusable: {},\n mover: { cyclic: true, direction: 1, memorizeCurrent: false },\n });\n const sectionContentGroup = useFocusableGroup({});\n const attendableAttrs = useAttendableAttributes(id);\n\n return (\n <CollapsiblePrimitive.Root\n asChild\n open={!collapsed}\n onOpenChange={(nextOpen) => onCollapseSection?.(id, !nextOpen)}\n >\n <ListItem.Root\n ref={forwardedRef}\n id={id}\n {...attendableAttrs}\n classNames={[\n 'grid col-span-2 group/section',\n active === 'overlay' ? stackColumns : 'grid-cols-subgrid snap-start',\n ]}\n style={draggableStyle}\n >\n <div\n role='none'\n className={mx(\n 'grid col-span-2 grid-cols-subgrid',\n 'bg-base attention-surface',\n hoverableControls,\n hoverableFocusedWithinControls,\n (active === 'origin' || active === 'rearrange' || active === 'destination') && 'opacity-0',\n )}\n >\n <div\n role='toolbar'\n aria-orientation='vertical'\n aria-label={t('section controls label')}\n {...(!active && { tabIndex: 0 })}\n {...(!active && sectionActionsToolbar)}\n className={mx(\n 'grid grid-cols-subgrid ch-focus-ring rounded-sm grid-rows-[min-content_min-content_1fr] m-1',\n 'group-has-[[role=toolbar][aria-orientation=horizontal]]/section:pbs-[--rail-action]',\n )}\n >\n <div role='none' className='sticky -block-start-px bg-[--sticky-bg]'>\n <DropdownMenu.Root\n {...{\n open: optionsMenuOpen,\n onOpenChange: setOptionsMenuOpen,\n }}\n >\n <DropDownMenuDragHandleTrigger active={!!active} variant='ghost' classNames='m-0' {...draggableProps}>\n <Icon icon={icon} size={5} classNames='transition-opacity' />\n </DropDownMenuDragHandleTrigger>\n <DropdownMenu.Portal>\n <DropdownMenu.Content>\n <DropdownMenu.Viewport>\n {collapsed ? (\n <DropdownMenu.Item onClick={onNavigate} data-testid='section.navigate-to'>\n <ArrowSquareOut className={mx(getSize(5), 'mr-2')} />\n <span className='grow'>{t('navigate to section label')}</span>\n </DropdownMenu.Item>\n ) : (\n <CollapsiblePrimitive.Trigger asChild>\n <DropdownMenu.Item>\n <CaretDownUp className={mx(getSize(5), 'mr-2')} />\n <span className='grow'>{t('collapse label')}</span>\n </DropdownMenu.Item>\n </CollapsiblePrimitive.Trigger>\n )}\n <DropdownMenu.Item onClick={onAddBefore} data-testid='section.add-before'>\n <ArrowLineUp className={mx(getSize(5), 'mr-2')} />\n <span className='grow'>{t('add section before label')}</span>\n </DropdownMenu.Item>\n <DropdownMenu.Item onClick={onAddAfter} data-testid='section.add-after'>\n <ArrowLineDown className={mx(getSize(5), 'mr-2')} />\n <span className='grow'>{t('add section after label')}</span>\n </DropdownMenu.Item>\n <DropdownMenu.Item onClick={() => onDelete?.()} data-testid='section.remove'>\n <Trash className={mx(getSize(5), 'mr-2')} />\n <span className='grow'>{t('remove section label')}</span>\n </DropdownMenu.Item>\n </DropdownMenu.Viewport>\n <DropdownMenu.Arrow />\n </DropdownMenu.Content>\n </DropdownMenu.Portal>\n </DropdownMenu.Root>\n {collapsed ? (\n <CollapsiblePrimitive.Trigger asChild>\n <Button variant='ghost' classNames={sectionActionDimensions}>\n <span className='sr-only'>{t('expand label')}</span>\n <CaretUpDown className={getSize(4)} />\n </Button>\n </CollapsiblePrimitive.Trigger>\n ) : (\n <Button\n variant='ghost'\n classNames={sectionActionDimensions}\n onClick={onNavigate}\n data-testid='section.navigate-to'\n >\n <ArrowSquareOut className={mx(getSize(4))} />\n <span className='sr-only'>{t('navigate to section label')}</span>\n </Button>\n )}\n </div>\n </div>\n\n {/* Main content */}\n\n <ListItem.Heading\n classNames={collapsed ? ['grid grid-rows-subgrid grid-cols-subgrid items-center', focusRing] : 'sr-only'}\n {...(collapsed && { ...sectionContentGroup, tabIndex: 0 })}\n >\n {/*\n TODO(thure): This needs to be made extensible; Markdown document titles especially are difficult.\n Using `Surface` in a UI package like this would be unprecedented and needs motivation.\n Refactoring to use subcomponents is complicated by sections being a sortable Mosaic Tile.\n Reevaluate when work on collections (Folders, Stacks, etc) settles.\n */}\n <span className='truncate'>{title}</span>\n </ListItem.Heading>\n {size === 'intrinsic' ? (\n <CollapsiblePrimitive.Content\n {...(!collapsed && {\n ...sectionContentGroup,\n tabIndex: 0,\n })}\n // TODO(burdon): Add margin to fragment?\n className={mx(focusRing, 'm-[2px]')}\n >\n {children}\n </CollapsiblePrimitive.Content>\n ) : (\n <CollapsiblePrimitive.Content asChild>\n <ScrollArea.Root\n type='always'\n {...(!collapsed && { ...sectionContentGroup, tabIndex: 0 })}\n classNames={mx(focusRing, 'is-full has-[[data-radix-scroll-area-viewport]]:pbe-4')}\n >\n <ScrollArea.Viewport>{children}</ScrollArea.Viewport>\n <ScrollArea.Scrollbar\n orientation='horizontal'\n variant='coarse'\n classNames='hidden has-[div]:flex !inline-end-[max(.25rem,var(--radix-scroll-area-corner-width))]'\n >\n <ScrollArea.Thumb />\n </ScrollArea.Scrollbar>\n <ScrollArea.Scrollbar orientation='vertical' variant='coarse' classNames='hidden has-[div]:flex'>\n <ScrollArea.Thumb />\n </ScrollArea.Scrollbar>\n <ScrollArea.Corner />\n </ScrollArea.Root>\n </CollapsiblePrimitive.Content>\n )}\n </div>\n {isResizable && !collapsed && (\n <button className={resizeHandleStyles}>\n <span className='sr-only'>{t('resize section label')}</span>\n </button>\n )}\n </ListItem.Root>\n </CollapsiblePrimitive.Root>\n );\n },\n);\n\nexport type SectionToolbarProps = ThemedClassName<ComponentPropsWithRef<'div'>>;\n\n// TODO(burdon): block-start\nexport const sectionToolbarLayout =\n 'bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity';\n\nexport const SectionToolbar = ({ children, classNames }: SectionToolbarProps) => {\n return (\n <Toolbar.Root orientation='horizontal' classNames={[sectionToolbarLayout, hoverableControlItem, classNames]}>\n {children}\n </Toolbar.Root>\n );\n};\n\nexport const SectionTile: MosaicTileComponent<\n StackSectionItem,\n HTMLLIElement\n // TODO(wittjosiah): If props is specified there is a type error with Mosaic.Container.\n // { itemContext: StackContextValue }\n> = forwardRef(({ path, type, active, draggableStyle, draggableProps, item, itemContext }, forwardedRef) => {\n const { t } = useTranslation(translationKey);\n const { activeItem } = useMosaic();\n\n const separation = !!itemContext?.separation;\n const isResizable = !!itemContext?.isResizable;\n const { transform, onDeleteSection, onNavigateToSection, onAddSection, onCollapseSection, SectionContent } =\n itemContext as StackContextValue;\n\n const transformedItem = transform\n ? transform(\n item,\n // TODO(wittjosiah): `active` doesn't always seem to be accurate here.\n activeItem?.item.id === item.id ? activeItem?.type : type,\n )\n : item;\n\n const placeholder = transformedItem.metadata?.placeholder ?? ['untitled section title', { ns: translationKey }];\n const title = transformedItem.view?.title ?? toLocalizedString(placeholder, t);\n\n const section = (\n <Section\n ref={forwardedRef}\n title={title}\n id={transformedItem.id}\n size={transformedItem.view?.size}\n icon={transformedItem.metadata?.icon}\n collapsed={transformedItem.view?.collapsed}\n separation={separation}\n active={active}\n draggableProps={draggableProps}\n draggableStyle={draggableStyle}\n onCollapseSection={onCollapseSection}\n isResizable={isResizable}\n onDelete={() => onDeleteSection?.(path)}\n onNavigate={() => onNavigateToSection?.(transformedItem)}\n onAddAfter={() => onAddSection?.(path, 'after')}\n onAddBefore={() => onAddSection?.(path, 'before')}\n >\n {SectionContent && <SectionContent data={transformedItem.object} />}\n </Section>\n );\n\n return active === 'overlay' ? <List>{section}</List> : section;\n});\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type IconProps } from '@phosphor-icons/react';\nimport React from 'react';\n\nexport const CaretDownUp = ({ children, weight, ...props }: IconProps) => {\n return (\n <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' {...props}>\n <rect width='256' height='256' fill='none' />\n <polyline\n points='80 224 128 176 176 224'\n fill='none'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n strokeWidth='16'\n />\n <polyline\n points='80 32 128 80 176 32'\n fill='none'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n strokeWidth='16'\n />\n {children}\n </svg>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nexport const stackColumns = 'grid-cols-[var(--rail-size)_calc(100%-var(--rail-size))]';\n", "//\n// Copyright 2023 DXOS.org\n//\n\nexport const translationKey = 'stack';\n\nexport default [\n {\n 'en-US': {\n [translationKey]: {\n 'empty stack message': 'Drag items into the stack.',\n 'remove section label': 'Delete',\n 'navigate to section label': 'Navigate to item',\n 'untitled section title': 'Untitled section',\n 'add section before label': 'Add before',\n 'add section after label': 'Add after',\n 'expand label': 'Expand',\n 'collapse label': 'Collapse',\n },\n },\n },\n];\n"],
|
|
5
|
+
"mappings": ";AAIA,SAASA,yBAAyBC,qBAAAA,0BAAyB;AAC3D,OAAOC,UAAyBC,cAAAA,aAAYC,mBAAmB;AAC/D,SAASC,yBAAyB;AAElC,SAASC,QAAAA,OAAMC,kBAAAA,uBAAsB;AACrC,SAGEC,QACAC,MACAC,cACAC,qBACAC,aAAAA,kBACK;AACP,SAASC,qBAAqB;;;ACd9B,SAASC,mBAAmBC,4BAA4B;AACxD,SAASC,eAAeC,aAAaC,gBAAgBC,aAAaC,aAAa;AAC/E,YAAYC,0BAA0B;AACtC,OAAOC,UACLC,YACAC,gBAMK;AAEP,SACEC,QACAC,cACAC,MAEAC,MACAC,UACAC,YAEAC,SACAC,mBACAC,sBACK;AACP,SAASC,+BAA+B;AACxC,SAASC,+BAA+BC,cAAcC,8BAA8B;AACpF,SAKEC,iBACK;AACP,SACEC,WACAC,SACAC,sBACAC,mBACAC,gCACAC,UACK;;;ACzCP,OAAOC,WAAW;AAEX,IAAMC,cAAc,CAAC,EAAEC,UAAUC,QAAQ,GAAGC,MAAAA,MAAkB;AACnE,SACE,sBAAA,cAACC,OAAAA;IAAIC,OAAM;IAA6BC,SAAQ;IAAe,GAAGH;KAChE,sBAAA,cAACI,QAAAA;IAAKC,OAAM;IAAMC,QAAO;IAAMC,MAAK;MACpC,sBAAA,cAACC,YAAAA;IACCC,QAAO;IACPF,MAAK;IACLG,QAAO;IACPC,eAAc;IACdC,gBAAe;IACfC,aAAY;MAEd,sBAAA,cAACL,YAAAA;IACCC,QAAO;IACPF,MAAK;IACLG,QAAO;IACPC,eAAc;IACdC,gBAAe;IACfC,aAAY;MAEbf,QAAAA;AAGP;;;AC1BO,IAAMgB,eAAe;;;ACArB,IAAMC,iBAAiB;AAE9B,IAAA,uBAAe;EACb;IACE,SAAS;MACP,CAACA,cAAAA,GAAiB;QAChB,uBAAuB;QACvB,wBAAwB;QACxB,6BAA6B;QAC7B,0BAA0B;QAC1B,4BAA4B;QAC5B,2BAA2B;QAC3B,gBAAgB;QAChB,kBAAkB;MACpB;IACF;EACF;;;;AHgCF,IAAMC,0BAA0B;AAkEhC,IAAMC,qBAAqBC,GAAGC,cAAcC,wBAAwB,wCAAA;AAE7D,IAAMC,UAAkFC,2BAI7F,CACE,EACEC,IACAC,OACAC,OAAO,4BACPC,OAAO,aACPC,WACAC,QACAC,aACAC,gBACAC,gBACAC,UACAC,YACAC,aACAC,YACAC,mBACAC,SAAQ,GAEVC,iBAAAA;AAEA,QAAM,EAAEC,EAAC,IAAKC,eAAeC,cAAAA;AAC7B,QAAM,CAACC,iBAAiBC,kBAAAA,IAAsBC,SAAS,KAAA;AACvD,QAAMC,wBAAwBC,qBAAqB;IACjDC,UAAU,CAAC;IACXC,WAAW,CAAC;IACZC,OAAO;MAAEC,QAAQ;MAAMC,WAAW;MAAGC,iBAAiB;IAAM;EAC9D,CAAA;AACA,QAAMC,sBAAsBC,kBAAkB,CAAC,CAAA;AAC/C,QAAMC,kBAAkBC,wBAAwBjC,EAAAA;AAEhD,SACE,gBAAAkC,OAAA,cAAsBC,2BAAI;IACxBC,SAAAA;IACAC,MAAM,CAACjC;IACPkC,cAAc,CAACC,aAAa1B,oBAAoBb,IAAI,CAACuC,QAAAA;KAErD,gBAAAL,OAAA,cAACM,SAASL,MAAI;IACZM,KAAK1B;IACLf;IACC,GAAGgC;IACJU,YAAY;MACV;MACArC,WAAW,YAAYsC,eAAe;;IAExCC,OAAOpC;KAEP,gBAAA0B,OAAA,cAACW,OAAAA;IACCC,MAAK;IACLC,WAAWpD,GACT,qCACA,6BACAqD,mBACAC,iCACC5C,WAAW,YAAYA,WAAW,eAAeA,WAAW,kBAAkB,WAAA;KAGjF,gBAAA6B,OAAA,cAACW,OAAAA;IACCC,MAAK;IACLI,oBAAiB;IACjBC,cAAYnC,EAAE,wBAAA;IACb,GAAI,CAACX,UAAU;MAAE+C,UAAU;IAAE;IAC7B,GAAI,CAAC/C,UAAUiB;IAChByB,WAAWpD,GACT,+FACA,qFAAA;KAGF,gBAAAuC,OAAA,cAACW,OAAAA;IAAIC,MAAK;IAAOC,WAAU;KACzB,gBAAAb,OAAA,cAACmB,aAAalB,MACR;IACFE,MAAMlB;IACNmB,cAAclB;EAChB,GAEA,gBAAAc,OAAA,cAACoB,+BAAAA;IAA8BjD,QAAQ,CAAC,CAACA;IAAQkD,SAAQ;IAAQb,YAAW;IAAO,GAAGnC;KACpF,gBAAA2B,OAAA,cAACsB,MAAAA;IAAKtD;IAAYC,MAAM;IAAGuC,YAAW;OAExC,gBAAAR,OAAA,cAACmB,aAAaI,QAAM,MAClB,gBAAAvB,OAAA,cAACmB,aAAaK,SAAO,MACnB,gBAAAxB,OAAA,cAACmB,aAAaM,UAAQ,MACnBvD,YACC,gBAAA8B,OAAA,cAACmB,aAAaO,MAAI;IAACC,SAASnD;IAAYoD,eAAY;KAClD,gBAAA5B,OAAA,cAAC6B,gBAAAA;IAAehB,WAAWpD,GAAGqE,QAAQ,CAAA,GAAI,MAAA;MAC1C,gBAAA9B,OAAA,cAAC+B,QAAAA;IAAKlB,WAAU;KAAQ/B,EAAE,2BAAA,CAAA,CAAA,IAG5B,gBAAAkB,OAAA,cAAsBgC,8BAAO;IAAC9B,SAAAA;KAC5B,gBAAAF,OAAA,cAACmB,aAAaO,MAAI,MAChB,gBAAA1B,OAAA,cAACiC,aAAAA;IAAYpB,WAAWpD,GAAGqE,QAAQ,CAAA,GAAI,MAAA;MACvC,gBAAA9B,OAAA,cAAC+B,QAAAA;IAAKlB,WAAU;KAAQ/B,EAAE,gBAAA,CAAA,CAAA,CAAA,GAIhC,gBAAAkB,OAAA,cAACmB,aAAaO,MAAI;IAACC,SAASlD;IAAamD,eAAY;KACnD,gBAAA5B,OAAA,cAACkC,aAAAA;IAAYrB,WAAWpD,GAAGqE,QAAQ,CAAA,GAAI,MAAA;MACvC,gBAAA9B,OAAA,cAAC+B,QAAAA;IAAKlB,WAAU;KAAQ/B,EAAE,0BAAA,CAAA,CAAA,GAE5B,gBAAAkB,OAAA,cAACmB,aAAaO,MAAI;IAACC,SAASjD;IAAYkD,eAAY;KAClD,gBAAA5B,OAAA,cAACmC,eAAAA;IAActB,WAAWpD,GAAGqE,QAAQ,CAAA,GAAI,MAAA;MACzC,gBAAA9B,OAAA,cAAC+B,QAAAA;IAAKlB,WAAU;KAAQ/B,EAAE,yBAAA,CAAA,CAAA,GAE5B,gBAAAkB,OAAA,cAACmB,aAAaO,MAAI;IAACC,SAAS,MAAMpD,WAAAA;IAAcqD,eAAY;KAC1D,gBAAA5B,OAAA,cAACoC,OAAAA;IAAMvB,WAAWpD,GAAGqE,QAAQ,CAAA,GAAI,MAAA;MACjC,gBAAA9B,OAAA,cAAC+B,QAAAA;IAAKlB,WAAU;KAAQ/B,EAAE,sBAAA,CAAA,CAAA,CAAA,GAG9B,gBAAAkB,OAAA,cAACmB,aAAakB,OAAK,IAAA,CAAA,CAAA,CAAA,GAIxBnE,YACC,gBAAA8B,OAAA,cAAsBgC,8BAAO;IAAC9B,SAAAA;KAC5B,gBAAAF,OAAA,cAACsC,QAAAA;IAAOjB,SAAQ;IAAQb,YAAYjD;KAClC,gBAAAyC,OAAA,cAAC+B,QAAAA;IAAKlB,WAAU;KAAW/B,EAAE,cAAA,CAAA,GAC7B,gBAAAkB,OAAA,cAACuC,aAAAA;IAAY1B,WAAWiB,QAAQ,CAAA;SAIpC,gBAAA9B,OAAA,cAACsC,QAAAA;IACCjB,SAAQ;IACRb,YAAYjD;IACZoE,SAASnD;IACToD,eAAY;KAEZ,gBAAA5B,OAAA,cAAC6B,gBAAAA;IAAehB,WAAWpD,GAAGqE,QAAQ,CAAA,CAAA;MACtC,gBAAA9B,OAAA,cAAC+B,QAAAA;IAAKlB,WAAU;KAAW/B,EAAE,2BAAA,CAAA,CAAA,CAAA,CAAA,GAQrC,gBAAAkB,OAAA,cAACM,SAASkC,SAAO;IACfhC,YAAYtC,YAAY;MAAC;MAAyDuE;QAAa;IAC9F,GAAIvE,aAAa;MAAE,GAAG0B;MAAqBsB,UAAU;IAAE;KAQxD,gBAAAlB,OAAA,cAAC+B,QAAAA;IAAKlB,WAAU;KAAY9C,KAAAA,CAAAA,GAE7BE,SAAS,cACR,gBAAA+B,OAAA,cAAsBwB,8BAAO;IAC1B,GAAI,CAACtD,aAAa;MACjB,GAAG0B;MACHsB,UAAU;IACZ;;IAEAL,WAAWpD,GAAGgF,WAAW,SAAA;KAExB7D,QAAAA,IAGH,gBAAAoB,OAAA,cAAsBwB,8BAAO;IAACtB,SAAAA;KAC5B,gBAAAF,OAAA,cAAC0C,WAAWzC,MAAI;IACd0C,MAAK;IACJ,GAAI,CAACzE,aAAa;MAAE,GAAG0B;MAAqBsB,UAAU;IAAE;IACzDV,YAAY/C,GAAGgF,WAAW,uDAAA;KAE1B,gBAAAzC,OAAA,cAAC0C,WAAWjB,UAAQ,MAAE7C,QAAAA,GACtB,gBAAAoB,OAAA,cAAC0C,WAAWE,WAAS;IACnBC,aAAY;IACZxB,SAAQ;IACRb,YAAW;KAEX,gBAAAR,OAAA,cAAC0C,WAAWI,OAAK,IAAA,CAAA,GAEnB,gBAAA9C,OAAA,cAAC0C,WAAWE,WAAS;IAACC,aAAY;IAAWxB,SAAQ;IAASb,YAAW;KACvE,gBAAAR,OAAA,cAAC0C,WAAWI,OAAK,IAAA,CAAA,GAEnB,gBAAA9C,OAAA,cAAC0C,WAAWK,QAAM,IAAA,CAAA,CAAA,CAAA,GAKzB3E,eAAe,CAACF,aACf,gBAAA8B,OAAA,cAACgD,UAAAA;IAAOnC,WAAWrD;KACjB,gBAAAwC,OAAA,cAAC+B,QAAAA;IAAKlB,WAAU;KAAW/B,EAAE,sBAAA,CAAA,CAAA,CAAA,CAAA;AAMzC,CAAA;AAMK,IAAMmE,uBACX;AAEK,IAAMC,iBAAiB,CAAC,EAAEtE,UAAU4B,WAAU,MAAuB;AAC1E,SACE,gBAAAR,OAAA,cAACmD,QAAQlD,MAAI;IAAC4C,aAAY;IAAarC,YAAY;MAACyC;MAAsBG;MAAsB5C;;KAC7F5B,QAAAA;AAGP;AAEO,IAAMyE,cAKTxF,2BAAW,CAAC,EAAEyF,MAAMX,MAAMxE,QAAQG,gBAAgBD,gBAAgBkF,MAAMC,YAAW,GAAI3E,iBAAAA;AACzF,QAAM,EAAEC,EAAC,IAAKC,eAAeC,cAAAA;AAC7B,QAAM,EAAEyE,WAAU,IAAKC,UAAAA;AAEvB,QAAMC,aAAa,CAAC,CAACH,aAAaG;AAClC,QAAMvF,cAAc,CAAC,CAACoF,aAAapF;AACnC,QAAM,EAAEwF,WAAWC,iBAAiBC,qBAAqBC,cAAcpF,mBAAmBqF,eAAc,IACtGR;AAEF,QAAMS,kBAAkBL,YACpBA;IACEL;;IAEAE,YAAYF,KAAKzF,OAAOyF,KAAKzF,KAAK2F,YAAYd,OAAOA;EAAAA,IAEvDY;AAEJ,QAAMW,cAAcD,gBAAgBE,UAAUD,eAAe;IAAC;IAA0B;MAAEE,IAAIpF;IAAe;;AAC7G,QAAMjB,QAAQkG,gBAAgBI,MAAMtG,SAASuG,kBAAkBJ,aAAapF,CAAAA;AAE5E,QAAMyF,UACJ,gBAAAvE,OAAA,cAACpC,SAAAA;IACC2C,KAAK1B;IACLd;IACAD,IAAImG,gBAAgBnG;IACpBG,MAAMgG,gBAAgBI,MAAMpG;IAC5BD,MAAMiG,gBAAgBE,UAAUnG;IAChCE,WAAW+F,gBAAgBI,MAAMnG;IACjCyF;IACAxF;IACAE;IACAC;IACAK;IACAP;IACAG,UAAU,MAAMsF,kBAAkBP,IAAAA;IAClC9E,YAAY,MAAMsF,sBAAsBG,eAAAA;IACxCvF,YAAY,MAAMqF,eAAeT,MAAM,OAAA;IACvC7E,aAAa,MAAMsF,eAAeT,MAAM,QAAA;KAEvCU,kBAAkB,gBAAAhE,OAAA,cAACgE,gBAAAA;IAAeQ,MAAMP,gBAAgBQ;;AAI7D,SAAOtG,WAAW,YAAY,gBAAA6B,OAAA,cAAC0E,MAAAA,MAAMH,OAAAA,IAAkBA;AACzD,CAAA;;;ADrVO,IAAMI,eAAe;AAarB,IAAMC,QAAQ,CAAC,EACpBC,IACAC,OAAOH,cACPI,gBACAC,QAAQ,CAAA,GACRC,aAAa,MACbC,WACAC,QACAC,QACAC,cACAC,iBACAC,qBACAC,mBACA,GAAGC,MAAAA,MACQ;AACX,QAAM,EAAEC,KAAKC,cAAcC,QAAQ,EAAC,IAAKC,kBAAkC;IAAEC,aAAa;EAAI,CAAA;AAC9F,QAAM,EAAEC,WAAWC,SAAQ,IAAKC,WAAAA;AAChC,QAAMC,mBAAmBC,oBAAoB;IAAEC,MAAMvB;IAAIG;EAAM,CAAA;AAE/D,QAAMqB,kBAAkBC,YAAY,OAAO;IAAEV;EAAM,IAAI;IAACA;GAAM;AAC9D,QAAMW,kBAAkBD,YACtB,OAAO;IAAEE,aAAa;MAAEtB;MAAWH;IAAe;EAAE,IACpD;IAACG;IAAWH;GAAe;AAK7B,QAAM0B,gBAAgBH,YACpB,CAACI,aAAa,EAAExB,WAAAA,YAAWyB,gBAAgBC,gBAAe,MAAE;AAC1D,QAAID,kBAAkBC,iBAAiB;AACrC1B,MAAAA,WAAU2B,KAAKF,gBAAgBG,MAAMF,iBAAiBE;IACxD;AACA,WAAO5B;EACT,GACA,CAAA,CAAE;AAGJ,SACE,gBAAA6B,OAAA,cAACC,OAAOC,WACF;IACFpC;IACAC;IACAoC,WAAWC;IACXd;IACAE;IACApB;IACAC;IACAgC,UAAUX;EACZ,GAEA,gBAAAM,OAAA,cAACC,OAAOK,eAAa;IACnBjB,MAAMvB;IACNC;IACAwC,MAAM;MAAEzC;MAAIG,OAAOkB;IAAiB;;IAEpCM,aAAa;MACXvB;MACAC;MACAI;MACAC;MACAF;MACAG;MACAT;IACF;IACAwC,QACEvB,YACA,CAAC,CAACA,SAASI,QACXoB,KAAKC,QAAQzB,SAASI,MAAMvB,EAAAA,MAC3BkB,cAAc,UAAUA,cAAc;IAEzCmB,WAAWQ;IACV,GAAGjC;IACJC,KAAKC;;AAIb;AAEA,IAAM+B,YAAkGC,gBAAAA,YACtG,CAAC,EAAEC,YAAYxB,MAAMmB,QAAQD,MAAM,EAAEtC,MAAK,GAAIwB,aAAa1B,MAAM+C,OAAOC,gBAAgB,GAAGrC,MAAAA,GAASsC,iBAAAA;AAClG,QAAM,EAAEC,EAAC,IAAKC,gBAAeC,cAAAA;AAC7B,QAAM,EAAEhB,WAAWpC,KAAI,IAAKqD,aAAAA;AAC5B,QAAMC,gBAAgBC,wBAAwB;IAAEC,MAAM;EAAO,CAAA;AAC7D,QAAM,EAAEC,WAAU,IAAKtC,WAAAA;AAGvB,QAAMuC,SAASC,mBAAAA;AAGf,SACE,gBAAA1B,OAAA,cAAC2B,OAAAA;IACChD,KAAKqC;IACLH,YAAY;MAAC;MAAiBe;MAAcpB,UAAUqB;MAAehB;;IACpE,GAAI,CAACW,cAAcH;IACnB,GAAG3C;KAEHT,MAAM6D,SAAS,IACd,gBAAA9B,OAAA,cAACC,OAAO8B,iBAAe;IAAC9D;IAAc+D,WAAU;KAC7C/D,MAAMgE,IAAI,CAAC1B,MAAM2B,UAChB,gBAAAlC,OAAA,cAACC,OAAOkC,cAAY;IAClBC,KAAK7B,KAAKzC;IACVyC;IACAd;IACAJ;IACAtB;IACAsE,UAAUH;IACV/B;SAIJY,mBAAmBuB,SACrB,gBAAAtC,OAAA,cAAAA,OAAA,UAAA,MAAGe,cAAAA,IAEH,gBAAAf,OAAA,cAACuC,KAAAA;IACCC,WAAU;IACVC,eAAY;KAEXxB,EAAE,qBAAA,CAAA,CAAA;AAKb,CAAA;",
|
|
6
|
+
"names": ["useArrowNavigationGroup", "useFocusableGroup", "React", "forwardRef", "useCallback", "useResizeDetector", "List", "useTranslation", "Mosaic", "Path", "useContainer", "useItemsWithPreview", "useMosaic", "dropRingInner", "useFocusableGroup", "useTabsterAttributes", "ArrowLineDown", "ArrowLineUp", "ArrowSquareOut", "CaretUpDown", "Trash", "CollapsiblePrimitive", "React", "forwardRef", "useState", "Button", "DropdownMenu", "Icon", "List", "ListItem", "ScrollArea", "Toolbar", "toLocalizedString", "useTranslation", "useAttendableAttributes", "DropDownMenuDragHandleTrigger", "resizeHandle", "resizeHandleHorizontal", "useMosaic", "focusRing", "getSize", "hoverableControlItem", "hoverableControls", "hoverableFocusedWithinControls", "mx", "React", "CaretDownUp", "children", "weight", "props", "svg", "xmlns", "viewBox", "rect", "width", "height", "fill", "polyline", "points", "stroke", "strokeLinecap", "strokeLinejoin", "strokeWidth", "stackColumns", "translationKey", "sectionActionDimensions", "resizeHandleStyles", "mx", "resizeHandle", "resizeHandleHorizontal", "Section", "forwardRef", "id", "title", "icon", "size", "collapsed", "active", "isResizable", "draggableProps", "draggableStyle", "onDelete", "onNavigate", "onAddBefore", "onAddAfter", "onCollapseSection", "children", "forwardedRef", "t", "useTranslation", "translationKey", "optionsMenuOpen", "setOptionsMenuOpen", "useState", "sectionActionsToolbar", "useTabsterAttributes", "groupper", "focusable", "mover", "cyclic", "direction", "memorizeCurrent", "sectionContentGroup", "useFocusableGroup", "attendableAttrs", "useAttendableAttributes", "React", "Root", "asChild", "open", "onOpenChange", "nextOpen", "ListItem", "ref", "classNames", "stackColumns", "style", "div", "role", "className", "hoverableControls", "hoverableFocusedWithinControls", "aria-orientation", "aria-label", "tabIndex", "DropdownMenu", "DropDownMenuDragHandleTrigger", "variant", "Icon", "Portal", "Content", "Viewport", "Item", "onClick", "data-testid", "ArrowSquareOut", "getSize", "span", "Trigger", "CaretDownUp", "ArrowLineUp", "ArrowLineDown", "Trash", "Arrow", "Button", "CaretUpDown", "Heading", "focusRing", "ScrollArea", "type", "Scrollbar", "orientation", "Thumb", "Corner", "button", "sectionToolbarLayout", "SectionToolbar", "Toolbar", "hoverableControlItem", "SectionTile", "path", "item", "itemContext", "activeItem", "useMosaic", "separation", "transform", "onDeleteSection", "onNavigateToSection", "onAddSection", "SectionContent", "transformedItem", "placeholder", "metadata", "ns", "view", "toLocalizedString", "section", "data", "object", "List", "DEFAULT_TYPE", "Stack", "id", "type", "SectionContent", "items", "separation", "transform", "onOver", "onDrop", "onAddSection", "onDeleteSection", "onNavigateToSection", "onCollapseSection", "props", "ref", "containerRef", "width", "useResizeDetector", "refreshRate", "operation", "overItem", "useMosaic", "itemsWithPreview", "useItemsWithPreview", "path", "getOverlayStyle", "useCallback", "getOverlayProps", "itemContext", "stackModifier", "_activeItem", "activeNodeRect", "overlayNodeRect", "y", "top", "React", "Mosaic", "Container", "Component", "SectionTile", "modifier", "DroppableTile", "item", "isOver", "Path", "hasRoot", "StackTile", "forwardRef", "classNames", "_type", "emptyComponent", "forwardedRef", "t", "useTranslation", "translationKey", "useContainer", "domAttributes", "useArrowNavigationGroup", "axis", "activeItem", "_group", "useFocusableGroup", "List", "stackColumns", "dropRingInner", "length", "SortableContext", "direction", "map", "index", "SortableTile", "key", "position", "undefined", "p", "className", "data-testid"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-stack/src/components/CaretDownUp.tsx":{"bytes":3080,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-stack/src/components/style-fragments.ts":{"bytes":707,"imports":[],"format":"esm"},"packages/ui/react-ui-stack/src/translations.ts":{"bytes":2050,"imports":[],"format":"esm"},"packages/ui/react-ui-stack/src/components/Section.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-stack/src/components/CaretDownUp.tsx":{"bytes":3080,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-stack/src/components/style-fragments.ts":{"bytes":707,"imports":[],"format":"esm"},"packages/ui/react-ui-stack/src/translations.ts":{"bytes":2050,"imports":[],"format":"esm"},"packages/ui/react-ui-stack/src/components/Section.tsx":{"bytes":39706,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-collapsible","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-deck","kind":"import-statement","external":true},{"path":"@dxos/react-ui-mosaic","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-stack/src/components/CaretDownUp.tsx","kind":"import-statement","original":"./CaretDownUp"},{"path":"packages/ui/react-ui-stack/src/components/style-fragments.ts","kind":"import-statement","original":"./style-fragments"},{"path":"packages/ui/react-ui-stack/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-stack/src/components/Stack.tsx":{"bytes":16642,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-mosaic","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-stack/src/components/Section.tsx","kind":"import-statement","original":"./Section"},{"path":"packages/ui/react-ui-stack/src/components/style-fragments.ts","kind":"import-statement","original":"./style-fragments"},{"path":"packages/ui/react-ui-stack/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-stack/src/components/index.ts":{"bytes":832,"imports":[{"path":"packages/ui/react-ui-stack/src/components/Stack.tsx","kind":"import-statement","original":"./Stack"},{"path":"packages/ui/react-ui-stack/src/components/Section.tsx","kind":"import-statement","original":"./Section"}],"format":"esm"},"packages/ui/react-ui-stack/src/index.ts":{"bytes":718,"imports":[{"path":"packages/ui/react-ui-stack/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-stack/src/translations.ts","kind":"import-statement","original":"./translations"}],"format":"esm"},"packages/ui/react-ui-stack/src/testing/generator.ts":{"bytes":12324,"imports":[{"path":"@dxos/echo-schema","kind":"import-statement","external":true},{"path":"@dxos/random","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-stack/src/testing/stack-manager.ts":{"bytes":7412,"imports":[],"format":"esm"},"packages/ui/react-ui-stack/src/testing/index.ts":{"bytes":612,"imports":[{"path":"packages/ui/react-ui-stack/src/testing/generator.ts","kind":"import-statement","original":"./generator"},{"path":"packages/ui/react-ui-stack/src/testing/stack-manager.ts","kind":"import-statement","original":"./stack-manager"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-stack/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":33628},"packages/ui/react-ui-stack/dist/lib/browser/index.mjs":{"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-mosaic","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-collapsible","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-deck","kind":"import-statement","external":true},{"path":"@dxos/react-ui-mosaic","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["DEFAULT_TYPE","SectionToolbar","Stack","sectionToolbarLayout","translations"],"entryPoint":"packages/ui/react-ui-stack/src/index.ts","inputs":{"packages/ui/react-ui-stack/src/components/Stack.tsx":{"bytesInOutput":3542},"packages/ui/react-ui-stack/src/components/Section.tsx":{"bytesInOutput":10044},"packages/ui/react-ui-stack/src/components/CaretDownUp.tsx":{"bytesInOutput":779},"packages/ui/react-ui-stack/src/components/style-fragments.ts":{"bytesInOutput":79},"packages/ui/react-ui-stack/src/translations.ts":{"bytesInOutput":508},"packages/ui/react-ui-stack/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-stack/src/index.ts":{"bytesInOutput":0}},"bytes":15510},"packages/ui/react-ui-stack/dist/lib/browser/testing/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":9955},"packages/ui/react-ui-stack/dist/lib/browser/testing/index.mjs":{"imports":[{"path":"@dxos/echo-schema","kind":"import-statement","external":true},{"path":"@dxos/random","kind":"import-statement","external":true}],"exports":["Priority","SectionManager","StackManager","Status","TestObjectGenerator","defaultGenerators","range"],"entryPoint":"packages/ui/react-ui-stack/src/testing/index.ts","inputs":{"packages/ui/react-ui-stack/src/testing/generator.ts":{"bytesInOutput":2244},"packages/ui/react-ui-stack/src/testing/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-stack/src/testing/stack-manager.ts":{"bytesInOutput":1569}},"bytes":4083}}}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/testing/generator.ts", "../../../../src/testing/stack-manager.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\n// TODO(burdon): Reconcile with @dxos/plugin-debug, @dxos/react-ui/testing.\n\n// TODO(burdon): Bug when adding stale objects to space (e.g., static objects already added in previous story invocation).\n\
|
|
5
|
-
"mappings": ";
|
|
6
|
-
"names": ["
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { create, type ReactiveObject, S } from '@dxos/echo-schema';\nimport { faker } from '@dxos/random';\n\n// TODO(burdon): Reconcile with @dxos/plugin-debug, @dxos/react-ui/testing.\n\n// TODO(burdon): Bug when adding stale objects to space (e.g., static objects already added in previous story invocation).\n\n// TODO(burdon): Util.\nexport const range = <T>(fn: (i: number) => T | undefined, length: number): T[] =>\n Array.from({ length })\n .map((_, i) => fn(i))\n .filter(Boolean) as T[];\n\n// TODO(burdon): Commit to using ECHO to generate all test data? Or convert from raw data?\nexport type TestItem = { id: string; type: string } & Record<string, any>;\n\ntype ObjectDataGenerator = {\n createSchema?: () => S.Schema<any>;\n createData: () => any;\n};\n\ntype ObjectFactory<T extends ReactiveObject<any>> = {\n schema?: S.Schema<any>; // TODO(burdon): Support both typed and expando schema.\n createObject: () => T;\n};\n\ntype ObjectFactoryMap = { [type: string]: ObjectFactory<any> };\n\nconst createFactory = ({ createSchema, createData }: ObjectDataGenerator) => {\n const schema = createSchema?.();\n return {\n schema,\n createObject: () => (schema ? create(schema, createData()) : create(createData())),\n };\n};\n\n// TODO(burdon): Handle restricted values.\nexport const Status = ['pending', 'active', 'done'];\nexport const Priority = [1, 2, 3, 4, 5];\n\nexport const defaultGenerators: { [type: string]: ObjectDataGenerator } = {\n document: {\n createData: () => ({\n title: faker.lorem.sentence(3),\n body: faker.lorem.sentences({ min: 1, max: faker.number.int({ min: 1, max: 3 }) }),\n }),\n },\n\n image: {\n createData: () => ({\n title: faker.lorem.sentence(3),\n image: faker.helpers.arrayElement(data.images),\n body: faker.datatype.boolean() ? faker.lorem.sentences() : undefined,\n }),\n },\n\n project: {\n createSchema: () =>\n S.Struct({\n title: S.String,\n repo: S.String,\n status: S.String,\n priority: S.Number,\n }),\n createData: () => ({\n title: faker.commerce.productName(),\n repo: faker.datatype.boolean({ probability: 0.3 }) ? faker.internet.url() : undefined,\n status: faker.helpers.arrayElement(Status),\n priority: faker.helpers.arrayElement(Priority),\n }),\n },\n};\n\n/**\n * Typed object generator.\n * @deprecated\n */\n// TODO(wittjosiah): Remove.\nexport class TestObjectGenerator {\n public readonly factories: ObjectFactoryMap;\n\n constructor({ types, factories }: { types?: string[]; factories?: ObjectFactoryMap } = {}) {\n this.factories =\n factories ??\n (types ?? Object.keys(defaultGenerators)).reduce<ObjectFactoryMap>((acc, type) => {\n acc[type] = createFactory(defaultGenerators[type]);\n return acc;\n }, {});\n }\n\n get schema(): S.Schema<any>[] {\n return Object.values(this.factories).map((f) => f.schema!);\n }\n\n createObject({ types }: { types?: string[] } = {}) {\n const type = faker.helpers.arrayElement(types ?? Object.keys(this.factories));\n const factory = this.factories[type];\n return factory?.createObject();\n }\n\n createObjects({ types, length }: { types?: string[]; length: number }) {\n return range(() => this.createObject({ types }), length);\n }\n}\n\n// https://unsplash.com\n// TODO(burdon): Use https://picsum.photos?\nconst data = {\n images: [\n '/images/image-1.png',\n '/images/image-2.png',\n '/images/image-3.png',\n '/images/image-4.png',\n '/images/image-5.png',\n '/images/image-6.png',\n ],\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport type { Locator, Page } from '@playwright/test';\n\nexport class StackManager {\n private readonly _page: Page;\n\n constructor(readonly locator: Locator) {\n this._page = locator.page();\n }\n\n empty() {\n return this.locator.getByTestId('stack.empty');\n }\n\n sections() {\n return this.locator.locator('li');\n }\n\n order() {\n return this.locator.locator('li').evaluateAll((els) => els.map((el) => el.getAttribute('id')));\n }\n\n section(index: number) {\n return new SectionManager(this.locator.locator('li').nth(index));\n }\n}\n\nexport class SectionManager {\n private readonly _page: Page;\n\n constructor(readonly locator: Locator) {\n this._page = locator.page();\n }\n\n async id() {\n return this.locator.getAttribute('id');\n }\n\n async remove() {\n await this.locator.getByTestId('section.drag-handle-menu-trigger').click();\n await this._page.getByTestId('section.remove').click();\n }\n\n async navigateTo() {\n await this.locator.getByTestId('section.drag-handle-menu-trigger').click();\n await this._page.getByTestId('section.navigate-to').click();\n }\n\n async dragTo(target: Locator, offset: { x: number; y: number } = { x: 0, y: 0 }) {\n const active = this.locator.getByTestId('section.drag-handle-menu-trigger');\n const box = await target.boundingBox();\n if (box) {\n await active.hover();\n await this._page.mouse.down();\n // Timeouts are for input discretization in WebKit\n await this._page.waitForTimeout(100);\n await this._page.pause();\n await this._page.mouse.move(offset.x + box.x + box.width / 2, offset.y + box.y + box.height / 2, { steps: 4 });\n await this._page.pause();\n await this._page.waitForTimeout(100);\n await this._page.mouse.up();\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["create", "S", "faker", "range", "fn", "length", "Array", "from", "map", "_", "i", "filter", "Boolean", "createFactory", "createSchema", "createData", "schema", "createObject", "create", "Status", "Priority", "defaultGenerators", "document", "title", "faker", "lorem", "sentence", "body", "sentences", "min", "max", "number", "int", "image", "helpers", "arrayElement", "data", "images", "datatype", "boolean", "undefined", "project", "S", "Struct", "String", "repo", "status", "priority", "Number", "commerce", "productName", "probability", "internet", "url", "TestObjectGenerator", "constructor", "types", "factories", "Object", "keys", "reduce", "acc", "type", "values", "f", "factory", "createObjects", "StackManager", "constructor", "locator", "_page", "page", "empty", "getByTestId", "sections", "order", "evaluateAll", "els", "map", "el", "getAttribute", "section", "index", "SectionManager", "nth", "id", "remove", "click", "navigateTo", "dragTo", "target", "offset", "x", "y", "active", "box", "boundingBox", "hover", "mouse", "down", "waitForTimeout", "pause", "move", "width", "height", "steps", "up"]
|
|
7
7
|
}
|
package/dist/lib/node/index.cjs
CHANGED
|
@@ -96,7 +96,7 @@ var translations_default = [
|
|
|
96
96
|
];
|
|
97
97
|
var sectionActionDimensions = "p-1 shrink-0 min-bs-0 is-[--rail-action] bs-min";
|
|
98
98
|
var resizeHandleStyles = (0, import_react_ui_theme2.mx)(import_react_ui_deck.resizeHandle, import_react_ui_deck.resizeHandleHorizontal, "is-full bs-[--rail-action] col-start-2");
|
|
99
|
-
var Section = /* @__PURE__ */ (0, import_react3.forwardRef)(({ id, title, icon
|
|
99
|
+
var Section = /* @__PURE__ */ (0, import_react3.forwardRef)(({ id, title, icon = "ph--placeholder--regular", size = "intrinsic", collapsed, active, isResizable, draggableProps, draggableStyle, onDelete, onNavigate, onAddBefore, onAddAfter, onCollapseSection, children }, forwardedRef) => {
|
|
100
100
|
const { t } = (0, import_react_ui2.useTranslation)(translationKey);
|
|
101
101
|
const [optionsMenuOpen, setOptionsMenuOpen] = (0, import_react3.useState)(false);
|
|
102
102
|
const sectionActionsToolbar = (0, import_react_tabster2.useTabsterAttributes)({
|
|
@@ -109,8 +109,7 @@ var Section = /* @__PURE__ */ (0, import_react3.forwardRef)(({ id, title, icon:
|
|
|
109
109
|
}
|
|
110
110
|
});
|
|
111
111
|
const sectionContentGroup = (0, import_react_tabster2.useFocusableGroup)({});
|
|
112
|
-
const attendableAttrs = (0, import_react_ui_attention.
|
|
113
|
-
const hasAttention = (0, import_react_ui_attention.useHasAttention)(id);
|
|
112
|
+
const attendableAttrs = (0, import_react_ui_attention.useAttendableAttributes)(id);
|
|
114
113
|
return /* @__PURE__ */ import_react3.default.createElement(CollapsiblePrimitive.Root, {
|
|
115
114
|
asChild: true,
|
|
116
115
|
open: !collapsed,
|
|
@@ -126,7 +125,7 @@ var Section = /* @__PURE__ */ (0, import_react3.forwardRef)(({ id, title, icon:
|
|
|
126
125
|
style: draggableStyle
|
|
127
126
|
}, /* @__PURE__ */ import_react3.default.createElement("div", {
|
|
128
127
|
role: "none",
|
|
129
|
-
className: (0, import_react_ui_theme2.mx)("grid col-span-2 grid-cols-subgrid", "bg-base
|
|
128
|
+
className: (0, import_react_ui_theme2.mx)("grid col-span-2 grid-cols-subgrid", "bg-base attention-surface", import_react_ui_theme2.hoverableControls, import_react_ui_theme2.hoverableFocusedWithinControls, (active === "origin" || active === "rearrange" || active === "destination") && "opacity-0")
|
|
130
129
|
}, /* @__PURE__ */ import_react3.default.createElement("div", {
|
|
131
130
|
role: "toolbar",
|
|
132
131
|
"aria-orientation": "vertical",
|
|
@@ -147,8 +146,10 @@ var Section = /* @__PURE__ */ (0, import_react3.forwardRef)(({ id, title, icon:
|
|
|
147
146
|
variant: "ghost",
|
|
148
147
|
classNames: "m-0",
|
|
149
148
|
...draggableProps
|
|
150
|
-
}, /* @__PURE__ */ import_react3.default.createElement(Icon, {
|
|
151
|
-
|
|
149
|
+
}, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Icon, {
|
|
150
|
+
icon,
|
|
151
|
+
size: 5,
|
|
152
|
+
classNames: "transition-opacity"
|
|
152
153
|
})), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Portal, null, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Content, null, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Viewport, null, collapsed ? /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Item, {
|
|
153
154
|
onClick: onNavigate,
|
|
154
155
|
"data-testid": "section.navigate-to"
|