@dxos/react-ui-stack 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/src/components/CardStack/CardStack.tsx

@@ -1,196 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentPropsWithoutRef, forwardRef } from 'react';
-
-import type { ThemedClassName } from '@dxos/react-ui';
-import { Card } from '@dxos/react-ui-mosaic';
-import { cardDefaultInlineSize, mx } from '@dxos/ui-theme';
-
-import { Stack, type StackProps, railGridHorizontalContainFitContent } from '../Stack';
-
-/**
- * This is `cardDefaultInlineSize` plus 2 times the sum of the inner and outer spacing applied by CardStack on the inline axis.
- */
-const cardStackDefaultInlineSizeRem = cardDefaultInlineSize + 2.125;
-
-//
-// Root
-//
-
-const cardStackRoot = 'flex flex-col';
-
-// TODO(burdon): Root should be headless.
-const CardStackRoot = forwardRef<HTMLDivElement, SharedCardStackProps>(
-  ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : 'div';
-    const rootProps = asChild
-      ? { classNames: [cardStackRoot, classNames] }
-      : { className: mx(cardStackRoot, classNames), role };
-
-    return (
-      <Root {...props} {...rootProps} ref={forwardedRef}>
-        {children}
-      </Root>
-    );
-  },
-);
-
-//
-// Content
-// TODO(burdon): Rename Viewport (should be the component that scrolls).
-//
-
-const cardStackContent = 'shrink min-bs-0 grid dx-focus-ring-group-x-indicator bg-baseSurface';
-
-type CardStackContentProps = SharedCardStackProps & {
-  footer?: boolean;
-};
-
-const CardStackContent = forwardRef<HTMLDivElement, CardStackContentProps>(
-  ({ children, classNames, asChild, role = 'none', footer, ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : 'div';
-    const baseClassNames = footer ? [cardStackContent, railGridHorizontalContainFitContent] : [cardStackContent];
-    const rootProps = asChild
-      ? { classNames: [...baseClassNames, classNames] }
-      : { className: mx(...baseClassNames, classNames), role };
-
-    return (
-      <Root {...props} {...rootProps} data-scroll-separator='false' ref={forwardedRef}>
-        {children}
-      </Root>
-    );
-  },
-);
-
-//
-// Stack
-// TODO(burdon): Rename Content.
-//
-
-type SharedCardStackProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
-  asChild?: boolean;
-};
-
-const CardStackStack = forwardRef<
-  HTMLDivElement,
-  Omit<StackProps, 'orientation' | 'size' | 'rail' | 'separatorOnScroll'>
->(({ children, classNames, itemsCount = 0, ...props }, forwardedRef) => {
-  // NOTE: Should not have horizontal padding since separatorOnScroll should be full width.
-  return (
-    <Stack
-      orientation='vertical'
-      size='contain'
-      rail={false}
-      classNames={
-        /* NOTE(thure): Do not let this element have zero intrinsic size, otherwise the drop indicator will not display. See #9035. */
-        ['plb-2', classNames]
-      }
-      itemsCount={itemsCount}
-      separatorOnScroll={9}
-      data-density='fine'
-      {...props}
-      ref={forwardedRef}
-    >
-      {children}
-    </Stack>
-  );
-});
-
-//
-// Item
-//
-
-const cardStackItem = 'contain-layout pli-2 plb-1 first-of-type:pbs-0 last-of-type:pbe-0';
-
-const CardStackItem = forwardRef<HTMLDivElement, SharedCardStackProps>(
-  ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : 'div';
-    const rootProps = asChild
-      ? { classNames: [cardStackItem, classNames] }
-      : { className: mx(cardStackItem, classNames), role };
-
-    return (
-      <Root {...props} {...rootProps} ref={forwardedRef}>
-        {children}
-      </Root>
-    );
-  },
-);
-
-//
-// Heading
-//
-
-const cardStackHeading = 'mli-2 order-first bg-transparent rounded-bs-md flex items-center';
-
-const CardStackHeading = forwardRef<HTMLDivElement, SharedCardStackProps>(
-  ({ children, classNames, asChild, role = 'heading', ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : 'div';
-    const rootProps = asChild
-      ? { classNames: [cardStackHeading, classNames] }
-      : { className: mx(cardStackHeading, classNames), role };
-
-    return (
-      <Root {...props} {...rootProps} ref={forwardedRef}>
-        {children}
-      </Root>
-    );
-  },
-);
-
-//
-// Footer
-//
-
-const cardStackFooter =
-  'plb-2 mli-2 border-bs border-transparent [[data-scroll-separator-end="true"]_&]:border-subduedSeparator';
-
-const CardStackFooter = forwardRef<HTMLDivElement, SharedCardStackProps>(
-  ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : 'div';
-    const rootProps = asChild
-      ? { classNames: [cardStackFooter, classNames] }
-      : { className: mx(cardStackFooter, classNames), role };
-
-    return (
-      <Root {...props} {...rootProps} ref={forwardedRef}>
-        {children}
-      </Root>
-    );
-  },
-);
-
-//
-// DragHandle
-//
-
-const CardStackDragHandle = Card.DragHandle;
-
-//
-// CardStack
-//
-
-/**
- * @deprecated Replace with Mosaic.Stack.
- */
-export const CardStack = {
-  Root: CardStackRoot,
-  Content: CardStackContent,
-  Stack: CardStackStack,
-  Heading: CardStackHeading,
-  Footer: CardStackFooter,
-  DragHandle: CardStackDragHandle,
-  Item: CardStackItem,
-};
-
-export {
-  cardStackRoot,
-  cardStackFooter,
-  cardStackHeading,
-  cardStackContent,
-  cardStackItem,
-  cardStackDefaultInlineSizeRem,
-};

package/src/components/CardStack/CardStackDragPreview.tsx

@@ -1,61 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type PropsWithChildren } from 'react';
-
-import { IconButton, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/ui-theme';
-
-import { translationKey } from '../../translations';
-import { type StackProps } from '../Stack';
-
-const CardStackDragPreviewRoot = ({ children }: PropsWithChildren<{}>) => {
-  return (
-    <div className='p-2'>
-      <div className='rounded-md max-bs-[calc(100dvh-1rem)] overflow-hidden bg-baseSurface border border-separator ring-focusLine ring-neutralFocusIndicator flex flex-col'>
-        {children}
-      </div>
-    </div>
-  );
-};
-
-const CardStackDragPreviewHeading = ({ children }: PropsWithChildren<{}>) => {
-  const { t } = useTranslation(translationKey);
-  return (
-    <div className='flex items-center p-2'>
-      <IconButton
-        iconOnly
-        icon='ph--dots-six-vertical--regular'
-        variant='ghost'
-        label={t('column drag handle label')}
-        classNames='pli-2'
-      />
-      {children}
-    </div>
-  );
-};
-
-const CardStackDragPreviewContent = ({
-  children,
-  itemsCount = 0,
-}: PropsWithChildren<Pick<StackProps, 'itemsCount'>>) => {
-  return (
-    <div
-      className={mx('overflow-y-auto flex-1 pli-2 flex flex-col gap-2', 'plb-1', itemsCount > 0 ? 'plb-2' : 'plb-1')}
-    >
-      {children}
-    </div>
-  );
-};
-
-const CardStackDragPreviewFooter = ({ children }: PropsWithChildren<{}>) => {
-  return <div className='p-2 border-bs border-separator'>{children}</div>;
-};
-
-export const CardStackDragPreview = {
-  Root: CardStackDragPreviewRoot,
-  Heading: CardStackDragPreviewHeading,
-  Content: CardStackDragPreviewContent,
-  Footer: CardStackDragPreviewFooter,
-};

package/src/components/CardStack/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './CardStack';
-export * from './CardStackDragPreview';

package/src/components/deprecated/LayoutControls.tsx

@@ -1,112 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { forwardRef } from 'react';
-
-import { ButtonGroup, type ButtonGroupProps, type ButtonProps, IconButton, useTranslation } from '@dxos/react-ui';
-
-import { translationKey } from '../../translations';
-
-export type LayoutControlEvent = 'solo' | 'close' | `${'pin' | 'increment'}-${'start' | 'end'}`;
-export type LayoutControlHandler = (event: LayoutControlEvent) => void;
-
-export type LayoutCapabilities = {
-  incrementStart?: boolean;
-  incrementEnd?: boolean;
-  solo?: boolean;
-};
-
-export type LayoutControlsProps = Omit<ButtonGroupProps, 'onClick'> & {
-  onClick?: LayoutControlHandler;
-  variant?: 'hide-disabled' | 'default';
-  close?: boolean | 'minify-start' | 'minify-end';
-  capabilities: LayoutCapabilities;
-  isSolo?: boolean;
-  pin?: 'start' | 'end' | 'both';
-};
-
-const LayoutControl = ({ icon, label, ...props }: Omit<ButtonProps, 'children'> & { label: string; icon: string }) => {
-  return <IconButton iconOnly icon={icon} label={label} tooltipSide='bottom' variant='ghost' {...props} />;
-};
-
-/**
- * @deprecated
- */
-export const LayoutControls = forwardRef<HTMLDivElement, LayoutControlsProps>(
-  (
-    { onClick, variant = 'default', capabilities: can, isSolo, pin, close = false, children, ...props },
-    forwardedRef,
-  ) => {
-    const { t } = useTranslation(translationKey);
-    const buttonClassNames = variant === 'hide-disabled' ? 'disabled:hidden !p-1' : '!p-1';
-
-    return (
-      <ButtonGroup {...props} ref={forwardedRef}>
-        {pin && !isSolo && ['both', 'start'].includes(pin) && (
-          <LayoutControl
-            label={t('pin start label')}
-            variant='ghost'
-            classNames={buttonClassNames}
-            onClick={() => onClick?.('pin-start')}
-            icon='ph--caret-line-left--regular'
-          />
-        )}
-
-        {can.solo && (
-          <LayoutControl
-            label={t('solo layout label')}
-            classNames={buttonClassNames}
-            onClick={() => onClick?.('solo')}
-            icon={isSolo ? 'ph--arrows-in--regular' : 'ph--arrows-out--regular'}
-          />
-        )}
-
-        {!isSolo && can.solo && (
-          <>
-            <LayoutControl
-              label={t('increment start label')}
-              disabled={!can.incrementStart}
-              classNames={buttonClassNames}
-              onClick={() => onClick?.('increment-start')}
-              icon='ph--caret-left--regular'
-            />
-            <LayoutControl
-              label={t('increment end label')}
-              disabled={!can.incrementEnd}
-              classNames={buttonClassNames}
-              onClick={() => onClick?.('increment-end')}
-              icon='ph--caret-right--regular'
-            />
-          </>
-        )}
-
-        {pin && !isSolo && ['both', 'end'].includes(pin) && (
-          <LayoutControl
-            label={t('pin end label')}
-            classNames={buttonClassNames}
-            onClick={() => onClick?.('pin-end')}
-            icon='ph--caret-line-right--regular'
-          />
-        )}
-
-        {close && !isSolo && (
-          <LayoutControl
-            label={t(`${typeof close === 'string' ? 'minify' : 'close'} label`)}
-            classNames={buttonClassNames}
-            onClick={() => onClick?.('close')}
-            data-testid='layoutHeading.close'
-            icon={
-              close === 'minify-start'
-                ? 'ph--caret-line-left--regular'
-                : close === 'minify-end'
-                  ? 'ph--caret-line-right--regular'
-                  : 'ph--x--regular'
-            }
-          />
-        )}
-        {children}
-      </ButtonGroup>
-    );
-  },
-);