colibri-ui 0.8.86 → 0.8.87

package/Typography/index.js

@@ -11,6 +11,14 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
+const getSizeClassNames = size => {
+  if (!size) return [];
+  if (typeof size === "string") return [styles__default.default[`size_${size}`]];
+  return Object.entries(size).flatMap(([breakpoint, name]) => {
+    if (!name) return [];
+    return [styles__default.default[breakpoint === "base" ? `size_${name}` : `size_${breakpoint}_${name}`]];
+  });
+};
 const Typography = _a => {
   var {
       tag: Component = "span",
@@ -27,8 +35,7 @@ const Typography = _a => {
     style: lines ? Object.assign(Object.assign({}, style), {
       "--typography-lines": lines
     }) : Object.assign({}, style),
-    className: clsx__default.default({
-      [styles__default.default[`size_${size}`]]: Boolean(size),
+    className: clsx__default.default(getSizeClassNames(size), {
       [styles__default.default[`font-weight_${fontWeight}`]]: Boolean(fontWeight),
       [styles__default.default[`variant_${variant}`]]: Boolean(variant),
       [styles__default.default.clamp]: Boolean(lines)

package/Typography/index.props.d.ts

@@ -1,7 +1,15 @@
 import type { CSSProperties } from "react";
+import type { BreakpointName } from "../Theme";
 export type TypographyVariant = "primary" | "secondary" | "tertiary" | "disabled" | "inverse" | "alert" | "success" | "warning" | "info";
 export type TypographyFontWeight = "normal" | "regular" | "medium" | "semibold" | "bold";
 export type TypographySize = "xs" | "s" | "m" | "l" | "text-xs" | "text-sm" | "text-md" | "text-lg" | "heading-sm" | "heading-md" | "heading-lg" | "heading-xl" | "display-sm" | "display-md" | "display-lg" | "display-xl" | "display-s" | "display-m" | "display-l" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+/**
+ * Size per breakpoint, mobile first: `base` applies to every width, each
+ * breakpoint from its width up (`BREAKPOINTS` in Theme).
+ */
+export type TypographyResponsiveSize = {
+    base?: TypographySize;
+} & Partial<Record<BreakpointName, TypographySize>>;
 export type TypographyTag = "span" | "label" | "legend" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "s";
 export type TypographyProps = {
     className?: string;
@@ -10,7 +18,8 @@ export type TypographyProps = {
     id?: string;
     tag?: TypographyTag;
     variant?: TypographyVariant;
-    size?: TypographySize;
+    /** One size, or sizes per breakpoint: `{ base: "xs", sm: "m" }`. */
+    size?: TypographySize | TypographyResponsiveSize;
     fontWeight?: TypographyFontWeight;
     /** Limits the text to this many lines and ends the last one with an ellipsis. */
     lines?: number;

package/esm/Drawer/Drawer.js

@@ -27,17 +27,23 @@ const Drawer = /*#__PURE__*/forwardRef(function DrawerRoot(_a, forwardedRef) {
       focusAfterRef,
       portalContainer,
       onClose,
+      onClosed,
       onEscKeyDown,
       onOverlayClick,
       className,
       style,
       children
     } = _a,
-    rest = __rest(_a, ["opened", "placement", "width", "height", "offset", "zIndex", "asModal", "withBlur", "closeOnEsc", "closeOnOverlayClick", "borderRadius", "customBackgroundColor", "customContentBackgroundColor", "animationInfo", "initialFocusRef", "focusAfterRef", "portalContainer", "onClose", "onEscKeyDown", "onOverlayClick", "className", "style", "children"]);
+    rest = __rest(_a, ["opened", "placement", "width", "height", "offset", "zIndex", "asModal", "withBlur", "closeOnEsc", "closeOnOverlayClick", "borderRadius", "customBackgroundColor", "customContentBackgroundColor", "animationInfo", "initialFocusRef", "focusAfterRef", "portalContainer", "onClose", "onClosed", "onEscKeyDown", "onOverlayClick", "className", "style", "children"]);
   const panelRef = useRef(null);
   const previousFocus = useRef(null);
   const [rendered, setRendered] = useState(opened);
   const [closing, setClosing] = useState(false);
+  // The latest callback without restarting the closing timer.
+  const onClosedRef = useRef(onClosed);
+  useEffect(() => {
+    onClosedRef.current = onClosed;
+  }, [onClosed]);
   const setPanelRef = element => {
     panelRef.current = element;
     if (typeof forwardedRef === "function") forwardedRef(element);else if (forwardedRef) forwardedRef.current = element;
@@ -51,8 +57,10 @@ const Drawer = /*#__PURE__*/forwardRef(function DrawerRoot(_a, forwardedRef) {
     if (!rendered) return;
     setClosing(true);
     const timeout = window.setTimeout(() => {
+      var _a;
       setRendered(false);
       setClosing(false);
+      (_a = onClosedRef.current) === null || _a === void 0 ? void 0 : _a.call(onClosedRef);
     }, 200);
     return () => window.clearTimeout(timeout);
   }, [opened, rendered]);

package/esm/Drawer/index.props.d.ts

@@ -24,6 +24,8 @@ export interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onAni
     focusAfterRef?: RefObject<HTMLElement | null>;
     portalContainer?: HTMLElement | null;
     onClose?: () => void;
+    /** Called once the closing animation has finished and the drawer is removed. */
+    onClosed?: () => void;
     onEscKeyDown?: (event: KeyboardEvent) => void;
     onOverlayClick?: MouseEventHandler<HTMLDivElement>;
 }

package/esm/Sheet/Sheet.js

@@ -24,6 +24,7 @@ const Sheet = /*#__PURE__*/forwardRef(function SheetComponent(_a, forwardedRef)
   var {
       open,
       onOpenChange,
+      onClosed,
       title,
       description,
       header,
@@ -50,7 +51,7 @@ const Sheet = /*#__PURE__*/forwardRef(function SheetComponent(_a, forwardedRef)
       "aria-labelledby": ariaLabelledBy,
       "aria-describedby": ariaDescribedBy
     } = _a,
-    rest = __rest(_a, ["open", "onOpenChange", "title", "description", "header", "footer", "snapPoints", "snapPoint", "defaultSnapPoint", "onSnapPointChange", "modal", "blurOverlay", "closeOnOverlayClick", "closeOnEscape", "draggable", "showHandle", "lockBodyScroll", "portalContainer", "initialFocusRef", "returnFocusRef", "zIndex", "className", "style", "children", "aria-label", "aria-labelledby", "aria-describedby"]);
+    rest = __rest(_a, ["open", "onOpenChange", "onClosed", "title", "description", "header", "footer", "snapPoints", "snapPoint", "defaultSnapPoint", "onSnapPointChange", "modal", "blurOverlay", "closeOnOverlayClick", "closeOnEscape", "draggable", "showHandle", "lockBodyScroll", "portalContainer", "initialFocusRef", "returnFocusRef", "zIndex", "className", "style", "children", "aria-label", "aria-labelledby", "aria-describedby"]);
   const normalizedPoints = snapPoints.length ? snapPoints : defaultSnapPoints;
   const controlledSnap = snapPoint !== undefined;
   const [internalSnap, setInternalSnap] = useState(() => findPoint(normalizedPoints, defaultSnapPoint));
@@ -80,6 +81,11 @@ const Sheet = /*#__PURE__*/forwardRef(function SheetComponent(_a, forwardedRef)
     if (!controlledSnap) setInternalSnap(next);
     onSnapPointChange === null || onSnapPointChange === void 0 ? void 0 : onSnapPointChange(next);
   };
+  // The latest callback without restarting the closing timer.
+  const onClosedRef = useRef(onClosed);
+  useEffect(() => {
+    onClosedRef.current = onClosed;
+  }, [onClosed]);
   useEffect(() => {
     if (open) {
       setRendered(true);
@@ -90,8 +96,10 @@ const Sheet = /*#__PURE__*/forwardRef(function SheetComponent(_a, forwardedRef)
     setClosing(true);
     const duration = panelRef.current ? Number.parseFloat(getComputedStyle(panelRef.current).animationDuration) * 1000 : 220;
     const timer = window.setTimeout(() => {
+      var _a;
       setRendered(false);
       setClosing(false);
+      (_a = onClosedRef.current) === null || _a === void 0 ? void 0 : _a.call(onClosedRef);
     }, Number.isFinite(duration) ? duration : 220);
     return () => window.clearTimeout(timer);
   }, [open, rendered]);

package/esm/Sheet/index.props.d.ts

@@ -4,6 +4,8 @@ export type SheetCloseReason = "overlay" | "escape" | "drag";
 export interface SheetProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onChange"> {
     open: boolean;
     onOpenChange: (open: boolean, reason?: SheetCloseReason) => void;
+    /** Called once the closing animation has finished and the sheet is removed. */
+    onClosed?: () => void;
     title?: ReactNode;
     description?: ReactNode;
     header?: ReactNode;