@dxos/react-ui-grid 0.8.4-main.422d1c7879 → 0.8.4-main.4f23b4e393
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 +15 -4
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/CellEditor/CellEditor.d.ts.map +1 -1
- package/dist/types/src/CellEditor/CellEditor.stories.d.ts.map +1 -1
- package/dist/types/src/CellEditor/GridCellEditor.d.ts.map +1 -1
- package/dist/types/src/Grid/Grid.d.ts +4 -4
- package/dist/types/src/Grid/Grid.d.ts.map +1 -1
- package/dist/types/src/Grid/Grid.stories.d.ts +4 -0
- package/dist/types/src/Grid/Grid.stories.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +17 -15
- package/src/CellEditor/CellEditor.tsx +16 -5
- package/src/Grid/Grid.stories.tsx +29 -5
|
@@ -221,11 +221,22 @@ var CellEditor = ({ value, extensions, box, gridId, autoFocus, slots, onBlur })
|
|
|
221
221
|
extensions: [
|
|
222
222
|
extensions ?? [],
|
|
223
223
|
filterChars(/[\n\r]+/),
|
|
224
|
-
EditorView.focusChangeEffect
|
|
225
|
-
|
|
226
|
-
|
|
224
|
+
// Observe the underlying blur DOM event rather than `EditorView.focusChangeEffect`. The
|
|
225
|
+
// focus-change facet fires asynchronously (CodeMirror schedules it on a 10ms setTimeout),
|
|
226
|
+
// which means in React strict mode the destroy → blur of the first EditorView runs the
|
|
227
|
+
// callback after the second view has mounted — committing stale data and closing the
|
|
228
|
+
// editor on the user's first keystroke. Deferring via `queueMicrotask` runs the check
|
|
229
|
+
// *after* `view.destroy()` finishes its synchronous body (which calls `dom.remove()`),
|
|
230
|
+
// so `view.dom.isConnected === false` reliably distinguishes a programmatic teardown
|
|
231
|
+
// from a real user blur. Pass `undefined` on teardown so downstream handlers can consume
|
|
232
|
+
// any pending suppress-next-blur flag without committing stale data.
|
|
233
|
+
EditorView.domEventObservers({
|
|
234
|
+
blur: (_event, view) => {
|
|
235
|
+
const doc = view.state.doc.toString();
|
|
236
|
+
queueMicrotask(() => {
|
|
237
|
+
onBlur?.(view.dom.isConnected ? doc : void 0);
|
|
238
|
+
});
|
|
227
239
|
}
|
|
228
|
-
return null;
|
|
229
240
|
}),
|
|
230
241
|
createBasicExtensions({
|
|
231
242
|
lineWrapping: true
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/index.ts", "../../../src/Grid/Grid.tsx", "../../../src/CellEditor/CellEditor.tsx", "../../../src/CellEditor/GridCellEditor.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nexport { defaultColSize, defaultRowSize } from '@dxos/lit-grid';\n\nexport * from './Grid';\nexport * from './CellEditor';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type EventName, createComponent } from '@lit/react';\nimport { type Scope, createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, {\n type ComponentProps,\n type PropsWithChildren,\n forwardRef,\n useCallback,\n useEffect,\n useState,\n} from 'react';\n\nimport '@dxos/lit-grid/dx-grid.pcss';\nimport { type DxAxisResize, type DxEditRequest, type DxGridCellsSelect, DxGrid as NaturalDxGrid } from '@dxos/lit-grid';\n\ntype DxGridElement = NaturalDxGrid;\n\nconst DxGrid = createComponent({\n tagName: 'dx-grid',\n elementClass: NaturalDxGrid,\n react: React,\n events: {\n onAxisResize: 'dx-axis-resize' as EventName<DxAxisResize>,\n onEdit: 'dx-edit-request' as EventName<DxEditRequest>,\n onSelect: 'dx-grid-cells-select' as EventName<DxGridCellsSelect>,\n },\n});\n\ntype GridEditBox = DxEditRequest['cellBox'];\n\nconst initialBox = {\n insetInlineStart: 0,\n insetBlockStart: 0,\n inlineSize: 0,\n blockSize: 0,\n} satisfies GridEditBox;\n\ntype GridEditing = {\n index: DxEditRequest['cellIndex'];\n cellElement: DxEditRequest['cellElement'];\n initialContent: DxEditRequest['initialContent'];\n} | null;\n\ntype GridContextValue = {\n id: string;\n editing: GridEditing;\n setEditing: (nextEditing: GridEditing) => void;\n editBox: GridEditBox;\n setEditBox: (nextEditBox: GridEditBox) => void;\n};\n\ntype GridScopedProps<P> = P & { __gridScope?: Scope };\n\nconst GRID_NAME = 'Grid';\n\nconst [createGridContext, createGridScope] = createContextScope(GRID_NAME, []);\n\nconst [GridProvider, useGridContext] = createGridContext<GridContextValue>(GRID_NAME);\n\ntype GridRootProps = PropsWithChildren<\n {\n id: string;\n } & Partial<{\n editing: GridEditing;\n defaultEditing: GridEditing;\n onEditingChange: (nextEditing: GridEditing) => void;\n }>\n>;\n\n// TODO(burdon): Make headless.\nconst GridRoot = ({\n __gridScope,\n children,\n id,\n editing: propsEditing,\n defaultEditing,\n onEditingChange,\n}: GridScopedProps<GridRootProps>) => {\n const [editing = null, setEditing] = useControllableState({\n prop: propsEditing,\n defaultProp: defaultEditing,\n onChange: onEditingChange,\n });\n const [editBox, setEditBox] = useState<GridEditBox>(initialBox);\n return (\n <GridProvider\n id={id}\n editing={editing}\n setEditing={setEditing}\n editBox={editBox}\n setEditBox={setEditBox}\n scope={__gridScope}\n >\n <div className='dx-grid-host' style={{ display: 'contents' }}>\n {children}\n </div>\n </GridProvider>\n );\n};\n\nGridRoot.displayName = GRID_NAME;\n\nconst GRID_CONTENT_NAME = 'GridContent';\n\ntype GridContentProps = Omit<ComponentProps<typeof DxGrid>, 'onEdit'> & {\n getCells?: NaturalDxGrid['getCells'];\n activeRefs?: string;\n};\n\nconst GridContent = forwardRef<NaturalDxGrid, GridScopedProps<GridContentProps>>((props, forwardedRef) => {\n const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);\n const [dxGrid, setDxGridInternal] = useState<NaturalDxGrid | null>(null);\n\n // NOTE(thure): using `useState` instead of `useRef` works with refs provided by `@lit/react` and gives us\n // a reliable dependency for `useEffect` whereas `useLayoutEffect` does not guarantee the element will be defined.\n const setDxGrid = useCallback(\n (nextDxGrid: NaturalDxGrid | null) => {\n setDxGridInternal(nextDxGrid);\n if (forwardedRef) {\n if (typeof forwardedRef === 'function') {\n forwardedRef?.(nextDxGrid);\n } else {\n forwardedRef.current = nextDxGrid;\n }\n }\n },\n [forwardedRef, dxGrid],\n );\n\n useEffect(() => {\n if (dxGrid && props.getCells) {\n dxGrid.getCells = props.getCells;\n dxGrid.requestUpdate('initialCells');\n }\n }, [props.getCells, dxGrid]);\n\n const handleEdit = useCallback((event: DxEditRequest) => {\n setEditBox(event.cellBox);\n setEditing({ index: event.cellIndex, cellElement: event.cellElement, initialContent: event.initialContent });\n }, []);\n\n return <DxGrid {...props} gridId={id} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={setDxGrid} />;\n});\n\nGridContent.displayName = GRID_CONTENT_NAME;\n\n//\n// Fragments\n//\n\n// NOTE(Zan): These fragments add border to w-end and h-end of the grid using pseudo-elements.\n// These are offset by 1px to avoid double borders in planks.\nconst gridSeparatorInlineEnd =\n '[&>.dx-grid]:relative [&>.dx-grid]:after:absolute [&>.dx-grid]:after:inset-y-0 [&>.dx-grid]:after:-right-px [&>.dx-grid]:after:w-px [&>.dx-grid]:after:bg-subdued-separator';\nconst gridSeparatorBlockEnd =\n '[&>.dx-grid]:relative [&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-x-0 [&>.dx-grid]:before:-bottom-px [&>.dx-grid]:before:h-px [&>.dx-grid]:before:bg-subdued-separator';\n\n//\n// Exports\n//\n\nexport const Grid = {\n Root: GridRoot,\n Content: GridContent,\n};\n\nexport { GridRoot, GridContent, createGridScope, gridSeparatorInlineEnd, gridSeparatorBlockEnd, useGridContext };\n\nexport type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };\n\nexport {\n colToA1Notation,\n rowToA1Notation,\n closestCell,\n commentedClassName,\n toPlaneCellIndex,\n parseCellIndex,\n cellQuery,\n DxEditRequest,\n} from '@dxos/lit-grid';\n\nexport type {\n DxGridRange,\n DxGridAxisMeta,\n DxAxisResize,\n DxGridCells,\n DxGridPlaneRange,\n DxGridPlaneCells,\n DxGridCellIndex,\n DxGridPlaneCellIndex,\n DxGridCellValue,\n DxGridPlane,\n DxGridPosition,\n DxGridPlanePosition,\n DxGridAxis,\n} from '@dxos/lit-grid';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { completionStatus } from '@codemirror/autocomplete';\nimport { type Extension } from '@codemirror/state';\nimport { EditorView, keymap } from '@codemirror/view';\nimport React, { type KeyboardEvent } from 'react';\n\nimport { useThemeContext } from '@dxos/react-ui';\nimport { type UseTextEditorProps, useTextEditor } from '@dxos/react-ui-editor';\nimport {\n type ThemeExtensionsOptions,\n createBasicExtensions,\n createThemeExtensions,\n filterChars,\n} from '@dxos/ui-editor';\nimport { mx } from '@dxos/ui-theme';\n\nimport { type GridEditBox } from '../Grid';\n\nexport type EditorKeyEvent = Pick<KeyboardEvent<HTMLInputElement>, 'key'> & { shift?: boolean };\n\nexport type EditorKeyHandler = (value: string | undefined, event: EditorKeyEvent) => void;\nexport type EditorBlurHandler = (value: string | undefined) => void;\nexport type EditorKeyOrBlurHandler = (value: string | undefined, event?: EditorKeyEvent) => void;\n\nexport type EditorKeysProps = {\n onClose: EditorKeyHandler;\n onNav?: EditorKeyHandler;\n};\n\n// TODO(Zan): Should each consumer be responsible for defining these?\nexport const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {\n return keymap.of([\n {\n key: 'ArrowUp',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowUp' });\n return !!onNav;\n },\n },\n {\n key: 'ArrowDown',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowDown' });\n return !!onNav;\n },\n },\n {\n key: 'Mod-ArrowLeft',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowLeft' });\n return !!onNav;\n },\n },\n {\n key: 'Mod-ArrowRight',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowRight' });\n return !!onNav;\n },\n },\n {\n key: 'Enter',\n run: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Enter' });\n return true;\n }\n },\n shift: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Enter', shift: true });\n return true;\n }\n },\n },\n {\n key: 'Tab',\n run: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Tab' });\n return true;\n }\n },\n shift: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Tab', shift: true });\n return true;\n }\n },\n },\n {\n key: 'Escape',\n run: () => {\n onClose(undefined, { key: 'Escape' });\n return true;\n },\n },\n ]);\n};\n\nexport type CellEditorProps = {\n value?: string;\n extensions?: Extension;\n box?: GridEditBox;\n gridId?: string;\n onBlur?: EditorBlurHandler;\n} & Pick<UseTextEditorProps, 'autoFocus'> &\n Pick<ThemeExtensionsOptions, 'slots'>;\n\nexport const CellEditor = ({ value, extensions, box, gridId, autoFocus, slots, onBlur }: CellEditorProps) => {\n const { themeMode } = useThemeContext();\n const { parentRef } = useTextEditor(() => {\n return {\n autoFocus,\n initialValue: value,\n selection: { anchor: value?.length ?? 0 },\n extensions: [\n extensions ?? [],\n filterChars(/[\\n\\r]+/),\n EditorView.focusChangeEffect.of((state, focusing) => {\n if (!focusing) {\n onBlur?.(state.doc.toString());\n }\n return null;\n }),\n createBasicExtensions({ lineWrapping: true }),\n createThemeExtensions({\n themeMode,\n slots: {\n editor: {\n className: mx(\n 'min-w-full! w-min! !max-w-(--dx-grid-cell-editor-max-w-size) min-h-full! !max-h-(--dx-grid-cell-editor-max-h-size)',\n slots?.editor?.className,\n ),\n },\n scroller: {\n className: mx(\n 'overflow-x-hidden! !py-[max(0,calc(var(--dx-grid-cell-editor-padding-block)-1px))] pe-0! !pl-(--dx-grid-cell-editor-padding-inline)',\n slots?.scroller?.className,\n ),\n },\n content: {\n className: mx('break-normal!', slots?.content?.className),\n },\n },\n }),\n ],\n };\n }, [extensions, autoFocus, value, onBlur, themeMode, slots]);\n\n return (\n <div\n data-testid='grid.cell-editor'\n ref={parentRef}\n className='absolute z-[1] dx-grid__cell-editor'\n style={{\n insetInlineStart: box?.insetInlineStart ?? '0px',\n insetBlockStart: box?.insetBlockStart ?? '0px',\n minInlineSize: box?.inlineSize ?? '180px',\n minBlockSize: box?.blockSize ?? '30px',\n ...{ '--dx-grid-cell-width': `${box?.inlineSize ?? 200}px` },\n }}\n {...(gridId && { 'data-grid': gridId })}\n />\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { useCallback } from 'react';\n\nimport { type DxGridCellIndex, type GridScopedProps, useGridContext } from '../Grid';\nimport { CellEditor, type CellEditorProps } from './CellEditor';\n\nexport type GridCellEditorProps = GridScopedProps<\n Pick<CellEditorProps, 'extensions' | 'onBlur' | 'slots'> & {\n getCellContent: (index: DxGridCellIndex) => string | undefined;\n }\n>;\n\nexport const GridCellEditor = ({ extensions, getCellContent, onBlur, slots, __gridScope }: GridCellEditorProps) => {\n const { id, editing, setEditing, editBox } = useGridContext('GridCellEditor', __gridScope);\n\n const handleBlur = useCallback(\n (value?: string) => {\n setEditing(null);\n onBlur?.(value);\n },\n [onBlur],\n );\n\n return editing ? (\n <CellEditor\n value={editing.initialContent ?? getCellContent(editing.index)}\n autoFocus\n box={editBox}\n onBlur={handleBlur}\n extensions={extensions}\n gridId={id}\n slots={slots}\n />\n ) : null;\n};\n"],
|
|
5
|
-
"mappings": ";AAIA,SAASA,gBAAgBC,sBAAsB;;;ACA/C,SAAyBC,uBAAuB;AAChD,SAAqBC,0BAA0B;AAC/C,SAASC,4BAA4B;AACrC,OAAOC,SAGLC,YACAC,aACAC,WACAC,gBACK;AAEP,OAAO;AACP,SAAwEC,UAAUC,qBAAqB;AA6JvG,SACEC,iBACAC,iBACAC,aACAC,oBACAC,kBACAC,gBACAC,WACAC,qBACK;AAlKP,
|
|
6
|
-
"names": ["defaultColSize", "defaultRowSize", "createComponent", "createContextScope", "useControllableState", "React", "forwardRef", "useCallback", "useEffect", "useState", "DxGrid", "NaturalDxGrid", "colToA1Notation", "rowToA1Notation", "closestCell", "commentedClassName", "toPlaneCellIndex", "parseCellIndex", "cellQuery", "DxEditRequest", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nexport { defaultColSize, defaultRowSize } from '@dxos/lit-grid';\n\nexport * from './Grid';\nexport * from './CellEditor';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type EventName, createComponent } from '@lit/react';\nimport { type Scope, createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, {\n type ComponentProps,\n type PropsWithChildren,\n forwardRef,\n useCallback,\n useEffect,\n useState,\n} from 'react';\n\nimport '@dxos/lit-grid/dx-grid.pcss';\nimport { type DxAxisResize, type DxEditRequest, type DxGridCellsSelect, DxGrid as NaturalDxGrid } from '@dxos/lit-grid';\n\ntype DxGridElement = NaturalDxGrid;\n\nconst DxGrid = createComponent({\n tagName: 'dx-grid',\n elementClass: NaturalDxGrid,\n react: React,\n events: {\n onAxisResize: 'dx-axis-resize' as EventName<DxAxisResize>,\n onEdit: 'dx-edit-request' as EventName<DxEditRequest>,\n onSelect: 'dx-grid-cells-select' as EventName<DxGridCellsSelect>,\n },\n});\n\ntype GridEditBox = DxEditRequest['cellBox'];\n\nconst initialBox = {\n insetInlineStart: 0,\n insetBlockStart: 0,\n inlineSize: 0,\n blockSize: 0,\n} satisfies GridEditBox;\n\ntype GridEditing = {\n index: DxEditRequest['cellIndex'];\n cellElement: DxEditRequest['cellElement'];\n initialContent: DxEditRequest['initialContent'];\n} | null;\n\ntype GridContextValue = {\n id: string;\n editing: GridEditing;\n setEditing: (nextEditing: GridEditing) => void;\n editBox: GridEditBox;\n setEditBox: (nextEditBox: GridEditBox) => void;\n};\n\ntype GridScopedProps<P> = P & { __gridScope?: Scope };\n\nconst GRID_NAME = 'Grid';\n\nconst [createGridContext, createGridScope] = createContextScope(GRID_NAME, []);\n\nconst [GridProvider, useGridContext] = createGridContext<GridContextValue>(GRID_NAME);\n\ntype GridRootProps = PropsWithChildren<\n {\n id: string;\n } & Partial<{\n editing: GridEditing;\n defaultEditing: GridEditing;\n onEditingChange: (nextEditing: GridEditing) => void;\n }>\n>;\n\n// TODO(burdon): Make headless.\nconst GridRoot = ({\n __gridScope,\n children,\n id,\n editing: propsEditing,\n defaultEditing,\n onEditingChange,\n}: GridScopedProps<GridRootProps>) => {\n const [editing = null, setEditing] = useControllableState({\n prop: propsEditing,\n defaultProp: defaultEditing,\n onChange: onEditingChange,\n });\n const [editBox, setEditBox] = useState<GridEditBox>(initialBox);\n return (\n <GridProvider\n id={id}\n editing={editing}\n setEditing={setEditing}\n editBox={editBox}\n setEditBox={setEditBox}\n scope={__gridScope}\n >\n <div className='dx-grid-host' style={{ display: 'contents' }}>\n {children}\n </div>\n </GridProvider>\n );\n};\n\nGridRoot.displayName = GRID_NAME;\n\nconst GRID_CONTENT_NAME = 'GridContent';\n\ntype GridContentProps = Omit<ComponentProps<typeof DxGrid>, 'onEdit'> & {\n getCells?: NaturalDxGrid['getCells'];\n activeRefs?: string;\n};\n\nconst GridContent = forwardRef<NaturalDxGrid, GridScopedProps<GridContentProps>>((props, forwardedRef) => {\n const { id, editing, setEditBox, setEditing } = useGridContext(GRID_CONTENT_NAME, props.__gridScope);\n const [dxGrid, setDxGridInternal] = useState<NaturalDxGrid | null>(null);\n\n // NOTE(thure): using `useState` instead of `useRef` works with refs provided by `@lit/react` and gives us\n // a reliable dependency for `useEffect` whereas `useLayoutEffect` does not guarantee the element will be defined.\n const setDxGrid = useCallback(\n (nextDxGrid: NaturalDxGrid | null) => {\n setDxGridInternal(nextDxGrid);\n if (forwardedRef) {\n if (typeof forwardedRef === 'function') {\n forwardedRef?.(nextDxGrid);\n } else {\n forwardedRef.current = nextDxGrid;\n }\n }\n },\n [forwardedRef, dxGrid],\n );\n\n useEffect(() => {\n if (dxGrid && props.getCells) {\n dxGrid.getCells = props.getCells;\n dxGrid.requestUpdate('initialCells');\n }\n }, [props.getCells, dxGrid]);\n\n const handleEdit = useCallback((event: DxEditRequest) => {\n setEditBox(event.cellBox);\n setEditing({ index: event.cellIndex, cellElement: event.cellElement, initialContent: event.initialContent });\n }, []);\n\n return <DxGrid {...props} gridId={id} mode={editing ? 'edit' : 'browse'} onEdit={handleEdit} ref={setDxGrid} />;\n});\n\nGridContent.displayName = GRID_CONTENT_NAME;\n\n//\n// Fragments\n//\n\n// NOTE(Zan): These fragments add border to w-end and h-end of the grid using pseudo-elements.\n// These are offset by 1px to avoid double borders in planks.\nconst gridSeparatorInlineEnd =\n '[&>.dx-grid]:relative [&>.dx-grid]:after:absolute [&>.dx-grid]:after:inset-y-0 [&>.dx-grid]:after:-right-px [&>.dx-grid]:after:w-px [&>.dx-grid]:after:bg-subdued-separator';\nconst gridSeparatorBlockEnd =\n '[&>.dx-grid]:relative [&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-x-0 [&>.dx-grid]:before:-bottom-px [&>.dx-grid]:before:h-px [&>.dx-grid]:before:bg-subdued-separator';\n\n//\n// Exports\n//\n\nexport const Grid = {\n Root: GridRoot,\n Content: GridContent,\n};\n\nexport { GridRoot, GridContent, createGridScope, gridSeparatorInlineEnd, gridSeparatorBlockEnd, useGridContext };\n\nexport type { GridRootProps, GridContentProps, GridEditing, GridEditBox, GridScopedProps, DxGridElement };\n\nexport {\n colToA1Notation,\n rowToA1Notation,\n closestCell,\n commentedClassName,\n toPlaneCellIndex,\n parseCellIndex,\n cellQuery,\n DxEditRequest,\n} from '@dxos/lit-grid';\n\nexport type {\n DxGridRange,\n DxGridAxisMeta,\n DxAxisResize,\n DxGridCells,\n DxGridPlaneRange,\n DxGridPlaneCells,\n DxGridCellIndex,\n DxGridPlaneCellIndex,\n DxGridCellValue,\n DxGridPlane,\n DxGridPosition,\n DxGridPlanePosition,\n DxGridAxis,\n} from '@dxos/lit-grid';\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { completionStatus } from '@codemirror/autocomplete';\nimport { type Extension } from '@codemirror/state';\nimport { EditorView, keymap } from '@codemirror/view';\nimport React, { type KeyboardEvent } from 'react';\n\nimport { useThemeContext } from '@dxos/react-ui';\nimport { type UseTextEditorProps, useTextEditor } from '@dxos/react-ui-editor';\nimport {\n type ThemeExtensionsOptions,\n createBasicExtensions,\n createThemeExtensions,\n filterChars,\n} from '@dxos/ui-editor';\nimport { mx } from '@dxos/ui-theme';\n\nimport { type GridEditBox } from '../Grid';\n\nexport type EditorKeyEvent = Pick<KeyboardEvent<HTMLInputElement>, 'key'> & { shift?: boolean };\n\nexport type EditorKeyHandler = (value: string | undefined, event: EditorKeyEvent) => void;\nexport type EditorBlurHandler = (value: string | undefined) => void;\nexport type EditorKeyOrBlurHandler = (value: string | undefined, event?: EditorKeyEvent) => void;\n\nexport type EditorKeysProps = {\n onClose: EditorKeyHandler;\n onNav?: EditorKeyHandler;\n};\n\n// TODO(Zan): Should each consumer be responsible for defining these?\nexport const editorKeys = ({ onNav, onClose }: EditorKeysProps): Extension => {\n return keymap.of([\n {\n key: 'ArrowUp',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowUp' });\n return !!onNav;\n },\n },\n {\n key: 'ArrowDown',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowDown' });\n return !!onNav;\n },\n },\n {\n key: 'Mod-ArrowLeft',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowLeft' });\n return !!onNav;\n },\n },\n {\n key: 'Mod-ArrowRight',\n run: (editor) => {\n const value = editor.state.doc.toString();\n onNav?.(value, { key: 'ArrowRight' });\n return !!onNav;\n },\n },\n {\n key: 'Enter',\n run: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Enter' });\n return true;\n }\n },\n shift: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Enter', shift: true });\n return true;\n }\n },\n },\n {\n key: 'Tab',\n run: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Tab' });\n return true;\n }\n },\n shift: (editor) => {\n if (completionStatus(editor.state)) {\n return false;\n } else {\n onClose(editor.state.doc.toString(), { key: 'Tab', shift: true });\n return true;\n }\n },\n },\n {\n key: 'Escape',\n run: () => {\n onClose(undefined, { key: 'Escape' });\n return true;\n },\n },\n ]);\n};\n\nexport type CellEditorProps = {\n value?: string;\n extensions?: Extension;\n box?: GridEditBox;\n gridId?: string;\n onBlur?: EditorBlurHandler;\n} & Pick<UseTextEditorProps, 'autoFocus'> &\n Pick<ThemeExtensionsOptions, 'slots'>;\n\nexport const CellEditor = ({ value, extensions, box, gridId, autoFocus, slots, onBlur }: CellEditorProps) => {\n const { themeMode } = useThemeContext();\n const { parentRef } = useTextEditor(() => {\n return {\n autoFocus,\n initialValue: value,\n selection: { anchor: value?.length ?? 0 },\n extensions: [\n extensions ?? [],\n filterChars(/[\\n\\r]+/),\n // Observe the underlying blur DOM event rather than `EditorView.focusChangeEffect`. The\n // focus-change facet fires asynchronously (CodeMirror schedules it on a 10ms setTimeout),\n // which means in React strict mode the destroy → blur of the first EditorView runs the\n // callback after the second view has mounted — committing stale data and closing the\n // editor on the user's first keystroke. Deferring via `queueMicrotask` runs the check\n // *after* `view.destroy()` finishes its synchronous body (which calls `dom.remove()`),\n // so `view.dom.isConnected === false` reliably distinguishes a programmatic teardown\n // from a real user blur. Pass `undefined` on teardown so downstream handlers can consume\n // any pending suppress-next-blur flag without committing stale data.\n EditorView.domEventObservers({\n blur: (_event, view) => {\n const doc = view.state.doc.toString();\n queueMicrotask(() => {\n onBlur?.(view.dom.isConnected ? doc : undefined);\n });\n },\n }),\n createBasicExtensions({ lineWrapping: true }),\n createThemeExtensions({\n themeMode,\n slots: {\n editor: {\n className: mx(\n 'min-w-full! w-min! !max-w-(--dx-grid-cell-editor-max-w-size) min-h-full! !max-h-(--dx-grid-cell-editor-max-h-size)',\n slots?.editor?.className,\n ),\n },\n scroller: {\n className: mx(\n 'overflow-x-hidden! !py-[max(0,calc(var(--dx-grid-cell-editor-padding-block)-1px))] pe-0! !pl-(--dx-grid-cell-editor-padding-inline)',\n slots?.scroller?.className,\n ),\n },\n content: {\n className: mx('break-normal!', slots?.content?.className),\n },\n },\n }),\n ],\n };\n }, [extensions, autoFocus, value, onBlur, themeMode, slots]);\n\n return (\n <div\n data-testid='grid.cell-editor'\n ref={parentRef}\n className='absolute z-[1] dx-grid__cell-editor'\n style={{\n insetInlineStart: box?.insetInlineStart ?? '0px',\n insetBlockStart: box?.insetBlockStart ?? '0px',\n minInlineSize: box?.inlineSize ?? '180px',\n minBlockSize: box?.blockSize ?? '30px',\n ...{ '--dx-grid-cell-width': `${box?.inlineSize ?? 200}px` },\n }}\n {...(gridId && { 'data-grid': gridId })}\n />\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { useCallback } from 'react';\n\nimport { type DxGridCellIndex, type GridScopedProps, useGridContext } from '../Grid';\nimport { CellEditor, type CellEditorProps } from './CellEditor';\n\nexport type GridCellEditorProps = GridScopedProps<\n Pick<CellEditorProps, 'extensions' | 'onBlur' | 'slots'> & {\n getCellContent: (index: DxGridCellIndex) => string | undefined;\n }\n>;\n\nexport const GridCellEditor = ({ extensions, getCellContent, onBlur, slots, __gridScope }: GridCellEditorProps) => {\n const { id, editing, setEditing, editBox } = useGridContext('GridCellEditor', __gridScope);\n\n const handleBlur = useCallback(\n (value?: string) => {\n setEditing(null);\n onBlur?.(value);\n },\n [onBlur],\n );\n\n return editing ? (\n <CellEditor\n value={editing.initialContent ?? getCellContent(editing.index)}\n autoFocus\n box={editBox}\n onBlur={handleBlur}\n extensions={extensions}\n gridId={id}\n slots={slots}\n />\n ) : null;\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["defaultColSize", "defaultRowSize", "createComponent", "createContextScope", "useControllableState", "React", "forwardRef", "useCallback", "useEffect", "useState", "DxGrid", "NaturalDxGrid", "colToA1Notation", "rowToA1Notation", "closestCell", "commentedClassName", "toPlaneCellIndex", "parseCellIndex", "cellQuery", "DxEditRequest", "tagName", "elementClass", "react", "events", "onAxisResize", "onEdit", "onSelect", "initialBox", "insetInlineStart", "insetBlockStart", "inlineSize", "blockSize", "GRID_NAME", "createGridContext", "createGridScope", "GridProvider", "useGridContext", "GridRoot", "__gridScope", "children", "id", "editing", "propsEditing", "defaultEditing", "onEditingChange", "setEditing", "prop", "defaultProp", "onChange", "editBox", "setEditBox", "scope", "div", "className", "style", "display", "displayName", "GRID_CONTENT_NAME", "GridContent", "props", "forwardedRef", "dxGrid", "setDxGridInternal", "setDxGrid", "nextDxGrid", "current", "getCells", "requestUpdate", "handleEdit", "event", "cellBox", "index", "cellIndex", "cellElement", "initialContent", "gridId", "mode", "ref", "gridSeparatorInlineEnd", "gridSeparatorBlockEnd", "Grid", "Root", "Content", "completionStatus", "EditorView", "keymap", "React", "useThemeContext", "useTextEditor", "createBasicExtensions", "createThemeExtensions", "filterChars", "mx", "editorKeys", "onNav", "onClose", "of", "key", "run", "editor", "value", "state", "doc", "toString", "shift", "undefined", "CellEditor", "extensions", "box", "gridId", "autoFocus", "slots", "onBlur", "themeMode", "parentRef", "initialValue", "selection", "anchor", "length", "domEventObservers", "blur", "_event", "view", "queueMicrotask", "dom", "isConnected", "lineWrapping", "className", "scroller", "content", "div", "data-testid", "ref", "style", "insetInlineStart", "insetBlockStart", "minInlineSize", "inlineSize", "minBlockSize", "blockSize", "React", "useCallback", "GridCellEditor", "extensions", "getCellContent", "onBlur", "slots", "__gridScope", "id", "editing", "setEditing", "editBox", "useGridContext", "handleBlur", "useCallback", "value", "React", "CellEditor", "initialContent", "index", "autoFocus", "box", "gridId"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/Grid/Grid.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"src/Grid/Grid.tsx":{"bytes":16514,"imports":[{"path":"@lit/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-grid/dx-grid.pcss","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true}],"format":"esm"},"src/Grid/index.ts":{"bytes":368,"imports":[{"path":"src/Grid/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"},"src/CellEditor/CellEditor.tsx":{"bytes":20399,"imports":[{"path":"@codemirror/autocomplete","kind":"import-statement","external":true},{"path":"@codemirror/view","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-editor","kind":"import-statement","external":true},{"path":"@dxos/ui-editor","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/CellEditor/GridCellEditor.tsx":{"bytes":3399,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"src/Grid/index.ts","kind":"import-statement","original":"../Grid"},{"path":"src/CellEditor/CellEditor.tsx","kind":"import-statement","original":"./CellEditor"}],"format":"esm"},"src/CellEditor/index.ts":{"bytes":484,"imports":[{"path":"src/CellEditor/CellEditor.tsx","kind":"import-statement","original":"./CellEditor"},{"path":"src/CellEditor/GridCellEditor.tsx","kind":"import-statement","original":"./GridCellEditor"}],"format":"esm"},"src/index.ts":{"bytes":711,"imports":[{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"src/Grid/index.ts","kind":"import-statement","original":"./Grid"},{"path":"src/CellEditor/index.ts","kind":"import-statement","original":"./CellEditor"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":20877},"dist/lib/browser/index.mjs":{"imports":[{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@lit/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/lit-grid/dx-grid.pcss","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@dxos/lit-grid","kind":"import-statement","external":true},{"path":"@codemirror/autocomplete","kind":"import-statement","external":true},{"path":"@codemirror/view","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-editor","kind":"import-statement","external":true},{"path":"@dxos/ui-editor","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["CellEditor","DxEditRequest","Grid","GridCellEditor","GridContent","GridRoot","cellQuery","closestCell","colToA1Notation","commentedClassName","createGridScope","defaultColSize","defaultRowSize","editorKeys","gridSeparatorBlockEnd","gridSeparatorInlineEnd","parseCellIndex","rowToA1Notation","toPlaneCellIndex","useGridContext"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":65},"src/Grid/Grid.tsx":{"bytesInOutput":3340},"src/CellEditor/CellEditor.tsx":{"bytesInOutput":5359},"src/CellEditor/GridCellEditor.tsx":{"bytesInOutput":615}},"bytes":9883}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/CellEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAE,KAAK,kBAAkB,EAAiB,MAAM,uBAAuB,CAAC;AAC/E,OAAO,EACL,KAAK,sBAAsB,EAI5B,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEhG,MAAM,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;AAC1F,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;AACpE,MAAM,MAAM,sBAAsB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;AAEjG,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,gBAAgB,CAAC;IAC1B,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAGF,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"CellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/CellEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAE,KAAK,kBAAkB,EAAiB,MAAM,uBAAuB,CAAC;AAC/E,OAAO,EACL,KAAK,sBAAsB,EAI5B,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEhG,MAAM,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;AAC1F,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;AACpE,MAAM,MAAM,sBAAsB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;AAEjG,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,gBAAgB,CAAC;IAC1B,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAGF,eAAO,MAAM,UAAU,uBAAwB,eAAe,KAAG,SAgFhE,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,GAAG,CAAC,EAAE,WAAW,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B,GAAG,IAAI,CAAC,kBAAkB,EAAE,WAAW,CAAC,GACvC,IAAI,CAAC,sBAAsB,EAAE,OAAO,CAAC,CAAC;AAExC,eAAO,MAAM,UAAU,iEAAkE,eAAe,sBAmEvG,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CellEditor.stories.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/CellEditor.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,OAAO,EAAc,KAAK,eAAe,EAAmC,MAAM,cAAc,CAAC;AA2DjG,QAAA,MAAM,IAAI;;;oBAzDmB,eAAe
|
|
1
|
+
{"version":3,"file":"CellEditor.stories.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/CellEditor.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,OAAO,EAAc,KAAK,eAAe,EAAmC,MAAM,cAAc,CAAC;AA2DjG,QAAA,MAAM,IAAI;;;oBAzDmB,eAAe;;;QA+DxC,MAAM;;CAEyB,CAAC;eAErB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridCellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/GridCellEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,eAAe,EAAkB,MAAM,SAAS,CAAC;AACrF,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEhE,MAAM,MAAM,mBAAmB,GAAG,eAAe,CAC/C,IAAI,CAAC,eAAe,EAAE,YAAY,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IACzD,cAAc,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,MAAM,GAAG,SAAS,CAAC;CAChE,CACF,CAAC;AAEF,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"GridCellEditor.d.ts","sourceRoot":"","sources":["../../../../src/CellEditor/GridCellEditor.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,eAAe,EAAkB,MAAM,SAAS,CAAC;AACrF,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEhE,MAAM,MAAM,mBAAmB,GAAG,eAAe,CAC/C,IAAI,CAAC,eAAe,EAAE,YAAY,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IACzD,cAAc,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,MAAM,GAAG,SAAS,CAAC;CAChE,CACF,CAAC;AAEF,eAAO,MAAM,cAAc,+DAAgE,mBAAmB,6BAsB7G,CAAC"}
|
|
@@ -34,10 +34,10 @@ type GridRootProps = PropsWithChildren<{
|
|
|
34
34
|
defaultEditing: GridEditing;
|
|
35
35
|
onEditingChange: (nextEditing: GridEditing) => void;
|
|
36
36
|
}>>;
|
|
37
|
-
declare
|
|
38
|
-
|
|
39
|
-
displayName: string;
|
|
40
|
-
}
|
|
37
|
+
declare function GridRoot({ __gridScope, children, id, editing: propsEditing, defaultEditing, onEditingChange }: GridScopedProps<GridRootProps>): React.JSX.Element;
|
|
38
|
+
declare namespace GridRoot {
|
|
39
|
+
var displayName: string;
|
|
40
|
+
}
|
|
41
41
|
type GridContentProps = Omit<ComponentProps<typeof DxGrid>, 'onEdit'> & {
|
|
42
42
|
getCells?: NaturalDxGrid['getCells'];
|
|
43
43
|
activeRefs?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../src/Grid/Grid.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAmB,MAAM,YAAY,CAAC;AAC7D,OAAO,EAAE,KAAK,KAAK,EAAsB,MAAM,yBAAyB,CAAC;AAEzE,OAAO,KAAK,EAAE,EACZ,KAAK,cAAc,EACnB,KAAK,iBAAiB,EAKvB,MAAM,OAAO,CAAC;AAEf,OAAO,6BAA6B,CAAC;AACrC,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAExH,KAAK,aAAa,GAAG,aAAa,CAAC;AAEnC,QAAA,MAAM,MAAM;kBAK0B,SAAS,CAAC,YAAY,CAAC;YAC5B,SAAS,CAAC,aAAa,CAAC;cACjB,SAAS,CAAC,iBAAiB,CAAC;EAElE,CAAC;AAEH,KAAK,WAAW,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;AAS5C,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IAClC,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC1C,cAAc,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;CACjD,GAAG,IAAI,CAAC;AAET,KAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,WAAW,CAAC;IACrB,UAAU,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,OAAO,EAAE,WAAW,CAAC;IACrB,UAAU,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,KAAK,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAItD,QAAA,MAA0B,eAAe,+CAAqC,CAAC;AAE/E,QAAA,MAAqB,cAAc,wFAAkD,CAAC;AAEtF,KAAK,aAAa,GAAG,iBAAiB,CACpC;IACE,EAAE,EAAE,MAAM,CAAC;CACZ,GAAG,OAAO,CAAC;IACV,OAAO,EAAE,WAAW,CAAC;IACrB,cAAc,EAAE,WAAW,CAAC;IAC5B,eAAe,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;CACrD,CAAC,CACH,CAAC;
|
|
1
|
+
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../src/Grid/Grid.tsx"],"names":[],"mappings":"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"}
|
|
@@ -13,6 +13,10 @@ declare const meta: {
|
|
|
13
13
|
export default meta;
|
|
14
14
|
type Story = StoryObj<typeof meta>;
|
|
15
15
|
export declare const Default: Story;
|
|
16
|
+
/**
|
|
17
|
+
* Single focusable cell — for verifying focus-ring alignment with grid lines.
|
|
18
|
+
*/
|
|
19
|
+
export declare const SingleCell: Story;
|
|
16
20
|
export declare const Basic: Story;
|
|
17
21
|
export declare const Calendar: Story;
|
|
18
22
|
//# sourceMappingURL=Grid.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../../src/Grid/Grid.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAgF,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../../src/Grid/Grid.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAgF,MAAM,OAAO,CAAC;AAWrG,OAAO,EAAQ,KAAK,gBAAgB,EAAoB,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAI3F,KAAK,cAAc,GAAG,gBAAgB,GAAG,IAAI,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;AA8FhF,QAAA,MAAM,IAAI;;4CA5FqC,cAAc;;;QAiGzD,MAAM;;CAEwB,CAAC;eAEpB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KA4CnB,CAAC;AAKF,eAAO,MAAM,QAAQ,EAAE,KAwCtB,CAAC"}
|