@dxos/react-ui 0.8.4-main.d05539e30a → 0.8.4-main.d9fc60f731

package/src/util/slots.ts

@@ -0,0 +1,129 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import {
+  Children,
+  createElement,
+  forwardRef,
+  type ForwardRefExoticComponent,
+  type ForwardedRef,
+  type HTMLAttributes,
+  isValidElement,
+  type ReactNode,
+  type RefAttributes,
+  type CSSProperties,
+} from 'react';
+
+import { log } from '@dxos/log';
+import { mx } from '@dxos/ui-theme';
+import { type ComposableProps, type SlottableProps, type ThemedClassName } from '@dxos/ui-types';
+
+/**
+ * Reconciles className properties from a parent slot.
+ * - `className` is set by the Slot merge mechanism.
+ * - `classNames` is the consumer-facing prop for theming overrides.
+ * Use `composableProps` to reconcile both into a single `className`.
+ */
+export const composableProps = <P extends HTMLElement = HTMLElement>(
+  { className, classNames, role, style, ...props }: ComposableProps,
+  { classNames: defaultClassNames, ...defaults }: ThemedClassName<Partial<HTMLAttributes<P>>> | undefined = {},
+) => ({
+  // Default props.
+  ...(defaults as object),
+
+  // Spread supplied props.
+  ...props,
+
+  // Prefer explicit role, then defaults role, then 'none'.
+  role: role ?? defaults.role ?? 'none',
+
+  // Merge styles.
+  style: { ...defaults.style, ...style } as CSSProperties,
+
+  // Compose classnames.
+  className: mx(defaultClassNames, className, classNames),
+});
+
+/** Symbol used to mark components created by `composable()` or `slottable()`. */
+const COMPOSABLE = Symbol.for('dxos.composable');
+
+/**
+ * Factory for slottable components.
+ * The implementation receives full `HTMLAttributes<E>` so it can destructure `role`, `style`, etc.
+ * Consumers see only `SlottableProps<P>` — a narrow type exposing `classNames`, `className`,
+ * `children`, `asChild`, and the custom props `P`.
+ *
+ * @example
+ * ```tsx
+ * const MyPanel = slottable<HTMLDivElement, { border?: boolean }>(
+ *   ({ children, asChild, border, ...props }, forwardedRef) => {
+ *     const Comp = asChild ? Slot : Primitive.div;
+ *     return (
+ *       <Comp {...composableProps(props, { classNames: border && 'border' })} ref={forwardedRef}>
+ *         {children}
+ *       </Comp>
+ *     );
+ *   },
+ * );
+ * ```
+ */
+export function slottable<E extends HTMLElement, P extends object = {}>(
+  render: (props: SlottableProps<P> & HTMLAttributes<E>, forwardedRef: ForwardedRef<E>) => ReactNode,
+): ForwardRefExoticComponent<SlottableProps<P> & RefAttributes<E>> {
+  const wrapped = (props: SlottableProps<P> & HTMLAttributes<E>, forwardedRef: ForwardedRef<E>) => {
+    let warn = false;
+    if (props.asChild) {
+      try {
+        const child = Children.only(props.children);
+        if (isValidElement(child) && typeof child.type !== 'string' && !(child.type as any)[COMPOSABLE]) {
+          warn = true;
+          log.warn('slot child is not composable; create it with composable() or slottable()', {
+            child: (child.type as any).displayName ?? (child.type as any).name,
+          });
+        }
+      } catch {
+        // Children.only throws if not exactly one child — Slot handles this.
+      }
+    }
+
+    const result = render(props, forwardedRef);
+    if (warn) {
+      return createElement('div', { role: 'none', className: 'dx-slot-warning' }, result);
+    }
+
+    return result;
+  };
+
+  const component = forwardRef(wrapped as any) as any;
+  (component as any)[COMPOSABLE] = true;
+  return component;
+}
+
+/**
+ * Factory for composable (leaf) components.
+ * The implementation receives full `HTMLAttributes<E>` so it can destructure `role`, `style`, etc.
+ * Consumers see only `ComposableProps<P>` — a narrow type exposing `classNames`, `className`,
+ * `children`, and the custom props `P`.
+ *
+ * For generic components, use `any` for the type parameter inside `composable` and
+ * cast the result to restore the generic signature for consumers.
+ *
+ * @example
+ * ```tsx
+ * const Leaf = composable<HTMLButtonElement>(({ children, ...props }, forwardedRef) => {
+ *   return (
+ *     <button {...composableProps(props, { classNames: 'btn' })} ref={forwardedRef}>
+ *       {children}
+ *     </button>
+ *   );
+ * });
+ * ```
+ */
+export function composable<E extends HTMLElement, P extends object = {}>(
+  render: (props: ComposableProps<P> & HTMLAttributes<E>, forwardedRef: ForwardedRef<E>) => ReactNode,
+): ForwardRefExoticComponent<ComposableProps<P> & RefAttributes<E>> {
+  const component = forwardRef(render as any) as any;
+  (component as any)[COMPOSABLE] = true;
+  return component;
+}

package/src/util/usePx.ts

@@ -12,13 +12,16 @@ const getDocumentElementFontSize = () => parseFloat(getComputedStyle(document.do
  * @param rem The rem value to convert to pixels
  * @returns The current pixel value equivalent of the rem input
  */
+// TODO(burdon): Change to array.
+// TODO(burdon): Integrate with theme provider.
 export const usePx = (rem: number): number => {
   const [fontSize, setFontSize] = useState(() => {
     if (typeof document !== 'undefined') {
       return getDocumentElementFontSize();
     }
 
-    return 16; // Default fallback for SSR
+    // Default fallback for SSR
+    return 16;
   });
 
   const updateFontSize = useCallback(() => {

package/dist/lib/browser/chunk-A5QCIG5R.mjs

@@ -1,24 +0,0 @@
-// src/translations.ts
-var translationKey = "@dxos/react-ui";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "toolbar-menu.label": "Action menu",
-        "toolbar-drag-handle.label": "Drag to rearrange",
-        "toolbar-close.label": "Close",
-        "carousel-viewport.label": "Carousel",
-        "carousel-prev.label": "Previous slide",
-        "carousel-next.label": "Next slide",
-        "carousel-indicators.label": "Carousel slides",
-        "carousel-go-to.label": "Go to slide {{index}}"
-      }
-    }
-  }
-];
-
-export {
-  translationKey,
-  translations
-};
-//# sourceMappingURL=chunk-A5QCIG5R.mjs.map

package/dist/lib/browser/chunk-A5QCIG5R.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/translations.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nexport const translationKey = '@dxos/react-ui';\n\nexport const translations = [\n  {\n    'en-US': {\n      [translationKey]: {\n        'toolbar-menu.label': 'Action menu',\n        'toolbar-drag-handle.label': 'Drag to rearrange',\n        'toolbar-close.label': 'Close',\n        'carousel-viewport.label': 'Carousel',\n        'carousel-prev.label': 'Previous slide',\n        'carousel-next.label': 'Next slide',\n        'carousel-indicators.label': 'Carousel slides',\n        'carousel-go-to.label': 'Go to slide {{index}}',\n      },\n    },\n  },\n] as const satisfies Resource[];\n"],
-  "mappings": ";AAMO,IAAMA,iBAAiB;AAEvB,IAAMC,eAAe;EAC1B;IACE,SAAS;MACP,CAACD,cAAAA,GAAiB;QAChB,sBAAsB;QACtB,6BAA6B;QAC7B,uBAAuB;QACvB,2BAA2B;QAC3B,uBAAuB;QACvB,uBAAuB;QACvB,6BAA6B;QAC7B,wBAAwB;MAC1B;IACF;EACF;;",
-  "names": ["translationKey", "translations"]
-}