@canonical/react-components 2.15.1 → 2.16.0

package/dist/components/SidePanel/SidePanel.d.ts

@@ -22,6 +22,14 @@ export type Props = {
      * Whether the side panel has an error. This will show an error message in the panel instead of rendering the children.
      */
     hasError?: boolean;
+    /**
+     * Whether the side panel animates on open and close. This requires the side panel to be controlled by the `isOpen` prop instead of conditional rendering. If you use `overlay: true`, you must also include `overflow: hidden` on the document body.
+     */
+    isAnimated?: boolean;
+    /**
+     * Whether the side panel is open or not.
+     */
+    isOpen?: boolean;
     /**
      * Whether the side panel is currently loading. This will show a spinner in the panel instead of rendering the children.
      */

package/dist/components/SidePanel/SidePanel.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactDom = require("react-dom");
 var _Content = _interopRequireDefault(require("./common/Content"));
@@ -17,6 +17,8 @@ var _AppAside = _interopRequireDefault(require("../ApplicationLayout/AppAside"))
 var _Spinner = _interopRequireDefault(require("../Spinner"));
 require("./SidePanel.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * The props for the SidePanelComponent component.
  */
@@ -70,17 +72,34 @@ const SidePanelComponent = _ref => {
     overlay,
     pinned,
     width = "",
-    parentId = "l-application"
+    parentId = "l-application",
+    isOpen = true,
+    isAnimated
   } = _ref;
+  const [hiding, setHiding] = (0, _react.useState)(true);
+  const [previousIsOpen, setPreviousIsOpen] = (0, _react.useState)(false);
   const container = document.getElementById(parentId) || document.body;
+  if (isOpen !== previousIsOpen) {
+    setPreviousIsOpen(isOpen);
+    setHiding(true);
+  }
+
+  // Pinned side panels don't get animation in Vanilla
+  const isAnimatedFinal = isAnimated && !pinned;
+  if (!isOpen && !(isAnimatedFinal && hiding)) {
+    return null;
+  }
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(_AppAside.default, {
     className: (0, _classnames.default)("side-panel", className, {
-      "is-overlay": overlay
+      "is-overlay": overlay,
+      "slide-in": isAnimatedFinal
     }),
+    collapsed: !isOpen,
     "aria-label": "Side panel",
     pinned: pinned,
     narrow: width === "narrow",
-    wide: width === "wide"
+    wide: width === "wide",
+    onTransitionEnd: () => setHiding(false)
   }, loading ? /*#__PURE__*/_react.default.createElement("div", {
     className: "loading"
   }, /*#__PURE__*/_react.default.createElement(_Spinner.default, null)) : hasError ? /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/SidePanel/SidePanel.scss

@@ -43,3 +43,15 @@
     bottom: 0;
   }
 }
+
+.slide-in {
+  animation: slideIn 0.1s;
+}
+
+@keyframes slideIn {
+  from {
+    box-shadow: 0 0 0 0 transparent;
+    transform: translateX(100%);
+    visibility: hidden;
+  }
+}

package/dist/components/SidePanel/SidePanel.stories.d.ts

@@ -9,3 +9,4 @@ export declare const Loading: Story;
 export declare const Error: Story;
 export declare const Narrow: Story;
 export declare const Wide: Story;
+export declare const Animated: Story;

package/dist/components/SidePanel/SidePanel.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Wide = exports.Pinned = exports.Narrow = exports.Loading = exports.Error = exports.Default = void 0;
+exports.default = exports.Wide = exports.Pinned = exports.Narrow = exports.Loading = exports.Error = exports.Default = exports.Animated = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _SidePanel = _interopRequireDefault(require("./SidePanel"));
 var _Button = _interopRequireDefault(require("../Button"));
@@ -68,14 +68,16 @@ const StoryExample = args => {
     style: {
       margin: "1rem"
     }
-  }, "Close side panel")), isOpen && /*#__PURE__*/_react.default.createElement(_SidePanel.default, {
+  }, "Close side panel")), /*#__PURE__*/_react.default.createElement(_SidePanel.default, {
     overlay: args.overlay,
     loading: args.loading,
     hasError: args.hasError,
     parentId: parentId,
     pinned: args.pinned,
     width: args.width,
-    className: "u-no-padding--top u-no-padding--bottom"
+    className: "u-no-padding--top u-no-padding--bottom",
+    isOpen: isOpen,
+    isAnimated: args.isAnimated
   }, /*#__PURE__*/_react.default.createElement(_SidePanel.default.Sticky, null, /*#__PURE__*/_react.default.createElement(_SidePanel.default.Header, null, /*#__PURE__*/_react.default.createElement(_SidePanel.default.HeaderTitle, null, "Edit panel"), /*#__PURE__*/_react.default.createElement(_SidePanel.default.HeaderControls, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
     appearance: "base",
     className: "u-no-margin--bottom",
@@ -173,4 +175,17 @@ const Wide = exports.Wide = {
     width: "wide"
   },
   render: StoryExample
+};
+const Animated = exports.Animated = {
+  args: {
+    className: "",
+    hasError: false,
+    parentId: "l-application-default",
+    pinned: false,
+    loading: false,
+    overlay: false,
+    width: "",
+    isAnimated: true
+  },
+  render: StoryExample
 };

package/dist/esm/components/SidePanel/SidePanel.d.ts

@@ -22,6 +22,14 @@ export type Props = {
      * Whether the side panel has an error. This will show an error message in the panel instead of rendering the children.
      */
     hasError?: boolean;
+    /**
+     * Whether the side panel animates on open and close. This requires the side panel to be controlled by the `isOpen` prop instead of conditional rendering. If you use `overlay: true`, you must also include `overflow: hidden` on the document body.
+     */
+    isAnimated?: boolean;
+    /**
+     * Whether the side panel is open or not.
+     */
+    isOpen?: boolean;
     /**
      * Whether the side panel is currently loading. This will show a spinner in the panel instead of rendering the children.
      */

package/dist/esm/components/SidePanel/SidePanel.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import classnames from "classnames";
 import { createPortal } from "react-dom";
 import Content from "./common/Content";
@@ -64,17 +64,34 @@ var SidePanelComponent = _ref => {
     overlay,
     pinned,
     width = "",
-    parentId = "l-application"
+    parentId = "l-application",
+    isOpen = true,
+    isAnimated
   } = _ref;
+  var [hiding, setHiding] = useState(true);
+  var [previousIsOpen, setPreviousIsOpen] = useState(false);
   var container = document.getElementById(parentId) || document.body;
+  if (isOpen !== previousIsOpen) {
+    setPreviousIsOpen(isOpen);
+    setHiding(true);
+  }
+
+  // Pinned side panels don't get animation in Vanilla
+  var isAnimatedFinal = isAnimated && !pinned;
+  if (!isOpen && !(isAnimatedFinal && hiding)) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(AppAside, {
     className: classnames("side-panel", className, {
-      "is-overlay": overlay
+      "is-overlay": overlay,
+      "slide-in": isAnimatedFinal
     }),
+    collapsed: !isOpen,
     "aria-label": "Side panel",
     pinned: pinned,
     narrow: width === "narrow",
-    wide: width === "wide"
+    wide: width === "wide",
+    onTransitionEnd: () => setHiding(false)
   }, loading ? /*#__PURE__*/React.createElement("div", {
     className: "loading"
   }, /*#__PURE__*/React.createElement(Spinner, null)) : hasError ? /*#__PURE__*/React.createElement("div", {

package/dist/esm/components/SidePanel/SidePanel.scss

@@ -43,3 +43,15 @@
     bottom: 0;
   }
 }
+
+.slide-in {
+  animation: slideIn 0.1s;
+}
+
+@keyframes slideIn {
+  from {
+    box-shadow: 0 0 0 0 transparent;
+    transform: translateX(100%);
+    visibility: hidden;
+  }
+}

package/dist/esm/components/SidePanel/SidePanel.stories.d.ts

@@ -9,3 +9,4 @@ export declare const Loading: Story;
 export declare const Error: Story;
 export declare const Narrow: Story;
 export declare const Wide: Story;
+export declare const Animated: Story;

package/dist/esm/components/SidePanel/SidePanel.stories.js

@@ -59,14 +59,16 @@ var StoryExample = args => {
     style: {
       margin: "1rem"
     }
-  }, "Close side panel")), isOpen && /*#__PURE__*/React.createElement(SidePanel, {
+  }, "Close side panel")), /*#__PURE__*/React.createElement(SidePanel, {
     overlay: args.overlay,
     loading: args.loading,
     hasError: args.hasError,
     parentId: parentId,
     pinned: args.pinned,
     width: args.width,
-    className: "u-no-padding--top u-no-padding--bottom"
+    className: "u-no-padding--top u-no-padding--bottom",
+    isOpen: isOpen,
+    isAnimated: args.isAnimated
   }, /*#__PURE__*/React.createElement(SidePanel.Sticky, null, /*#__PURE__*/React.createElement(SidePanel.Header, null, /*#__PURE__*/React.createElement(SidePanel.HeaderTitle, null, "Edit panel"), /*#__PURE__*/React.createElement(SidePanel.HeaderControls, null, /*#__PURE__*/React.createElement(Button, {
     appearance: "base",
     className: "u-no-margin--bottom",
@@ -164,4 +166,17 @@ export var Wide = {
     width: "wide"
   },
   render: StoryExample
+};
+export var Animated = {
+  args: {
+    className: "",
+    hasError: false,
+    parentId: "l-application-default",
+    pinned: false,
+    loading: false,
+    overlay: false,
+    width: "",
+    isAnimated: true
+  },
+  render: StoryExample
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.15.1",
+  "version": "2.16.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -93,7 +93,7 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.7.3",
     "typescript-eslint": "8.24.1",
-    "vanilla-framework": "4.29.0",
+    "vanilla-framework": "4.30.0",
     "wait-on": "8.0.2",
     "webpack": "5.98.0"
   },