diff --git a/docs/docs/api/appkit-ui/ui/ChartContainer.mdx b/docs/docs/api/appkit-ui/ui/ChartContainer.mdx deleted file mode 100644 index 4e905927..00000000 --- a/docs/docs/api/appkit-ui/ui/ChartContainer.mdx +++ /dev/null @@ -1,370 +0,0 @@ -# ChartContainer - -Container for rendering data visualizations using Recharts - - -## ChartContainer - -Container for rendering data visualizations using Recharts - - -**Source:** [`packages/appkit-ui/src/react/ui/chart.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/chart.tsx) - - -### Props - -| Prop | Type | Required | Default | Description | -|------|------|----------|---------|-------------| -| `config` | `ChartConfig` | ✓ | - | - | - - - -### Usage - -```tsx -import { ChartContainer } from '@databricks/appkit-ui'; - - -``` - - -## ChartLegend - -A wrapper component for Recharts Legend with proper typing and documentation support. -It is needed to ensure the correct name is displayed in the docs. - - -**Source:** [`packages/appkit-ui/src/react/ui/chart.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/chart.tsx) - - -### Props - -| Prop | Type | Required | Default | Description | -|------|------|----------|---------|-------------| -| `content` | `ContentType` | | - | - | -| `dangerouslySetInnerHTML` | `{ __html: string; }` | | - | - | -| `onCopy` | `AdaptChildClipboardEventHandler>>` | | - | - | -| `onCopyCapture` | `AdaptChildClipboardEventHandler>>` | | - | - | -| `onCut` | `AdaptChildClipboardEventHandler>>` | | - | - | -| `onCutCapture` | `AdaptChildClipboardEventHandler>>` | | - | - | -| `onPaste` | `AdaptChildClipboardEventHandler>>` | | - | - | -| `onPasteCapture` | `AdaptChildClipboardEventHandler>>` | | - | - | -| `onCompositionEnd` | `AdaptChildCompositionEventHandler>>` | | - | - | -| `onCompositionEndCapture` | `AdaptChildCompositionEventHandler>>` | | - | - | -| `onCompositionStart` | `AdaptChildCompositionEventHandler>>` | | - | - | -| `onCompositionStartCapture` | `AdaptChildCompositionEventHandler>>` | | - | - | -| `onCompositionUpdate` | `AdaptChildCompositionEventHandler>>` | | - | - | -| `onCompositionUpdateCapture` | `AdaptChildCompositionEventHandler>>` | | - | - | -| `onFocus` | `AdaptChildFocusEventHandler>>` | | - | - | -| `onFocusCapture` | `AdaptChildFocusEventHandler>>` | | - | - | -| `onBlur` | `AdaptChildFocusEventHandler>>` | | - | - | -| `onBlurCapture` | `AdaptChildFocusEventHandler>>` | | - | - | -| `onChange` | `AdaptChildFormEventHandler>>` | | - | - | -| `onChangeCapture` | `AdaptChildFormEventHandler>>` | | - | - | -| `onBeforeInput` | `AdaptChildFormEventHandler>>` | | - | - | -| `onBeforeInputCapture` | `AdaptChildFormEventHandler>>` | | - | - | -| `onInput` | `AdaptChildFormEventHandler>>` | | - | - | -| `onInputCapture` | `AdaptChildFormEventHandler>>` | | - | - | -| `onReset` | `AdaptChildFormEventHandler>>` | | - | - | -| `onResetCapture` | `AdaptChildFormEventHandler>>` | | - | - | -| `onSubmit` | `AdaptChildFormEventHandler>>` | | - | - | -| `onSubmitCapture` | `AdaptChildFormEventHandler>>` | | - | - | -| `onInvalid` | `AdaptChildFormEventHandler>>` | | - | - | -| `onInvalidCapture` | `AdaptChildFormEventHandler>>` | | - | - | -| `onLoad` | `AdaptChildReactEventHandler>>` | | - | - | -| `onLoadCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onError` | `AdaptChildReactEventHandler>>` | | - | - | -| `onErrorCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onKeyDown` | `AdaptChildKeyboardEventHandler>>` | | - | - | -| `onKeyDownCapture` | `AdaptChildKeyboardEventHandler>>` | | - | - | -| `onKeyPress` | `AdaptChildKeyboardEventHandler>>` | | - | - | -| `onKeyPressCapture` | `AdaptChildKeyboardEventHandler>>` | | - | - | -| `onKeyUp` | `AdaptChildKeyboardEventHandler>>` | | - | - | -| `onKeyUpCapture` | `AdaptChildKeyboardEventHandler>>` | | - | - | -| `onAbort` | `AdaptChildReactEventHandler>>` | | - | - | -| `onAbortCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onCanPlay` | `AdaptChildReactEventHandler>>` | | - | - | -| `onCanPlayCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onCanPlayThrough` | `AdaptChildReactEventHandler>>` | | - | - | -| `onCanPlayThroughCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onDurationChange` | `AdaptChildReactEventHandler>>` | | - | - | -| `onDurationChangeCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onEmptied` | `AdaptChildReactEventHandler>>` | | - | - | -| `onEmptiedCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onEncrypted` | `AdaptChildReactEventHandler>>` | | - | - | -| `onEncryptedCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onEnded` | `AdaptChildReactEventHandler>>` | | - | - | -| `onEndedCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onLoadedData` | `AdaptChildReactEventHandler>>` | | - | - | -| `onLoadedDataCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onLoadedMetadata` | `AdaptChildReactEventHandler>>` | | - | - | -| `onLoadedMetadataCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onLoadStart` | `AdaptChildReactEventHandler>>` | | - | - | -| `onLoadStartCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onPause` | `AdaptChildReactEventHandler>>` | | - | - | -| `onPauseCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onPlay` | `AdaptChildReactEventHandler>>` | | - | - | -| `onPlayCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onPlaying` | `AdaptChildReactEventHandler>>` | | - | - | -| `onPlayingCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onProgress` | `AdaptChildReactEventHandler>>` | | - | - | -| `onProgressCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onRateChange` | `AdaptChildReactEventHandler>>` | | - | - | -| `onRateChangeCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onSeeked` | `AdaptChildReactEventHandler>>` | | - | - | -| `onSeekedCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onSeeking` | `AdaptChildReactEventHandler>>` | | - | - | -| `onSeekingCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onStalled` | `AdaptChildReactEventHandler>>` | | - | - | -| `onStalledCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onSuspend` | `AdaptChildReactEventHandler>>` | | - | - | -| `onSuspendCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onTimeUpdate` | `AdaptChildReactEventHandler>>` | | - | - | -| `onTimeUpdateCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onVolumeChange` | `AdaptChildReactEventHandler>>` | | - | - | -| `onVolumeChangeCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onWaiting` | `AdaptChildReactEventHandler>>` | | - | - | -| `onWaitingCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onAuxClick` | `AdaptChildMouseEventHandler>>` | | - | - | -| `onAuxClickCapture` | `AdaptChildMouseEventHandler>>` | | - | - | -| `onClick` | `((data: Payload, index: number, event: MouseEvent) => void)` | | - | - | -| `onClickCapture` | `AdaptChildMouseEventHandler>>` | | - | - | -| `onContextMenu` | `AdaptChildMouseEventHandler>>` | | - | - | -| `onContextMenuCapture` | `AdaptChildMouseEventHandler>>` | | - | - | -| `onDoubleClick` | `AdaptChildMouseEventHandler>>` | | - | - | -| `onDoubleClickCapture` | `AdaptChildMouseEventHandler>>` | | - | - | -| `onDrag` | `AdaptChildDragEventHandler>>` | | - | - | -| `onDragCapture` | `AdaptChildDragEventHandler>>` | | - | - | -| `onDragEnd` | `AdaptChildDragEventHandler>>` | | - | - | -| `onDragEndCapture` | `AdaptChildDragEventHandler>>` | | - | - | -| `onDragEnter` | `AdaptChildDragEventHandler>>` | | - | - | -| `onDragEnterCapture` | `AdaptChildDragEventHandler>>` | | - | - | -| `onDragExit` | `AdaptChildDragEventHandler>>` | | - | - | -| `onDragExitCapture` | `AdaptChildDragEventHandler>>` | | - | - | -| `onDragLeave` | `AdaptChildDragEventHandler>>` | | - | - | -| `onDragLeaveCapture` | `AdaptChildDragEventHandler>>` | | - | - | -| `onDragOver` | `AdaptChildDragEventHandler>>` | | - | - | -| `onDragOverCapture` | `AdaptChildDragEventHandler>>` | | - | - | -| `onDragStart` | `AdaptChildDragEventHandler>>` | | - | - | -| `onDragStartCapture` | `AdaptChildDragEventHandler>>` | | - | - | -| `onDrop` | `AdaptChildDragEventHandler>>` | | - | - | -| `onDropCapture` | `AdaptChildDragEventHandler>>` | | - | - | -| `onMouseDown` | `AdaptChildMouseEventHandler>>` | | - | - | -| `onMouseDownCapture` | `AdaptChildMouseEventHandler>>` | | - | - | -| `onMouseEnter` | `((data: Payload, index: number, event: MouseEvent) => void)` | | - | - | -| `onMouseLeave` | `((data: Payload, index: number, event: MouseEvent) => void)` | | - | - | -| `onMouseMove` | `AdaptChildMouseEventHandler>>` | | - | - | -| `onMouseMoveCapture` | `AdaptChildMouseEventHandler>>` | | - | - | -| `onMouseOut` | `AdaptChildMouseEventHandler>>` | | - | - | -| `onMouseOutCapture` | `AdaptChildMouseEventHandler>>` | | - | - | -| `onMouseOver` | `AdaptChildMouseEventHandler>>` | | - | - | -| `onMouseOverCapture` | `AdaptChildMouseEventHandler>>` | | - | - | -| `onMouseUp` | `AdaptChildMouseEventHandler>>` | | - | - | -| `onMouseUpCapture` | `AdaptChildMouseEventHandler>>` | | - | - | -| `onSelect` | `AdaptChildReactEventHandler>>` | | - | - | -| `onSelectCapture` | `AdaptChildReactEventHandler>>` | | - | - | -| `onTouchCancel` | `AdaptChildTouchEventHandler>>` | | - | - | -| `onTouchCancelCapture` | `AdaptChildTouchEventHandler>>` | | - | - | -| `onTouchEnd` | `AdaptChildTouchEventHandler>>` | | - | - | -| `onTouchEndCapture` | `AdaptChildTouchEventHandler>>` | | - | - | -| `onTouchMove` | `AdaptChildTouchEventHandler>>` | | - | - | -| `onTouchMoveCapture` | `AdaptChildTouchEventHandler>>` | | - | - | -| `onTouchStart` | `AdaptChildTouchEventHandler>>` | | - | - | -| `onTouchStartCapture` | `AdaptChildTouchEventHandler>>` | | - | - | -| `onPointerDown` | `AdaptChildPointerEventHandler>>` | | - | - | -| `onPointerDownCapture` | `AdaptChildPointerEventHandler>>` | | - | - | -| `onPointerMove` | `AdaptChildPointerEventHandler>>` | | - | - | -| `onPointerMoveCapture` | `AdaptChildPointerEventHandler>>` | | - | - | -| `onPointerUp` | `AdaptChildPointerEventHandler>>` | | - | - | -| `onPointerUpCapture` | `AdaptChildPointerEventHandler>>` | | - | - | -| `onPointerCancel` | `AdaptChildPointerEventHandler>>` | | - | - | -| `onPointerCancelCapture` | `AdaptChildPointerEventHandler>>` | | - | - | -| `onPointerEnter` | `AdaptChildPointerEventHandler>>` | | - | - | -| `onPointerLeave` | `AdaptChildPointerEventHandler>>` | | - | - | -| `onPointerOver` | `AdaptChildPointerEventHandler>>` | | - | - | -| `onPointerOverCapture` | `AdaptChildPointerEventHandler>>` | | - | - | -| `onPointerOut` | `AdaptChildPointerEventHandler>>` | | - | - | -| `onPointerOutCapture` | `AdaptChildPointerEventHandler>>` | | - | - | -| `onGotPointerCapture` | `AdaptChildPointerEventHandler>>` | | - | - | -| `onGotPointerCaptureCapture` | `AdaptChildPointerEventHandler>>` | | - | - | -| `onLostPointerCapture` | `AdaptChildPointerEventHandler>>` | | - | - | -| `onLostPointerCaptureCapture` | `AdaptChildPointerEventHandler>>` | | - | - | -| `onScroll` | `AdaptChildUIEventHandler>>` | | - | - | -| `onScrollCapture` | `AdaptChildUIEventHandler>>` | | - | - | -| `onWheel` | `AdaptChildWheelEventHandler>>` | | - | - | -| `onWheelCapture` | `AdaptChildWheelEventHandler>>` | | - | - | -| `onAnimationStart` | `AdaptChildAnimationEventHandler>>` | | - | - | -| `onAnimationStartCapture` | `AdaptChildAnimationEventHandler>>` | | - | - | -| `onAnimationEnd` | `AdaptChildAnimationEventHandler>>` | | - | - | -| `onAnimationEndCapture` | `AdaptChildAnimationEventHandler>>` | | - | - | -| `onAnimationIteration` | `AdaptChildAnimationEventHandler>>` | | - | - | -| `onAnimationIterationCapture` | `AdaptChildAnimationEventHandler>>` | | - | - | -| `onTransitionEnd` | `AdaptChildTransitionEventHandler>>` | | - | - | -| `onTransitionEndCapture` | `AdaptChildTransitionEventHandler>>` | | - | - | -| `formatter` | `Formatter` | | - | - | -| `payload` | `Payload[]` | | - | - | -| `payloadUniqBy` | `UniqueOption` | | - | - | -| `wrapperStyle` | `CSSProperties` | | - | - | -| `onPointerEnterCapture` | `AdaptChildPointerEventHandler>>` | | - | - | -| `onPointerLeaveCapture` | `AdaptChildPointerEventHandler>>` | | - | - | -| `iconSize` | `number` | | - | - | -| `iconType` | `enum` | | - | - | -| `layout` | `enum` | | - | - | -| `align` | `enum` | | - | - | -| `verticalAlign` | `enum` | | - | - | -| `inactiveColor` | `string` | | - | - | -| `chartWidth` | `number` | | - | - | -| `chartHeight` | `number` | | - | - | -| `margin` | `{ top?: number; left?: number; bottom?: number \| undefined; right?: number \| undefined; } \| undefined` | | - | - | -| `onBBoxUpdate` | `((box: DOMRect \| null) => void)` | | - | - | - - - -### Usage - -```tsx -import { ChartLegend } from '@databricks/appkit-ui'; - - -``` - - -## ChartLegendContent - - -**Source:** [`packages/appkit-ui/src/react/ui/chart.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/chart.tsx) - - -### Props - -| Prop | Type | Required | Default | Description | -|------|------|----------|---------|-------------| -| `verticalAlign` | `enum` | | - | - | -| `payload` | `any[]` | | `[] as any[]` | - | -| `hideIcon` | `boolean` | | `false` | - | -| `nameKey` | `string` | | - | - | - - - -### Usage - -```tsx -import { ChartLegendContent } from '@databricks/appkit-ui'; - - -``` - - -## ChartStyle - - -**Source:** [`packages/appkit-ui/src/react/ui/chart.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/chart.tsx) - - -### Props - -| Prop | Type | Required | Default | Description | -|------|------|----------|---------|-------------| -| `id` | `string` | ✓ | - | - | -| `config` | `ChartConfig` | ✓ | - | - | - - - -### Usage - -```tsx -import { ChartStyle } from '@databricks/appkit-ui'; - - -``` - - -## ChartTooltip - -A wrapper component for Recharts Tooltip with proper typing and documentation support. -It is needed to ensure the correct name is displayed in the docs. - - -**Source:** [`packages/appkit-ui/src/react/ui/chart.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/chart.tsx) - - -### Props - -| Prop | Type | Required | Default | Description | -|------|------|----------|---------|-------------| -| `separator` | `string` | | - | - | -| `wrapperClassName` | `string` | | - | - | -| `labelClassName` | `string` | | - | - | -| `formatter` | `Formatter` | | - | - | -| `contentStyle` | `CSSProperties` | | - | - | -| `itemStyle` | `CSSProperties` | | - | - | -| `labelStyle` | `CSSProperties` | | - | - | -| `labelFormatter` | `((label: any, payload: Payload[]) => ReactNode)` | | - | - | -| `label` | `any` | | - | - | -| `payload` | `Payload[]` | | - | - | -| `itemSorter` | `((item: Payload) => string \| number)` | | - | - | -| `accessibilityLayer` | `boolean` | | - | - | -| `active` | `boolean` | | - | If true, then Tooltip is always displayed, once an activeIndex is set by mouse over, or programmatically. If false, then Tooltip is never displayed. If active is undefined, Recharts will control when the Tooltip displays. This includes mouse and keyboard controls. | -| `includeHidden` | `boolean` | | - | If true, then Tooltip will information about hidden series (defaults to false). Interacting with the hide property of Area, Bar, Line, Scatter. | -| `allowEscapeViewBox` | `AllowInDimension` | | - | - | -| `animationDuration` | `number` | | - | - | -| `animationEasing` | `enum` | | - | - | -| `content` | `ContentType` | | - | - | -| `coordinate` | `Partial` | | - | - | -| `cursor` | `boolean \| ReactElement> \| SVGProps` | | - | - | -| `filterNull` | `boolean` | | - | - | -| `defaultIndex` | `number` | | - | - | -| `isAnimationActive` | `boolean` | | - | - | -| `offset` | `number` | | - | - | -| `payloadUniqBy` | `UniqueOption>` | | - | - | -| `position` | `Partial` | | - | - | -| `reverseDirection` | `AllowInDimension` | | - | - | -| `shared` | `boolean` | | - | - | -| `trigger` | `enum` | | - | - | -| `useTranslate3d` | `boolean` | | - | - | -| `viewBox` | `CartesianViewBox` | | - | - | -| `wrapperStyle` | `CSSProperties` | | - | - | - - - -### Usage - -```tsx -import { ChartTooltip } from '@databricks/appkit-ui'; - - -``` - - -## ChartTooltipContent - - -**Source:** [`packages/appkit-ui/src/react/ui/chart.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/chart.tsx) - - -### Props - -| Prop | Type | Required | Default | Description | -|------|------|----------|---------|-------------| -| `active` | `boolean` | | - | - | -| `payload` | `any[]` | | - | - | -| `label` | `string` | | `"" as string` | - | -| `labelFormatter` | `((value: any, payload: any[]) => ReactNode)` | | - | - | -| `formatter` | `((value: any, name: any, item: any, index: number, payload: any) => ReactNode)` | | - | - | -| `hideLabel` | `boolean` | | `false` | - | -| `hideIndicator` | `boolean` | | `false` | - | -| `indicator` | `enum` | | `dot` | - | -| `labelClassName` | `string` | | - | - | -| `nameKey` | `string` | | - | - | -| `labelKey` | `string` | | - | - | - - - -### Usage - -```tsx -import { ChartTooltipContent } from '@databricks/appkit-ui'; - - -``` - diff --git a/docs/docs/api/appkit-ui/ui/ContextMenu.mdx b/docs/docs/api/appkit-ui/ui/ContextMenu.mdx index 874e02d3..bf12ec0c 100644 --- a/docs/docs/api/appkit-ui/ui/ContextMenu.mdx +++ b/docs/docs/api/appkit-ui/ui/ContextMenu.mdx @@ -87,7 +87,7 @@ import { ContextMenuCheckboxItem } from '@databricks/appkit-ui'; | `arrowPadding` | `number` | | - | - | | `avoidCollisions` | `boolean` | | - | - | | `collisionBoundary` | `Boundary \| Boundary[]` | | - | - | -| `collisionPadding` | `number \| Partial>` | | - | - | +| `collisionPadding` | `number \| Partial>` | | - | - | | `sticky` | `enum` | | - | - | | `hideWhenDetached` | `boolean` | | - | - | | `updatePositionStrategy` | `enum` | | - | - | @@ -345,7 +345,7 @@ import { ContextMenuSub } from '@databricks/appkit-ui'; | `arrowPadding` | `number` | | - | - | | `avoidCollisions` | `boolean` | | - | - | | `collisionBoundary` | `Boundary \| Boundary[]` | | - | - | -| `collisionPadding` | `number \| Partial>` | | - | - | +| `collisionPadding` | `number \| Partial>` | | - | - | | `sticky` | `enum` | | - | - | | `hideWhenDetached` | `boolean` | | - | - | | `updatePositionStrategy` | `enum` | | - | - | diff --git a/docs/docs/api/appkit-ui/ui/DropdownMenu.mdx b/docs/docs/api/appkit-ui/ui/DropdownMenu.mdx index f03cb710..fe0b8578 100644 --- a/docs/docs/api/appkit-ui/ui/DropdownMenu.mdx +++ b/docs/docs/api/appkit-ui/ui/DropdownMenu.mdx @@ -85,14 +85,14 @@ import { DropdownMenuCheckboxItem } from '@databricks/appkit-ui'; | `onInteractOutside` | `((event: FocusOutsideEvent \| PointerDownOutsideEvent) => void)` | | - | - | | `onCloseAutoFocus` | `((event: Event) => void)` | | - | Event handler called when auto-focusing on close. Can be prevented. | | `loop` | `boolean` | | - | Whether keyboard navigation should loop around @defaultValue false | -| `align` | `enum` | | - | - | | `side` | `enum` | | - | - | | `sideOffset` | `number` | | - | - | +| `align` | `enum` | | - | - | | `alignOffset` | `number` | | - | - | | `arrowPadding` | `number` | | - | - | | `avoidCollisions` | `boolean` | | - | - | | `collisionBoundary` | `Boundary \| Boundary[]` | | - | - | -| `collisionPadding` | `number \| Partial>` | | - | - | +| `collisionPadding` | `number \| Partial>` | | - | - | | `sticky` | `enum` | | - | - | | `hideWhenDetached` | `boolean` | | - | - | | `updatePositionStrategy` | `enum` | | - | - | @@ -350,7 +350,7 @@ import { DropdownMenuSub } from '@databricks/appkit-ui'; | `arrowPadding` | `number` | | - | - | | `avoidCollisions` | `boolean` | | - | - | | `collisionBoundary` | `Boundary \| Boundary[]` | | - | - | -| `collisionPadding` | `number \| Partial>` | | - | - | +| `collisionPadding` | `number \| Partial>` | | - | - | | `sticky` | `enum` | | - | - | | `hideWhenDetached` | `boolean` | | - | - | | `updatePositionStrategy` | `enum` | | - | - | diff --git a/docs/docs/api/appkit-ui/ui/HoverCard.mdx b/docs/docs/api/appkit-ui/ui/HoverCard.mdx index 3802f5d1..bc75c4f7 100644 --- a/docs/docs/api/appkit-ui/ui/HoverCard.mdx +++ b/docs/docs/api/appkit-ui/ui/HoverCard.mdx @@ -55,14 +55,14 @@ import { HoverCard } from '@databricks/appkit-ui'; | `onFocusOutside` | `((event: FocusOutsideEvent) => void)` | | - | Event handler called when the focus moves outside of the `HoverCard`. Can be prevented. | | `onInteractOutside` | `((event: FocusOutsideEvent \| PointerDownOutsideEvent) => void)` | | - | Event handler called when an interaction happens outside the `HoverCard`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented. | | `asChild` | `boolean` | | - | - | -| `align` | `enum` | | - | - | | `side` | `enum` | | - | - | | `sideOffset` | `number` | | - | - | +| `align` | `enum` | | - | - | | `alignOffset` | `number` | | - | - | | `arrowPadding` | `number` | | - | - | | `avoidCollisions` | `boolean` | | - | - | | `collisionBoundary` | `Boundary \| Boundary[]` | | - | - | -| `collisionPadding` | `number \| Partial>` | | - | - | +| `collisionPadding` | `number \| Partial>` | | - | - | | `sticky` | `enum` | | - | - | | `hideWhenDetached` | `boolean` | | - | - | | `updatePositionStrategy` | `enum` | | - | - | diff --git a/docs/docs/api/appkit-ui/ui/Menubar.mdx b/docs/docs/api/appkit-ui/ui/Menubar.mdx index 30983aa3..f6a2c76b 100644 --- a/docs/docs/api/appkit-ui/ui/Menubar.mdx +++ b/docs/docs/api/appkit-ui/ui/Menubar.mdx @@ -86,14 +86,14 @@ import { MenubarCheckboxItem } from '@databricks/appkit-ui'; | `onInteractOutside` | `((event: FocusOutsideEvent \| PointerDownOutsideEvent) => void)` | | - | - | | `onCloseAutoFocus` | `((event: Event) => void)` | | - | Event handler called when auto-focusing on close. Can be prevented. | | `loop` | `boolean` | | - | Whether keyboard navigation should loop around @defaultValue false | -| `align` | `enum` | | - | - | | `side` | `enum` | | - | - | | `sideOffset` | `number` | | - | - | +| `align` | `enum` | | - | - | | `alignOffset` | `number` | | - | - | | `arrowPadding` | `number` | | - | - | | `avoidCollisions` | `boolean` | | - | - | | `collisionBoundary` | `Boundary \| Boundary[]` | | - | - | -| `collisionPadding` | `number \| Partial>` | | - | - | +| `collisionPadding` | `number \| Partial>` | | - | - | | `sticky` | `enum` | | - | - | | `hideWhenDetached` | `boolean` | | - | - | | `updatePositionStrategy` | `enum` | | - | - | @@ -375,7 +375,7 @@ import { MenubarSub } from '@databricks/appkit-ui'; | `arrowPadding` | `number` | | - | - | | `avoidCollisions` | `boolean` | | - | - | | `collisionBoundary` | `Boundary \| Boundary[]` | | - | - | -| `collisionPadding` | `number \| Partial>` | | - | - | +| `collisionPadding` | `number \| Partial>` | | - | - | | `sticky` | `enum` | | - | - | | `hideWhenDetached` | `boolean` | | - | - | | `updatePositionStrategy` | `enum` | | - | - | diff --git a/docs/docs/api/appkit-ui/ui/Popover.mdx b/docs/docs/api/appkit-ui/ui/Popover.mdx index 1aee1987..728f7af2 100644 --- a/docs/docs/api/appkit-ui/ui/Popover.mdx +++ b/docs/docs/api/appkit-ui/ui/Popover.mdx @@ -80,14 +80,14 @@ import { PopoverAnchor } from '@databricks/appkit-ui'; | `onInteractOutside` | `((event: FocusOutsideEvent \| PointerDownOutsideEvent) => void)` | | - | Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented. | | `onOpenAutoFocus` | `((event: Event) => void)` | | - | Event handler called when auto-focusing on open. Can be prevented. | | `onCloseAutoFocus` | `((event: Event) => void)` | | - | Event handler called when auto-focusing on close. Can be prevented. | -| `align` | `enum` | | - | - | | `side` | `enum` | | - | - | | `sideOffset` | `number` | | - | - | +| `align` | `enum` | | - | - | | `alignOffset` | `number` | | - | - | | `arrowPadding` | `number` | | - | - | | `avoidCollisions` | `boolean` | | - | - | | `collisionBoundary` | `Boundary \| Boundary[]` | | - | - | -| `collisionPadding` | `number \| Partial>` | | - | - | +| `collisionPadding` | `number \| Partial>` | | - | - | | `sticky` | `enum` | | - | - | | `hideWhenDetached` | `boolean` | | - | - | | `updatePositionStrategy` | `enum` | | - | - | diff --git a/docs/docs/api/appkit-ui/ui/Select.mdx b/docs/docs/api/appkit-ui/ui/Select.mdx index 45b43a85..590109fa 100644 --- a/docs/docs/api/appkit-ui/ui/Select.mdx +++ b/docs/docs/api/appkit-ui/ui/Select.mdx @@ -61,14 +61,14 @@ import { Select } from '@databricks/appkit-ui'; | `onPointerDownOutside` | `((event: PointerDownOutsideEvent) => void)` | | - | Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented. | | `position` | `enum` | | `popper` | - | | `asChild` | `boolean` | | - | - | -| `align` | `enum` | | - | - | | `side` | `enum` | | - | - | | `sideOffset` | `number` | | - | - | +| `align` | `enum` | | - | - | | `alignOffset` | `number` | | - | - | | `arrowPadding` | `number` | | - | - | | `avoidCollisions` | `boolean` | | - | - | | `collisionBoundary` | `Boundary \| Boundary[]` | | - | - | -| `collisionPadding` | `number \| Partial>` | | - | - | +| `collisionPadding` | `number \| Partial>` | | - | - | | `sticky` | `enum` | | - | - | | `hideWhenDetached` | `boolean` | | - | - | | `updatePositionStrategy` | `enum` | | - | - | diff --git a/docs/docs/api/appkit-ui/ui/Tooltip.mdx b/docs/docs/api/appkit-ui/ui/Tooltip.mdx index 94d609d8..23d34c53 100644 --- a/docs/docs/api/appkit-ui/ui/Tooltip.mdx +++ b/docs/docs/api/appkit-ui/ui/Tooltip.mdx @@ -54,14 +54,14 @@ import { Tooltip } from '@databricks/appkit-ui'; | `onEscapeKeyDown` | `((event: KeyboardEvent) => void)` | | - | Event handler called when the escape key is down. Can be prevented. | | `onPointerDownOutside` | `((event: PointerDownOutsideEvent) => void)` | | - | Event handler called when the a `pointerdown` event happens outside of the `Tooltip`. Can be prevented. | | `asChild` | `boolean` | | - | - | -| `align` | `enum` | | - | - | | `side` | `enum` | | - | - | | `sideOffset` | `number` | | - | - | +| `align` | `enum` | | - | - | | `alignOffset` | `number` | | - | - | | `arrowPadding` | `number` | | - | - | | `avoidCollisions` | `boolean` | | - | - | | `collisionBoundary` | `Boundary \| Boundary[]` | | - | - | -| `collisionPadding` | `number \| Partial>` | | - | - | +| `collisionPadding` | `number \| Partial>` | | - | - | | `sticky` | `enum` | | - | - | | `hideWhenDetached` | `boolean` | | - | - | | `updatePositionStrategy` | `enum` | | - | - | diff --git a/docs/src/components/DocExample/examples.gen.ts b/docs/src/components/DocExample/examples.gen.ts index 63ab8f2c..254abe36 100644 --- a/docs/src/components/DocExample/examples.gen.ts +++ b/docs/src/components/DocExample/examples.gen.ts @@ -769,7 +769,6 @@ export default function DonutChartExample() { import * as React from "react" import { Minus, Plus } from "lucide-react" -import { Bar, BarChart, ResponsiveContainer } from "recharts" import { Button, @@ -783,48 +782,6 @@ import { DrawerTrigger, } from "@databricks/appkit-ui/react" -const data = [ - { - goal: 400, - }, - { - goal: 300, - }, - { - goal: 200, - }, - { - goal: 300, - }, - { - goal: 200, - }, - { - goal: 278, - }, - { - goal: 189, - }, - { - goal: 239, - }, - { - goal: 300, - }, - { - goal: 200, - }, - { - goal: 278, - }, - { - goal: 189, - }, - { - goal: 349, - }, -] - export default function DrawerExample() { const [goal, setGoal] = React.useState(350) @@ -874,19 +831,6 @@ export default function DrawerExample() { Increase -
- - - - - -
diff --git a/docs/static/appkit-ui/styles.gen.css b/docs/static/appkit-ui/styles.gen.css index a8554f55..0d24e8ea 100644 --- a/docs/static/appkit-ui/styles.gen.css +++ b/docs/static/appkit-ui/styles.gen.css @@ -56,7 +56,6 @@ --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); --radius: var(--radius); - --color-border: var(--border); } } @layer base { @@ -407,9 +406,6 @@ .my-0 { margin-block: calc(var(--spacing) * 0); } - .my-0\.5 { - margin-block: calc(var(--spacing) * 0.5); - } .my-1 { margin-block: calc(var(--spacing) * 1); } @@ -639,9 +635,6 @@ .h-\[1\.15rem\] { height: 1.15rem; } - .h-\[120px\] { - height: 120px; - } .h-\[150px\] { height: 150px; } @@ -708,12 +701,6 @@ .w-\(--sidebar-width\) { width: var(--sidebar-width); } - .w-0 { - width: calc(var(--spacing) * 0); - } - .w-1 { - width: calc(var(--spacing) * 1); - } .w-1\/2 { width: calc(1/2 * 100%); } @@ -1233,10 +1220,6 @@ border-style: var(--tw-border-style); border-width: 0px; } - .border-\[1\.5px\] { - border-style: var(--tw-border-style); - border-width: 1.5px; - } .border-y { border-block-style: var(--tw-border-style); border-block-width: 1px; @@ -1261,18 +1244,9 @@ --tw-border-style: dashed; border-style: dashed; } - .border-\(--color-border\) { - border-color: var(--color-border); - } .border-border { border-color: var(--border); } - .border-border\/50 { - border-color: var(--border); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--border) 50%, transparent); - } - } .border-border\/60 { border-color: var(--border); @supports (color: color-mix(in lab, red, red)) { @@ -1297,9 +1271,6 @@ .border-l-transparent { border-left-color: transparent; } - .bg-\(--color-bg\) { - background-color: var(--color-bg); - } .bg-accent { background-color: var(--accent); } @@ -1770,10 +1741,6 @@ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } - .shadow-xl { - --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } .shadow-xs { --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @@ -4386,84 +4353,6 @@ } } } - .\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground { - & .recharts-cartesian-axis-tick text { - fill: var(--muted-foreground); - } - } - .\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 { - & .recharts-cartesian-grid line[stroke='#ccc'] { - stroke: var(--border); - @supports (color: color-mix(in lab, red, red)) { - stroke: color-mix(in oklab, var(--border) 50%, transparent); - } - } - } - .\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border { - & .recharts-curve.recharts-tooltip-cursor { - stroke: var(--border); - } - } - .\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent { - & .recharts-dot[stroke='#fff'] { - stroke: transparent; - } - } - .\[\&_\.recharts-layer\]\:outline-hidden { - & .recharts-layer { - --tw-outline-style: none; - outline-style: none; - @media (forced-colors: active) { - outline: 2px solid transparent; - outline-offset: 2px; - } - } - } - .\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border { - & .recharts-polar-grid [stroke='#ccc'] { - stroke: var(--border); - } - } - .\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted { - & .recharts-radial-bar-background-sector { - fill: var(--muted); - } - } - .\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted { - & .recharts-rectangle.recharts-tooltip-cursor { - fill: var(--muted); - } - } - .\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border { - & .recharts-reference-line [stroke='#ccc'] { - stroke: var(--border); - } - } - .\[\&_\.recharts-sector\]\:outline-hidden { - & .recharts-sector { - --tw-outline-style: none; - outline-style: none; - @media (forced-colors: active) { - outline: 2px solid transparent; - outline-offset: 2px; - } - } - } - .\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent { - & .recharts-sector[stroke='#fff'] { - stroke: transparent; - } - } - .\[\&_\.recharts-surface\]\:outline-hidden { - & .recharts-surface { - --tw-outline-style: none; - outline-style: none; - @media (forced-colors: active) { - outline: 2px solid transparent; - outline-offset: 2px; - } - } - } .\[\&_\[cmdk-group-heading\]\]\:px-2 { & [cmdk-group-heading] { padding-inline: calc(var(--spacing) * 2); @@ -5118,26 +5007,6 @@ height: calc(var(--spacing) * 4); } } - .\[\&\>svg\]\:h-2\.5 { - &>svg { - height: calc(var(--spacing) * 2.5); - } - } - .\[\&\>svg\]\:h-3 { - &>svg { - height: calc(var(--spacing) * 3); - } - } - .\[\&\>svg\]\:w-2\.5 { - &>svg { - width: calc(var(--spacing) * 2.5); - } - } - .\[\&\>svg\]\:w-3 { - &>svg { - width: calc(var(--spacing) * 3); - } - } .\[\&\>svg\]\:shrink-0 { &>svg { flex-shrink: 0; diff --git a/packages/appkit-ui/package.json b/packages/appkit-ui/package.json index 965f5347..3a1990a7 100644 --- a/packages/appkit-ui/package.json +++ b/packages/appkit-ui/package.json @@ -108,15 +108,13 @@ }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", - "react-dom": "^18.0.0 || ^19.0.0", - "recharts": "^2.0.0 || ^3.0.0" + "react-dom": "^18.0.0 || ^19.0.0" }, "devDependencies": { "@types/react": "19.2.2", "@types/react-dom": "19.2.2", "react": "19.2.0", "react-dom": "19.2.0", - "recharts": "2.15.4", "tailwindcss": "4.1.17", "tw-animate-css": "1.4.0" }, diff --git a/packages/appkit-ui/src/react/ui/chart.tsx b/packages/appkit-ui/src/react/ui/chart.tsx deleted file mode 100644 index 1291abf2..00000000 --- a/packages/appkit-ui/src/react/ui/chart.tsx +++ /dev/null @@ -1,391 +0,0 @@ -"use client"; - -import * as React from "react"; -import * as RechartsPrimitive from "recharts"; - -import { cn } from "../lib/utils"; - -// Format: { THEME_NAME: CSS_SELECTOR } -const THEMES = { light: "", dark: ".dark" } as const; - -export type ChartConfig = { - [k in string]: { - label?: React.ReactNode; - icon?: React.ComponentType; - } & ( - | { color?: string; theme?: never } - | { color?: never; theme: Record } - ); -}; - -type ChartContextProps = { - config: ChartConfig; -}; - -const ChartContext = React.createContext(null); - -function useChart() { - const context = React.useContext(ChartContext); - - if (!context) { - throw new Error("useChart must be used within a "); - } - - return context; -} - -/** Container for rendering data visualizations using Recharts */ -function ChartContainer({ - id, - className, - children, - config, - ...props -}: React.ComponentProps<"div"> & { - config: ChartConfig; - children: React.ComponentProps< - typeof RechartsPrimitive.ResponsiveContainer - >["children"]; -}) { - const uniqueId = React.useId(); - const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`; - - return ( - -
- - - {children} - -
- - ); -} - -const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { - const colorConfig = Object.entries(config).filter( - ([, config]) => config.theme || config.color, - ); - - if (!colorConfig.length) { - return null; - } - - return ( -