@canonical/react-components 2.15.0 → 2.16.0

package/dist/components/ScrollableTable/ScrollableTable.scss

@@ -35,7 +35,7 @@
     width: 100%;
   }
 
-  @media screen and (max-width: $breakpoint-large) {
+  @media screen and (width < $breakpoint-large) {
     .p-table--mobile-card {
       thead {
         display: none;

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

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof ScrollableTable>;
 export default meta;
 type Story = StoryObj<typeof ScrollableTable>;
 export declare const Default: Story;
+export declare const Responsive: Story;

package/dist/components/ScrollableTable/ScrollableTable.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Default = void 0;
+exports.default = exports.Responsive = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ScrollableTable = _interopRequireDefault(require("./ScrollableTable"));
 var _index = require("../../index");
@@ -23,9 +23,6 @@ const StoryExample = args => {
     content: "Size"
   }, {
     content: "ID"
-  }, {
-    "aria-label": "Actions",
-    className: "actions"
   }];
   const facts = ["Dragons are mythical creatures", "They can fly", "They breathe fire", "They hoard treasure", "They are often depicted as large reptiles", "They appear in various cultures' folklore", "They can be friendly or hostile", "They are often associated with wisdom", "They can shapeshift in some legends", "They are sometimes guardians of sacred places", "They can be found in literature and movies", "They are often depicted with wings", "They can be of various colors", "They are sometimes associated with knights"];
   const rows = facts.map(item => {
@@ -49,6 +46,7 @@ const StoryExample = args => {
   }, /*#__PURE__*/_react.default.createElement(_index.MainTable, {
     headers: headers,
     rows: rows,
+    responsive: args["responsive"],
     id: "facts-about-dragons"
   })), /*#__PURE__*/_react.default.createElement("div", {
     id: "footer"
@@ -66,4 +64,18 @@ const Default = exports.Default = {
       page: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_blocks.Title, null), /*#__PURE__*/_react.default.createElement(_blocks.Subtitle, null), /*#__PURE__*/_react.default.createElement(_blocks.Description, null))
     }
   }
+};
+const Responsive = exports.Responsive = {
+  args: {
+    belowIds: ["footer"]
+  },
+  render: args => StoryExample({
+    ...args,
+    responsive: true
+  }),
+  parameters: {
+    docs: {
+      page: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_blocks.Title, null), /*#__PURE__*/_react.default.createElement(_blocks.Subtitle, null), /*#__PURE__*/_react.default.createElement(_blocks.Description, null))
+    }
+  }
 };

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/ScrollableTable/ScrollableTable.scss

@@ -35,7 +35,7 @@
     width: 100%;
   }
 
-  @media screen and (max-width: $breakpoint-large) {
+  @media screen and (width < $breakpoint-large) {
     .p-table--mobile-card {
       thead {
         display: none;

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

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof ScrollableTable>;
 export default meta;
 type Story = StoryObj<typeof ScrollableTable>;
 export declare const Default: Story;
+export declare const Responsive: Story;

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

@@ -1,3 +1,8 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React from "react";
 import ScrollableTable from "./ScrollableTable";
 import { MainTable } from "../../index";
@@ -16,9 +21,6 @@ var StoryExample = args => {
     content: "Size"
   }, {
     content: "ID"
-  }, {
-    "aria-label": "Actions",
-    className: "actions"
   }];
   var facts = ["Dragons are mythical creatures", "They can fly", "They breathe fire", "They hoard treasure", "They are often depicted as large reptiles", "They appear in various cultures' folklore", "They can be friendly or hostile", "They are often associated with wisdom", "They can shapeshift in some legends", "They are sometimes guardians of sacred places", "They can be found in literature and movies", "They are often depicted with wings", "They can be of various colors", "They are sometimes associated with knights"];
   var rows = facts.map(item => {
@@ -42,6 +44,7 @@ var StoryExample = args => {
   }, /*#__PURE__*/React.createElement(MainTable, {
     headers: headers,
     rows: rows,
+    responsive: args["responsive"],
     id: "facts-about-dragons"
   })), /*#__PURE__*/React.createElement("div", {
     id: "footer"
@@ -59,4 +62,17 @@ export var Default = {
       page: () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, null), /*#__PURE__*/React.createElement(Subtitle, null), /*#__PURE__*/React.createElement(Description, null))
     }
   }
+};
+export var Responsive = {
+  args: {
+    belowIds: ["footer"]
+  },
+  render: args => StoryExample(_objectSpread(_objectSpread({}, args), {}, {
+    responsive: true
+  })),
+  parameters: {
+    docs: {
+      page: () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, null), /*#__PURE__*/React.createElement(Subtitle, null), /*#__PURE__*/React.createElement(Description, null))
+    }
+  }
 };

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.0",
+  "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"
   },