@ahrowe/ui 0.43.0 → 0.44.0
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/CHANGELOG.md +12 -0
- package/README.md +3 -2
- package/dist/cjs-types/common/configProvider/configProvider.types.d.ts +4 -0
- package/dist/cjs-types/common/loader/index.d.ts +2 -0
- package/dist/cjs-types/common/loader/loader.d.ts +4 -0
- package/dist/cjs-types/common/loader/loader.types.d.ts +31 -0
- package/dist/cjs-types/common/loadingOverlay/index.d.ts +2 -0
- package/dist/cjs-types/common/loadingOverlay/loadingOverlay.d.ts +4 -0
- package/dist/cjs-types/common/loadingOverlay/loadingOverlay.types.d.ts +21 -0
- package/dist/cjs-types/common/themeProvider/theme.types.d.ts +4 -0
- package/dist/cjs-types/index.d.ts +4 -1
- package/dist/esm/common/button/button.mjs +1 -1
- package/dist/esm/common/button/button.mjs.map +1 -1
- package/dist/esm/common/button/button.module.mjs +1 -1
- package/dist/esm/common/button/button.module.mjs.map +1 -1
- package/dist/esm/common/checkbox/checkbox.mjs +1 -1
- package/dist/esm/common/checkbox/checkbox.mjs.map +1 -1
- package/dist/esm/common/checkbox/checkbox.module.mjs +1 -1
- package/dist/esm/common/checkbox/checkbox.module.mjs.map +1 -1
- package/dist/esm/common/dropdown/dropdown.mjs +1 -1
- package/dist/esm/common/dropdown/dropdown.mjs.map +1 -1
- package/dist/esm/common/dropdown/dropdown.module.mjs +1 -1
- package/dist/esm/common/dropdown/dropdown.module.mjs.map +1 -1
- package/dist/esm/common/kanbanBoard/KanbanColumn.mjs +1 -1
- package/dist/esm/common/kanbanBoard/KanbanColumn.mjs.map +1 -1
- package/dist/esm/common/kanbanBoard/kanbanBoard.module.mjs +1 -1
- package/dist/esm/common/kanbanBoard/kanbanBoard.module.mjs.map +1 -1
- package/dist/esm/common/loader/loader.mjs +2 -0
- package/dist/esm/common/loader/loader.mjs.map +1 -0
- package/dist/esm/common/loader/loader.module.mjs +2 -0
- package/dist/esm/common/loader/loader.module.mjs.map +1 -0
- package/dist/esm/common/loader/loader.types.mjs +2 -0
- package/dist/esm/common/loader/loader.types.mjs.map +1 -0
- package/dist/esm/common/loadingOverlay/loadingOverlay.mjs +2 -0
- package/dist/esm/common/loadingOverlay/loadingOverlay.mjs.map +1 -0
- package/dist/esm/common/loadingOverlay/loadingOverlay.module.mjs +2 -0
- package/dist/esm/common/loadingOverlay/loadingOverlay.module.mjs.map +1 -0
- package/dist/esm/common/virtualList/virtualList.mjs +1 -1
- package/dist/esm/common/virtualList/virtualList.mjs.map +1 -1
- package/dist/esm/common/virtualList/virtualList.module.mjs +1 -1
- package/dist/esm/common/virtualList/virtualList.module.mjs.map +1 -1
- package/dist/esm/index.mjs +1 -1
- package/dist/index.cjs +3 -3
- package/dist/index.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types/common/configProvider/configProvider.types.d.ts +4 -0
- package/dist/types/common/loader/index.d.ts +2 -0
- package/dist/types/common/loader/loader.d.ts +4 -0
- package/dist/types/common/loader/loader.types.d.ts +31 -0
- package/dist/types/common/loadingOverlay/index.d.ts +2 -0
- package/dist/types/common/loadingOverlay/loadingOverlay.d.ts +4 -0
- package/dist/types/common/loadingOverlay/loadingOverlay.types.d.ts +21 -0
- package/dist/types/common/themeProvider/theme.types.d.ts +4 -0
- package/dist/types/index.d.ts +4 -1
- package/docs/Button.md +1 -1
- package/docs/CLAUDE.md +3 -2
- package/docs/Checkbox.md +1 -1
- package/docs/ConfigProvider.md +1 -1
- package/docs/Loader.md +95 -0
- package/docs/LoadingOverlay.md +85 -0
- package/docs/Skeleton.md +1 -1
- package/docs/ThemeColor.md +1 -1
- package/package.json +1 -1
- package/dist/cjs-types/common/loading/index.d.ts +0 -1
- package/dist/cjs-types/common/loading/spinnerLoading/index.d.ts +0 -2
- package/dist/cjs-types/common/loading/spinnerLoading/spinnerLoading.d.ts +0 -6
- package/dist/esm/common/loading/spinnerLoading/index.mjs +0 -2
- package/dist/esm/common/loading/spinnerLoading/index.mjs.map +0 -1
- package/dist/esm/common/loading/spinnerLoading/spinnerLoading.mjs +0 -2
- package/dist/esm/common/loading/spinnerLoading/spinnerLoading.mjs.map +0 -1
- package/dist/esm/common/loading/spinnerLoading/spinnerLoading.module.mjs +0 -2
- package/dist/esm/common/loading/spinnerLoading/spinnerLoading.module.mjs.map +0 -1
- package/dist/types/common/loading/index.d.ts +0 -1
- package/dist/types/common/loading/spinnerLoading/index.d.ts +0 -2
- package/dist/types/common/loading/spinnerLoading/spinnerLoading.d.ts +0 -6
- package/docs/Loading.md +0 -68
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KanbanColumn.mjs","names":[],"sources":["../../../../package/common/kanbanBoard/KanbanColumn.tsx"],"sourcesContent":["import type { ReactNode, UIEvent } from 'react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { useDroppable } from '@dnd-kit/core';\nimport { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport cx from 'classnames';\n\nimport type { KanbanColumnProps } from './kanbanBoard.types';\nimport styles from './kanbanBoard.module.pcss';\nimport KanbanItem from './KanbanItem';\nimport SpinnerLoading from '../loading/spinnerLoading';\n\n// Hoisted so these are referentially stable across renders — inline literals here would give\n// `useSortable` a new `data`/`disabled` object every render (every column re-renders on every\n// `dragOver` while a drag is in progress, via `shadowColumns`), which can spin dnd-kit's own\n// registration effect into a render loop that eventually trips React's \"Maximum update depth\n// exceeded\" guard. Same fix as the sensor options in `KanbanBoard.tsx`.\nconst COLUMN_SORTABLE_DATA = { type: 'column' };\nconst COLUMN_SORTABLE_DISABLED = { draggable: true, droppable: true };\n\ninterface KanbanColumnInternalProps<T> extends KanbanColumnProps {\n itemIds: string[];\n items: Record<string, T>;\n renderItem: (item: T, id: string) => ReactNode;\n dragHandle?: boolean;\n /**\n * Keep the column at its normal flex width even when `itemIds` is empty. Used while a drag\n * is in progress: the empty-column collapse is driven by transient shadow state during a\n * drag, and letting the column shrink mid-drag shifts every column's layout underneath the\n * pointer, which can flip the collision target back and forth forever.\n */\n preserveSizeWhileEmpty?: boolean;\n /** Shrink to a narrow strip when empty — see `KanbanBoardProps.collapseEmptyColumns`. Defaults to `true`. */\n collapseEmptyColumns?: boolean;\n /** Work-in-progress limit — see `KanbanColumnDef.maxItems`. Display-only. */\n maxItems?: number;\n /** Freezes the column — see `KanbanColumnDef.disabled`. */\n disabled?: boolean;\n /** Returns whether a specific card can't be picked up — see `KanbanBoardProps.getItemDisabled`. */\n getItemDisabled?: (item: T, id: string) => boolean;\n /** Custom content shown when the column has no cards — see `KanbanBoardProps.renderEmptyColumn`. */\n emptyPlaceholder?: ReactNode;\n /** Custom header actions — see `KanbanBoardProps.renderColumnActions`. */\n actions?: ReactNode;\n /** Allow the whole column to be dragged (by its header) to reorder it — see `KanbanBoardProps.reorderableColumns`. */\n reorderable?: boolean;\n /**\n * Whether the card currently being dragged (if any) is actually a column. Suppresses the\n * cards drop-target highlight, which otherwise lights up on every column a dragged column\n * passes over — that highlight means \"drop a card here\", which doesn't apply mid-column-drag.\n */\n activeIsColumn?: boolean;\n /** Bounds the column's height and makes its card list scroll — see `KanbanBoardProps.columnMaxHeight`. */\n columnMaxHeight?: string;\n /** Whether more items exist for this column — see `KanbanColumnDef.hasMore`. */\n hasMore?: boolean;\n /** Requests the next page for this column — see `KanbanBoardProps.onLoadMore`. */\n onLoadMore?: () => void | Promise<void>;\n /** Scroll distance from the bottom that triggers `onLoadMore` — see `KanbanBoardProps.loadMoreThreshold`. */\n loadMoreThreshold?: number;\n}\n\nfunction KanbanColumn<T>({\n id,\n title,\n itemIds,\n items,\n renderItem,\n dragHandle,\n preserveSizeWhileEmpty,\n collapseEmptyColumns = true,\n maxItems,\n disabled,\n getItemDisabled,\n emptyPlaceholder,\n actions,\n reorderable,\n activeIsColumn,\n columnMaxHeight,\n hasMore,\n onLoadMore,\n loadMoreThreshold = 100,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}: KanbanColumnInternalProps<T>) {\n const droppableId = `column-${id}`;\n const { setNodeRef, isOver } = useDroppable({ id: droppableId, disabled });\n const isEmpty = collapseEmptyColumns && itemIds.length === 0 && !preserveSizeWhileEmpty;\n const isOverLimit = maxItems != null && itemIds.length > maxItems;\n\n const itemsRef = useRef<HTMLDivElement | null>(null);\n const setItemsRef = useCallback(\n (node: HTMLDivElement | null) => {\n itemsRef.current = node;\n setNodeRef(node);\n },\n [setNodeRef],\n );\n const isLoadingMoreRef = useRef(false);\n const [isLoadingMore, setIsLoadingMore] = useState(false);\n\n const triggerLoadMore = useCallback(() => {\n if (!onLoadMore || isLoadingMoreRef.current) return;\n isLoadingMoreRef.current = true;\n setIsLoadingMore(true);\n Promise.resolve(onLoadMore()).finally(() => {\n isLoadingMoreRef.current = false;\n setIsLoadingMore(false);\n });\n }, [onLoadMore]);\n\n const handleItemsScroll = useCallback(\n (event: UIEvent<HTMLDivElement>) => {\n if (!hasMore) return;\n const el = event.currentTarget;\n if (el.scrollTop + el.clientHeight >= el.scrollHeight - loadMoreThreshold) triggerLoadMore();\n },\n [hasMore, loadMoreThreshold, triggerLoadMore],\n );\n\n // The scroll trigger above can only fire once the list actually overflows and scrolls. A batch\n // smaller than the column's own visible height never generates a scroll event, which would\n // otherwise dead-end pagination after the first page. Re-probes at most once per (item count,\n // visible height) pair, so settled content can't re-ask a source that already ran dry.\n const fillProbeRef = useRef('');\n useEffect(() => {\n if (!hasMore || !columnMaxHeight || isLoadingMore) return;\n const el = itemsRef.current;\n if (!el || el.clientHeight === 0) return;\n if (el.scrollHeight > el.clientHeight) return;\n const probe = `${itemIds.length}:${el.clientHeight}`;\n if (fillProbeRef.current === probe) return;\n fillProbeRef.current = probe;\n triggerLoadMore();\n }, [hasMore, columnMaxHeight, isLoadingMore, itemIds.length, triggerLoadMore]);\n\n const {\n attributes: columnAttributes,\n listeners: columnListeners,\n setNodeRef: setColumnNodeRef,\n transform: columnTransform,\n transition: columnTransition,\n isDragging: isColumnDragging,\n isOver: isColumnOver,\n } = useSortable({\n id,\n data: COLUMN_SORTABLE_DATA,\n disabled: reorderable ? false : COLUMN_SORTABLE_DISABLED,\n });\n\n return (\n <div\n {...rest}\n ref={setColumnNodeRef}\n id={id}\n className={cx(\n styles.column,\n isOver && !activeIsColumn && styles.columnOver,\n isColumnOver && styles.columnDropTarget,\n isEmpty && styles.columnEmpty,\n isOverLimit && styles.columnOverLimit,\n disabled && styles.columnDisabled,\n isColumnDragging && styles.columnDragging,\n className,\n )}\n style={{ transform: CSS.Transform.toString(columnTransform), transition: columnTransition, ...style }}\n >\n <div\n className={cx(styles.columnHeader, reorderable && styles.columnHeaderReorderable, classNames?.header)}\n style={slotStyles?.header}\n {...(reorderable ? columnAttributes : undefined)}\n {...(reorderable ? columnListeners : undefined)}\n >\n <span className={styles.columnHeaderTitle}>{title}</span>\n <div className={styles.columnHeaderTrailing}>\n {maxItems != null && (\n <span\n className={cx(styles.columnHeaderCount, isOverLimit && styles.columnHeaderCountOver, classNames?.count)}\n style={slotStyles?.count}\n >\n {itemIds.length}/{maxItems}\n </span>\n )}\n {actions != null && (\n <div className={cx(styles.columnHeaderActions, classNames?.actions)} style={slotStyles?.actions}>\n {actions}\n </div>\n )}\n </div>\n </div>\n <SortableContext id={id} items={itemIds} strategy={verticalListSortingStrategy}>\n <div\n ref={setItemsRef}\n className={cx(styles.columnItems, classNames?.items)}\n style={{ maxHeight: columnMaxHeight, overflowY: columnMaxHeight ? 'auto' : undefined, ...slotStyles?.items }}\n onScroll={columnMaxHeight ? handleItemsScroll : undefined}\n >\n {itemIds.length === 0 && emptyPlaceholder != null ? (\n <div className={cx(styles.columnPlaceholder, classNames?.placeholder)} style={slotStyles?.placeholder}>\n {emptyPlaceholder}\n </div>\n ) : null}\n {itemIds.map((itemId) => (\n <KanbanItem\n key={itemId}\n id={itemId}\n dragHandle={dragHandle}\n disabled={\n disabled || (items[itemId] !== undefined && (getItemDisabled?.(items[itemId], itemId) ?? false))\n }\n preventAsDropTarget={disabled}\n >\n {items[itemId] !== undefined ? renderItem(items[itemId], itemId) : null}\n </KanbanItem>\n ))}\n {isLoadingMore && (\n <div\n className={cx(styles.columnLoadingIndicator, classNames?.loadingIndicator)}\n style={slotStyles?.loadingIndicator}\n >\n <SpinnerLoading className={styles.columnLoadingSpinner} />\n </div>\n )}\n </div>\n </SortableContext>\n </div>\n );\n}\n\nexport default KanbanColumn;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"KanbanColumn.mjs","names":[],"sources":["../../../../package/common/kanbanBoard/KanbanColumn.tsx"],"sourcesContent":["import type { ReactNode, UIEvent } from 'react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { useDroppable } from '@dnd-kit/core';\nimport { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport cx from 'classnames';\n\nimport type { KanbanColumnProps } from './kanbanBoard.types';\nimport styles from './kanbanBoard.module.pcss';\nimport KanbanItem from './KanbanItem';\nimport Loader from '../loader';\n\n// Hoisted so these are referentially stable across renders — inline literals here would give\n// `useSortable` a new `data`/`disabled` object every render (every column re-renders on every\n// `dragOver` while a drag is in progress, via `shadowColumns`), which can spin dnd-kit's own\n// registration effect into a render loop that eventually trips React's \"Maximum update depth\n// exceeded\" guard. Same fix as the sensor options in `KanbanBoard.tsx`.\nconst COLUMN_SORTABLE_DATA = { type: 'column' };\nconst COLUMN_SORTABLE_DISABLED = { draggable: true, droppable: true };\n\ninterface KanbanColumnInternalProps<T> extends KanbanColumnProps {\n itemIds: string[];\n items: Record<string, T>;\n renderItem: (item: T, id: string) => ReactNode;\n dragHandle?: boolean;\n /**\n * Keep the column at its normal flex width even when `itemIds` is empty. Used while a drag\n * is in progress: the empty-column collapse is driven by transient shadow state during a\n * drag, and letting the column shrink mid-drag shifts every column's layout underneath the\n * pointer, which can flip the collision target back and forth forever.\n */\n preserveSizeWhileEmpty?: boolean;\n /** Shrink to a narrow strip when empty — see `KanbanBoardProps.collapseEmptyColumns`. Defaults to `true`. */\n collapseEmptyColumns?: boolean;\n /** Work-in-progress limit — see `KanbanColumnDef.maxItems`. Display-only. */\n maxItems?: number;\n /** Freezes the column — see `KanbanColumnDef.disabled`. */\n disabled?: boolean;\n /** Returns whether a specific card can't be picked up — see `KanbanBoardProps.getItemDisabled`. */\n getItemDisabled?: (item: T, id: string) => boolean;\n /** Custom content shown when the column has no cards — see `KanbanBoardProps.renderEmptyColumn`. */\n emptyPlaceholder?: ReactNode;\n /** Custom header actions — see `KanbanBoardProps.renderColumnActions`. */\n actions?: ReactNode;\n /** Allow the whole column to be dragged (by its header) to reorder it — see `KanbanBoardProps.reorderableColumns`. */\n reorderable?: boolean;\n /**\n * Whether the card currently being dragged (if any) is actually a column. Suppresses the\n * cards drop-target highlight, which otherwise lights up on every column a dragged column\n * passes over — that highlight means \"drop a card here\", which doesn't apply mid-column-drag.\n */\n activeIsColumn?: boolean;\n /** Bounds the column's height and makes its card list scroll — see `KanbanBoardProps.columnMaxHeight`. */\n columnMaxHeight?: string;\n /** Whether more items exist for this column — see `KanbanColumnDef.hasMore`. */\n hasMore?: boolean;\n /** Requests the next page for this column — see `KanbanBoardProps.onLoadMore`. */\n onLoadMore?: () => void | Promise<void>;\n /** Scroll distance from the bottom that triggers `onLoadMore` — see `KanbanBoardProps.loadMoreThreshold`. */\n loadMoreThreshold?: number;\n}\n\nfunction KanbanColumn<T>({\n id,\n title,\n itemIds,\n items,\n renderItem,\n dragHandle,\n preserveSizeWhileEmpty,\n collapseEmptyColumns = true,\n maxItems,\n disabled,\n getItemDisabled,\n emptyPlaceholder,\n actions,\n reorderable,\n activeIsColumn,\n columnMaxHeight,\n hasMore,\n onLoadMore,\n loadMoreThreshold = 100,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}: KanbanColumnInternalProps<T>) {\n const droppableId = `column-${id}`;\n const { setNodeRef, isOver } = useDroppable({ id: droppableId, disabled });\n const isEmpty = collapseEmptyColumns && itemIds.length === 0 && !preserveSizeWhileEmpty;\n const isOverLimit = maxItems != null && itemIds.length > maxItems;\n\n const itemsRef = useRef<HTMLDivElement | null>(null);\n const setItemsRef = useCallback(\n (node: HTMLDivElement | null) => {\n itemsRef.current = node;\n setNodeRef(node);\n },\n [setNodeRef],\n );\n const isLoadingMoreRef = useRef(false);\n const [isLoadingMore, setIsLoadingMore] = useState(false);\n\n const triggerLoadMore = useCallback(() => {\n if (!onLoadMore || isLoadingMoreRef.current) return;\n isLoadingMoreRef.current = true;\n setIsLoadingMore(true);\n Promise.resolve(onLoadMore()).finally(() => {\n isLoadingMoreRef.current = false;\n setIsLoadingMore(false);\n });\n }, [onLoadMore]);\n\n const handleItemsScroll = useCallback(\n (event: UIEvent<HTMLDivElement>) => {\n if (!hasMore) return;\n const el = event.currentTarget;\n if (el.scrollTop + el.clientHeight >= el.scrollHeight - loadMoreThreshold) triggerLoadMore();\n },\n [hasMore, loadMoreThreshold, triggerLoadMore],\n );\n\n // The scroll trigger above can only fire once the list actually overflows and scrolls. A batch\n // smaller than the column's own visible height never generates a scroll event, which would\n // otherwise dead-end pagination after the first page. Re-probes at most once per (item count,\n // visible height) pair, so settled content can't re-ask a source that already ran dry.\n const fillProbeRef = useRef('');\n useEffect(() => {\n if (!hasMore || !columnMaxHeight || isLoadingMore) return;\n const el = itemsRef.current;\n if (!el || el.clientHeight === 0) return;\n if (el.scrollHeight > el.clientHeight) return;\n const probe = `${itemIds.length}:${el.clientHeight}`;\n if (fillProbeRef.current === probe) return;\n fillProbeRef.current = probe;\n triggerLoadMore();\n }, [hasMore, columnMaxHeight, isLoadingMore, itemIds.length, triggerLoadMore]);\n\n const {\n attributes: columnAttributes,\n listeners: columnListeners,\n setNodeRef: setColumnNodeRef,\n transform: columnTransform,\n transition: columnTransition,\n isDragging: isColumnDragging,\n isOver: isColumnOver,\n } = useSortable({\n id,\n data: COLUMN_SORTABLE_DATA,\n disabled: reorderable ? false : COLUMN_SORTABLE_DISABLED,\n });\n\n return (\n <div\n {...rest}\n ref={setColumnNodeRef}\n id={id}\n className={cx(\n styles.column,\n isOver && !activeIsColumn && styles.columnOver,\n isColumnOver && styles.columnDropTarget,\n isEmpty && styles.columnEmpty,\n isOverLimit && styles.columnOverLimit,\n disabled && styles.columnDisabled,\n isColumnDragging && styles.columnDragging,\n className,\n )}\n style={{ transform: CSS.Transform.toString(columnTransform), transition: columnTransition, ...style }}\n >\n <div\n className={cx(styles.columnHeader, reorderable && styles.columnHeaderReorderable, classNames?.header)}\n style={slotStyles?.header}\n {...(reorderable ? columnAttributes : undefined)}\n {...(reorderable ? columnListeners : undefined)}\n >\n <span className={styles.columnHeaderTitle}>{title}</span>\n <div className={styles.columnHeaderTrailing}>\n {maxItems != null && (\n <span\n className={cx(styles.columnHeaderCount, isOverLimit && styles.columnHeaderCountOver, classNames?.count)}\n style={slotStyles?.count}\n >\n {itemIds.length}/{maxItems}\n </span>\n )}\n {actions != null && (\n <div className={cx(styles.columnHeaderActions, classNames?.actions)} style={slotStyles?.actions}>\n {actions}\n </div>\n )}\n </div>\n </div>\n <SortableContext id={id} items={itemIds} strategy={verticalListSortingStrategy}>\n <div\n ref={setItemsRef}\n className={cx(styles.columnItems, classNames?.items)}\n style={{ maxHeight: columnMaxHeight, overflowY: columnMaxHeight ? 'auto' : undefined, ...slotStyles?.items }}\n onScroll={columnMaxHeight ? handleItemsScroll : undefined}\n >\n {itemIds.length === 0 && emptyPlaceholder != null ? (\n <div className={cx(styles.columnPlaceholder, classNames?.placeholder)} style={slotStyles?.placeholder}>\n {emptyPlaceholder}\n </div>\n ) : null}\n {itemIds.map((itemId) => (\n <KanbanItem\n key={itemId}\n id={itemId}\n dragHandle={dragHandle}\n disabled={\n disabled || (items[itemId] !== undefined && (getItemDisabled?.(items[itemId], itemId) ?? false))\n }\n preventAsDropTarget={disabled}\n >\n {items[itemId] !== undefined ? renderItem(items[itemId], itemId) : null}\n </KanbanItem>\n ))}\n {isLoadingMore && (\n <div\n className={cx(styles.columnLoadingIndicator, classNames?.loadingIndicator)}\n style={slotStyles?.loadingIndicator}\n >\n <Loader size='2.6em' />\n </div>\n )}\n </div>\n </SortableContext>\n </div>\n );\n}\n\nexport default KanbanColumn;\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";var e=`board_6KRdw`,t=`column_NrNeF`,n=`column-empty_5KYsJ`,r=`column-over_sO7oD`,i=`column-over-limit_QmeZF`,a=`column-drop-target_mznmc`,o=`column-disabled_ehcz3`,s=`column-items_xY5er`,c=`column-dragging_6F5TK`,l=`column-drag-overlay_ctehQ`,u=`column-header_PLeKG`,d=`column-header-reorderable_Jtgii`,f=`column-header-title_FQhHQ`,p=`column-header-count_3t83e`,m=`column-header-count-over_AkAdo`,h=`column-header-trailing_6625D`,g=`column-header-actions_XKY3t`,_=`column-placeholder_WGyF-`,v=`column-loading-indicator_2Q70t`,y=`
|
|
1
|
+
"use client";var e=`board_6KRdw`,t=`column_NrNeF`,n=`column-empty_5KYsJ`,r=`column-over_sO7oD`,i=`column-over-limit_QmeZF`,a=`column-drop-target_mznmc`,o=`column-disabled_ehcz3`,s=`column-items_xY5er`,c=`column-dragging_6F5TK`,l=`column-drag-overlay_ctehQ`,u=`column-header_PLeKG`,d=`column-header-reorderable_Jtgii`,f=`column-header-title_FQhHQ`,p=`column-header-count_3t83e`,m=`column-header-count-over_AkAdo`,h=`column-header-trailing_6625D`,g=`column-header-actions_XKY3t`,_=`column-placeholder_WGyF-`,v=`column-loading-indicator_2Q70t`,y=`item_T8CJK`,b=`item-dragging_iWurw`,x=`item-handled_l28gq`,S=`item-disabled_n8Nuq`,C=`dragOverlay_DSyKz`,w={board:e,column:t,"column-empty":`column-empty_5KYsJ`,columnEmpty:n,"column-over":`column-over_sO7oD`,columnOver:r,"column-over-limit":`column-over-limit_QmeZF`,columnOverLimit:i,"column-drop-target":`column-drop-target_mznmc`,columnDropTarget:a,"column-disabled":`column-disabled_ehcz3`,columnDisabled:o,"column-items":`column-items_xY5er`,columnItems:s,"column-dragging":`column-dragging_6F5TK`,columnDragging:c,"column-drag-overlay":`column-drag-overlay_ctehQ`,columnDragOverlay:l,"column-header":`column-header_PLeKG`,columnHeader:u,"column-header-reorderable":`column-header-reorderable_Jtgii`,columnHeaderReorderable:d,"column-header-title":`column-header-title_FQhHQ`,columnHeaderTitle:f,"column-header-count":`column-header-count_3t83e`,columnHeaderCount:p,"column-header-count-over":`column-header-count-over_AkAdo`,columnHeaderCountOver:m,"column-header-trailing":`column-header-trailing_6625D`,columnHeaderTrailing:h,"column-header-actions":`column-header-actions_XKY3t`,columnHeaderActions:g,"column-placeholder":`column-placeholder_WGyF-`,columnPlaceholder:_,"column-loading-indicator":`column-loading-indicator_2Q70t`,columnLoadingIndicator:v,item:y,"item-dragging":`item-dragging_iWurw`,itemDragging:b,"item-handled":`item-handled_l28gq`,itemHandled:x,"item-disabled":`item-disabled_n8Nuq`,itemDisabled:S,dragOverlay:C};export{e as board,t as column,o as columnDisabled,l as columnDragOverlay,c as columnDragging,a as columnDropTarget,n as columnEmpty,u as columnHeader,g as columnHeaderActions,p as columnHeaderCount,m as columnHeaderCountOver,d as columnHeaderReorderable,f as columnHeaderTitle,h as columnHeaderTrailing,s as columnItems,v as columnLoadingIndicator,r as columnOver,i as columnOverLimit,_ as columnPlaceholder,w as default,C as dragOverlay,y as item,S as itemDisabled,b as itemDragging,x as itemHandled};
|
|
2
2
|
//# sourceMappingURL=kanbanBoard.module.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kanbanBoard.module.mjs","names":[],"sources":["../../../../package/common/kanbanBoard/kanbanBoard.module.pcss"],"sourcesContent":[".board {\n display: flex;\n gap: var(--spacing-s);\n overflow-x: auto;\n align-items: flex-start;\n width: 100%;\n}\n\n.column {\n background: var(--background-accent-light);\n border-radius: var(--default-border-radius);\n box-shadow: var(--card-shadow);\n flex: 1 1 0;\n display: flex;\n flex-direction: column;\n border: 2px solid transparent;\n transition:\n border-color 0.15s ease,\n background 0.15s ease;\n\n &-empty {\n flex: 0 1 0;\n min-width: var(--kanban-empty-column-width, 140px);\n }\n\n &-over {\n border-color: var(--primary-lighter);\n background: var(--background-accent);\n }\n\n &-over-limit {\n border-color: var(--warn-color);\n }\n\n /* A whole column being dragged over this one, reordering — distinct from -over (a card being\n dropped into this column's card list), even though both are dashed-free solid borders here;\n kept as a separate class so consumers can restyle one without affecting the other. */\n &-drop-target {\n border-color: var(--primary-color);\n background: var(--background-accent);\n }\n\n /* Dims only the cards area, not the header — header actions (e.g. an \"add card\" button) are\n consumer-controlled and often meant to stay fully interactive even while the column itself\n is frozen for dragging, and opacity on an ancestor can't be undone by a child's own opacity. */\n &-disabled &-items {\n opacity: 0.6;\n }\n\n &-dragging {\n opacity: 0.4;\n }\n\n &-drag-overlay {\n cursor: grabbing;\n box-shadow:\n 0 10px 30px rgb(0 0 0 / 25%),\n var(--card-shadow);\n min-width: 220px;\n }\n\n &-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--spacing-s);\n padding: var(--spacing-m) var(--spacing-l);\n background: var(--background-accent);\n border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;\n font-size: var(--header-small-font-size);\n font-weight: var(--header-font-weight);\n color: var(--text-color);\n border-bottom: 1px solid var(--border-color);\n\n &-reorderable {\n cursor: grab;\n -webkit-tap-highlight-color: transparent;\n touch-action: none;\n\n &:active {\n cursor: grabbing;\n }\n }\n\n &-title {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &-count {\n flex-shrink: 0;\n font-size: var(--default-font-size);\n font-weight: var(--default-font-weight);\n color: var(--text-dark);\n\n &-over {\n color: var(--warn-color);\n font-weight: var(--header-font-weight);\n }\n }\n\n &-trailing {\n display: flex;\n align-items: center;\n gap: var(--spacing-s);\n flex-shrink: 0;\n }\n\n &-actions {\n display: flex;\n align-items: center;\n gap: var(--spacing-s);\n }\n }\n\n &-items {\n padding: var(--spacing-m);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-m);\n min-height: 80px;\n flex: 1;\n }\n\n &-placeholder {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: var(--text-dark);\n font-size: var(--default-font-size);\n }\n\n &-loading-indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--spacing-s) 0;\n }\n
|
|
1
|
+
{"version":3,"file":"kanbanBoard.module.mjs","names":[],"sources":["../../../../package/common/kanbanBoard/kanbanBoard.module.pcss"],"sourcesContent":[".board {\n display: flex;\n gap: var(--spacing-s);\n overflow-x: auto;\n align-items: flex-start;\n width: 100%;\n}\n\n.column {\n background: var(--background-accent-light);\n border-radius: var(--default-border-radius);\n box-shadow: var(--card-shadow);\n flex: 1 1 0;\n display: flex;\n flex-direction: column;\n border: 2px solid transparent;\n transition:\n border-color 0.15s ease,\n background 0.15s ease;\n\n &-empty {\n flex: 0 1 0;\n min-width: var(--kanban-empty-column-width, 140px);\n }\n\n &-over {\n border-color: var(--primary-lighter);\n background: var(--background-accent);\n }\n\n &-over-limit {\n border-color: var(--warn-color);\n }\n\n /* A whole column being dragged over this one, reordering — distinct from -over (a card being\n dropped into this column's card list), even though both are dashed-free solid borders here;\n kept as a separate class so consumers can restyle one without affecting the other. */\n &-drop-target {\n border-color: var(--primary-color);\n background: var(--background-accent);\n }\n\n /* Dims only the cards area, not the header — header actions (e.g. an \"add card\" button) are\n consumer-controlled and often meant to stay fully interactive even while the column itself\n is frozen for dragging, and opacity on an ancestor can't be undone by a child's own opacity. */\n &-disabled &-items {\n opacity: 0.6;\n }\n\n &-dragging {\n opacity: 0.4;\n }\n\n &-drag-overlay {\n cursor: grabbing;\n box-shadow:\n 0 10px 30px rgb(0 0 0 / 25%),\n var(--card-shadow);\n min-width: 220px;\n }\n\n &-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--spacing-s);\n padding: var(--spacing-m) var(--spacing-l);\n background: var(--background-accent);\n border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;\n font-size: var(--header-small-font-size);\n font-weight: var(--header-font-weight);\n color: var(--text-color);\n border-bottom: 1px solid var(--border-color);\n\n &-reorderable {\n cursor: grab;\n -webkit-tap-highlight-color: transparent;\n touch-action: none;\n\n &:active {\n cursor: grabbing;\n }\n }\n\n &-title {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &-count {\n flex-shrink: 0;\n font-size: var(--default-font-size);\n font-weight: var(--default-font-weight);\n color: var(--text-dark);\n\n &-over {\n color: var(--warn-color);\n font-weight: var(--header-font-weight);\n }\n }\n\n &-trailing {\n display: flex;\n align-items: center;\n gap: var(--spacing-s);\n flex-shrink: 0;\n }\n\n &-actions {\n display: flex;\n align-items: center;\n gap: var(--spacing-s);\n }\n }\n\n &-items {\n padding: var(--spacing-m);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-m);\n min-height: 80px;\n flex: 1;\n }\n\n &-placeholder {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: var(--text-dark);\n font-size: var(--default-font-size);\n }\n\n &-loading-indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--spacing-s) 0;\n }\n}\n\n.item {\n cursor: grab;\n touch-action: none;\n\n &:active {\n cursor: grabbing;\n }\n\n &-dragging {\n opacity: 0.4;\n }\n\n &-handled {\n cursor: default;\n touch-action: auto;\n\n &:active {\n cursor: default;\n }\n\n [data-drag-handle] {\n cursor: grab;\n -webkit-tap-highlight-color: transparent;\n touch-action: none;\n }\n\n [data-drag-handle]:active {\n cursor: grabbing;\n }\n }\n\n &-disabled {\n cursor: not-allowed;\n\n &:active {\n cursor: not-allowed;\n }\n\n [data-drag-handle] {\n cursor: not-allowed;\n }\n\n [data-drag-handle]:active {\n cursor: not-allowed;\n }\n }\n}\n\n.dragOverlay {\n border-radius: var(--default-border-radius);\n cursor: grabbing;\n box-shadow:\n 0 10px 30px rgb(0 0 0 / 25%),\n var(--card-shadow);\n}\n"],"mappings":""}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{ThemeColor as n}from"../themeProvider/color.types.mjs";import{isDev as r}from"../utils/isDev.mjs";import{toneProps as i,useToneCheck as a}from"../styles/tone.mjs";import{LoaderType as o}from"./loader.types.mjs";import s from"./loader.module.mjs";import{useEffect as c}from"react";import l from"classnames";import{jsx as u,jsxs as d}from"react/jsx-runtime";var f={loading:`Loading`};function p(e,t){return Array.from({length:e},(e,n)=>u(`span`,{className:t},n))}function m(){return d(`svg`,{className:s.loaderSpinner,viewBox:`0 0 50 50`,children:[u(`circle`,{className:s.loaderSpinnerTrack,cx:`25`,cy:`25`,r:`20`}),u(`circle`,{className:s.loaderSpinnerArc,cx:`25`,cy:`25`,r:`20`})]})}var h=new Map(Object.entries({[o.Spinner]:m,[o.Comet]:()=>d(`span`,{className:s.loaderComet,children:[u(`span`,{className:s.loaderCometTail}),u(`span`,{className:s.loaderCometHead})]}),[o.Dots]:()=>u(`span`,{className:s.loaderDots,children:p(3,s.loaderDot)}),[o.Bars]:()=>u(`span`,{className:s.loaderBars,children:p(5,s.loaderBar)}),[o.Pulse]:()=>d(`span`,{className:s.loaderPulse,children:[p(2,s.loaderPulseRing),u(`span`,{className:s.loaderPulseCore})]})}));function g(e){c(()=>{r()&&!h.has(e)&&console.warn(`Loader: \`type\` takes a LoaderType, and got '${e}'. Drawing the spinner instead.`)},[e])}function _(r){let{type:c=o.Spinner,size:d=`2.5em`,color:p=n.Primary,labels:_,className:v,style:y,...b}=e(`Loader`,r),x=t(`Loader`,_,f),S=i(p);a(`Loader`,[p]),g(c);let C=h.get(c)??m;return u(`span`,{...b,role:`progressbar`,"aria-label":x.loading,className:l(s.loader,c===o.Dots&&s.loaderOnBaseline,S.className,v),style:{"--loader-size":typeof d==`number`?`${d}px`:d,...S.style,...y},children:C()})}export{_ as default};
|
|
2
|
+
//# sourceMappingURL=loader.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"loader.mjs","names":[],"sources":["../../../../package/common/loader/loader.tsx"],"sourcesContent":["import { useEffect, type CSSProperties, type ReactElement, type ReactNode } from 'react';\nimport cx from 'classnames';\n\nimport { LoaderType } from './loader.types';\nimport type { LoaderLabels, LoaderProps } from './loader.types';\nimport styles from './loader.module.pcss';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { ThemeColor } from '../themeProvider/color.types';\nimport { toneProps, useToneCheck } from '../styles/tone';\nimport { isDev } from '../utils/isDev';\n\nconst DEFAULT_LABELS: Required<LoaderLabels> = {\n loading: 'Loading',\n};\n\nfunction parts(count: number, className: string): ReactNode {\n return Array.from({ length: count }, (_, index) => <span key={index} className={className} />);\n}\n\nfunction spinner(): ReactNode {\n return (\n <svg className={styles.loaderSpinner} viewBox='0 0 50 50'>\n <circle className={styles.loaderSpinnerTrack} cx='25' cy='25' r='20' />\n <circle className={styles.loaderSpinnerArc} cx='25' cy='25' r='20' />\n </svg>\n );\n}\n\n// A Map, so a type from untyped code or a JSON config can never hit an Object.prototype key.\nconst FIGURE_BY_TYPE = new Map<string, () => ReactNode>(\n Object.entries({\n [LoaderType.Spinner]: spinner,\n [LoaderType.Comet]: () => (\n <span className={styles.loaderComet}>\n <span className={styles.loaderCometTail} />\n <span className={styles.loaderCometHead} />\n </span>\n ),\n [LoaderType.Dots]: () => <span className={styles.loaderDots}>{parts(3, styles.loaderDot)}</span>,\n [LoaderType.Bars]: () => <span className={styles.loaderBars}>{parts(5, styles.loaderBar)}</span>,\n [LoaderType.Pulse]: () => (\n <span className={styles.loaderPulse}>\n {parts(2, styles.loaderPulseRing)}\n <span className={styles.loaderPulseCore} />\n </span>\n ),\n } satisfies Record<LoaderType, () => ReactNode>),\n);\n\nfunction useTypeCheck(type: string): void {\n useEffect(() => {\n if (isDev() && !FIGURE_BY_TYPE.has(type)) {\n console.warn(`Loader: \\`type\\` takes a LoaderType, and got '${type}'. Drawing the spinner instead.`);\n }\n }, [type]);\n}\n\nfunction Loader(props: LoaderProps): ReactElement {\n const {\n type = LoaderType.Spinner,\n size = '2.5em',\n color = ThemeColor.Primary,\n labels,\n className,\n style,\n ...rest\n } = useComponentDefaults('Loader', props);\n const text = useLabels('Loader', labels, DEFAULT_LABELS);\n const tone = toneProps(color);\n useToneCheck('Loader', [color]);\n useTypeCheck(type);\n const figure = FIGURE_BY_TYPE.get(type) ?? spinner;\n\n return (\n <span\n {...rest}\n role='progressbar'\n aria-label={text.loading}\n className={cx(styles.loader, type === LoaderType.Dots && styles.loaderOnBaseline, tone.className, className)}\n style={\n { '--loader-size': typeof size === 'number' ? `${size}px` : size, ...tone.style, ...style } as CSSProperties\n }\n >\n {figure()}\n </span>\n );\n}\n\nexport default Loader;\n"],"mappings":"sgBAWA,IAAM,EAAyC,CAC7C,QAAS,SACX,EAEA,SAAS,EAAM,EAAe,EAA8B,CAC1D,OAAO,MAAM,KAAK,CAAE,OAAQ,CAAM,GAAI,EAAG,IAAU,EAAC,OAAD,CAA6B,WAAY,EAA9B,CAA8B,CAAC,CAC/F,CAEA,SAAS,GAAqB,CAC5B,OACE,EAAC,MAAD,CAAK,UAAW,EAAO,cAAe,QAAQ,YAA9C,SAAA,CACE,EAAC,SAAD,CAAQ,UAAW,EAAO,mBAAoB,GAAG,KAAK,GAAG,KAAK,EAAE,IAAM,CAAA,EACtE,EAAC,SAAD,CAAQ,UAAW,EAAO,iBAAkB,GAAG,KAAK,GAAG,KAAK,EAAE,IAAM,CAAA,CACjE,GAET,CAGA,IAAM,EAAiB,IAAI,IACzB,OAAO,QAAQ,EACZ,EAAW,SAAU,GACrB,EAAW,WACV,EAAC,OAAD,CAAM,UAAW,EAAO,YAAxB,SAAA,CACE,EAAC,OAAD,CAAM,UAAW,EAAO,eAAkB,CAAA,EAC1C,EAAC,OAAD,CAAM,UAAW,EAAO,eAAkB,CAAA,CACtC,KAEP,EAAW,UAAa,EAAC,OAAD,CAAM,UAAW,EAAO,WAAa,SAAA,EAAM,EAAG,EAAO,SAAS,CAAQ,CAAA,GAC9F,EAAW,UAAa,EAAC,OAAD,CAAM,UAAW,EAAO,WAAa,SAAA,EAAM,EAAG,EAAO,SAAS,CAAQ,CAAA,GAC9F,EAAW,WACV,EAAC,OAAD,CAAM,UAAW,EAAO,YAAxB,SAAA,CACG,EAAM,EAAG,EAAO,eAAe,EAChC,EAAC,OAAD,CAAM,UAAW,EAAO,eAAkB,CAAA,CACtC,GAEV,CAA+C,CACjD,EAEA,SAAS,EAAa,EAAoB,CACxC,MAAgB,CACV,EAAM,GAAK,CAAC,EAAe,IAAI,CAAI,GACrC,QAAQ,KAAK,iDAAiD,EAAK,gCAAgC,CAEvG,EAAG,CAAC,CAAI,CAAC,CACX,CAEA,SAAS,EAAO,EAAkC,CAChD,GAAM,CACJ,OAAO,EAAW,QAClB,OAAO,QACP,QAAQ,EAAW,QACnB,SACA,YACA,QACA,GAAG,GACD,EAAqB,SAAU,CAAK,EAClC,EAAO,EAAU,SAAU,EAAQ,CAAc,EACjD,EAAO,EAAU,CAAK,EAC5B,EAAa,SAAU,CAAC,CAAK,CAAC,EAC9B,EAAa,CAAI,EACjB,IAAM,EAAS,EAAe,IAAI,CAAI,GAAK,EAE3C,OACE,EAAC,OAAD,CACE,GAAI,EACJ,KAAK,cACL,aAAY,EAAK,QACjB,UAAW,EAAG,EAAO,OAAQ,IAAS,EAAW,MAAQ,EAAO,iBAAkB,EAAK,UAAW,CAAS,EAC3G,MACE,CAAE,gBAAiB,OAAO,GAAS,SAAW,GAAG,EAAK,IAAM,EAAM,GAAG,EAAK,MAAO,GAAG,CAAM,EAG3F,SAAA,EAAO,CACJ,CAAA,CAEV"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";var e=`loader_j2flI`,t=`loader-spinner_ETlwc`,n=`loaderSpin_PxvO0`,r=`loader-spinner-track_adz-9`,i=`loader-spinner-arc_B9hZJ`,a=`loaderArc_hCMIp`,o=`loader-comet_nOudn`,s=`loader-comet-tail_AgQx-`,c=`loader-comet-head_NdxN0`,l=`loader-on-baseline_8D2Pe`,u=`loader-dots_3-NYA`,d=`loader-dot_p-Mrg`,f=`loaderBounce_ul54t`,p=`loader-bars_izjWD`,m=`loader-bar_qjHXr`,h=`loaderEqualise_AWr5s`,g=`loader-pulse_iyis0`,_=`loader-pulse-ring_jSVdL`,v=`loaderRipple_4qMsB`,y=`loader-pulse-core_-SARu`,b=`loaderBreathe_yB4OL`,x={loader:e,"loader-spinner":`loader-spinner_ETlwc`,loaderSpinner:t,loaderSpin:n,"loader-spinner-track":`loader-spinner-track_adz-9`,loaderSpinnerTrack:r,"loader-spinner-arc":`loader-spinner-arc_B9hZJ`,loaderSpinnerArc:i,loaderArc:a,"loader-comet":`loader-comet_nOudn`,loaderComet:o,"loader-comet-tail":`loader-comet-tail_AgQx-`,loaderCometTail:s,"loader-comet-head":`loader-comet-head_NdxN0`,loaderCometHead:c,"loader-on-baseline":`loader-on-baseline_8D2Pe`,loaderOnBaseline:l,"loader-dots":`loader-dots_3-NYA`,loaderDots:u,"loader-dot":`loader-dot_p-Mrg`,loaderDot:d,loaderBounce:f,"loader-bars":`loader-bars_izjWD`,loaderBars:p,"loader-bar":`loader-bar_qjHXr`,loaderBar:m,loaderEqualise:h,"loader-pulse":`loader-pulse_iyis0`,loaderPulse:g,"loader-pulse-ring":`loader-pulse-ring_jSVdL`,loaderPulseRing:_,loaderRipple:v,"loader-pulse-core":`loader-pulse-core_-SARu`,loaderPulseCore:y,loaderBreathe:b};export{x as default,e as loader,a as loaderArc,m as loaderBar,p as loaderBars,f as loaderBounce,b as loaderBreathe,o as loaderComet,c as loaderCometHead,s as loaderCometTail,d as loaderDot,u as loaderDots,h as loaderEqualise,l as loaderOnBaseline,g as loaderPulse,y as loaderPulseCore,_ as loaderPulseRing,v as loaderRipple,n as loaderSpin,t as loaderSpinner,i as loaderSpinnerArc,r as loaderSpinnerTrack};
|
|
2
|
+
//# sourceMappingURL=loader.module.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"loader.module.mjs","names":[],"sources":["../../../../package/common/loader/loader.module.pcss"],"sourcesContent":["/* No prefers-reduced-motion block: a loader that stands still says the app has hung. */\n.loader {\n display: inline-block;\n position: relative;\n flex-shrink: 0;\n width: var(--loader-size);\n height: var(--loader-size);\n vertical-align: middle;\n\n &-spinner {\n display: block;\n width: 100%;\n height: 100%;\n overflow: visible;\n animation: loaderSpin 1.4s linear infinite;\n\n &-track,\n &-arc {\n fill: none;\n stroke-width: 4.5;\n }\n\n &-track {\n stroke: var(--tone-light);\n }\n\n &-arc {\n stroke: var(--tone);\n stroke-linecap: round;\n stroke-dasharray: 1 150;\n animation: loaderArc 1.4s ease-in-out infinite;\n }\n }\n\n &-comet {\n position: absolute;\n\n /* The spinner's ring reaches 89% of the box; this keeps the two the same size. */\n inset: 5%;\n animation: loaderSpin 0.9s linear infinite;\n\n &-tail {\n position: absolute;\n inset: 0;\n border-radius: 50%;\n\n /* Brightest just behind the head at 0deg, which covers the seam where it starts again. */\n background: conic-gradient(transparent 25%, var(--tone));\n\n /* The hole sits off centre towards the bottom right, so the ring is 12% thick at the head\n and thins to under 5% along the tail. */\n -webkit-mask-image: radial-gradient(41% 41% at 53% 53%, transparent calc(100% - 0.5px), #000 100%);\n mask-image: radial-gradient(41% 41% at 53% 53%, transparent calc(100% - 0.5px), #000 100%);\n }\n\n &-head {\n position: absolute;\n top: 0;\n left: 44%;\n width: 12%;\n height: 12%;\n border-radius: 50%;\n background: var(--tone);\n\n /* A gradient rather than a box-shadow, whose blur cannot be a percentage of the size. */\n &::before {\n content: '';\n position: absolute;\n inset: -100%;\n border-radius: 50%;\n background: radial-gradient(closest-side, color-mix(in srgb, var(--tone) 60%, transparent), transparent);\n }\n }\n }\n\n /* In text, Dots rest on the baseline like an ellipsis: 0.32 is the resting dot's bottom edge in\n loaderBounce's 0% frame. Must follow .loader's own vertical-align, as both are one class. */\n &-on-baseline {\n vertical-align: calc(var(--loader-size) * -0.32);\n }\n\n &-dots {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n &-dot {\n width: 24%;\n aspect-ratio: 1;\n border-radius: 50%;\n background: var(--tone);\n animation: loaderBounce 1.2s ease-in-out infinite;\n\n /* Negative delays, so every dot is already in flight on the first frame. */\n &:nth-child(1) {\n animation-delay: -0.3s;\n }\n\n &:nth-child(2) {\n animation-delay: -0.15s;\n }\n }\n\n &-bars {\n position: absolute;\n inset: 8% 4%;\n display: flex;\n justify-content: space-between;\n }\n\n /* A clip-path rather than height, which would lay the bars out again every frame, or scaleY,\n which would squash the rounded ends flat. */\n &-bar {\n width: 12%;\n background: var(--tone);\n animation: loaderEqualise 1s ease-in-out infinite;\n\n &:nth-child(1) {\n animation-delay: -0.6s;\n }\n\n &:nth-child(2) {\n animation-delay: -0.45s;\n }\n\n &:nth-child(3) {\n animation-delay: -0.3s;\n }\n\n &:nth-child(4) {\n animation-delay: -0.15s;\n }\n }\n\n &-pulse {\n position: absolute;\n inset: 0;\n\n &-ring {\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background: var(--tone);\n opacity: 0;\n animation: loaderRipple 1.8s cubic-bezier(0.25, 0.6, 0.4, 1) infinite;\n\n &:nth-child(2) {\n animation-delay: -0.9s;\n }\n }\n\n &-core {\n position: absolute;\n inset: 34%;\n border-radius: 50%;\n background: var(--tone);\n animation: loaderBreathe 1.8s ease-in-out infinite;\n }\n }\n}\n\n/* No keyframe may share a name with a class's camelCase key (loaderDot for .loader-dot): CSS\n Modules exports both under that key, and the class gets the keyframe's name. */\n@keyframes loaderSpin {\n to {\n transform: rotate(360deg);\n }\n}\n\n/* r=20, so the circumference is 125.7: the arc grows to 90 and slides off the end. */\n@keyframes loaderArc {\n 0% {\n stroke-dasharray: 1 150;\n stroke-dashoffset: 0;\n }\n\n 50% {\n stroke-dasharray: 90 150;\n stroke-dashoffset: -35;\n }\n\n 100% {\n stroke-dasharray: 90 150;\n stroke-dashoffset: -124;\n }\n}\n\n/* Resting dots stay plainly visible: faded, only the raised ones showed, and the dots read as\n floating mid-line rather than on the baseline. */\n@keyframes loaderBounce {\n 0%,\n 30%,\n 100% {\n transform: translateY(25%);\n opacity: 0.55;\n }\n\n 15% {\n transform: translateY(-35%);\n opacity: 1;\n }\n}\n\n@keyframes loaderEqualise {\n 0%,\n 100% {\n clip-path: inset(35% 0 round 999px);\n opacity: 0.45;\n }\n\n 50% {\n clip-path: inset(0 0 round 999px);\n opacity: 1;\n }\n}\n\n@keyframes loaderRipple {\n from {\n transform: scale(0.3);\n opacity: 0.7;\n }\n\n to {\n transform: scale(1);\n opacity: 0;\n }\n}\n\n@keyframes loaderBreathe {\n 0%,\n 100% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.8);\n }\n}\n"],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"loader.types.mjs","names":[],"sources":["../../../../package/common/loader/loader.types.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport type { HtmlProps } from '../types/slots.types';\nimport type { ColorValue } from '../themeProvider/color.types';\n\nexport enum LoaderType {\n /** An arc that grows and shrinks on a faint track. The default, and the one that reads at any size. */\n Spinner = 'spinner',\n /** A glowing head trailing a fading tail round a ring. For a hero spot: a page, a panel, an overlay. */\n Comet = 'comet',\n /** Three dots in a wave. For a line of text or a chat reply being written. */\n Dots = 'dots',\n /** Bars rising and falling like an equaliser. For media, uploads and data being processed. */\n Bars = 'bars',\n /** Rings rippling out from a core. For waiting on something outside the app: a device, a connection, a search. */\n Pulse = 'pulse',\n}\n\nexport interface LoaderLabels {\n /** The loader's accessible name. */\n loading?: string;\n}\n\nexport interface LoaderProps extends HtmlProps<HTMLSpanElement> {\n /** The animation. Defaults to `LoaderType.Spinner`. */\n type?: LoaderType;\n /** Width and height: any CSS length, or a number of pixels. Defaults to `'2.5em'`, so it follows the font size around it. */\n size?: number | string;\n /** A `ThemeColor` or any CSS colour. Defaults to `ThemeColor.Primary`; `ThemeColor.Neutral` takes the colour of the text around it. */\n color?: ColorValue;\n /** Text the loader produces itself. See `LoaderLabels`. */\n labels?: LoaderLabels;\n className?: string;\n style?: CSSProperties;\n}\n"],"mappings":"aAIA,IAAY,EAAL,SAAA,EAAA,OAEL,GAAA,QAAA,UAEA,EAAA,MAAA,QAEA,EAAA,KAAA,OAEA,EAAA,KAAA,OAEA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../loader/loader.mjs";import n from"./loadingOverlay.module.mjs";import{useEffect as r,useId as i,useRef as a,useState as o}from"react";import s from"classnames";import{jsx as c,jsxs as l}from"react/jsx-runtime";var u=400,d=200;function f(e,t){let[n,i]=o(()=>e&&t<=0?`shown`:`hidden`),s=a(null);return r(()=>{let r,a;if(e){if(n===`shown`){s.current??=Date.now();return}r=`shown`,a=n===`leaving`?0:t}else if(n===`shown`)r=`leaving`,a=Math.max(0,(s.current??0)+u-Date.now());else if(n===`leaving`)r=`hidden`,a=d;else return;let o=setTimeout(()=>{r===`shown`&&(s.current=Date.now()),i(r)},a);return()=>clearTimeout(o)},[e,n,t]),n}function p(r){let{isLoading:a=!1,children:o,loader:u,message:d,delay:p=200,className:m,style:h,classNames:g,styles:_,...v}=e(`LoadingOverlay`,r),y=f(a,p),b=i(),x=d!=null&&typeof d!=`boolean`&&d!==``;return l(`div`,{...v,className:s(n.loadingOverlay,m),style:h,children:[c(`div`,{"aria-busy":a||void 0,className:s(n.loadingOverlayContent,g?.content),style:_?.content,children:o}),y!==`hidden`&&c(`div`,{className:s(n.loadingOverlayBackdrop,y===`leaving`&&n.loadingOverlayBackdropLeaving,g?.backdrop),style:_?.backdrop,children:l(`div`,{className:s(n.loadingOverlayPanel,g?.panel),style:_?.panel,children:[u??c(t,{"aria-labelledby":x?b:void 0}),x&&c(`div`,{id:b,className:s(n.loadingOverlayMessage,g?.message),style:_?.message,children:d})]})})]})}export{p as default};
|
|
2
|
+
//# sourceMappingURL=loadingOverlay.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"loadingOverlay.mjs","names":[],"sources":["../../../../package/common/loadingOverlay/loadingOverlay.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport type { LoadingOverlayProps } from './loadingOverlay.types';\nimport styles from './loadingOverlay.module.pcss';\nimport Loader from '../loader';\nimport { useComponentDefaults } from '../configProvider';\n\nconst MIN_VISIBLE_MS = 400;\n/** The backdrop's opacity transition in loadingOverlay.module.pcss. */\nconst FADE_OUT_MS = 200;\n\ntype Phase = 'hidden' | 'shown' | 'leaving';\n\n/** Holds MIN_VISIBLE_MS once shown: a load ending just after the overlay appeared would flash it. */\nfunction usePhase(isLoading: boolean, delay: number): Phase {\n const [phase, setPhase] = useState<Phase>(() => (isLoading && delay <= 0 ? 'shown' : 'hidden'));\n const shownAt = useRef<number | null>(null);\n\n useEffect(() => {\n let next: Phase;\n let wait: number;\n if (isLoading) {\n if (phase === 'shown') {\n // Shown on the first render, so no timer stamped it.\n shownAt.current ??= Date.now();\n return;\n }\n next = 'shown';\n // Still on screen while it fades, so it comes straight back rather than waiting again.\n wait = phase === 'leaving' ? 0 : delay;\n } else if (phase === 'shown') {\n next = 'leaving';\n wait = Math.max(0, (shownAt.current ?? 0) + MIN_VISIBLE_MS - Date.now());\n } else if (phase === 'leaving') {\n next = 'hidden';\n wait = FADE_OUT_MS;\n } else {\n return;\n }\n const id = setTimeout(() => {\n if (next === 'shown') shownAt.current = Date.now();\n setPhase(next);\n }, wait);\n return () => clearTimeout(id);\n }, [isLoading, phase, delay]);\n\n return phase;\n}\n\nfunction LoadingOverlay(props: LoadingOverlayProps): ReactElement {\n const {\n isLoading = false,\n children,\n loader,\n message,\n delay = 200,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('LoadingOverlay', props);\n const phase = usePhase(isLoading, delay);\n const messageId = useId();\n const hasMessage = message != null && typeof message !== 'boolean' && message !== '';\n\n return (\n <div {...rest} className={cx(styles.loadingOverlay, className)} style={style}>\n <div\n aria-busy={isLoading || undefined}\n className={cx(styles.loadingOverlayContent, classNames?.content)}\n style={slotStyles?.content}\n >\n {children}\n </div>\n {phase !== 'hidden' && (\n <div\n className={cx(\n styles.loadingOverlayBackdrop,\n phase === 'leaving' && styles.loadingOverlayBackdropLeaving,\n classNames?.backdrop,\n )}\n style={slotStyles?.backdrop}\n >\n <div className={cx(styles.loadingOverlayPanel, classNames?.panel)} style={slotStyles?.panel}>\n {loader ?? <Loader aria-labelledby={hasMessage ? messageId : undefined} />}\n {hasMessage && (\n <div\n id={messageId}\n className={cx(styles.loadingOverlayMessage, classNames?.message)}\n style={slotStyles?.message}\n >\n {message}\n </div>\n )}\n </div>\n </div>\n )}\n </div>\n );\n}\n\nexport default LoadingOverlay;\n"],"mappings":"iUAQA,IAAM,EAAiB,IAEjB,EAAc,IAKpB,SAAS,EAAS,EAAoB,EAAsB,CAC1D,GAAM,CAAC,EAAO,GAAY,MAAuB,GAAa,GAAS,EAAI,QAAU,QAAS,EACxF,EAAU,EAAsB,IAAI,EA8B1C,OA5BA,MAAgB,CACd,IAAI,EACA,EACJ,GAAI,EAAW,CACb,GAAI,IAAU,QAAS,CAErB,EAAQ,UAAY,KAAK,IAAI,EAC7B,MACF,CACA,EAAO,QAEP,EAAO,IAAU,UAAY,EAAI,CACnC,MAAO,GAAI,IAAU,QACnB,EAAO,UACP,EAAO,KAAK,IAAI,GAAI,EAAQ,SAAW,GAAK,EAAiB,KAAK,IAAI,CAAC,OAClE,GAAI,IAAU,UACnB,EAAO,SACP,EAAO,OAEP,OAEF,IAAM,EAAK,eAAiB,CACtB,IAAS,UAAS,EAAQ,QAAU,KAAK,IAAI,GACjD,EAAS,CAAI,CACf,EAAG,CAAI,EACP,UAAa,aAAa,CAAE,CAC9B,EAAG,CAAC,EAAW,EAAO,CAAK,CAAC,EAErB,CACT,CAEA,SAAS,EAAe,EAA0C,CAChE,GAAM,CACJ,YAAY,GACZ,WACA,SACA,UACA,QAAQ,IACR,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,iBAAkB,CAAK,EAC1C,EAAQ,EAAS,EAAW,CAAK,EACjC,EAAY,EAAM,EAClB,EAAa,GAAW,MAAQ,OAAO,GAAY,WAAa,IAAY,GAElF,OACE,EAAC,MAAD,CAAK,GAAI,EAAM,UAAW,EAAG,EAAO,eAAgB,CAAS,EAAU,QAAvE,SAAA,CACE,EAAC,MAAD,CACE,YAAW,GAAa,IAAA,GACxB,UAAW,EAAG,EAAO,sBAAuB,GAAY,OAAO,EAC/D,MAAO,GAAY,QAElB,UACE,CAAA,EACJ,IAAU,UACT,EAAC,MAAD,CACE,UAAW,EACT,EAAO,uBACP,IAAU,WAAa,EAAO,8BAC9B,GAAY,QACd,EACA,MAAO,GAAY,SAEnB,SAAA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,oBAAqB,GAAY,KAAK,EAAG,MAAO,GAAY,MAAtF,SAAA,CACG,GAAU,EAAC,EAAD,CAAQ,kBAAiB,EAAa,EAAY,IAAA,EAAY,CAAA,EACxE,GACC,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,sBAAuB,GAAY,OAAO,EAC/D,MAAO,GAAY,QAElB,SAAA,CACE,CAAA,CAEJ,GACF,CAAA,CAEJ,GAET"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";var e=`loadingOverlay_B-hL-`,t=`loadingOverlay-content_vLj-j`,n=`loadingOverlay-backdrop_5cssk`,r=`loadingOverlayFade_r6R92`,i=`loadingOverlay-backdrop-leaving_0OV9m`,a=`loadingOverlay-panel_2dDYB`,o=`loadingOverlayRise_Hsje2`,s=`loadingOverlay-message_JcJjt`,c=`loadingOverlayShimmer_0BbGN`,l={loadingOverlay:e,"loadingOverlay-content":`loadingOverlay-content_vLj-j`,loadingOverlayContent:t,"loadingOverlay-backdrop":`loadingOverlay-backdrop_5cssk`,loadingOverlayBackdrop:n,loadingOverlayFade:r,"loadingOverlay-backdrop-leaving":`loadingOverlay-backdrop-leaving_0OV9m`,loadingOverlayBackdropLeaving:i,"loadingOverlay-panel":`loadingOverlay-panel_2dDYB`,loadingOverlayPanel:a,loadingOverlayRise:o,"loadingOverlay-message":`loadingOverlay-message_JcJjt`,loadingOverlayMessage:s,loadingOverlayShimmer:c};export{l as default,e as loadingOverlay,n as loadingOverlayBackdrop,i as loadingOverlayBackdropLeaving,t as loadingOverlayContent,r as loadingOverlayFade,s as loadingOverlayMessage,a as loadingOverlayPanel,o as loadingOverlayRise,c as loadingOverlayShimmer};
|
|
2
|
+
//# sourceMappingURL=loadingOverlay.module.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"loadingOverlay.module.mjs","names":[],"sources":["../../../../package/common/loadingOverlay/loadingOverlay.module.pcss"],"sourcesContent":[".loadingOverlay {\n position: relative;\n\n &-content {\n /* Its own stacking context, so nothing inside with a z-index (a sticky header) paints over the backdrop. */\n isolation: isolate;\n height: 100%;\n }\n\n &-backdrop {\n position: absolute;\n inset: 0;\n display: grid;\n place-items: center;\n padding: var(--spacing-m, 12px);\n border-radius: inherit;\n background: var(--loading-overlay-background, color-mix(in srgb, var(--background) 50%, transparent));\n -webkit-backdrop-filter: blur(var(--loading-overlay-blur, 4px));\n backdrop-filter: blur(var(--loading-overlay-blur, 4px));\n cursor: progress;\n animation: loadingOverlayFade 0.2s ease-out;\n\n /* A transition rather than keyframes, so loading again mid-fade turns it back from where it is\n instead of restarting from 0. 0.2s is FADE_OUT_MS in loadingOverlay.tsx, which unmounts it. */\n transition: opacity 0.2s ease-in;\n\n &-leaving {\n opacity: 0;\n }\n }\n\n &-panel {\n /* Sticky, so on content taller than the screen it stays in view rather than at the middle. */\n position: sticky;\n top: var(--spacing-l, 24px);\n bottom: var(--spacing-l, 24px);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.75em;\n animation: loadingOverlayRise 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;\n }\n\n &-message {\n max-width: 32ch;\n font-size: var(--default-font-size);\n font-weight: 500;\n text-align: center;\n color: transparent;\n background: linear-gradient(100deg, var(--text-dark) 40%, var(--text-color) 50%, var(--text-dark) 60%) 0 0 / 300%\n 100%;\n -webkit-background-clip: text;\n background-clip: text;\n animation: loadingOverlayShimmer 2.4s linear infinite;\n }\n}\n\n@keyframes loadingOverlayFade {\n from {\n opacity: 0;\n }\n}\n\n@keyframes loadingOverlayRise {\n from {\n opacity: 0;\n transform: translateY(8px) scale(0.94);\n }\n}\n\n@keyframes loadingOverlayShimmer {\n from {\n background-position: 100% 0;\n }\n\n to {\n background-position: 0 0;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .loadingOverlay-panel {\n animation-name: loadingOverlayFade;\n }\n\n .loadingOverlay-message {\n color: var(--text-color);\n background: none;\n animation: none;\n }\n}\n"],"mappings":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{useLabels as e}from"../configProvider/useLabels.mjs";import t from"../
|
|
1
|
+
"use client";import{useLabels as e}from"../configProvider/useLabels.mjs";import t from"../loader/loader.mjs";import n from"../checkbox/checkbox.mjs";import r from"./virtualList.module.mjs";import"./virtualList.utils.mjs";import ee from"./virtualRow.mjs";import i from"./virtualListHeader.mjs";import{useVirtualWindow as a}from"./useVirtualWindow.mjs";import{useSelection as o}from"./useSelection.mjs";import{useColumns as te}from"./useColumns.mjs";import{useRowDrag as ne}from"./useRowDrag.mjs";import{useSorting as re}from"./useSorting.mjs";import{useColumnResize as ie}from"./useColumnResize.mjs";import{useRowNavigation as ae}from"./useRowNavigation.mjs";import{useCallback as oe,useEffect as se,useId as ce,useImperativeHandle as le,useMemo as s,useRef as c}from"react";import l from"classnames";import{Fragment as ue,jsx as u,jsxs as d}from"react/jsx-runtime";var de={selectRow:`Select row`,selectAllRows:`Select all rows`,toggleColumns:`Toggle column visibility`,columnsHidden:e=>`${e} columns hidden`,resetColumnWidths:`Reset column widths`};function f(e,t){return!e||!t?e??t:n=>{e(n),t(n)}}function p(p){let{ref:fe,items:pe,renderRow:me,ariaRoles:m,columns:h,height:he=`100%`,estimatedRowHeight:ge=40,overscan:_e=3,rowGap:ve=0,rowPadding:g,selectedKey:_,getItemKey:v,onRowClick:y,keyboardNavigation:b=!0,tabAcrossRows:ye=!1,scrollParent:be,visibleColumnKeys:xe,onVisibleColumnsChange:Se,persistColumnsKey:x,resizableColumns:Ce=!1,columnWidths:we,onColumnWidthsChange:Te,labels:Ee,sort:De,defaultSort:Oe,onSortChange:ke,showColumnToggle:Ae,onLoadMore:je,loadMoreThreshold:Me=100,isLoading:S=!1,multiSelect:C=!1,selectedKeys:Ne,onSelectionChange:Pe,reorderable:w=!1,onReorder:Fe,longPressDelay:Ie=400,treeReorder:T=!1,getItemDepth:E,isGroup:D,onTreeDrop:Le,treeIndentPx:Re=24,dragHandle:ze=!1,showDivider:Be=!0,rowHover:Ve=!0,className:He,style:Ue,classNames:O,styles:k,...A}=p,j=p.scrollParent!=null&&p.height!==void 0,M=c(!1);se(()=>{j&&!M.current&&(M.current=!0,console.warn("VirtualList: `height` is ignored alongside `scrollParent`, which leaves the list no viewport to size."))},[j]);let N=e(`VirtualList`,Ee,de),{rows:P,effectiveSort:We,isSorted:F,handleHeaderSort:Ge}=re({items:pe,columns:h,sort:De,defaultSort:Oe,onSortChange:ke}),I=oe((e,t)=>v?v(e,t):t,[v]),L=s(()=>P.map((e,t)=>I(e,t)),[P,I]),Ke=s(()=>E?P.map((e,t)=>E(e,t)):[],[P,E]),qe=oe(e=>D?D(P[e],e):!1,[D,P]),R=a({items:P,keys:L,getItemKey:v,estimatedRowHeight:ge,rowGap:ve,overscan:_e,onLoadMore:je,loadMoreThreshold:Me,isLoading:S,scrollParent:be}),{rootRef:z,headerRef:B,rowObserver:Je,keysRef:Ye,offsets:V,totalHeight:Xe,startIndex:H,endIndex:U}=R,W=c([]),G=ie({columns:h,visibleColumnsRef:W,resizableColumns:Ce,columnWidths:we,onColumnWidthsChange:Te,persistColumnsKey:x,rootRef:z}),K=o({items:P,getKey:I,multiSelect:C,selectedKeys:Ne,onSelectionChange:Pe}),{effectiveSelectedKeys:q}=K,Ze=te({columns:h,items:P,multiSelect:C,visibleColumnKeys:xe,onVisibleColumnsChange:Se,persistColumnsKey:x,showColumnToggle:Ae,userWidths:G.widths,isFrozen:G.isFrozen,rootRef:z,startIndex:H,endIndex:U,containerHeight:R.containerHeight,containerWidth:R.containerWidth,isLoading:S}),{hasColumns:J,visibleColumns:Qe,columnTemplate:$e,widthVars:et,shouldShowToggle:tt,recalculateColumns:nt}=Ze;W.current=Qe,le(fe,()=>({...R.scrollApi,recalculateColumns:nt,resetColumnWidths:G.reset}),[R.scrollApi,nt,G.reset]);let rt=F&&(w||T),it=c(!1);se(()=>{rt&&!it.current&&(it.current=!0,console.warn(`VirtualList: row reordering is disabled while the list is sorted. Clear the sort to drag rows.`))},[rt]);let Y=ne({reorderable:w&&!F,treeReorder:T&&!F,onReorder:Fe,onTreeDrop:Le,longPressDelay:Ie,dragHandle:ze,treeIndentPx:Re,keys:L,depths:Ke,isGroupAt:qe,rootRef:z,keysRef:Ye,getVisibleRect:R.getVisibleRect,scrollBy:R.scrollBy}),at=ce(),ot=e=>`${at}-row-${e}`,X=ae({enabled:b,tabAcrossRows:ye,rowCount:P.length,offsets:V,rootRef:z,headerRef:B,getVisibleSlice:R.getVisibleSlice,viewportHeight:R.viewportHeight,scrollToIndex:R.scrollApi.scrollToIndex,initialIndex:_==null?0:Math.max(0,L.indexOf(_)),multiSelect:C,onActivate:y&&(e=>y(P[e],e)),onToggleSelect:e=>K.handleRowSelect(L[e])}),st=typeof g==`number`?`${g}px`:g,Z=e=>{let t=P[e],i=I(t,e),a=_!=null&&i===_||q.has(i),o=Y.getRowDragProps(e,i);return u(ee,{id:ot(e),index:e,top:V[e],padding:st,columnTemplate:$e,isSelected:a,isActive:e===X.activeIndex,manageTabStops:b,isEntered:e===X.enteredIndex,activeClassName:O?.activeRow,activeStyle:k?.activeRow,showDivider:Be,hover:Ve,onClick:()=>{Y.consumeSuppressedClick()||(X.setActiveIndex(e),y?.(t,e))},observer:Je,ariaRowIndex:J?e+2:void 0,ariaPosInSet:J?void 0:e+1,ariaSetSize:J?void 0:P.length,rowRole:m?.row??(J?`row`:`listitem`),reserveToggleGutter:tt,...o,dropIndicatorClassName:O?.dropIndicator,dropIndicatorStyle:k?.dropIndicator,rowClassName:O?.row,rowStyle:k?.row,children:J?d(ue,{children:[C&&u(`div`,{className:l(r.virtualListSelectCell,O?.selectCell),style:k?.selectCell,role:`gridcell`,onClick:e=>e.stopPropagation(),children:u(n,{selected:q.has(i),onToggle:()=>K.handleRowSelect(i),"aria-label":N.selectRow,tabIndex:-1})}),Qe.map(n=>u(`div`,{className:l(r.virtualListCell,O?.cell),style:k?.cell,role:`gridcell`,"data-col-key":n.key,"data-fit-key":n.width.type===`fit`?n.key:void 0,children:n.renderCell(t,e)},n.key))]}):me?.(t,e)},i)},Q=[];for(let e=H;e<=U;e++)Q.push(Z(e));let $=Y.draggingKey==null?-1:L.indexOf(Y.draggingKey);$>=0&&($<H||$>U)&&Q.push(Z($)),X.enteredIndex>=0&&(X.enteredIndex<H||X.enteredIndex>U)&&Q.push(Z(X.enteredIndex));let ct={...X.containerProps,onKeyDown:f(A.onKeyDown,X.containerProps.onKeyDown),onFocus:f(A.onFocus,X.containerProps.onFocus),onBlur:f(A.onBlur,X.containerProps.onBlur)};return d(`div`,{...A,...ct,ref:z,className:l(r.virtualList,R.isWindowed&&r.virtualListWindowed,Y.draggingKey!=null&&r.virtualListReordering,G.isResizing&&r.virtualListResizing,He,O?.root),style:{...R.isWindowed?null:{height:he},...et,...Ue,...k?.root},role:m?.container??(J?`grid`:`list`),"aria-rowcount":J?P.length+1:void 0,"aria-busy":S||R.showLoadMoreSpinner||A[`aria-busy`]||void 0,"aria-activedescendant":X.activeIndex>=0&&(m?.container??(J?`grid`:`list`))!==`list`?ot(X.activeIndex):void 0,children:[J&&u(i,{headerRef:B,columns:h,cols:Ze,resize:G,sort:We,onSort:Ge,multiSelect:C,allSelected:K.allSelected,someSelected:K.someSelected,onSelectAll:K.handleSelectAll,labels:N,classNames:O,styles:k}),S?u(`div`,{className:r.virtualListLoadingFull,"aria-hidden":`true`,children:u(t,{size:32})}):u(`div`,{className:l(r.virtualListBody,O?.body),style:{height:Xe,...k?.body},children:Q}),R.showLoadMoreSpinner&&u(`div`,{className:l(r.virtualListLoadingIndicator,O?.loadingIndicator),style:k?.loadingIndicator,"aria-hidden":`true`,children:u(t,{size:32})})]})}export{p as default};
|
|
2
2
|
//# sourceMappingURL=virtualList.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"virtualList.mjs","names":[],"sources":["../../../../package/common/virtualList/virtualList.tsx"],"sourcesContent":["import React, { useMemo, useCallback, useEffect, useId, useImperativeHandle, useRef } from 'react';\nimport cx from 'classnames';\nimport styles from './virtualList.module.pcss';\nimport SpinnerLoading from '../loading/spinnerLoading';\nimport Checkbox from '../checkbox';\nimport VirtualRow from './virtualRow';\nimport VirtualListHeader from './virtualListHeader';\nimport { useVirtualWindow } from './useVirtualWindow';\nimport { useSelection } from './useSelection';\nimport { useColumns } from './useColumns';\nimport { useRowDrag } from './useRowDrag';\nimport { useSorting } from './useSorting';\nimport { useColumnResize } from './useColumnResize';\nimport { useRowNavigation } from './useRowNavigation';\nimport { useLabels } from '../configProvider';\nimport type { VirtualListColumn, VirtualListLabels, VirtualListProps } from './virtualList.types';\n\nconst DEFAULT_LABELS: Required<VirtualListLabels> = {\n selectRow: 'Select row',\n selectAllRows: 'Select all rows',\n toggleColumns: 'Toggle column visibility',\n columnsHidden: (count) => `${count} columns hidden`,\n resetColumnWidths: 'Reset column widths',\n};\n\n// Pure helpers live in ./virtualList.utils; re-exported here so existing\n// imports (and unit tests) keep working against the component entry point.\nexport {\n buildOffsets,\n findStartIndex,\n getVisibleRange,\n resolveReorderTarget,\n resolveTreeDropTarget,\n lastDescendantIndex,\n buildColumnTemplate,\n compareSortValues,\n isColumnSortable,\n isEmptySortValue,\n nextSort,\n sortItems,\n} from './virtualList.utils';\n\n// ─── Orchestrator ─────────────────────────────────────────────────────────────\n// VirtualListInner wires the hooks together and renders the two pieces of\n// markup. Each concern lives in its own module:\n// useSorting — table mode: header sort state, and the sorted row order\n// useVirtualWindow — generic scroll / measurement / windowing (all modes)\n// useColumnResize — table mode: user column widths, and the drag that sets them\n// useSelection — multi-row selection\n// useColumns — table mode: columns, visibility, persistence, fit widths\n// useRowDrag — reorder + tree drag-and-drop (mouse + touch)\n// useRowNavigation — arrow-key navigation over the rows\n// virtualListHeader — the header row: sorting, resizing, the column menu\n// virtualRow — one positioned row, with its drag wiring\n//\n// The hook order is not free: useColumnResize decides whether the layout is\n// frozen, which useColumns needs to build the grid template.\n\n/** One handler after the other, or whichever of the two exists. */\nfunction chain<E>(theirs: ((event: E) => void) | undefined, ours: ((event: E) => void) | undefined) {\n if (!theirs || !ours) return theirs ?? ours;\n return (event: E) => {\n theirs(event);\n ours(event);\n };\n}\n\nfunction VirtualList<T>(props: VirtualListProps<T>) {\n const {\n ref,\n items,\n renderRow,\n ariaRoles,\n columns,\n height = '100%',\n estimatedRowHeight = 40,\n overscan = 3,\n rowGap = 0,\n rowPadding,\n selectedKey,\n getItemKey,\n onRowClick,\n keyboardNavigation = true,\n tabAcrossRows = false,\n scrollParent,\n visibleColumnKeys,\n onVisibleColumnsChange,\n persistColumnsKey,\n resizableColumns = false,\n columnWidths,\n onColumnWidthsChange,\n labels,\n sort,\n defaultSort,\n onSortChange,\n showColumnToggle,\n onLoadMore,\n loadMoreThreshold = 100,\n isLoading = false,\n multiSelect = false,\n selectedKeys,\n onSelectionChange,\n reorderable = false,\n onReorder,\n longPressDelay = 400,\n treeReorder = false,\n getItemDepth,\n isGroup,\n onTreeDrop,\n treeIndentPx = 24,\n dragHandle = false,\n showDivider = true,\n rowHover = true,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = props;\n // Read off the raw props: the destructured value carries a default and so\n // cannot tell a passed '100%' from an omitted one.\n const heightIgnored = props.scrollParent != null && props.height !== undefined;\n // StrictMode runs every effect twice on mount; a developer warning should appear once.\n const warnedHeightRef = useRef(false);\n useEffect(() => {\n if (!heightIgnored || warnedHeightRef.current) return;\n warnedHeightRef.current = true;\n console.warn(\n 'VirtualList: `height` is ignored alongside `scrollParent`, which leaves the list no viewport to size.',\n );\n }, [heightIgnored]);\n\n const text = useLabels('VirtualList', labels, DEFAULT_LABELS);\n const { rows, effectiveSort, isSorted, handleHeaderSort } = useSorting<T>({\n items,\n columns,\n sort,\n defaultSort,\n onSortChange,\n });\n\n const getKey = useCallback(\n (item: T, index: number): string | number => (getItemKey ? getItemKey(item, index) : index),\n [getItemKey],\n );\n const keys = useMemo(() => rows.map((item, i) => getKey(item, i)), [rows, getKey]);\n const depths = useMemo(\n () => (getItemDepth ? rows.map((item, i) => getItemDepth(item, i)) : []),\n [rows, getItemDepth],\n );\n const isGroupAt = useCallback((i: number) => (isGroup ? isGroup(rows[i], i) : false), [isGroup, rows]);\n\n const win = useVirtualWindow<T>({\n items: rows,\n keys,\n getItemKey,\n estimatedRowHeight,\n rowGap,\n overscan,\n onLoadMore,\n loadMoreThreshold,\n isLoading,\n scrollParent,\n });\n const { rootRef, headerRef, rowObserver, keysRef, offsets, totalHeight, startIndex, endIndex } = win;\n\n // Filled from `cols` below: the resize hook only reads the visible set when a\n // handle is actually used, which is what lets it run before the hook that\n // derives it.\n const visibleColumnsRef = useRef<VirtualListColumn<T>[]>([]);\n const columnResize = useColumnResize<T>({\n columns,\n visibleColumnsRef,\n resizableColumns,\n columnWidths,\n onColumnWidthsChange,\n persistColumnsKey,\n rootRef,\n });\n\n const selection = useSelection<T>({ items: rows, getKey, multiSelect, selectedKeys, onSelectionChange });\n const { effectiveSelectedKeys } = selection;\n\n const cols = useColumns<T>({\n columns,\n items: rows,\n multiSelect,\n visibleColumnKeys,\n onVisibleColumnsChange,\n persistColumnsKey,\n showColumnToggle,\n userWidths: columnResize.widths,\n isFrozen: columnResize.isFrozen,\n rootRef,\n startIndex,\n endIndex,\n containerHeight: win.containerHeight,\n containerWidth: win.containerWidth,\n isLoading,\n });\n // The rest of `cols` is the header's business and goes there whole.\n const { hasColumns, visibleColumns, columnTemplate, widthVars, shouldShowToggle, recalculateColumns } = cols;\n visibleColumnsRef.current = visibleColumns;\n\n // Compose the forwarded handle from the hooks that own each piece: scroll\n // methods from the windowing engine, column controls from the column hooks.\n useImperativeHandle(ref, () => ({ ...win.scrollApi, recalculateColumns, resetColumnWidths: columnResize.reset }), [\n win.scrollApi,\n recalculateColumns,\n columnResize.reset,\n ]);\n\n // Dragging a row to position N is meaningless while the list decides the\n // order: the drop would be undone by the next sort pass.\n const dragBlockedBySort = isSorted && (reorderable || treeReorder);\n const warnedSortRef = useRef(false);\n useEffect(() => {\n if (!dragBlockedBySort || warnedSortRef.current) return;\n warnedSortRef.current = true;\n console.warn('VirtualList: row reordering is disabled while the list is sorted. Clear the sort to drag rows.');\n }, [dragBlockedBySort]);\n\n const drag = useRowDrag({\n reorderable: reorderable && !isSorted,\n treeReorder: treeReorder && !isSorted,\n onReorder,\n onTreeDrop,\n longPressDelay,\n dragHandle,\n treeIndentPx,\n keys,\n depths,\n isGroupAt,\n rootRef,\n keysRef,\n getVisibleRect: win.getVisibleRect,\n scrollBy: win.scrollBy,\n });\n\n const listId = useId();\n const rowDomId = (index: number) => `${listId}-row-${index}`;\n const nav = useRowNavigation({\n enabled: keyboardNavigation,\n tabAcrossRows,\n rowCount: rows.length,\n offsets,\n rootRef,\n headerRef,\n getVisibleSlice: win.getVisibleSlice,\n viewportHeight: win.viewportHeight,\n scrollToIndex: win.scrollApi.scrollToIndex,\n initialIndex: selectedKey != null ? Math.max(0, keys.indexOf(selectedKey)) : 0,\n multiSelect,\n onActivate: onRowClick && ((index: number) => onRowClick(rows[index], index)),\n onToggleSelect: (index) => selection.handleRowSelect(keys[index]),\n });\n\n const rowPaddingValue = typeof rowPadding === 'number' ? `${rowPadding}px` : rowPadding;\n\n const renderRowAt = (i: number) => {\n const item = rows[i];\n const key = getKey(item, i);\n const isSelected = (selectedKey != null && key === selectedKey) || effectiveSelectedKeys.has(key);\n const dragProps = drag.getRowDragProps(i, key);\n\n return (\n <VirtualRow\n key={key}\n id={rowDomId(i)}\n index={i}\n top={offsets[i]}\n padding={rowPaddingValue}\n columnTemplate={columnTemplate}\n isSelected={isSelected}\n isActive={i === nav.activeIndex}\n manageTabStops={keyboardNavigation}\n isEntered={i === nav.enteredIndex}\n activeClassName={classNames?.activeRow}\n activeStyle={slotStyles?.activeRow}\n showDivider={showDivider}\n hover={rowHover}\n onClick={() => {\n if (drag.consumeSuppressedClick()) return;\n // Keep the arrows where the pointer last was.\n nav.setActiveIndex(i);\n onRowClick?.(item, i);\n }}\n observer={rowObserver}\n ariaRowIndex={hasColumns ? i + 2 : undefined}\n ariaPosInSet={hasColumns ? undefined : i + 1}\n ariaSetSize={hasColumns ? undefined : rows.length}\n rowRole={ariaRoles?.row ?? (hasColumns ? 'row' : 'listitem')}\n reserveToggleGutter={shouldShowToggle}\n {...dragProps}\n dropIndicatorClassName={classNames?.dropIndicator}\n dropIndicatorStyle={slotStyles?.dropIndicator}\n rowClassName={classNames?.row}\n rowStyle={slotStyles?.row}\n >\n {hasColumns ? (\n <>\n {multiSelect && (\n <div\n className={cx(styles.virtualListSelectCell, classNames?.selectCell)}\n style={slotStyles?.selectCell}\n role='gridcell'\n onClick={(e) => e.stopPropagation()}\n >\n <Checkbox\n selected={effectiveSelectedKeys.has(key)}\n onToggle={() => selection.handleRowSelect(key)}\n aria-label={text.selectRow}\n // One tab stop per rendered row, changing as the list scrolls,\n // would strand the focus the moment a row unmounts. Space on\n // the active row is the keyboard path instead.\n tabIndex={-1}\n />\n </div>\n )}\n {visibleColumns.map((col) => (\n <div\n key={col.key}\n className={cx(styles.virtualListCell, classNames?.cell)}\n style={slotStyles?.cell}\n role='gridcell'\n data-col-key={col.key}\n data-fit-key={col.width.type === 'fit' ? col.key : undefined}\n >\n {col.renderCell(item, i)}\n </div>\n ))}\n </>\n ) : (\n renderRow?.(item, i)\n )}\n </VirtualRow>\n );\n };\n\n const visibleRows: React.ReactNode[] = [];\n for (let i = startIndex; i <= endIndex; i++) visibleRows.push(renderRowAt(i));\n\n // Keep the row being touch-dragged mounted even if it scrolls out of the\n // window. Touch events are dispatched to the element under the finger at\n // touchstart; if that row unmounts, the browser stops delivering touchmove\n // and the drag freezes. Pinning its DOM node keeps the gesture alive.\n const draggedIndex = drag.draggingKey != null ? keys.indexOf(drag.draggingKey) : -1;\n if (draggedIndex >= 0 && (draggedIndex < startIndex || draggedIndex > endIndex)) {\n visibleRows.push(renderRowAt(draggedIndex));\n }\n\n // Same reason, one step further: the row being used holds the focus, and\n // unmounting it would drop that focus to the document body mid-scroll.\n if (nav.enteredIndex >= 0 && (nav.enteredIndex < startIndex || nav.enteredIndex > endIndex)) {\n visibleRows.push(renderRowAt(nav.enteredIndex));\n }\n\n // Navigation must not replace handlers the consumer passed. Theirs runs first,\n // and a `preventDefault` in it keeps the event: the navigation handlers all\n // check `defaultPrevented`.\n const containerProps = {\n ...nav.containerProps,\n onKeyDown: chain<React.KeyboardEvent<HTMLDivElement>>(rest.onKeyDown, nav.containerProps.onKeyDown),\n onFocus: chain<React.FocusEvent<HTMLDivElement>>(rest.onFocus, nav.containerProps.onFocus),\n onBlur: chain<React.FocusEvent<HTMLDivElement>>(rest.onBlur, nav.containerProps.onBlur),\n };\n\n return (\n <div\n {...rest}\n {...containerProps}\n ref={rootRef}\n className={cx(\n styles.virtualList,\n win.isWindowed && styles.virtualListWindowed,\n drag.draggingKey != null && styles.virtualListReordering,\n columnResize.isResizing && styles.virtualListResizing,\n className,\n classNames?.root,\n )}\n style={{ ...(win.isWindowed ? null : { height }), ...widthVars, ...style, ...slotStyles?.root }}\n role={ariaRoles?.container ?? (hasColumns ? 'grid' : 'list')}\n aria-rowcount={hasColumns ? rows.length + 1 : undefined}\n // Only a composite role may point at an active descendant, and the default\n // `list` is not one. In list mode, pass `ariaRoles` (e.g. listbox/option)\n // to have the active row announced.\n aria-activedescendant={\n nav.activeIndex >= 0 && (ariaRoles?.container ?? (hasColumns ? 'grid' : 'list')) !== 'list'\n ? rowDomId(nav.activeIndex)\n : undefined\n }\n >\n {hasColumns && (\n <VirtualListHeader<T>\n headerRef={headerRef}\n columns={columns!}\n cols={cols}\n resize={columnResize}\n sort={effectiveSort}\n onSort={handleHeaderSort}\n multiSelect={multiSelect}\n allSelected={selection.allSelected}\n someSelected={selection.someSelected}\n onSelectAll={selection.handleSelectAll}\n labels={text}\n classNames={classNames}\n styles={slotStyles}\n />\n )}\n {isLoading ? (\n <div className={styles.virtualListLoadingFull}>\n <SpinnerLoading className={styles.virtualListSpinner} />\n </div>\n ) : (\n <div\n className={cx(styles.virtualListBody, classNames?.body)}\n style={{ height: totalHeight, ...slotStyles?.body }}\n >\n {visibleRows}\n </div>\n )}\n {win.showLoadMoreSpinner && (\n <div\n className={cx(styles.virtualListLoadingIndicator, classNames?.loadingIndicator)}\n style={slotStyles?.loadingIndicator}\n >\n <SpinnerLoading className={styles.virtualListSpinner} />\n </div>\n )}\n </div>\n );\n}\n\nexport default VirtualList;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"virtualList.mjs","names":[],"sources":["../../../../package/common/virtualList/virtualList.tsx"],"sourcesContent":["import React, { useMemo, useCallback, useEffect, useId, useImperativeHandle, useRef } from 'react';\nimport cx from 'classnames';\nimport styles from './virtualList.module.pcss';\nimport Loader from '../loader';\nimport Checkbox from '../checkbox';\nimport VirtualRow from './virtualRow';\nimport VirtualListHeader from './virtualListHeader';\nimport { useVirtualWindow } from './useVirtualWindow';\nimport { useSelection } from './useSelection';\nimport { useColumns } from './useColumns';\nimport { useRowDrag } from './useRowDrag';\nimport { useSorting } from './useSorting';\nimport { useColumnResize } from './useColumnResize';\nimport { useRowNavigation } from './useRowNavigation';\nimport { useLabels } from '../configProvider';\nimport type { VirtualListColumn, VirtualListLabels, VirtualListProps } from './virtualList.types';\n\nconst DEFAULT_LABELS: Required<VirtualListLabels> = {\n selectRow: 'Select row',\n selectAllRows: 'Select all rows',\n toggleColumns: 'Toggle column visibility',\n columnsHidden: (count) => `${count} columns hidden`,\n resetColumnWidths: 'Reset column widths',\n};\n\n// Pure helpers live in ./virtualList.utils; re-exported here so existing\n// imports (and unit tests) keep working against the component entry point.\nexport {\n buildOffsets,\n findStartIndex,\n getVisibleRange,\n resolveReorderTarget,\n resolveTreeDropTarget,\n lastDescendantIndex,\n buildColumnTemplate,\n compareSortValues,\n isColumnSortable,\n isEmptySortValue,\n nextSort,\n sortItems,\n} from './virtualList.utils';\n\n// ─── Orchestrator ─────────────────────────────────────────────────────────────\n// VirtualListInner wires the hooks together and renders the two pieces of\n// markup. Each concern lives in its own module:\n// useSorting — table mode: header sort state, and the sorted row order\n// useVirtualWindow — generic scroll / measurement / windowing (all modes)\n// useColumnResize — table mode: user column widths, and the drag that sets them\n// useSelection — multi-row selection\n// useColumns — table mode: columns, visibility, persistence, fit widths\n// useRowDrag — reorder + tree drag-and-drop (mouse + touch)\n// useRowNavigation — arrow-key navigation over the rows\n// virtualListHeader — the header row: sorting, resizing, the column menu\n// virtualRow — one positioned row, with its drag wiring\n//\n// The hook order is not free: useColumnResize decides whether the layout is\n// frozen, which useColumns needs to build the grid template.\n\n/** One handler after the other, or whichever of the two exists. */\nfunction chain<E>(theirs: ((event: E) => void) | undefined, ours: ((event: E) => void) | undefined) {\n if (!theirs || !ours) return theirs ?? ours;\n return (event: E) => {\n theirs(event);\n ours(event);\n };\n}\n\nfunction VirtualList<T>(props: VirtualListProps<T>) {\n const {\n ref,\n items,\n renderRow,\n ariaRoles,\n columns,\n height = '100%',\n estimatedRowHeight = 40,\n overscan = 3,\n rowGap = 0,\n rowPadding,\n selectedKey,\n getItemKey,\n onRowClick,\n keyboardNavigation = true,\n tabAcrossRows = false,\n scrollParent,\n visibleColumnKeys,\n onVisibleColumnsChange,\n persistColumnsKey,\n resizableColumns = false,\n columnWidths,\n onColumnWidthsChange,\n labels,\n sort,\n defaultSort,\n onSortChange,\n showColumnToggle,\n onLoadMore,\n loadMoreThreshold = 100,\n isLoading = false,\n multiSelect = false,\n selectedKeys,\n onSelectionChange,\n reorderable = false,\n onReorder,\n longPressDelay = 400,\n treeReorder = false,\n getItemDepth,\n isGroup,\n onTreeDrop,\n treeIndentPx = 24,\n dragHandle = false,\n showDivider = true,\n rowHover = true,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = props;\n // Read off the raw props: the destructured value carries a default and so\n // cannot tell a passed '100%' from an omitted one.\n const heightIgnored = props.scrollParent != null && props.height !== undefined;\n // StrictMode runs every effect twice on mount; a developer warning should appear once.\n const warnedHeightRef = useRef(false);\n useEffect(() => {\n if (!heightIgnored || warnedHeightRef.current) return;\n warnedHeightRef.current = true;\n console.warn(\n 'VirtualList: `height` is ignored alongside `scrollParent`, which leaves the list no viewport to size.',\n );\n }, [heightIgnored]);\n\n const text = useLabels('VirtualList', labels, DEFAULT_LABELS);\n const { rows, effectiveSort, isSorted, handleHeaderSort } = useSorting<T>({\n items,\n columns,\n sort,\n defaultSort,\n onSortChange,\n });\n\n const getKey = useCallback(\n (item: T, index: number): string | number => (getItemKey ? getItemKey(item, index) : index),\n [getItemKey],\n );\n const keys = useMemo(() => rows.map((item, i) => getKey(item, i)), [rows, getKey]);\n const depths = useMemo(\n () => (getItemDepth ? rows.map((item, i) => getItemDepth(item, i)) : []),\n [rows, getItemDepth],\n );\n const isGroupAt = useCallback((i: number) => (isGroup ? isGroup(rows[i], i) : false), [isGroup, rows]);\n\n const win = useVirtualWindow<T>({\n items: rows,\n keys,\n getItemKey,\n estimatedRowHeight,\n rowGap,\n overscan,\n onLoadMore,\n loadMoreThreshold,\n isLoading,\n scrollParent,\n });\n const { rootRef, headerRef, rowObserver, keysRef, offsets, totalHeight, startIndex, endIndex } = win;\n\n // Filled from `cols` below: the resize hook only reads the visible set when a\n // handle is actually used, which is what lets it run before the hook that\n // derives it.\n const visibleColumnsRef = useRef<VirtualListColumn<T>[]>([]);\n const columnResize = useColumnResize<T>({\n columns,\n visibleColumnsRef,\n resizableColumns,\n columnWidths,\n onColumnWidthsChange,\n persistColumnsKey,\n rootRef,\n });\n\n const selection = useSelection<T>({ items: rows, getKey, multiSelect, selectedKeys, onSelectionChange });\n const { effectiveSelectedKeys } = selection;\n\n const cols = useColumns<T>({\n columns,\n items: rows,\n multiSelect,\n visibleColumnKeys,\n onVisibleColumnsChange,\n persistColumnsKey,\n showColumnToggle,\n userWidths: columnResize.widths,\n isFrozen: columnResize.isFrozen,\n rootRef,\n startIndex,\n endIndex,\n containerHeight: win.containerHeight,\n containerWidth: win.containerWidth,\n isLoading,\n });\n // The rest of `cols` is the header's business and goes there whole.\n const { hasColumns, visibleColumns, columnTemplate, widthVars, shouldShowToggle, recalculateColumns } = cols;\n visibleColumnsRef.current = visibleColumns;\n\n // Compose the forwarded handle from the hooks that own each piece: scroll\n // methods from the windowing engine, column controls from the column hooks.\n useImperativeHandle(ref, () => ({ ...win.scrollApi, recalculateColumns, resetColumnWidths: columnResize.reset }), [\n win.scrollApi,\n recalculateColumns,\n columnResize.reset,\n ]);\n\n // Dragging a row to position N is meaningless while the list decides the\n // order: the drop would be undone by the next sort pass.\n const dragBlockedBySort = isSorted && (reorderable || treeReorder);\n const warnedSortRef = useRef(false);\n useEffect(() => {\n if (!dragBlockedBySort || warnedSortRef.current) return;\n warnedSortRef.current = true;\n console.warn('VirtualList: row reordering is disabled while the list is sorted. Clear the sort to drag rows.');\n }, [dragBlockedBySort]);\n\n const drag = useRowDrag({\n reorderable: reorderable && !isSorted,\n treeReorder: treeReorder && !isSorted,\n onReorder,\n onTreeDrop,\n longPressDelay,\n dragHandle,\n treeIndentPx,\n keys,\n depths,\n isGroupAt,\n rootRef,\n keysRef,\n getVisibleRect: win.getVisibleRect,\n scrollBy: win.scrollBy,\n });\n\n const listId = useId();\n const rowDomId = (index: number) => `${listId}-row-${index}`;\n const nav = useRowNavigation({\n enabled: keyboardNavigation,\n tabAcrossRows,\n rowCount: rows.length,\n offsets,\n rootRef,\n headerRef,\n getVisibleSlice: win.getVisibleSlice,\n viewportHeight: win.viewportHeight,\n scrollToIndex: win.scrollApi.scrollToIndex,\n initialIndex: selectedKey != null ? Math.max(0, keys.indexOf(selectedKey)) : 0,\n multiSelect,\n onActivate: onRowClick && ((index: number) => onRowClick(rows[index], index)),\n onToggleSelect: (index) => selection.handleRowSelect(keys[index]),\n });\n\n const rowPaddingValue = typeof rowPadding === 'number' ? `${rowPadding}px` : rowPadding;\n\n const renderRowAt = (i: number) => {\n const item = rows[i];\n const key = getKey(item, i);\n const isSelected = (selectedKey != null && key === selectedKey) || effectiveSelectedKeys.has(key);\n const dragProps = drag.getRowDragProps(i, key);\n\n return (\n <VirtualRow\n key={key}\n id={rowDomId(i)}\n index={i}\n top={offsets[i]}\n padding={rowPaddingValue}\n columnTemplate={columnTemplate}\n isSelected={isSelected}\n isActive={i === nav.activeIndex}\n manageTabStops={keyboardNavigation}\n isEntered={i === nav.enteredIndex}\n activeClassName={classNames?.activeRow}\n activeStyle={slotStyles?.activeRow}\n showDivider={showDivider}\n hover={rowHover}\n onClick={() => {\n if (drag.consumeSuppressedClick()) return;\n // Keep the arrows where the pointer last was.\n nav.setActiveIndex(i);\n onRowClick?.(item, i);\n }}\n observer={rowObserver}\n ariaRowIndex={hasColumns ? i + 2 : undefined}\n ariaPosInSet={hasColumns ? undefined : i + 1}\n ariaSetSize={hasColumns ? undefined : rows.length}\n rowRole={ariaRoles?.row ?? (hasColumns ? 'row' : 'listitem')}\n reserveToggleGutter={shouldShowToggle}\n {...dragProps}\n dropIndicatorClassName={classNames?.dropIndicator}\n dropIndicatorStyle={slotStyles?.dropIndicator}\n rowClassName={classNames?.row}\n rowStyle={slotStyles?.row}\n >\n {hasColumns ? (\n <>\n {multiSelect && (\n <div\n className={cx(styles.virtualListSelectCell, classNames?.selectCell)}\n style={slotStyles?.selectCell}\n role='gridcell'\n onClick={(e) => e.stopPropagation()}\n >\n <Checkbox\n selected={effectiveSelectedKeys.has(key)}\n onToggle={() => selection.handleRowSelect(key)}\n aria-label={text.selectRow}\n // One tab stop per rendered row, changing as the list scrolls,\n // would strand the focus the moment a row unmounts. Space on\n // the active row is the keyboard path instead.\n tabIndex={-1}\n />\n </div>\n )}\n {visibleColumns.map((col) => (\n <div\n key={col.key}\n className={cx(styles.virtualListCell, classNames?.cell)}\n style={slotStyles?.cell}\n role='gridcell'\n data-col-key={col.key}\n data-fit-key={col.width.type === 'fit' ? col.key : undefined}\n >\n {col.renderCell(item, i)}\n </div>\n ))}\n </>\n ) : (\n renderRow?.(item, i)\n )}\n </VirtualRow>\n );\n };\n\n const visibleRows: React.ReactNode[] = [];\n for (let i = startIndex; i <= endIndex; i++) visibleRows.push(renderRowAt(i));\n\n // Keep the row being touch-dragged mounted even if it scrolls out of the\n // window. Touch events are dispatched to the element under the finger at\n // touchstart; if that row unmounts, the browser stops delivering touchmove\n // and the drag freezes. Pinning its DOM node keeps the gesture alive.\n const draggedIndex = drag.draggingKey != null ? keys.indexOf(drag.draggingKey) : -1;\n if (draggedIndex >= 0 && (draggedIndex < startIndex || draggedIndex > endIndex)) {\n visibleRows.push(renderRowAt(draggedIndex));\n }\n\n // Same reason, one step further: the row being used holds the focus, and\n // unmounting it would drop that focus to the document body mid-scroll.\n if (nav.enteredIndex >= 0 && (nav.enteredIndex < startIndex || nav.enteredIndex > endIndex)) {\n visibleRows.push(renderRowAt(nav.enteredIndex));\n }\n\n // Navigation must not replace handlers the consumer passed. Theirs runs first,\n // and a `preventDefault` in it keeps the event: the navigation handlers all\n // check `defaultPrevented`.\n const containerProps = {\n ...nav.containerProps,\n onKeyDown: chain<React.KeyboardEvent<HTMLDivElement>>(rest.onKeyDown, nav.containerProps.onKeyDown),\n onFocus: chain<React.FocusEvent<HTMLDivElement>>(rest.onFocus, nav.containerProps.onFocus),\n onBlur: chain<React.FocusEvent<HTMLDivElement>>(rest.onBlur, nav.containerProps.onBlur),\n };\n\n return (\n <div\n {...rest}\n {...containerProps}\n ref={rootRef}\n className={cx(\n styles.virtualList,\n win.isWindowed && styles.virtualListWindowed,\n drag.draggingKey != null && styles.virtualListReordering,\n columnResize.isResizing && styles.virtualListResizing,\n className,\n classNames?.root,\n )}\n style={{ ...(win.isWindowed ? null : { height }), ...widthVars, ...style, ...slotStyles?.root }}\n role={ariaRoles?.container ?? (hasColumns ? 'grid' : 'list')}\n aria-rowcount={hasColumns ? rows.length + 1 : undefined}\n aria-busy={isLoading || win.showLoadMoreSpinner || rest['aria-busy'] || undefined}\n // Only a composite role may point at an active descendant, and the default\n // `list` is not one. In list mode, pass `ariaRoles` (e.g. listbox/option)\n // to have the active row announced.\n aria-activedescendant={\n nav.activeIndex >= 0 && (ariaRoles?.container ?? (hasColumns ? 'grid' : 'list')) !== 'list'\n ? rowDomId(nav.activeIndex)\n : undefined\n }\n >\n {hasColumns && (\n <VirtualListHeader<T>\n headerRef={headerRef}\n columns={columns!}\n cols={cols}\n resize={columnResize}\n sort={effectiveSort}\n onSort={handleHeaderSort}\n multiSelect={multiSelect}\n allSelected={selection.allSelected}\n someSelected={selection.someSelected}\n onSelectAll={selection.handleSelectAll}\n labels={text}\n classNames={classNames}\n styles={slotStyles}\n />\n )}\n {/* Hidden, with the list marked busy instead: a list or grid may only own rows. */}\n {isLoading ? (\n <div className={styles.virtualListLoadingFull} aria-hidden='true'>\n <Loader size={32} />\n </div>\n ) : (\n <div\n className={cx(styles.virtualListBody, classNames?.body)}\n style={{ height: totalHeight, ...slotStyles?.body }}\n >\n {visibleRows}\n </div>\n )}\n {win.showLoadMoreSpinner && (\n <div\n className={cx(styles.virtualListLoadingIndicator, classNames?.loadingIndicator)}\n style={slotStyles?.loadingIndicator}\n aria-hidden='true'\n >\n <Loader size={32} />\n </div>\n )}\n </div>\n );\n}\n\nexport default VirtualList;\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";var e=`virtualList_qBPNc`,t=`virtualList-drag-clone_artnC`,n=`virtualList-header_0Ellb`,r=`virtualList-header-cell_c8NGV`,i=`virtualList-header-resize_cbYFc`,a=`virtualList-header-sort_Cdpe3`,o=`virtualList-header-sort-label_6MaZ3`,s=`virtualList-header-sort-icon_Z-Nrd`,c=`virtualList-header-sort-icon-active_g7qrb`,l=`virtualList-header-toggle_pYFxD`,u=`virtualList-toggle-panel_Uksmk`,d=`virtualList-toggle-wrapper_JP32M`,f=`virtualList-toggle-popover_gbpd7`,p=`virtualList-toggle-item_5gu5d`,m=`virtualList-toggle-reset_3UANJ`,h=`virtualList-column-chip_nOqr6`,g=`virtualList-select-cell_s9kAy`,_=`virtualList-body_k-fRr`,v=`virtualList-row-active_H5r5-`,y=`virtualList-resizing_28Mn4`,b=`virtualList-row_TTY50`,x=`virtualList-row-no-divider_Ct0gV`,S=`virtualList-row-no-hover_2d3mH`,C=`virtualList-row-selected_hwEN-`,w=`virtualList-row-draggable_I86ha`,T=`virtualList-row-dragging_6T5tQ`,E=`virtualList-row-drop-inside_Uhi9n`,D=`virtualList-drop-line_EM-g4`,O=`virtualList-drop-line-before_n-0iZ`,k=`virtualList-drop-line-after_2dld-`,A=`virtualList-reordering_Rt9E3`,j=`virtualList-cell_H0zBv`,M=`virtualList-loading-full_wzZNM`,N=`virtualList-loading-indicator_EJced`,P=`virtualList-
|
|
1
|
+
"use client";var e=`virtualList_qBPNc`,t=`virtualList-drag-clone_artnC`,n=`virtualList-header_0Ellb`,r=`virtualList-header-cell_c8NGV`,i=`virtualList-header-resize_cbYFc`,a=`virtualList-header-sort_Cdpe3`,o=`virtualList-header-sort-label_6MaZ3`,s=`virtualList-header-sort-icon_Z-Nrd`,c=`virtualList-header-sort-icon-active_g7qrb`,l=`virtualList-header-toggle_pYFxD`,u=`virtualList-toggle-panel_Uksmk`,d=`virtualList-toggle-wrapper_JP32M`,f=`virtualList-toggle-popover_gbpd7`,p=`virtualList-toggle-item_5gu5d`,m=`virtualList-toggle-reset_3UANJ`,h=`virtualList-column-chip_nOqr6`,g=`virtualList-select-cell_s9kAy`,_=`virtualList-body_k-fRr`,v=`virtualList-row-active_H5r5-`,y=`virtualList-resizing_28Mn4`,b=`virtualList-row_TTY50`,x=`virtualList-row-no-divider_Ct0gV`,S=`virtualList-row-no-hover_2d3mH`,C=`virtualList-row-selected_hwEN-`,w=`virtualList-row-draggable_I86ha`,T=`virtualList-row-dragging_6T5tQ`,E=`virtualList-row-drop-inside_Uhi9n`,D=`virtualList-drop-line_EM-g4`,O=`virtualList-drop-line-before_n-0iZ`,k=`virtualList-drop-line-after_2dld-`,A=`virtualList-reordering_Rt9E3`,j=`virtualList-cell_H0zBv`,M=`virtualList-loading-full_wzZNM`,N=`virtualList-loading-indicator_EJced`,P=`virtualList-windowed_riUyT`,F={virtualList:e,"virtualList-drag-clone":`virtualList-drag-clone_artnC`,virtualListDragClone:t,"virtualList-header":`virtualList-header_0Ellb`,virtualListHeader:n,"virtualList-header-cell":`virtualList-header-cell_c8NGV`,virtualListHeaderCell:r,"virtualList-header-resize":`virtualList-header-resize_cbYFc`,virtualListHeaderResize:i,"virtualList-header-sort":`virtualList-header-sort_Cdpe3`,virtualListHeaderSort:a,"virtualList-header-sort-label":`virtualList-header-sort-label_6MaZ3`,virtualListHeaderSortLabel:o,"virtualList-header-sort-icon":`virtualList-header-sort-icon_Z-Nrd`,virtualListHeaderSortIcon:s,"virtualList-header-sort-icon-active":`virtualList-header-sort-icon-active_g7qrb`,virtualListHeaderSortIconActive:c,"virtualList-header-toggle":`virtualList-header-toggle_pYFxD`,virtualListHeaderToggle:l,"virtualList-toggle-panel":`virtualList-toggle-panel_Uksmk`,virtualListTogglePanel:u,"virtualList-toggle-wrapper":`virtualList-toggle-wrapper_JP32M`,virtualListToggleWrapper:d,"virtualList-toggle-popover":`virtualList-toggle-popover_gbpd7`,virtualListTogglePopover:f,"virtualList-toggle-item":`virtualList-toggle-item_5gu5d`,virtualListToggleItem:p,"virtualList-toggle-reset":`virtualList-toggle-reset_3UANJ`,virtualListToggleReset:m,"virtualList-column-chip":`virtualList-column-chip_nOqr6`,virtualListColumnChip:h,"virtualList-select-cell":`virtualList-select-cell_s9kAy`,virtualListSelectCell:g,"virtualList-body":`virtualList-body_k-fRr`,virtualListBody:_,"virtualList-row-active":`virtualList-row-active_H5r5-`,virtualListRowActive:v,"virtualList-resizing":`virtualList-resizing_28Mn4`,virtualListResizing:y,"virtualList-row":`virtualList-row_TTY50`,virtualListRow:b,"virtualList-row-no-divider":`virtualList-row-no-divider_Ct0gV`,virtualListRowNoDivider:x,"virtualList-row-no-hover":`virtualList-row-no-hover_2d3mH`,virtualListRowNoHover:S,"virtualList-row-selected":`virtualList-row-selected_hwEN-`,virtualListRowSelected:C,"virtualList-row-draggable":`virtualList-row-draggable_I86ha`,virtualListRowDraggable:w,"virtualList-row-dragging":`virtualList-row-dragging_6T5tQ`,virtualListRowDragging:T,"virtualList-row-drop-inside":`virtualList-row-drop-inside_Uhi9n`,virtualListRowDropInside:E,"virtualList-drop-line":`virtualList-drop-line_EM-g4`,virtualListDropLine:D,"virtualList-drop-line-before":`virtualList-drop-line-before_n-0iZ`,virtualListDropLineBefore:O,"virtualList-drop-line-after":`virtualList-drop-line-after_2dld-`,virtualListDropLineAfter:k,"virtualList-reordering":`virtualList-reordering_Rt9E3`,virtualListReordering:A,"virtualList-cell":`virtualList-cell_H0zBv`,virtualListCell:j,"virtualList-loading-full":`virtualList-loading-full_wzZNM`,virtualListLoadingFull:M,"virtualList-loading-indicator":`virtualList-loading-indicator_EJced`,virtualListLoadingIndicator:N,"virtualList-windowed":`virtualList-windowed_riUyT`,virtualListWindowed:P};export{F as default,e as virtualList,_ as virtualListBody,j as virtualListCell,h as virtualListColumnChip,t as virtualListDragClone,D as virtualListDropLine,k as virtualListDropLineAfter,O as virtualListDropLineBefore,n as virtualListHeader,r as virtualListHeaderCell,i as virtualListHeaderResize,a as virtualListHeaderSort,s as virtualListHeaderSortIcon,c as virtualListHeaderSortIconActive,o as virtualListHeaderSortLabel,l as virtualListHeaderToggle,M as virtualListLoadingFull,N as virtualListLoadingIndicator,A as virtualListReordering,y as virtualListResizing,b as virtualListRow,v as virtualListRowActive,w as virtualListRowDraggable,T as virtualListRowDragging,E as virtualListRowDropInside,x as virtualListRowNoDivider,S as virtualListRowNoHover,C as virtualListRowSelected,g as virtualListSelectCell,p as virtualListToggleItem,u as virtualListTogglePanel,f as virtualListTogglePopover,m as virtualListToggleReset,d as virtualListToggleWrapper,P as virtualListWindowed};
|
|
2
2
|
//# sourceMappingURL=virtualList.module.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"virtualList.module.mjs","names":[],"sources":["../../../../package/common/virtualList/virtualList.module.pcss"],"sourcesContent":[".virtualList {\n overflow-y: auto;\n box-sizing: border-box;\n color: var(--text-color);\n font-family: var(--default-font);\n\n /* Disable the browser's own scroll anchoring — the component does its own\n scroll-position correction when row heights change, and the two fighting\n each other causes the thumb to desync while dragging. */\n overflow-anchor: none;\n\n /* Reserve the scrollbar gutter so rows don't re-wrap (and re-measure) when the\n vertical scrollbar appears/disappears as content grows. */\n scrollbar-gutter: stable;\n\n /* Establish a stacking context so every z-index inside the list (sticky\n header, toggle popover, drag clone) stays scoped to this component and\n can't paint over outside content like a modal. */\n isolation: isolate;\n\n &-drag-clone {\n box-sizing: border-box;\n contain: layout paint style;\n cursor: grabbing;\n\n /* It tracks the finger via transform — never animate that. */\n transition: none;\n }\n\n &-header {\n display: grid;\n position: sticky;\n\n /* With `scrollParent` the header sticks to the page's scrollport, where a\n fixed app bar may already sit; the list is given the offset from outside. */\n top: var(--vl-header-top, 0);\n\n /* Frozen layouts are exact pixels and may total more than the viewport, so\n the header and the row canvas below both take that total and the list\n scrolls sideways. `--vl-total` is only set once a column has been\n resized; until then this resolves to 100% and nothing changes. */\n width: max(100%, var(--vl-total, 0px));\n\n /* Above focused rows (z-index 1) so a focused row scrolled under the header\n never paints over it; the drag clone (z-index 3) still floats above both. */\n z-index: 2;\n background: var(--background-accent);\n border-bottom: 1px solid var(--border-color);\n box-sizing: border-box;\n\n &-cell {\n padding: 8px 12px;\n font-weight: 600;\n font-size: 13px;\n color: var(--text-dark);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n box-sizing: border-box;\n\n /* Anchors the resize handle to the cell's trailing edge. */\n position: relative;\n\n /* The cell, not the button inside it, carries the header's tab stop, so\n this is the ring a keyboard user follows. Inset because the cell clips\n its overflow and an outward outline would be cut off. */\n &:focus-visible {\n outline: 1px solid var(--focus-border-color, var(--primary-color));\n outline-offset: -1px;\n }\n }\n\n /* Resize handle: a grab strip on the column's trailing edge, wider than the\n line it sits on because a 1px target is unhittable. It stays inside the\n cell rather than straddling the edge, since the cell clips its overflow\n to keep a long header out of its neighbour. */\n &-resize {\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n width: 10px;\n cursor: col-resize;\n -webkit-tap-highlight-color: transparent;\n touch-action: none;\n\n /* The line itself, drawn on the trailing edge and revealed on hover. */\n &::after {\n content: '';\n position: absolute;\n top: 4px;\n bottom: 4px;\n right: 0;\n width: 2px;\n border-radius: 1px;\n background: var(--primary-color);\n opacity: 0;\n transition: opacity 0.12s;\n }\n\n &:hover::after,\n &:active::after {\n opacity: 1;\n }\n }\n\n /* The clickable part of a sortable header cell. Strips the button chrome and\n inherits the cell's typography, so a sortable header looks identical to a\n plain one until it's hovered. */\n &-sort {\n font: inherit;\n color: inherit;\n background: none;\n border: none;\n margin: 0;\n padding: 0;\n display: flex;\n align-items: center;\n gap: 6px;\n min-width: 0;\n max-width: 100%;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n &:focus-visible {\n outline: 1px solid var(--focus-border-color, var(--primary-color));\n outline-offset: 2px;\n }\n\n /* The cell's own ellipsis can't apply once its content is a flex button,\n so the truncation moves onto the label. */\n &-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &-icon {\n flex: none;\n font-size: 11px;\n opacity: 0.35;\n transition:\n opacity 0.15s,\n color 0.15s;\n\n &-active {\n opacity: 1;\n color: var(--primary-color);\n }\n }\n\n &:hover &-icon {\n opacity: 0.75;\n }\n\n &:hover &-icon-active {\n opacity: 1;\n }\n }\n\n &-toggle {\n background: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n padding: 4px 8px;\n color: var(--text-dark);\n display: flex;\n align-items: center;\n border-radius: var(--default-border-radius);\n transition: background 0.15s;\n\n &:hover {\n background: var(--background-accent-light);\n color: var(--text-color);\n }\n }\n }\n\n /* The entries pad themselves so a hover highlight reaches the panel edge. */\n &-toggle-panel {\n padding: 4px 0;\n }\n\n &-toggle {\n &-wrapper {\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n padding: 0 4px;\n }\n\n /* Chrome (background, shadow, radius, positioning) is provided by the\n Popover panel this renders inside — keep only sizing here. */\n &-popover {\n display: flex;\n flex-direction: column;\n min-width: 160px;\n }\n\n &-item {\n padding: 4px 12px;\n white-space: nowrap;\n transition: background 0.1s;\n font-size: 14px;\n\n /* `:focus` as well, because the panel takes the focus when the keyboard\n opens it, and the checkbox itself is the focusable element. Not\n `--background-accent-light`: it is the same colour as that panel in the\n default theme. */\n &:hover,\n &:focus {\n background: var(--background-accent);\n }\n }\n\n /* Only rendered once a column has actually been resized, so it reads as an\n undo for something the user just did rather than a permanent option. */\n &-reset {\n margin-top: 4px;\n padding: 6px 12px;\n border: none;\n border-top: 1px solid var(--border-color);\n background: none;\n font: inherit;\n font-size: 13px;\n color: var(--text-color);\n text-align: left;\n white-space: nowrap;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: background 0.1s;\n\n &:hover,\n &:focus {\n background: var(--background-accent);\n }\n }\n }\n\n /* Count badge on the column-toggle cog: how many columns the user has hidden.\n Positioned at the cog's upper-right corner; non-interactive. */\n &-column-chip {\n position: absolute;\n top: 0;\n right: 0;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--primary-color);\n color: var(--text-on-primary);\n font-size: 10px;\n font-weight: 600;\n line-height: 1;\n border-radius: 8px;\n pointer-events: none;\n }\n\n &-select-cell {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 4px;\n box-sizing: border-box;\n\n /* Only the header's select-all cell is focusable; the ones in rows are not. */\n &:focus-visible {\n outline: 1px solid var(--focus-border-color, var(--primary-color));\n outline-offset: -1px;\n }\n }\n\n &-body {\n position: relative;\n box-sizing: border-box;\n\n /* Rows are absolute with left/right 0, so they inherit this width and stay\n aligned with the header when the table is wider than the viewport. */\n width: max(100%, var(--vl-total, 0px));\n }\n\n /* The list itself holds the tab stop, so the active row cannot use a\n `:focus-visible` of its own. Ringing the list instead would mark the whole\n table rather than the row the arrow keys are on, so the list drops its own\n outline and lends it to that row. Scoped to `:focus-visible`, a mouse user\n never sees it. */\n &:focus-visible {\n outline: none;\n\n & .virtualList-row-active {\n outline: 2px solid var(--focus-border-color, var(--primary-color));\n outline-offset: -2px;\n }\n }\n\n /* A resize drag travels over the rows, and their hover highlight following the\n pointer is noise. Inert rather than a `:hover` override, which would have to\n out-specify the selected-row rule to work. The drag itself is unaffected:\n pointer capture bypasses hit testing. */\n &-resizing &-body {\n pointer-events: none;\n }\n\n &-row {\n border-bottom: 1px solid var(--border-color);\n box-sizing: border-box;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: background 0.1s;\n\n /* Isolate each row's layout/style so measuring or restyling one row can't force\n the whole list to re-layout — keeps fast scrolling smooth. */\n contain: layout style;\n\n &-no-divider {\n border-bottom: none;\n }\n\n &:hover {\n background: var(--background-accent-light);\n }\n\n /* Opt out of the hover highlight (e.g. when each row is a Card that handles\n its own hover). Declared before the `-selected` rule below, so a selected\n row's highlight still wins on hover. */\n &-no-hover:hover {\n background: transparent;\n }\n\n &-selected {\n background: var(--primary-lighter);\n\n &:hover {\n background: var(--primary-lighter);\n }\n }\n\n &-draggable {\n cursor: grab;\n\n /* Stop the mobile long-press from selecting text or showing the callout. */\n user-select: none;\n -webkit-touch-callout: none;\n\n &:active {\n cursor: grabbing;\n }\n }\n\n &-dragging {\n opacity: 0.4;\n }\n\n /* Tree-reorder `inside` drop: the dragged node becomes a child of this row,\n so highlight the whole row instead of drawing a between-rows line. */\n &-drop-inside {\n background: var(--primary-lighter);\n box-shadow: inset 0 0 0 2px var(--primary-color);\n }\n }\n\n /* Tree-reorder `before`/`after` drop line. Positioned inside the (relatively\n positioned absolute) row; `left` is set inline to the target's indent so it\n starts where the dropped content will. */\n &-drop-line {\n position: absolute;\n right: 0;\n height: 2px;\n background: var(--primary-color);\n pointer-events: none;\n z-index: 1;\n\n /* A small knob at the line's start, the usual tree drop-indicator look. */\n &::before {\n content: '';\n position: absolute;\n left: 0;\n top: 50%;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--primary-color);\n transform: translate(-50%, -50%);\n }\n\n &-before {\n top: -1px;\n }\n\n &-after {\n bottom: -1px;\n }\n }\n\n /* While a row is being dragged, suppress hover backgrounds so the pointer\n moving across rows doesn't light up the wrong one, and stop text selection.\n `touch-action: none` stops the touch drag from also scrolling the list\n (only active once the long-press has armed the drag). */\n &-reordering {\n touch-action: none;\n\n .virtualList-row {\n user-select: none;\n\n &:hover {\n background: transparent;\n }\n\n &.virtualList-row-selected:hover {\n background: var(--primary-lighter);\n }\n\n &.virtualList-row-dragging {\n background: transparent;\n }\n }\n }\n\n &-cell {\n padding: 8px 12px;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 14px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n min-width: 0;\n\n /* `fit` columns are content-sized — keep their cells on a single line so the\n content can't wrap, and so the width measurement reads the true intrinsic\n width. (Other cells are free to wrap for variable-height rows.) */\n &[data-fit-key] {\n white-space: nowrap;\n }\n }\n\n &-loading {\n &-full {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n }\n\n &-indicator {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px 0;\n }\n }\n\n &-spinner {\n width: 32px;\n height: 32px;\n }\n\n /* Must stay after the declarations it undoes: both selectors are one class, so\n only source order separates them. `overflow` cannot be split per axis here\n either, because a container with `overflow-x` and `overflow-y: visible`\n computes the visible one to `auto` and hands the list back its own vertical\n scrollbar. So a frozen layout wider than the list overflows the page\n sideways instead of scrolling inside it. */\n &-windowed {\n height: auto;\n overflow: visible;\n scrollbar-gutter: auto;\n\n .virtualList-loading-full {\n height: auto;\n padding: 32px 0;\n }\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"virtualList.module.mjs","names":[],"sources":["../../../../package/common/virtualList/virtualList.module.pcss"],"sourcesContent":[".virtualList {\n overflow-y: auto;\n box-sizing: border-box;\n color: var(--text-color);\n font-family: var(--default-font);\n\n /* Disable the browser's own scroll anchoring — the component does its own\n scroll-position correction when row heights change, and the two fighting\n each other causes the thumb to desync while dragging. */\n overflow-anchor: none;\n\n /* Reserve the scrollbar gutter so rows don't re-wrap (and re-measure) when the\n vertical scrollbar appears/disappears as content grows. */\n scrollbar-gutter: stable;\n\n /* Establish a stacking context so every z-index inside the list (sticky\n header, toggle popover, drag clone) stays scoped to this component and\n can't paint over outside content like a modal. */\n isolation: isolate;\n\n &-drag-clone {\n box-sizing: border-box;\n contain: layout paint style;\n cursor: grabbing;\n\n /* It tracks the finger via transform — never animate that. */\n transition: none;\n }\n\n &-header {\n display: grid;\n position: sticky;\n\n /* With `scrollParent` the header sticks to the page's scrollport, where a\n fixed app bar may already sit; the list is given the offset from outside. */\n top: var(--vl-header-top, 0);\n\n /* Frozen layouts are exact pixels and may total more than the viewport, so\n the header and the row canvas below both take that total and the list\n scrolls sideways. `--vl-total` is only set once a column has been\n resized; until then this resolves to 100% and nothing changes. */\n width: max(100%, var(--vl-total, 0px));\n\n /* Above focused rows (z-index 1) so a focused row scrolled under the header\n never paints over it; the drag clone (z-index 3) still floats above both. */\n z-index: 2;\n background: var(--background-accent);\n border-bottom: 1px solid var(--border-color);\n box-sizing: border-box;\n\n &-cell {\n padding: 8px 12px;\n font-weight: 600;\n font-size: 13px;\n color: var(--text-dark);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n box-sizing: border-box;\n\n /* Anchors the resize handle to the cell's trailing edge. */\n position: relative;\n\n /* The cell, not the button inside it, carries the header's tab stop, so\n this is the ring a keyboard user follows. Inset because the cell clips\n its overflow and an outward outline would be cut off. */\n &:focus-visible {\n outline: 1px solid var(--focus-border-color, var(--primary-color));\n outline-offset: -1px;\n }\n }\n\n /* Resize handle: a grab strip on the column's trailing edge, wider than the\n line it sits on because a 1px target is unhittable. It stays inside the\n cell rather than straddling the edge, since the cell clips its overflow\n to keep a long header out of its neighbour. */\n &-resize {\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n width: 10px;\n cursor: col-resize;\n -webkit-tap-highlight-color: transparent;\n touch-action: none;\n\n /* The line itself, drawn on the trailing edge and revealed on hover. */\n &::after {\n content: '';\n position: absolute;\n top: 4px;\n bottom: 4px;\n right: 0;\n width: 2px;\n border-radius: 1px;\n background: var(--primary-color);\n opacity: 0;\n transition: opacity 0.12s;\n }\n\n &:hover::after,\n &:active::after {\n opacity: 1;\n }\n }\n\n /* The clickable part of a sortable header cell. Strips the button chrome and\n inherits the cell's typography, so a sortable header looks identical to a\n plain one until it's hovered. */\n &-sort {\n font: inherit;\n color: inherit;\n background: none;\n border: none;\n margin: 0;\n padding: 0;\n display: flex;\n align-items: center;\n gap: 6px;\n min-width: 0;\n max-width: 100%;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n &:focus-visible {\n outline: 1px solid var(--focus-border-color, var(--primary-color));\n outline-offset: 2px;\n }\n\n /* The cell's own ellipsis can't apply once its content is a flex button,\n so the truncation moves onto the label. */\n &-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &-icon {\n flex: none;\n font-size: 11px;\n opacity: 0.35;\n transition:\n opacity 0.15s,\n color 0.15s;\n\n &-active {\n opacity: 1;\n color: var(--primary-color);\n }\n }\n\n &:hover &-icon {\n opacity: 0.75;\n }\n\n &:hover &-icon-active {\n opacity: 1;\n }\n }\n\n &-toggle {\n background: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n padding: 4px 8px;\n color: var(--text-dark);\n display: flex;\n align-items: center;\n border-radius: var(--default-border-radius);\n transition: background 0.15s;\n\n &:hover {\n background: var(--background-accent-light);\n color: var(--text-color);\n }\n }\n }\n\n /* The entries pad themselves so a hover highlight reaches the panel edge. */\n &-toggle-panel {\n padding: 4px 0;\n }\n\n &-toggle {\n &-wrapper {\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n padding: 0 4px;\n }\n\n /* Chrome (background, shadow, radius, positioning) is provided by the\n Popover panel this renders inside — keep only sizing here. */\n &-popover {\n display: flex;\n flex-direction: column;\n min-width: 160px;\n }\n\n &-item {\n padding: 4px 12px;\n white-space: nowrap;\n transition: background 0.1s;\n font-size: 14px;\n\n /* `:focus` as well, because the panel takes the focus when the keyboard\n opens it, and the checkbox itself is the focusable element. Not\n `--background-accent-light`: it is the same colour as that panel in the\n default theme. */\n &:hover,\n &:focus {\n background: var(--background-accent);\n }\n }\n\n /* Only rendered once a column has actually been resized, so it reads as an\n undo for something the user just did rather than a permanent option. */\n &-reset {\n margin-top: 4px;\n padding: 6px 12px;\n border: none;\n border-top: 1px solid var(--border-color);\n background: none;\n font: inherit;\n font-size: 13px;\n color: var(--text-color);\n text-align: left;\n white-space: nowrap;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: background 0.1s;\n\n &:hover,\n &:focus {\n background: var(--background-accent);\n }\n }\n }\n\n /* Count badge on the column-toggle cog: how many columns the user has hidden.\n Positioned at the cog's upper-right corner; non-interactive. */\n &-column-chip {\n position: absolute;\n top: 0;\n right: 0;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--primary-color);\n color: var(--text-on-primary);\n font-size: 10px;\n font-weight: 600;\n line-height: 1;\n border-radius: 8px;\n pointer-events: none;\n }\n\n &-select-cell {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 4px;\n box-sizing: border-box;\n\n /* Only the header's select-all cell is focusable; the ones in rows are not. */\n &:focus-visible {\n outline: 1px solid var(--focus-border-color, var(--primary-color));\n outline-offset: -1px;\n }\n }\n\n &-body {\n position: relative;\n box-sizing: border-box;\n\n /* Rows are absolute with left/right 0, so they inherit this width and stay\n aligned with the header when the table is wider than the viewport. */\n width: max(100%, var(--vl-total, 0px));\n }\n\n /* The list itself holds the tab stop, so the active row cannot use a\n `:focus-visible` of its own. Ringing the list instead would mark the whole\n table rather than the row the arrow keys are on, so the list drops its own\n outline and lends it to that row. Scoped to `:focus-visible`, a mouse user\n never sees it. */\n &:focus-visible {\n outline: none;\n\n & .virtualList-row-active {\n outline: 2px solid var(--focus-border-color, var(--primary-color));\n outline-offset: -2px;\n }\n }\n\n /* A resize drag travels over the rows, and their hover highlight following the\n pointer is noise. Inert rather than a `:hover` override, which would have to\n out-specify the selected-row rule to work. The drag itself is unaffected:\n pointer capture bypasses hit testing. */\n &-resizing &-body {\n pointer-events: none;\n }\n\n &-row {\n border-bottom: 1px solid var(--border-color);\n box-sizing: border-box;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: background 0.1s;\n\n /* Isolate each row's layout/style so measuring or restyling one row can't force\n the whole list to re-layout — keeps fast scrolling smooth. */\n contain: layout style;\n\n &-no-divider {\n border-bottom: none;\n }\n\n &:hover {\n background: var(--background-accent-light);\n }\n\n /* Opt out of the hover highlight (e.g. when each row is a Card that handles\n its own hover). Declared before the `-selected` rule below, so a selected\n row's highlight still wins on hover. */\n &-no-hover:hover {\n background: transparent;\n }\n\n &-selected {\n background: var(--primary-lighter);\n\n &:hover {\n background: var(--primary-lighter);\n }\n }\n\n &-draggable {\n cursor: grab;\n\n /* Stop the mobile long-press from selecting text or showing the callout. */\n user-select: none;\n -webkit-touch-callout: none;\n\n &:active {\n cursor: grabbing;\n }\n }\n\n &-dragging {\n opacity: 0.4;\n }\n\n /* Tree-reorder `inside` drop: the dragged node becomes a child of this row,\n so highlight the whole row instead of drawing a between-rows line. */\n &-drop-inside {\n background: var(--primary-lighter);\n box-shadow: inset 0 0 0 2px var(--primary-color);\n }\n }\n\n /* Tree-reorder `before`/`after` drop line. Positioned inside the (relatively\n positioned absolute) row; `left` is set inline to the target's indent so it\n starts where the dropped content will. */\n &-drop-line {\n position: absolute;\n right: 0;\n height: 2px;\n background: var(--primary-color);\n pointer-events: none;\n z-index: 1;\n\n /* A small knob at the line's start, the usual tree drop-indicator look. */\n &::before {\n content: '';\n position: absolute;\n left: 0;\n top: 50%;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--primary-color);\n transform: translate(-50%, -50%);\n }\n\n &-before {\n top: -1px;\n }\n\n &-after {\n bottom: -1px;\n }\n }\n\n /* While a row is being dragged, suppress hover backgrounds so the pointer\n moving across rows doesn't light up the wrong one, and stop text selection.\n `touch-action: none` stops the touch drag from also scrolling the list\n (only active once the long-press has armed the drag). */\n &-reordering {\n touch-action: none;\n\n .virtualList-row {\n user-select: none;\n\n &:hover {\n background: transparent;\n }\n\n &.virtualList-row-selected:hover {\n background: var(--primary-lighter);\n }\n\n &.virtualList-row-dragging {\n background: transparent;\n }\n }\n }\n\n &-cell {\n padding: 8px 12px;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 14px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n min-width: 0;\n\n /* `fit` columns are content-sized — keep their cells on a single line so the\n content can't wrap, and so the width measurement reads the true intrinsic\n width. (Other cells are free to wrap for variable-height rows.) */\n &[data-fit-key] {\n white-space: nowrap;\n }\n }\n\n &-loading {\n &-full {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n }\n\n &-indicator {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px 0;\n }\n }\n\n /* Must stay after the declarations it undoes: both selectors are one class, so\n only source order separates them. `overflow` cannot be split per axis here\n either, because a container with `overflow-x` and `overflow-y: visible`\n computes the visible one to `auto` and hands the list back its own vertical\n scrollbar. So a frozen layout wider than the list overflows the page\n sideways instead of scrolling inside it. */\n &-windowed {\n height: auto;\n overflow: visible;\n scrollbar-gutter: auto;\n\n .virtualList-loading-full {\n height: auto;\n padding: 32px 0;\n }\n }\n}\n"],"mappings":""}
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{AccordionStyleType as e}from"./common/accordion/accordion.types.mjs";import t from"./common/configProvider/configProvider.mjs";import{useComponentDefaults as n}from"./common/configProvider/useComponentDefaults.mjs";import{useLabels as r}from"./common/configProvider/useLabels.mjs";import{usePresentationDefault as i}from"./common/configProvider/usePresentationDefault.mjs";import{Presentation as a}from"./common/configProvider/presentation.types.mjs";import{ThemeColor as o}from"./common/themeProvider/color.types.mjs";import s from"./common/accordion/accordion.mjs";import c from"./common/loading/spinnerLoading/index.mjs";import{ButtonSize as l,ButtonStyleType as u,ButtonType as d}from"./common/button/button.types.mjs";import f from"./common/ripple/ripple.mjs";import p from"./common/button/button.mjs";import m from"./common/actionButtons/actionButtons.mjs";import h from"./common/actionIcon/actionIcon.mjs";import g from"./common/scrollbarProvider/index.mjs";import{defaultTheme as _}from"./common/themeProvider/defaultTheme.mjs";import v from"./common/themeProvider/themeProvider.mjs";import{lightTheme as y}from"./common/themeProvider/lightTheme.mjs";import b from"./common/bodyEnd/bodyEnd.mjs";import x from"./common/hooks/useMediaQuery.mjs";import S from"./common/hooks/useCoarsePointer.mjs";import{useSwipeDismiss as C}from"./common/hooks/useSwipeDismiss.mjs";import{showToast as w}from"./common/toast/toastService.mjs";import T from"./common/ahroweProvider/ahroweProvider.mjs";import E from"./common/alert/alert.mjs";import D from"./common/animatedLogo/animatedLogo.mjs";import{AnimatedTextUnit as O,AnimatedTextVariant as k}from"./common/animatedText/animatedText.types.mjs";import A from"./common/animatedText/animatedText.mjs";import{BadgePosition as j,BadgeStyleType as M}from"./common/badge/badge.types.mjs";import N from"./common/badge/badge.mjs";import P from"./common/avatar/avatar.mjs";import F from"./common/avatar/avatarGroup.mjs";import I from"./common/interactableDiv/index.mjs";import{PopoverAlign as L,PopoverPlacement as R,PopoverTrigger as z}from"./common/popover/popover.types.mjs";import{tabbablesIn as B}from"./common/hooks/useFocusBoundary.mjs";import{useVisualViewportSize as V}from"./common/hooks/useVisualViewportSize.mjs";import{useOverlay as H}from"./common/hooks/useOverlay.mjs";import U from"./common/popover/popover.mjs";import W from"./common/breadcrumb/breadcrumb.mjs";import{ButtonGroupOrientation as G}from"./common/buttonGroup/buttonGroup.types.mjs";import K from"./common/buttonGroup/buttonGroup.mjs";import{dateToDay as q,dateToTime as J,dayTimeToDate as Y,dayToDate as X}from"./common/utils/day.mjs";import{CalendarView as Z}from"./common/calendar/calendar.types.mjs";import Q from"./common/emptyState/emptyState.mjs";import $ from"./common/optionPicker/optionPicker.mjs";import ee from"./common/calendar/calendar.mjs";import{CardStyleType as te}from"./common/card/card.types.mjs";import ne from"./common/card/Card.mjs";import re from"./common/card/CardHeader.mjs";import ie from"./common/card/CardMedia.mjs";import ae from"./common/card/CardContent.mjs";import oe from"./common/card/CardActions.mjs";import se from"./common/carousel/carousel.mjs";import ce from"./common/checkbox/checkbox.mjs";import{ChipStyleType as le}from"./common/chip/chip.types.mjs";import ue from"./common/chip/chip.mjs";import de from"./common/chip/chipContainer.mjs";import fe from"./common/tooltip/tooltip.mjs";import{InputIconPosition as pe,InputType as me}from"./common/input/input.types.mjs";import he from"./common/input/input.mjs";import ge from"./common/colorPicker/colorPicker.mjs";import{useScrollEdges as _e}from"./common/hooks/useScrollEdges.mjs";import ve from"./common/modal/modal.mjs";import ye,{formatHotkey as be}from"./common/hooks/useHotkeys.mjs";import{isMenuAction as xe,isMenuHeading as Se,isMenuSeparator as Ce}from"./common/menu/menu.types.mjs";import we from"./common/commandPalette/commandPalette.mjs";import Te from"./common/confirmModal/confirmModal.mjs";import Ee from"./common/hooks/useClipboard.mjs";import De from"./common/copyButton/copyButton.mjs";import{getLocale as Oe,mapLocale as ke,setLocale as Ae}from"./services/localization.mjs";import je from"./common/dropdown/dropdown.mjs";import Me from"./common/datePicker/datePicker.mjs";import{DividerOrientation as Ne,DividerTextPosition as Pe}from"./common/divider/divider.types.mjs";import Fe from"./common/divider/divider.mjs";import Ie from"./common/drawer/drawer.mjs";import{DropZoneReturnType as Le,DropZoneStatus as Re}from"./common/dropZone/dropZone.types.mjs";import ze from"./common/dropZone/dropZone.mjs";import Be from"./common/errorBoundary/errorBoundary.mjs";import Ve from"./common/fab/fab.mjs";import He from"./common/flip/flip.mjs";import{DoorSwing as Ue,OpeningKind as We,PlanIssueKind as Ge,PlanUnitSystem as Ke,WallType as qe}from"./common/floorPlan/floorPlan.types.mjs";import{MIN_OPENING_WIDTH as Je,MIN_WALL_LENGTH as Ye}from"./common/floorPlan/floorPlan.geometry.mjs";import{DEFAULT_WALL_ATTRS as Xe,addOpening as Ze,addRect as Qe,addWall as $e,cleanupPlan as et,detachWall as tt,dissolveNode as nt,mergeNodes as rt,moveNode as it,removeOpening as at,removeWall as ot,scalePlan as st,splitWall as ct,transformPlan as lt,updateOpening as ut,validatePlan as dt,wallLength as ft,weldShortWalls as pt}from"./common/floorPlan/floorPlan.graph.mjs";import{MIN_FLOOR_HEIGHT as mt,addFloor as ht,duplicateFloor as gt,emptyFloor as _t,emptyFloorPlan as vt,floorBelow as yt,floorBounds as bt,floorIndex as xt,getFloor as St,moveFloor as Ct,removeFloor as wt,renameFloor as Tt,setFloor as Et,setFloorHeight as Dt,updateFloor as Ot}from"./common/floorPlan/floorPlan.plan.mjs";import{deriveFaces as kt,nodeDegrees as At}from"./common/floorPlan/floorPlan.faces.mjs";import{commitDerivation as jt,derivePlan as Mt,pruneUnmatchedRooms as Nt,roomAtPoint as Pt}from"./common/floorPlan/floorPlan.rooms.mjs";import{buildWallPaths as Ft,openingGeometry as It,wallCentrelineSpans as Lt}from"./common/floorPlan/floorPlan.path.mjs";import{HIT_PX as Rt,HIT_PX_COARSE as zt,hitTest as Bt,selectionsEqual as Vt,worldTolerances as Ht}from"./common/floorPlan/floorPlan.hit.mjs";import{DEFAULT_SNAP_OPTIONS as Ut,SnapKind as Wt,clientToWorld as Gt,resolveSnap as Kt}from"./common/floorPlan/floorPlan.snap.mjs";import{PLAN_FORMAT_VERSION as qt,planFromJson as Jt,planToJson as Yt}from"./common/floorPlan/floorPlan.json.mjs";import{buildPlanMesh as Xt}from"./common/floorPlan/floorPlan.mesh.mjs";import Zt from"./common/iconPicker/iconPicker.mjs";import Qt from"./common/idleManager/idleManager.mjs";import $t from"./common/inputDropdown/inputDropdown.mjs";import en from"./common/kanbanBoard/KanbanColumn.mjs";import tn from"./common/kanbanBoard/KanbanBoard.mjs";import nn from"./common/searchInput/searchInput.mjs";import rn from"./common/klipyPicker/klipyPicker.mjs";import an from"./common/menu/menu.mjs";import{menuHotkeys as on}from"./common/menu/menuHotkeys.mjs";import sn from"./common/multiSelect/multiSelect.mjs";import cn from"./common/numberInput/index.mjs";import{OtpInputCharset as ln}from"./common/otpInput/otpInput.types.mjs";import un from"./common/otpInput/otpInput.mjs";import dn from"./common/overscroll/overscroll.mjs";import fn from"./common/pagination/pagination.mjs";import pn from"./common/progressBar/progressBar.mjs";import{RadioGroupOrientation as mn}from"./common/radioGroup/radioGroup.types.mjs";import hn from"./common/radioGroup/radioGroup.mjs";import gn from"./common/rating/rating.mjs";import _n from"./common/revealLens/revealLens.mjs";import vn from"./common/roomDrawer/roomDrawer.mjs";import yn from"./common/roomViewer/roomViewer.mjs";import{ScrollFadeAxis as bn}from"./common/scrollFade/scrollFade.types.mjs";import xn from"./common/scrollFade/scrollFade.mjs";import{SectionHeaderSize as Sn}from"./common/sectionHeader/sectionHeader.types.mjs";import Cn from"./common/sectionHeader/sectionHeader.mjs";import{SkeletonAnimation as wn,SkeletonVariant as Tn}from"./common/skeleton/skeleton.types.mjs";import En from"./common/skeleton/skeleton.mjs";import Dn from"./common/slider/slider.mjs";import On from"./common/splitButton/splitButton.mjs";import{StepperAlignment as kn,StepperCollapse as An,StepperLabelPlacement as jn,StepperStyleType as Mn}from"./common/stepper/stepper.types.mjs";import Nn from"./common/stepper/stepper.mjs";import Pn from"./common/sticky/sticky.mjs";import Fn from"./common/switch/switch.mjs";import In from"./common/tabHeader/tabHeader.mjs";import Ln from"./common/textarea/textarea.mjs";import{useTheme as Rn}from"./common/themeProvider/useTheme.mjs";import zn,{TiltGroupContext as Bn,useTiltGroup as Vn}from"./common/tiltGroup/tiltGroup.mjs";import{defaultTiltEasing as Hn}from"./common/tilt/tiltMath.mjs";import Un from"./common/tilt/tilt.mjs";import Wn from"./common/timeInput/timeInput.mjs";import{TimelineAlignment as Gn}from"./common/timeline/timeline.types.mjs";import Kn from"./common/timeline/timeline.mjs";import qn from"./common/timer/timer.mjs";import Jn from"./common/virtualList/virtualList.mjs";import{flattenTree as Yn}from"./common/tree/flattenTree.mjs";import Xn from"./common/tree/tree.mjs";import{WeatherType as Zn}from"./common/weatherIcon/weatherIcon.types.mjs";import Qn from"./common/weatherIcon/weatherIcon.mjs";import $n from"./common/wizard/wizard.mjs";import er from"./services/formValidation/FormValidatorGroupWithForm.mjs";import tr from"./services/formValidation/validatableComponent.mjs";import{useFormValidatorGroup as nr}from"./services/formValidation/useFormValidatorGroup.mjs";import{FormValidator as rr,Validators as ir,useFormValidator as ar}from"./services/formValidation/index.mjs";import{hasEightPasswordChars as or,hasOnePasswordDigit as sr,hasOnePasswordLetter as cr,isBic as lr,isDate as ur,isDay as dr,isEmail as fr,isISODate as pr,isNumber as mr,isPassword as hr,isURL as gr}from"@ahrowe/form-validation";export{s as Accordion,e as AccordionStyleType,m as ActionButtons,h as ActionIcon,T as AhroweProvider,E as Alert,D as AnimatedLogo,A as AnimatedText,O as AnimatedTextUnit,k as AnimatedTextVariant,P as Avatar,F as AvatarGroup,N as Badge,j as BadgePosition,M as BadgeStyleType,b as BodyEnd,W as Breadcrumb,p as Button,K as ButtonGroup,G as ButtonGroupOrientation,l as ButtonSize,u as ButtonStyleType,d as ButtonType,ee as Calendar,Z as CalendarView,ne as Card,oe as CardActions,ae as CardContent,re as CardHeader,ie as CardMedia,te as CardStyleType,se as Carousel,ce as Checkbox,ue as Chip,de as ChipContainer,le as ChipStyleType,ge as ColorPicker,we as CommandPalette,t as ConfigProvider,Te as ConfirmModal,De as CopyButton,Ut as DEFAULT_SNAP_OPTIONS,Xe as DEFAULT_WALL_ATTRS,Me as DatePicker,Fe as Divider,Ne as DividerOrientation,Pe as DividerTextPosition,Ue as DoorSwing,Ie as Drawer,ze as DropZone,Le as DropZoneReturnType,Re as DropZoneStatus,je as Dropdown,Q as EmptyState,Be as ErrorBoundary,Ve as Fab,He as Flip,rr as FormValidator,er as FormValidatorGroup,Rt as HIT_PX,zt as HIT_PX_COARSE,Zt as IconPicker,Qt as IdleManager,he as Input,$t as InputDropdown,pe as InputIconPosition,me as InputType,I as InteractableDiv,tn as KanbanBoard,en as KanbanColumn,rn as KlipyPicker,mt as MIN_FLOOR_HEIGHT,Je as MIN_OPENING_WIDTH,Ye as MIN_WALL_LENGTH,an as Menu,ve as Modal,sn as MultiSelect,cn as NumberInput,We as OpeningKind,$ as OptionPicker,un as OtpInput,ln as OtpInputCharset,dn as Overscroll,qt as PLAN_FORMAT_VERSION,fn as Pagination,Ge as PlanIssueKind,Ke as PlanUnitSystem,U as Popover,L as PopoverAlign,R as PopoverPlacement,z as PopoverTrigger,a as Presentation,pn as ProgressBar,hn as RadioGroup,mn as RadioGroupOrientation,gn as Rating,_n as RevealLens,f as Ripple,vn as RoomDrawer,yn as RoomViewer,xn as ScrollFade,bn as ScrollFadeAxis,g as ScrollbarProvider,nn as SearchInput,Cn as SectionHeader,Sn as SectionHeaderSize,En as Skeleton,wn as SkeletonAnimation,Tn as SkeletonVariant,Dn as Slider,Wt as SnapKind,c as SpinnerLoading,On as SplitButton,Nn as Stepper,kn as StepperAlignment,An as StepperCollapse,jn as StepperLabelPlacement,Mn as StepperStyleType,Pn as Sticky,Fn as Switch,In as TabHeader,Ln as Textarea,o as ThemeColor,v as ThemeProvider,Un as Tilt,zn as TiltGroup,Bn as TiltGroupContext,Wn as TimeInput,Kn as Timeline,Gn as TimelineAlignment,qn as Timer,fe as Tooltip,Xn as Tree,tr as ValidatableComponent,ir as Validators,Jn as VirtualList,qe as WallType,Qn as WeatherIcon,Zn as WeatherType,$n as Wizard,ht as addFloor,Ze as addOpening,Qe as addRect,$e as addWall,Xt as buildPlanMesh,Ft as buildWallPaths,et as cleanupPlan,Gt as clientToWorld,jt as commitDerivation,q as dateToDay,J as dateToTime,Y as dayTimeToDate,X as dayToDate,_ as defaultTheme,Hn as defaultTiltEasing,kt as deriveFaces,Mt as derivePlan,tt as detachWall,nt as dissolveNode,gt as duplicateFloor,_t as emptyFloor,vt as emptyFloorPlan,Yn as flattenTree,yt as floorBelow,bt as floorBounds,xt as floorIndex,be as formatHotkey,St as getFloor,Oe as getLocale,or as hasEightPasswordChars,sr as hasOnePasswordDigit,cr as hasOnePasswordLetter,Bt as hitTest,lr as isBic,ur as isDate,dr as isDay,fr as isEmail,pr as isISODate,xe as isMenuAction,Se as isMenuHeading,Ce as isMenuSeparator,mr as isNumber,hr as isPassword,gr as isURL,y as lightTheme,ke as mapLocale,on as menuHotkeys,rt as mergeNodes,Ct as moveFloor,it as moveNode,At as nodeDegrees,It as openingGeometry,Jt as planFromJson,Yt as planToJson,Nt as pruneUnmatchedRooms,wt as removeFloor,at as removeOpening,ot as removeWall,Tt as renameFloor,Kt as resolveSnap,Pt as roomAtPoint,st as scalePlan,Vt as selectionsEqual,Et as setFloor,Dt as setFloorHeight,Ae as setLocale,w as showToast,ct as splitWall,B as tabbablesIn,lt as transformPlan,Ot as updateFloor,ut as updateOpening,Ee as useClipboard,S as useCoarsePointer,n as useComponentDefaults,ar as useFormValidator,nr as useFormValidatorGroup,ye as useHotkeys,r as useLabels,x as useMediaQuery,H as useOverlay,i as usePresentationDefault,_e as useScrollEdges,C as useSwipeDismiss,Rn as useTheme,Vn as useTiltGroup,V as useVisualViewportSize,dt as validatePlan,Lt as wallCentrelineSpans,ft as wallLength,pt as weldShortWalls,Ht as worldTolerances};
|
|
1
|
+
"use client";import{AccordionStyleType as e}from"./common/accordion/accordion.types.mjs";import t from"./common/configProvider/configProvider.mjs";import{useComponentDefaults as n}from"./common/configProvider/useComponentDefaults.mjs";import{useLabels as r}from"./common/configProvider/useLabels.mjs";import{usePresentationDefault as i}from"./common/configProvider/usePresentationDefault.mjs";import{Presentation as a}from"./common/configProvider/presentation.types.mjs";import{ThemeColor as o}from"./common/themeProvider/color.types.mjs";import s from"./common/accordion/accordion.mjs";import{LoaderType as c}from"./common/loader/loader.types.mjs";import l from"./common/loader/loader.mjs";import{ButtonSize as u,ButtonStyleType as d,ButtonType as f}from"./common/button/button.types.mjs";import p from"./common/ripple/ripple.mjs";import m from"./common/button/button.mjs";import h from"./common/actionButtons/actionButtons.mjs";import g from"./common/actionIcon/actionIcon.mjs";import _ from"./common/scrollbarProvider/index.mjs";import{defaultTheme as v}from"./common/themeProvider/defaultTheme.mjs";import y from"./common/themeProvider/themeProvider.mjs";import{lightTheme as b}from"./common/themeProvider/lightTheme.mjs";import x from"./common/bodyEnd/bodyEnd.mjs";import S from"./common/hooks/useMediaQuery.mjs";import C from"./common/hooks/useCoarsePointer.mjs";import{useSwipeDismiss as w}from"./common/hooks/useSwipeDismiss.mjs";import{showToast as T}from"./common/toast/toastService.mjs";import E from"./common/ahroweProvider/ahroweProvider.mjs";import D from"./common/alert/alert.mjs";import O from"./common/animatedLogo/animatedLogo.mjs";import{AnimatedTextUnit as k,AnimatedTextVariant as A}from"./common/animatedText/animatedText.types.mjs";import j from"./common/animatedText/animatedText.mjs";import{BadgePosition as M,BadgeStyleType as N}from"./common/badge/badge.types.mjs";import P from"./common/badge/badge.mjs";import F from"./common/avatar/avatar.mjs";import I from"./common/avatar/avatarGroup.mjs";import L from"./common/interactableDiv/index.mjs";import{PopoverAlign as R,PopoverPlacement as z,PopoverTrigger as B}from"./common/popover/popover.types.mjs";import{tabbablesIn as V}from"./common/hooks/useFocusBoundary.mjs";import{useVisualViewportSize as H}from"./common/hooks/useVisualViewportSize.mjs";import{useOverlay as U}from"./common/hooks/useOverlay.mjs";import W from"./common/popover/popover.mjs";import G from"./common/breadcrumb/breadcrumb.mjs";import{ButtonGroupOrientation as K}from"./common/buttonGroup/buttonGroup.types.mjs";import q from"./common/buttonGroup/buttonGroup.mjs";import{dateToDay as J,dateToTime as Y,dayTimeToDate as X,dayToDate as Z}from"./common/utils/day.mjs";import{CalendarView as Q}from"./common/calendar/calendar.types.mjs";import $ from"./common/emptyState/emptyState.mjs";import ee from"./common/optionPicker/optionPicker.mjs";import te from"./common/calendar/calendar.mjs";import{CardStyleType as ne}from"./common/card/card.types.mjs";import re from"./common/card/Card.mjs";import ie from"./common/card/CardHeader.mjs";import ae from"./common/card/CardMedia.mjs";import oe from"./common/card/CardContent.mjs";import se from"./common/card/CardActions.mjs";import ce from"./common/carousel/carousel.mjs";import le from"./common/checkbox/checkbox.mjs";import{ChipStyleType as ue}from"./common/chip/chip.types.mjs";import de from"./common/chip/chip.mjs";import fe from"./common/chip/chipContainer.mjs";import pe from"./common/tooltip/tooltip.mjs";import{InputIconPosition as me,InputType as he}from"./common/input/input.types.mjs";import ge from"./common/input/input.mjs";import _e from"./common/colorPicker/colorPicker.mjs";import{useScrollEdges as ve}from"./common/hooks/useScrollEdges.mjs";import ye from"./common/modal/modal.mjs";import be,{formatHotkey as xe}from"./common/hooks/useHotkeys.mjs";import{isMenuAction as Se,isMenuHeading as Ce,isMenuSeparator as we}from"./common/menu/menu.types.mjs";import Te from"./common/commandPalette/commandPalette.mjs";import Ee from"./common/confirmModal/confirmModal.mjs";import De from"./common/hooks/useClipboard.mjs";import Oe from"./common/copyButton/copyButton.mjs";import{getLocale as ke,mapLocale as Ae,setLocale as je}from"./services/localization.mjs";import Me from"./common/dropdown/dropdown.mjs";import Ne from"./common/datePicker/datePicker.mjs";import{DividerOrientation as Pe,DividerTextPosition as Fe}from"./common/divider/divider.types.mjs";import Ie from"./common/divider/divider.mjs";import Le from"./common/drawer/drawer.mjs";import{DropZoneReturnType as Re,DropZoneStatus as ze}from"./common/dropZone/dropZone.types.mjs";import Be from"./common/dropZone/dropZone.mjs";import Ve from"./common/errorBoundary/errorBoundary.mjs";import He from"./common/fab/fab.mjs";import Ue from"./common/flip/flip.mjs";import{DoorSwing as We,OpeningKind as Ge,PlanIssueKind as Ke,PlanUnitSystem as qe,WallType as Je}from"./common/floorPlan/floorPlan.types.mjs";import{MIN_OPENING_WIDTH as Ye,MIN_WALL_LENGTH as Xe}from"./common/floorPlan/floorPlan.geometry.mjs";import{DEFAULT_WALL_ATTRS as Ze,addOpening as Qe,addRect as $e,addWall as et,cleanupPlan as tt,detachWall as nt,dissolveNode as rt,mergeNodes as it,moveNode as at,removeOpening as ot,removeWall as st,scalePlan as ct,splitWall as lt,transformPlan as ut,updateOpening as dt,validatePlan as ft,wallLength as pt,weldShortWalls as mt}from"./common/floorPlan/floorPlan.graph.mjs";import{MIN_FLOOR_HEIGHT as ht,addFloor as gt,duplicateFloor as _t,emptyFloor as vt,emptyFloorPlan as yt,floorBelow as bt,floorBounds as xt,floorIndex as St,getFloor as Ct,moveFloor as wt,removeFloor as Tt,renameFloor as Et,setFloor as Dt,setFloorHeight as Ot,updateFloor as kt}from"./common/floorPlan/floorPlan.plan.mjs";import{deriveFaces as At,nodeDegrees as jt}from"./common/floorPlan/floorPlan.faces.mjs";import{commitDerivation as Mt,derivePlan as Nt,pruneUnmatchedRooms as Pt,roomAtPoint as Ft}from"./common/floorPlan/floorPlan.rooms.mjs";import{buildWallPaths as It,openingGeometry as Lt,wallCentrelineSpans as Rt}from"./common/floorPlan/floorPlan.path.mjs";import{HIT_PX as zt,HIT_PX_COARSE as Bt,hitTest as Vt,selectionsEqual as Ht,worldTolerances as Ut}from"./common/floorPlan/floorPlan.hit.mjs";import{DEFAULT_SNAP_OPTIONS as Wt,SnapKind as Gt,clientToWorld as Kt,resolveSnap as qt}from"./common/floorPlan/floorPlan.snap.mjs";import{PLAN_FORMAT_VERSION as Jt,planFromJson as Yt,planToJson as Xt}from"./common/floorPlan/floorPlan.json.mjs";import{buildPlanMesh as Zt}from"./common/floorPlan/floorPlan.mesh.mjs";import Qt from"./common/iconPicker/iconPicker.mjs";import $t from"./common/idleManager/idleManager.mjs";import en from"./common/inputDropdown/inputDropdown.mjs";import tn from"./common/kanbanBoard/KanbanColumn.mjs";import nn from"./common/kanbanBoard/KanbanBoard.mjs";import rn from"./common/searchInput/searchInput.mjs";import an from"./common/klipyPicker/klipyPicker.mjs";import on from"./common/loadingOverlay/loadingOverlay.mjs";import sn from"./common/menu/menu.mjs";import{menuHotkeys as cn}from"./common/menu/menuHotkeys.mjs";import ln from"./common/multiSelect/multiSelect.mjs";import un from"./common/numberInput/index.mjs";import{OtpInputCharset as dn}from"./common/otpInput/otpInput.types.mjs";import fn from"./common/otpInput/otpInput.mjs";import pn from"./common/overscroll/overscroll.mjs";import mn from"./common/pagination/pagination.mjs";import hn from"./common/progressBar/progressBar.mjs";import{RadioGroupOrientation as gn}from"./common/radioGroup/radioGroup.types.mjs";import _n from"./common/radioGroup/radioGroup.mjs";import vn from"./common/rating/rating.mjs";import yn from"./common/revealLens/revealLens.mjs";import bn from"./common/roomDrawer/roomDrawer.mjs";import xn from"./common/roomViewer/roomViewer.mjs";import{ScrollFadeAxis as Sn}from"./common/scrollFade/scrollFade.types.mjs";import Cn from"./common/scrollFade/scrollFade.mjs";import{SectionHeaderSize as wn}from"./common/sectionHeader/sectionHeader.types.mjs";import Tn from"./common/sectionHeader/sectionHeader.mjs";import{SkeletonAnimation as En,SkeletonVariant as Dn}from"./common/skeleton/skeleton.types.mjs";import On from"./common/skeleton/skeleton.mjs";import kn from"./common/slider/slider.mjs";import An from"./common/splitButton/splitButton.mjs";import{StepperAlignment as jn,StepperCollapse as Mn,StepperLabelPlacement as Nn,StepperStyleType as Pn}from"./common/stepper/stepper.types.mjs";import Fn from"./common/stepper/stepper.mjs";import In from"./common/sticky/sticky.mjs";import Ln from"./common/switch/switch.mjs";import Rn from"./common/tabHeader/tabHeader.mjs";import zn from"./common/textarea/textarea.mjs";import{useTheme as Bn}from"./common/themeProvider/useTheme.mjs";import Vn,{TiltGroupContext as Hn,useTiltGroup as Un}from"./common/tiltGroup/tiltGroup.mjs";import{defaultTiltEasing as Wn}from"./common/tilt/tiltMath.mjs";import Gn from"./common/tilt/tilt.mjs";import Kn from"./common/timeInput/timeInput.mjs";import{TimelineAlignment as qn}from"./common/timeline/timeline.types.mjs";import Jn from"./common/timeline/timeline.mjs";import Yn from"./common/timer/timer.mjs";import Xn from"./common/virtualList/virtualList.mjs";import{flattenTree as Zn}from"./common/tree/flattenTree.mjs";import Qn from"./common/tree/tree.mjs";import{WeatherType as $n}from"./common/weatherIcon/weatherIcon.types.mjs";import er from"./common/weatherIcon/weatherIcon.mjs";import tr from"./common/wizard/wizard.mjs";import nr from"./services/formValidation/FormValidatorGroupWithForm.mjs";import rr from"./services/formValidation/validatableComponent.mjs";import{useFormValidatorGroup as ir}from"./services/formValidation/useFormValidatorGroup.mjs";import{FormValidator as ar,Validators as or,useFormValidator as sr}from"./services/formValidation/index.mjs";import{hasEightPasswordChars as cr,hasOnePasswordDigit as lr,hasOnePasswordLetter as ur,isBic as dr,isDate as fr,isDay as pr,isEmail as mr,isISODate as hr,isNumber as gr,isPassword as _r,isURL as vr}from"@ahrowe/form-validation";export{s as Accordion,e as AccordionStyleType,h as ActionButtons,g as ActionIcon,E as AhroweProvider,D as Alert,O as AnimatedLogo,j as AnimatedText,k as AnimatedTextUnit,A as AnimatedTextVariant,F as Avatar,I as AvatarGroup,P as Badge,M as BadgePosition,N as BadgeStyleType,x as BodyEnd,G as Breadcrumb,m as Button,q as ButtonGroup,K as ButtonGroupOrientation,u as ButtonSize,d as ButtonStyleType,f as ButtonType,te as Calendar,Q as CalendarView,re as Card,se as CardActions,oe as CardContent,ie as CardHeader,ae as CardMedia,ne as CardStyleType,ce as Carousel,le as Checkbox,de as Chip,fe as ChipContainer,ue as ChipStyleType,_e as ColorPicker,Te as CommandPalette,t as ConfigProvider,Ee as ConfirmModal,Oe as CopyButton,Wt as DEFAULT_SNAP_OPTIONS,Ze as DEFAULT_WALL_ATTRS,Ne as DatePicker,Ie as Divider,Pe as DividerOrientation,Fe as DividerTextPosition,We as DoorSwing,Le as Drawer,Be as DropZone,Re as DropZoneReturnType,ze as DropZoneStatus,Me as Dropdown,$ as EmptyState,Ve as ErrorBoundary,He as Fab,Ue as Flip,ar as FormValidator,nr as FormValidatorGroup,zt as HIT_PX,Bt as HIT_PX_COARSE,Qt as IconPicker,$t as IdleManager,ge as Input,en as InputDropdown,me as InputIconPosition,he as InputType,L as InteractableDiv,nn as KanbanBoard,tn as KanbanColumn,an as KlipyPicker,l as Loader,c as LoaderType,on as LoadingOverlay,ht as MIN_FLOOR_HEIGHT,Ye as MIN_OPENING_WIDTH,Xe as MIN_WALL_LENGTH,sn as Menu,ye as Modal,ln as MultiSelect,un as NumberInput,Ge as OpeningKind,ee as OptionPicker,fn as OtpInput,dn as OtpInputCharset,pn as Overscroll,Jt as PLAN_FORMAT_VERSION,mn as Pagination,Ke as PlanIssueKind,qe as PlanUnitSystem,W as Popover,R as PopoverAlign,z as PopoverPlacement,B as PopoverTrigger,a as Presentation,hn as ProgressBar,_n as RadioGroup,gn as RadioGroupOrientation,vn as Rating,yn as RevealLens,p as Ripple,bn as RoomDrawer,xn as RoomViewer,Cn as ScrollFade,Sn as ScrollFadeAxis,_ as ScrollbarProvider,rn as SearchInput,Tn as SectionHeader,wn as SectionHeaderSize,On as Skeleton,En as SkeletonAnimation,Dn as SkeletonVariant,kn as Slider,Gt as SnapKind,An as SplitButton,Fn as Stepper,jn as StepperAlignment,Mn as StepperCollapse,Nn as StepperLabelPlacement,Pn as StepperStyleType,In as Sticky,Ln as Switch,Rn as TabHeader,zn as Textarea,o as ThemeColor,y as ThemeProvider,Gn as Tilt,Vn as TiltGroup,Hn as TiltGroupContext,Kn as TimeInput,Jn as Timeline,qn as TimelineAlignment,Yn as Timer,pe as Tooltip,Qn as Tree,rr as ValidatableComponent,or as Validators,Xn as VirtualList,Je as WallType,er as WeatherIcon,$n as WeatherType,tr as Wizard,gt as addFloor,Qe as addOpening,$e as addRect,et as addWall,Zt as buildPlanMesh,It as buildWallPaths,tt as cleanupPlan,Kt as clientToWorld,Mt as commitDerivation,J as dateToDay,Y as dateToTime,X as dayTimeToDate,Z as dayToDate,v as defaultTheme,Wn as defaultTiltEasing,At as deriveFaces,Nt as derivePlan,nt as detachWall,rt as dissolveNode,_t as duplicateFloor,vt as emptyFloor,yt as emptyFloorPlan,Zn as flattenTree,bt as floorBelow,xt as floorBounds,St as floorIndex,xe as formatHotkey,Ct as getFloor,ke as getLocale,cr as hasEightPasswordChars,lr as hasOnePasswordDigit,ur as hasOnePasswordLetter,Vt as hitTest,dr as isBic,fr as isDate,pr as isDay,mr as isEmail,hr as isISODate,Se as isMenuAction,Ce as isMenuHeading,we as isMenuSeparator,gr as isNumber,_r as isPassword,vr as isURL,b as lightTheme,Ae as mapLocale,cn as menuHotkeys,it as mergeNodes,wt as moveFloor,at as moveNode,jt as nodeDegrees,Lt as openingGeometry,Yt as planFromJson,Xt as planToJson,Pt as pruneUnmatchedRooms,Tt as removeFloor,ot as removeOpening,st as removeWall,Et as renameFloor,qt as resolveSnap,Ft as roomAtPoint,ct as scalePlan,Ht as selectionsEqual,Dt as setFloor,Ot as setFloorHeight,je as setLocale,T as showToast,lt as splitWall,V as tabbablesIn,ut as transformPlan,kt as updateFloor,dt as updateOpening,De as useClipboard,C as useCoarsePointer,n as useComponentDefaults,sr as useFormValidator,ir as useFormValidatorGroup,be as useHotkeys,r as useLabels,S as useMediaQuery,U as useOverlay,i as usePresentationDefault,ve as useScrollEdges,w as useSwipeDismiss,Bn as useTheme,Un as useTiltGroup,H as useVisualViewportSize,ft as validatePlan,Rt as wallCentrelineSpans,pt as wallLength,mt as weldShortWalls,Ut as worldTolerances};
|