draft-components 1.4.3 → 1.6.0

package/cjs/components/tooltip/tooltip.cjs

@@ -6,7 +6,7 @@ const reactHelpers = require('../../lib/react-helpers.cjs');
 const useMountTransition = require('../../hooks/use-mount-transition.cjs');
 const positioner = require('../positioner/positioner.cjs');
 
-function Tooltip({ anchorGap = 8, placement = 'top', alignment = 'center', style, className, content, children, ...props }) {
+function Tooltip({ anchorGap = 8, placement = 'top', alignment = 'center', style, className, htmlContent, content, children, ...props }) {
     const [defaultShow, setDefaultShow] = react.useState(props.defaultIsShown ?? false);
     const defaultId = react.useId();
     const tooltipId = props.id || defaultId;
@@ -66,7 +66,7 @@ function Tooltip({ anchorGap = 8, placement = 'top', alignment = 'center', style
                     '--dc-tooltip-transition-duration': `${durationMs}ms`,
                     ...portalStyle,
                     ...style,
-                }, className: reactHelpers.classNames('dc-tooltip', transitionClass, className), role: "tooltip", children: content }));
+                }, className: reactHelpers.classNames('dc-tooltip', transitionClass, className), content: htmlContent, role: "tooltip", children: content }));
         }
     };
     return (jsxRuntime.jsx(positioner.Positioner, { placement: placement, alignment: alignment, anchorGap: anchorGap, renderAnchor: renderAnchor, renderContent: renderContent }));

package/css/draft-components.css

@@ -316,7 +316,7 @@
   --dc-control-on-primary-color: var(--dc-white);
   --dc-control-secondary-color: rgb(var(--dc-blue-500-rgb) / 0.15);
   --dc-control-border-color: var(--dc-gray-300);
-  --dc-control-bg: rgb(var(--dc-gray-50-rgb) / 0.2);
+  --dc-control-bg: var(--dc-white);
   --dc-control-bg-inset: rgb(var(--dc-gray-900-rgb) / 0.15);
   --dc-control-error-color: var(--dc-red-500);
   --dc-focus-ring-color: rgb(var(--dc-blue-500-rgb) / 0.7);
@@ -2753,6 +2753,8 @@
 
 .dc-table-container {
   overflow-x: auto;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
   box-sizing: border-box;
   width: 100%;
   border: 0 solid var(--dc-table-border-color);
@@ -2797,6 +2799,7 @@
 }
 
 .dc-table-cell {
+  scroll-snap-align: start;
   box-sizing: border-box;
   padding:
     var(--dc-table-cell-padding-y)

package/css/draft-components.dark.css

@@ -83,7 +83,7 @@
   --dc-control-on-primary-color: var(--dc-white);
   --dc-control-secondary-color: rgb(var(--dc-blue-400-rgb) / 0.15);
   --dc-control-border-color: var(--dc-gray-600);
-  --dc-control-bg: rgb(var(--dc-gray-50-rgb) / 0.08);
+  --dc-control-bg: var(--dc-gray-800);
   --dc-control-bg-inset: rgb(var(--dc-gray-50-rgb) / 0.25);
   --dc-control-error-color: var(--dc-red-400);
   --dc-focus-ring-color: rgb(var(--dc-blue-400-rgb) / 0.7);

package/esm/components/tooltip/tooltip.js

@@ -4,7 +4,7 @@ import { isReactElementWithRef, mergeRefs, classNames } from '../../lib/react-he
 import { useMountTransition } from '../../hooks/use-mount-transition.js';
 import { Positioner } from '../positioner/positioner.js';
 
-function Tooltip({ anchorGap = 8, placement = 'top', alignment = 'center', style, className, content, children, ...props }) {
+function Tooltip({ anchorGap = 8, placement = 'top', alignment = 'center', style, className, htmlContent, content, children, ...props }) {
     const [defaultShow, setDefaultShow] = useState(props.defaultIsShown ?? false);
     const defaultId = useId();
     const tooltipId = props.id || defaultId;
@@ -64,7 +64,7 @@ function Tooltip({ anchorGap = 8, placement = 'top', alignment = 'center', style
                     '--dc-tooltip-transition-duration': `${durationMs}ms`,
                     ...portalStyle,
                     ...style,
-                }, className: classNames('dc-tooltip', transitionClass, className), role: "tooltip", children: content }));
+                }, className: classNames('dc-tooltip', transitionClass, className), content: htmlContent, role: "tooltip", children: content }));
         }
     };
     return (jsx(Positioner, { placement: placement, alignment: alignment, anchorGap: anchorGap, renderAnchor: renderAnchor, renderContent: renderContent }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "1.4.3",
+  "version": "1.6.0",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {
@@ -57,29 +57,29 @@
   },
   "devDependencies": {
     "@alexzimakov/eslint-config": "1.5.0",
-    "@babel/core": "7.21.8",
-    "@babel/preset-env": "7.21.5",
-    "@babel/preset-react": "7.18.6",
-    "@babel/preset-typescript": "7.21.5",
+    "@babel/core": "7.22.5",
+    "@babel/preset-env": "7.22.5",
+    "@babel/preset-react": "7.22.5",
+    "@babel/preset-typescript": "7.22.5",
     "@heroicons/react": "2.0.18",
     "@rollup/plugin-typescript": "11.1.1",
-    "@storybook/addon-actions": "7.0.11",
-    "@storybook/addon-essentials": "7.0.11",
-    "@storybook/addon-links": "7.0.11",
-    "@storybook/react": "7.0.11",
-    "@storybook/react-vite": "7.0.11",
-    "@testing-library/dom": "9.3.0",
+    "@storybook/addon-actions": "7.0.23",
+    "@storybook/addon-essentials": "7.0.23",
+    "@storybook/addon-links": "7.0.23",
+    "@storybook/react": "7.0.23",
+    "@storybook/react-vite": "7.0.23",
+    "@testing-library/dom": "9.3.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
-    "@types/jest": "29.5.1",
-    "@types/node": "18.16.8",
-    "@types/react": "18.2.6",
-    "@types/react-dom": "18.2.4",
-    "@typescript-eslint/eslint-plugin": "5.59.5",
-    "@typescript-eslint/parser": "5.59.5",
+    "@types/jest": "29.5.2",
+    "@types/node": "18.16.18",
+    "@types/react": "18.2.13",
+    "@types/react-dom": "18.2.6",
+    "@typescript-eslint/eslint-plugin": "5.60.0",
+    "@typescript-eslint/parser": "5.60.0",
     "autoprefixer": "10.4.14",
-    "eslint": "8.40.0",
+    "eslint": "8.43.0",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
@@ -89,17 +89,17 @@
     "jest": "29.5.0",
     "jest-environment-jsdom": "29.5.0",
     "lint-staged": "13.2.2",
-    "postcss": "8.4.23",
+    "postcss": "8.4.24",
     "postcss-import": "15.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "rollup": "3.21.6",
-    "storybook": "7.0.11",
-    "stylelint": "15.6.1",
+    "rollup": "3.25.1",
+    "storybook": "7.0.23",
+    "stylelint": "15.8.0",
     "stylelint-config-standard": "33.0.0",
     "stylelint-order": "6.0.3",
-    "typescript": "4.9.5",
-    "vite": "4.3.5"
+    "typescript": "5.1.3",
+    "vite": "4.3.9"
   },
   "lint-staged": {
     "*.ts?(x)": "npm run lint",

package/types/components/alert/alert.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type JSX, type ReactNode } from 'react';
 type AlertHTMLProps = ComponentPropsWithRef<'div'>;
 export type AlertAppearance = 'default' | 'info' | 'success' | 'warning' | 'error';
 export type AlertVariant = 'default' | 'full-width' | 'accent-border';

package/types/components/avatar-group/avatar-group.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef } from 'react';
+import { type ComponentPropsWithoutRef, type JSX } from 'react';
 type AvatarGroupBaseProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
 export type AvatarGroupProps = AvatarGroupBaseProps & {
     children: JSX.Element | JSX.Element[];

package/types/components/breadcrumbs/breadcrumbs-item.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type ComponentPropsWithoutRef, type JSX, type ReactNode } from 'react';
 type BreadcrumbsItemHTMLProps = ComponentPropsWithoutRef<'a'>;
 export type BreadcrumbsItemRenderFn = (props: {
     className: string;

package/types/components/button/button.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type JSX, type ReactNode } from 'react';
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ButtonAppearance = 'default' | 'primary' | 'danger' | 'success';
 export type ButtonVariant = 'filled' | 'tinted' | 'plain';

package/types/components/button-group/button-group.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef } from 'react';
+import { type ComponentPropsWithoutRef, type JSX } from 'react';
 type ButtonGroupBaseProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
 export type ButtonGroupProps = ButtonGroupBaseProps & {
     children: JSX.Element | JSX.Element[];

package/types/components/date-picker-popover/date-picker-popover.d.ts

@@ -1,5 +1,5 @@
 import { type DateISO } from '../date-picker/date-helpers';
-import { type ReactNode } from 'react';
+import { type JSX, type ReactNode } from 'react';
 import { type DatePickerProps } from '../date-picker';
 export type DatePickerChangeValueFn = (value: DateISO) => void;
 export type DatePickerPopoverProps = {

package/types/components/date-range-picker-popover/date-range-picker-popover.d.ts

@@ -1,5 +1,5 @@
 import { type DateRangePickerPopoverOption, type DateRangePickerPopoverSelection } from './types';
-import { type ReactNode } from 'react';
+import { type JSX, type ReactNode } from 'react';
 import { type PopoverAlignment, type PopoverPlacement } from '../popover';
 import { type DateRangePickerProps } from '../date-picker';
 export type DateRangePickerPopoverPlacement = PopoverPlacement;

package/types/components/menu/menu.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, type KeyboardEventHandler, type MouseEventHandler, type ReactNode, type RefCallback } from 'react';
+import { type ComponentPropsWithoutRef, type JSX, type KeyboardEventHandler, type MouseEventHandler, type ReactNode, type RefCallback } from 'react';
 import { type ButtonAppearance, type ButtonVariant } from '../button';
 import { type PopoverAlignment, type PopoverPlacement } from '../popover';
 export type MenuButtonRenderFn = (props: {

package/types/components/nav-list/nav-list-item.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type ComponentPropsWithoutRef, type JSX, type ReactNode } from 'react';
 type NavListItemHTMLProps = ComponentPropsWithoutRef<'a'>;
 export type NavListItemRenderFn = (props: {
     className: string;

package/types/components/selection-control/selection-control.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type ComponentPropsWithoutRef, type JSX, type ReactNode } from 'react';
 export type SelectionControlRenderFn = (props: {
     id: string;
 }) => JSX.Element;

package/types/components/tooltip/tooltip.d.ts

@@ -9,10 +9,11 @@ type TooltipChildrenRenderFn = (props: {
     showTooltip: () => void;
 }) => ReactNode;
 type TooltipHTMLProps = ComponentPropsWithoutRef<'div'>;
-type TooltipBaseProps = Omit<TooltipHTMLProps, 'children'>;
+type TooltipBaseProps = Omit<TooltipHTMLProps, 'children' | 'content'>;
 export type TooltipPlacement = PositionerProps['placement'];
 export type TooltipAlignment = PositionerProps['alignment'];
 export type TooltipProps = {
+    htmlContent?: TooltipHTMLProps['content'];
     anchorGap?: number;
     placement?: TooltipPlacement;
     alignment?: TooltipAlignment;
@@ -21,5 +22,5 @@ export type TooltipProps = {
     content: ReactNode;
     children: ReactNode | TooltipChildrenRenderFn;
 } & TooltipBaseProps;
-export declare function Tooltip({ anchorGap, placement, alignment, style, className, content, children, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip({ anchorGap, placement, alignment, style, className, htmlContent, content, children, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
 export {};