@roadlittledawn/docs-design-system-react 0.11.0 → 0.11.1

package/dist/components/Collapser.d.ts

@@ -41,3 +41,6 @@ export interface CollapserProps {
     stepNumber?: number;
 }
 export declare function Collapser({ title, id, defaultOpen, open: controlledOpen, onToggle, children, className, align, icon, stepNumber, }: CollapserProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Collapser {
+    var displayName: string;
+}

package/dist/components/Collapser.js

@@ -1,25 +1,18 @@
 'use client';
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
+import { useState } from "react";
 import { useKeyPress } from "../hooks/useKeyPress";
 export function Collapser(_a) {
     var title = _a.title, id = _a.id, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, controlledOpen = _a.open, onToggle = _a.onToggle, children = _a.children, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.align, align = _d === void 0 ? 'left' : _d, icon = _a.icon, stepNumber = _a.stepNumber;
     var _e = useState(defaultOpen), uncontrolledOpen = _e[0], setUncontrolledOpen = _e[1];
     var isControlled = controlledOpen !== undefined;
     var isOpen = isControlled ? controlledOpen : uncontrolledOpen;
-    var _f = useState(undefined), height = _f[0], setHeight = _f[1];
-    var contentRef = useRef(null);
     // Keyboard shortcuts: 's' or 'f' to show, 'h' to hide
     useKeyPress(['s', 'f', 'h'], function (e) {
         if (!isControlled) {
             setUncontrolledOpen(e.key !== 'h');
         }
     });
-    useEffect(function () {
-        if (contentRef.current) {
-            setHeight(contentRef.current.scrollHeight);
-        }
-    }, [children]);
     var toggleOpen = function () {
         if (onToggle) {
             onToggle();
@@ -35,7 +28,6 @@ export function Collapser(_a) {
     ]
         .filter(Boolean)
         .join(" ");
-    return (_jsxs("div", { className: collapserClasses, children: [_jsxs("button", { onClick: toggleOpen, type: "button", className: "dds-collapser-button", "aria-expanded": isOpen, children: [stepNumber !== undefined && (_jsxs("span", { className: "dds-collapser-step-number", children: [stepNumber, "."] })), icon && (_jsx("span", { className: "dds-collapser-header-icon", "aria-hidden": "true", children: icon })), _jsx("h5", { id: id, className: "dds-collapser-title", children: title }), _jsx("svg", { className: "dds-collapser-icon ".concat(isOpen ? "dds-collapser-icon-open" : ""), width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "6 9 12 15 18 9" }) })] }), _jsx("div", { className: "dds-collapser-content-wrapper", style: {
-                    height: isOpen ? height : 0,
-                }, children: _jsx("div", { ref: contentRef, className: "dds-collapser-content", children: children }) })] }));
+    return (_jsxs("div", { className: collapserClasses, children: [_jsxs("button", { onClick: toggleOpen, type: "button", className: "dds-collapser-button", "aria-expanded": isOpen, children: [stepNumber !== undefined && (_jsxs("span", { className: "dds-collapser-step-number", children: [stepNumber, "."] })), icon && (_jsx("span", { className: "dds-collapser-header-icon", "aria-hidden": "true", children: icon })), _jsx("h5", { id: id, className: "dds-collapser-title", children: title }), _jsx("svg", { className: "dds-collapser-icon ".concat(isOpen ? "dds-collapser-icon-open" : ""), width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "6 9 12 15 18 9" }) })] }), _jsx("div", { className: "dds-collapser-content-wrapper".concat(isOpen ? " dds-collapser-content-wrapper--open" : ""), children: _jsx("div", { className: "dds-collapser-content", children: children }) })] }));
 }
+Collapser.displayName = 'Collapser';

package/dist/components/CollapserGroup.js

@@ -21,7 +21,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, Children, cloneElement, isValidElement } from 'react';
-import { Collapser } from './Collapser';
 export var CollapserGroup = function (_a) {
     var children = _a.children, _b = _a.spacing, spacing = _b === void 0 ? '0.5rem' : _b, _c = _a.allowMultiple, allowMultiple = _c === void 0 ? true : _c, defaultOpen = _a.defaultOpen, onChange = _a.onChange, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.numbered, numbered = _e === void 0 ? false : _e;
     var _f = useState(function () {
@@ -45,10 +44,11 @@ export var CollapserGroup = function (_a) {
         });
     };
     return (_jsx("div", { className: "dds-collapser-group ".concat(className).trim(), style: { gap: spacing }, children: Children.map(children, function (child, index) {
+            var _a;
             if (!isValidElement(child))
                 return child;
             // Only inject props if child is a Collapser component
-            if (child.type === Collapser) {
+            if (((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'Collapser') {
                 return cloneElement(child, __assign(__assign(__assign({}, child.props), { open: openIndexes.includes(index), onToggle: function () { return handleToggle(index); } }), (numbered ? { stepNumber: index + 1 } : {})));
             }
             return child;

package/dist/styles.css

@@ -1270,10 +1270,15 @@ a.no-text-decoration {
   transform: rotate(180deg);
 }
 .dds-collapser-content-wrapper {
-  overflow: hidden;
-  transition: height 0.3s ease;
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.3s ease;
+}
+.dds-collapser-content-wrapper--open {
+  grid-template-rows: 1fr;
 }
 .dds-collapser-content {
+  overflow: hidden;
   border-top: 1px solid var(--dds-collapser-border);
   padding: var(--dds-collapser-content-padding);
   color: var(--dds-collapser-text);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadlittledawn/docs-design-system-react",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "license": "MIT",
   "description": "React components for documentation design system",
   "repository": {