#434

2026-10-28 21:58:24 +09:00
@@ -25,9 +25,7 @@ const sameGroups = (left: Groups, right: Groups): boolean =>

 const Group = ({ id, children }: { id: string; children: ReactNode }) => {
  const drop = useDroppable ({ id: `group:${id}` })
-  return <div ref={drop.setNodeRef} className={cn (
-      'min-w-0 rounded',
-      drop.isOver && 'ring-1 ring-blue-500 dark:ring-blue-400')}>{children}</div>
+  return <div ref={drop.setNodeRef} className="min-w-0 rounded">{children}</div>
 }


@@ -36,12 +34,13 @@ const SortableList = (
    groups: Groups; name: (id: string) => Name
    handleName?: (id: string) => Name
    renderItem: (id: string, group: string) => ReactNode
-    renderGroup: (id: string, content: ReactNode) => ReactNode
+    renderGroup: (id: string, content: ReactNode, over: boolean) => ReactNode
    onChange: (groups: Groups) => void; fixed?: string[] },
 ) => {
  const drag = useRef<{ id: string; groups: Groups } | null> (null)
  const scope = useId ()
  const [active, setActive] = useState<string | null> (null)
+  const [overGroup, setOverGroup] = useState<string | null> (null)
  const motion = useClientMotion ()
  const accessibleName = handleName ?? name
  const sensors = useSensors (
@@ -86,12 +85,15 @@ const SortableList = (
  const reset = () => {
    drag.current = null
    setActive (null)
+    setOverGroup (null)
  }
  return <DndContext sensors={sensors} collisionDetection={args => {
      const hits = pointerWithin (args)
-      const available = hits.find (hit => hit.id === 'group:available')
-      return owner (String (args.active.id), groups) !== 'available'
-          && available != null ? [available] : closestCenter (args)
+      const group = hits.find (hit => String (hit.id).startsWith ('group:'))
+      const groupName = group?.id.toString ().slice (6)
+      const item = groupName != null && hits.some (hit =>
+	  owner (String (hit.id), groups) === groupName)
+      return group != null && !item ? [group] : closestCenter (args)
    }}
      accessibility={{ announcements: {
          onDragStart: event => accessibleName (String (event.active.id)).text,
@@ -106,6 +108,12 @@ const SortableList = (
 	const id = String (event.active.id)
 	drag.current = { id, groups }
 	setActive (id)
+	setOverGroup (owner (id, groups) ?? null)
+	  }} onDragOver={event => {
+	const id = event.over?.id.toString ()
+	const group = id == null ? null
+	    : (id.startsWith ('group:') ? id.slice (6) : owner (id, groups) ?? null)
+	setOverGroup (previous => previous === group ? previous : group)
      }} onDragCancel={reset} onDragEnd={event => {
        const session = drag.current
        reset ()
@@ -125,7 +133,7 @@ const SortableList = (
          {renderItem (id, group)}
          </SortableItem>)}
        </div>
-      </SortableContext>)}
+      </SortableContext>, overGroup === group)}
    </Group>)}
    {typeof document !== 'undefined' && createPortal (
 	<DragOverlay adjustScale={false}
@@ -49,9 +49,10 @@ const CountsAxes = ({ params, update }: {
    commit (next)
  }
  return <SortableList groups={groups} name={name} onChange={commit}
-      renderGroup={(id, content) => <fieldset className="mb-2 min-w-0">
+      renderGroup={(id, content, over) => <fieldset className="mb-2 min-w-0">
        <legend>{label (id === 'available' ? 'axisItems' : id)}</legend>
-        <div className="rounded border dark:border-slate-700">{content}</div>
+        <div className={cn ('rounded border dark:border-slate-700',
+	    over && 'ring-1 ring-blue-500 dark:ring-blue-400')}>{content}</div>
      </fieldset>} renderItem={(id, group) => {
        const axis = axes.find (axis => axis.field === id)
 	return <div className={cn ('flex items-center gap-2 text-sm',
@@ -83,14 +83,13 @@ const scrollToCell = (table: HTMLTableElement, point: Point, previous: Point) =>


 const CountsSelectableTable = (
-    { family, columns, identity, children, className, name, copyTable, stretched = false }: {
+    { family, columns, identity, children, className, name, copyTable }: {
 	family: string
 	columns: string[]
 	identity: string
 	children: ReactNode
 	className?: string
 	name?: { text: string; language: string }
-	stretched?: boolean
 	copyTable?: () => CountsClipboardTable },
 ) => {
  const id = useId ()
@@ -383,15 +382,13 @@ const CountsSelectableTable = (
    }
  }
  const totalWidth = columns.reduce ((sum, key) => sum + layout.width (family, key), 0)
-  const flexible = stretched ? columns.filter (key => !layout.custom (family, key)).length : 0
  return (
      <CountsTableScope.Provider value={family}>
 	<table ref={root} role="grid" tabIndex={0} aria-multiselectable="true"
 	    aria-label={name?.text ?? message ('selection.table').text}
 	    aria-describedby={`${id}-hint`}
 	   
-	    style={{ tableLayout: 'fixed', minWidth: totalWidth,
-		width: flexible > 0 ? '100%' : totalWidth }}
+	    style={{ tableLayout: 'fixed', minWidth: totalWidth, width: totalWidth }}
 	    className={cn ('counts-grid select-none border-separate border-spacing-0 outline-none',
 		'focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-500',
 		'dark:focus-visible:outline-blue-400',
@@ -618,10 +615,8 @@ const CountsSelectableTable = (
 	    <span id={`${id}-hint`} className="sr-only">{label ('selection.hint')}</span>
 	    <span role="status">{textCell != null && label ('selection.textMode')}</span>
 	  </caption>
-	  <colgroup>{columns.map (key => (
-	      <col key={key} style={{ width: flexible > 0 && !layout.custom (family, key)
-		  ? `calc(${layout.width (family, key)}px + (100% - ${totalWidth}px) / ${flexible})`
-		  : layout.width (family, key) }}/>))}</colgroup>
+	  <colgroup>{columns.map (key => <col key={key}
+	      style={{ width: layout.width (family, key) }}/>)}</colgroup>
 	  {children}
 	</table>
 	{textCell != null && caret != null && caret.cell === textCell && createPortal (
@@ -36,10 +36,11 @@ const CountsSummaryTable = (
  const columnHeaders: CountsPivotHeader[] = data.columnHeaders
      ?? (data.columnValues ?? [[]]).map (values => ({ values, kind: 'data' }))
  const sorts = readCountSort (params.get ('sort'))
+  const timezone = params.get ('timezone') ?? 'UTC'
  const change = (key: string, additive: boolean) => update (
      'sort', writeCountSort (changeCountSort (sorts, key, additive)))
  const display = (value: string | number | null, axis: CountsAxis, index: number) =>
-      countsSummaryValue (value, axis, index, data, locale)
+      countsSummaryValue (value, axis, index, data, locale, timezone)
  const aggregateLabel = (header: CountsPivotHeader) => message (
      header.labelKey ?? (header.kind === 'grand_total' ? (rows.length + cols.length === 1
          ? 'singleTotal' : 'grandTotal') : 'subtotal')).text
@@ -227,7 +228,6 @@ const CountsSummaryTable = (
  }
  return <div className="min-h-0 flex-1 overflow-auto" data-counts-results aria-busy={pending}>
    <CountsSelectableTable family={`pivot_${resource}`} columns={keys}
-	stretched={keys.filter (key => key !== 'row_number').length > 1}
        copyTable={() => ({ columns: keys.map ((_, index) => ({ label: headingRows[0][index] })),
            headerRows: headingRows, rows: matrix })}
        identity={`${countsRequestParams (params)}:${JSON.stringify (keys)}`}
@@ -295,7 +295,8 @@ const CountsSummaryResults = (props: Parameters<typeof CountsSummaryTable>[0]) =
  const dragIds = Object.fromEntries (groups.map ((group, index) => [group, ids[index]]))
  return <SortableColumns ids={ids} name={id => ({
      text: countsSummaryValue (JSON.parse (groups[ids.indexOf (id)])[0], columns[0],
-          props.data.rows?.length ?? 0, props.data, locale), language: message ('count').language })}
+          props.data.rows?.length ?? 0, props.data, locale,
+          props.params.get ('timezone') ?? 'UTC'), language: message ('count').language })}
      onChange={order => props.update ('column_order', encodeCountState ('column_order',
          order.map (id => ({ value: JSON.parse (groups[ids.indexOf (id)])[0] }))))}>
    {order => {