@orfium/ictinus 5.41.1 → 5.41.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "5.41.1",
+  "version": "5.41.3",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",
@@ -93,6 +93,7 @@
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-use-controllable-state": "^1.2.2",
     "@tanstack/react-table": "^8.21.3",
     "@vanilla-extract/recipes": "^0.5.7",
     "@vanilla-extract/sprinkles": "^1.6.5",

package/src/components/ThemeProvider/ThemeProvider.style.ts

@@ -1,37 +1,7 @@
-import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
-import type { Theme } from 'theme';
-import {
-  headline01,
-  headline02,
-  headline03,
-  headline04,
-  headline05,
-} from '../Typography/Typography.config.styles';
-
-export const globalStyles = (theme: Theme): SerializedStyles => css`
-  h1 {
-    ${headline01(theme)}
-  }
-  h2 {
-    ${headline02(theme)}
-  }
-  h3 {
-    ${headline03(theme)}
-  }
-  h4 {
-    ${headline04(theme)}
-  }
-  h5 {
-    ${headline05(theme)}
-  }
-
-  // default outline for all focused elements defined by the design team
-  // our lightGrey base color (500 shade) with opacity at 50%
-  *:focus {
-    outline: 0;
-  }
 
+// TODO: View transitions used by toast remove when toast is migrated to vanilla extract
+export const globalStyles = () => css`
   ::view-transition-group(*) {
     animation-duration: 250ms;
     /* swift out */

package/src/sprinkles/properties.css.ts

@@ -284,6 +284,7 @@ export const responsiveProps = defineProperties({
     maxWidth: { ...vars.sizing, full: '100%', screen: '100vw' },
     maxHeight: { ...vars.sizing, full: '100%', screen: '100vh' },
     flexDirection: ['column', 'row', 'column-reverse', 'row-reverse'] as const,
+    flexShrink: ['0', '1'] as const,
     position: ['absolute', 'fixed', 'relative', 'sticky'] as const,
     gap: vars.spacing,
     gridGap: vars.spacing,
@@ -345,12 +346,14 @@ export const unresponsiveProps = defineProperties({
     fontSize: vars['font-size'],
     typography,
     fontWeight: vars.weight,
+    fontStyle: ['italic'] as const,
     lineHeight: vars['line-height'],
     letterSpacing: vars['letter-spacing'],
     isolation: ['isolate'] as const,
     objectFit: ['contain', 'cover'] as const,
     pointerEvents: ['auto', 'none'] as const,
     textTransform: ['capitalize', 'none', 'uppercase'] as const,
+    textDecoration: ['underline'] as const,
     visibility: ['hidden', 'visible'] as const,
     wordBreak: ['break-word'] as const,
     wordWrap: ['normal', 'break-word'] as const,

package/src/vanilla/Table/TableHeader.tsx

@@ -8,7 +8,12 @@ export type TableHeaderProps = BoxProps<'thead', NonNullable<styles.HeaderVarian
 
 export const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>(
   ({ children, className, pinned, ...props }, ref) => (
-    <Box asChild className={cn(styles.header({ pinned }), className)} {...props}>
+    <Box
+      asChild
+      data-pinned={pinned ? '' : undefined}
+      className={cn(styles.header({ pinned }), className)}
+      {...props}
+    >
       <thead ref={ref}>{children}</thead>
     </Box>
   )

package/src/vanilla/Table/TableHeaderCell.css.ts

@@ -1,8 +1,12 @@
-import { vars } from '@orfium/tokens';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
 import { sprinkles } from '../../sprinkles';
 import { style } from '../../vanilla-extract';
+import * as headerStyles from './TableHeader.css';
+import * as rowStyles from './TableRow.css';
+
+const header = headerStyles.className;
+const row = rowStyles.className;
 
 export const cell = recipe({
   base: [
@@ -49,7 +53,13 @@ export const content = recipe({
       borderColor: 'decorative.default',
     }),
     style({
-      boxShadow: `0 1px 0 ${vars.color['border-color'].decorative.default}`,
+      borderBottomWidth: '1px',
+
+      selectors: {
+        [`${header}:not([data-pinned]) ${row}:last-child &`]: {
+          borderBottomWidth: 0,
+        },
+      },
     }),
   ],
   variants: {

package/src/vanilla/Text/Text.tsx

@@ -8,19 +8,19 @@ import * as styles from './Text.css';
 
 const Slot = createSlot('@orfium/ictinus/Text');
 
-export type TextProps<T extends ElementType = 'p', P = unknown> = BoxProps<
+export type TextProps<T extends ElementType = 'span', P = unknown> = BoxProps<
   T,
   ExtendProps<styles.TextVariants, P>
 >;
 
-export const Text = forwardRef<HTMLParagraphElement, TextProps>(
+export const Text = forwardRef<HTMLSpanElement, TextProps>(
   ({ asChild, children, className, lineClamp, truncate, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'p';
+    const Comp = asChild ? Slot : 'span';
 
     return (
       <Box
         asChild
-        ref={ref}
+        ref={ref as any} // Box expects HTMLDivElement ref, but asChild forwards to span at runtime
         className={cn(styles.text({ lineClamp, truncate }), className)}
         {...props}
       >

package/src/vanilla/Tooltip/Tooltip.css.ts

@@ -0,0 +1,93 @@
+import { vars } from '@orfium/tokens';
+import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
+
+import { sprinkles } from '../../sprinkles';
+import { style } from '../../vanilla-extract';
+
+export const tooltip = recipe({
+  base: [
+    sprinkles({
+      display: 'flex',
+      flexDirection: 'column',
+      p: '4',
+      borderRadius: '2',
+      typography: 'body03',
+    }),
+    style({
+      transform: 'translate3d(0, 0, 0)',
+      transformOrigin: 'var(--trigger-anchor-point)',
+    }),
+  ],
+  variants: {
+    inverse: {
+      true: sprinkles({
+        bg: 'alt',
+        color: 'primary',
+        border: '1',
+        borderColor: 'decorative.default',
+        boxShadow: '2',
+      }),
+      false: sprinkles({
+        bg: 'inverted',
+        color: 'inverted.primary',
+      }),
+    },
+  },
+});
+
+export const trigger = style([
+  sprinkles({
+    cursor: 'default',
+  }),
+  style({
+    background: 'transparent',
+  }),
+]);
+
+export const arrow = recipe({
+  base: [
+    style({
+      display: 'block',
+      fill: vars.color.background.inverted,
+
+      selectors: {
+        '[data-placement=bottom] &': {
+          transform: 'rotate(180deg)',
+        },
+        '[data-placement=right] &': {
+          transform: 'rotate(90deg) translateY(-5px)',
+        },
+        '[data-placement=left] &': {
+          transform: 'rotate(-90deg) translateY(-5px)',
+        },
+      },
+    }),
+  ],
+});
+
+export const arrowInverse = recipe({
+  base: [
+    style({
+      display: 'block',
+      fill: vars.color.background.alt,
+
+      selectors: {
+        '[data-placement=bottom] &': {
+          transform: 'rotate(180deg)',
+        },
+        '[data-placement=right] &': {
+          transform: 'rotate(90deg) translateY(-5px)',
+        },
+        '[data-placement=left] &': {
+          transform: 'rotate(-90deg) translateY(-5px)',
+        },
+      },
+    }),
+  ],
+});
+
+export const arrowInverseBorder = style({
+  fill: vars.color['border-color'].decorative.default,
+});
+
+export type TooltipVariants = RecipeVariants<typeof tooltip>;

package/src/vanilla/Tooltip/Tooltip.tsx

@@ -0,0 +1,144 @@
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import {
+  createContext,
+  useContext,
+  useRef,
+  type ComponentProps,
+  type ReactNode,
+  type RefObject,
+} from 'react';
+import type { TooltipProps as TooltipPrimitiveProps } from 'react-aria-components';
+import {
+  composeRenderProps,
+  Focusable,
+  OverlayArrow,
+  Tooltip as TooltipPrimitive,
+  TooltipTrigger as TooltipTriggerPrimitive,
+} from 'react-aria-components';
+
+import { cn } from '../../utils/cn';
+import * as styles from './Tooltip.css';
+
+const TooltipContext = createContext<{
+  triggerRef: RefObject<HTMLElement> | null;
+}>({ triggerRef: null });
+
+type TooltipProps = ComponentProps<typeof TooltipTriggerPrimitive> & {
+  /**
+   * Only show the tooltip when children are partially hidden due to text overflow.
+   */
+  auto?: boolean;
+};
+
+const Tooltip = ({
+  delay = 500,
+  auto = false,
+  defaultOpen = false,
+  onOpenChange,
+  isOpen: openProp,
+  ...props
+}: TooltipProps) => {
+  const triggerRef = useRef<HTMLElement>(null);
+  const [open, setOpen] = useControllableState({
+    caller: 'Tooltip',
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp,
+  });
+
+  return (
+    <TooltipContext.Provider value={{ triggerRef }}>
+      <TooltipTriggerPrimitive
+        delay={delay}
+        defaultOpen={auto ? open : defaultOpen}
+        isDisabled={auto && openProp === undefined ? undefined : props.isDisabled}
+        isOpen={auto ? open : openProp}
+        onOpenChange={(isOpen) => {
+          if (auto && isOpen && triggerRef.current && !hasTruncatedContent(triggerRef.current)) {
+            return;
+          }
+
+          setOpen(isOpen);
+        }}
+        {...props}
+      />
+    </TooltipContext.Provider>
+  );
+};
+
+Tooltip.displayName = 'Tooltip';
+
+interface TooltipContentProps
+  extends Omit<TooltipPrimitiveProps, 'children'>,
+    NonNullable<styles.TooltipVariants> {
+  showArrow?: boolean;
+  children?: ReactNode;
+}
+
+const TooltipContent = ({
+  offset = 8,
+  inverse = false,
+  showArrow = true,
+  children,
+  ...props
+}: TooltipContentProps) => {
+  return (
+    <TooltipPrimitive
+      {...props}
+      offset={offset}
+      className={composeRenderProps(props.className, (className) =>
+        cn(styles.tooltip({ inverse }), className)
+      )}
+    >
+      {showArrow && (
+        <OverlayArrow>
+          {inverse ? (
+            <svg width={18} height={8} viewBox="0 0 18 8" className={styles.arrowInverse()}>
+              <path d="M9.00744 6.52304L1.6397 0.000488281L16.3752 0.000489658L9.00744 6.52304Z" />
+              <path
+                d="M9.00337 6.51095L16.3588 0.00158653H18.0034L9.00337 8.00049L0.00337219 0.00158653L1.6397 0.000488281L9.00337 6.51095Z"
+                className={styles.arrowInverseBorder}
+              />
+            </svg>
+          ) : (
+            <svg width={15} height={6} viewBox="0 0 15 6" className={styles.arrow()}>
+              <path d="M7.5 6L0.500001 -1.22392e-06L14.5 0L7.5 6Z" />
+            </svg>
+          )}
+        </OverlayArrow>
+      )}
+      {children}
+    </TooltipPrimitive>
+  );
+};
+
+function TooltipTrigger({ ...props }: ComponentProps<typeof Focusable>) {
+  const { triggerRef } = useContext(TooltipContext);
+
+  return <Focusable ref={triggerRef} data-slot="tooltip-trigger" {...props} />;
+}
+
+const hasTruncatedContent = (element: HTMLElement) => {
+  let truncated = false;
+
+  const elements: Element[] = [element];
+  while (!truncated && elements.length) {
+    const element = elements.shift();
+    if (!(element instanceof HTMLElement)) {
+      continue;
+    }
+    const { offsetHeight, offsetWidth, scrollHeight, scrollWidth } = element;
+
+    if (offsetWidth < scrollWidth || offsetHeight < scrollHeight) {
+      truncated = true;
+      break;
+    }
+
+    elements.push(...element.children);
+  }
+
+  return truncated;
+};
+
+export { Tooltip, TooltipContent, TooltipTrigger };
+export type { TooltipContentProps, TooltipProps };

package/src/vanilla/Tooltip/index.ts

@@ -0,0 +1 @@
+export * from './Tooltip';

package/src/vanilla/index.ts

@@ -2,3 +2,4 @@ export * from './Box';
 export * from './Table';
 export * from './Text';
 export * from './ThemeProvider';
+export * from './Tooltip';