@canonical/react-components 2.9.0 → 2.10.0

package/dist/components/CustomLayout/CustomLayout.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import type { HTMLProps, ReactNode } from "react";
+export type Props = {
+    /**
+     * This prop can be used to replace the header area of the panel when the default implementation is not sufficient.
+     */
+    header?: ReactNode;
+    /**
+     * The main content.
+     */
+    children: ReactNode;
+    /**
+     * Classes to apply to the main content.
+     */
+    mainClassName?: string;
+    /**
+     * Classes to apply to the main area.
+     */
+    contentClassName?: string;
+} & HTMLProps<HTMLDivElement>;
+declare const CustomLayout: ({ header, children, mainClassName, contentClassName, }: Props) => React.JSX.Element;
+export default CustomLayout;

package/dist/components/CustomLayout/CustomLayout.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ApplicationLayout = require("../ApplicationLayout");
+var _Panel = _interopRequireDefault(require("../Panel"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const CustomLayout = _ref => {
+  let {
+    header,
+    children,
+    mainClassName,
+    contentClassName
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_ApplicationLayout.AppMain, {
+    className: mainClassName,
+    id: "main-content"
+  }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+    contentClassName: contentClassName,
+    header: header
+  }, children));
+};
+var _default = exports.default = CustomLayout;

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import CustomLayout from "./CustomLayout";
+declare const meta: Meta<typeof CustomLayout>;
+export default meta;
+type Story = StoryObj<typeof CustomLayout>;
+export declare const Default: Story;
+export declare const Content: Story;

package/dist/components/CustomLayout/CustomLayout.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = exports.Content = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Panel = _interopRequireDefault(require("../Panel"));
+var _CustomLayout = _interopRequireDefault(require("./CustomLayout"));
+var _AppMain = _interopRequireDefault(require("../ApplicationLayout/AppMain"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _CustomLayout.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  args: {
+    children: "CustomLayout"
+  }
+};
+const Content = exports.Content = {
+  render: () => {
+    return /*#__PURE__*/_react.default.createElement(_AppMain.default, {
+      id: "main-content"
+    }, /*#__PURE__*/_react.default.createElement(_Panel.default, null, "test"));
+  }
+};

package/dist/components/CustomLayout/CustomLayout.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/CustomLayout/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./CustomLayout";
+export type { Props as CustomLayoutProps } from "./CustomLayout";

package/dist/components/CustomLayout/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _CustomLayout.default;
+  }
+});
+var _CustomLayout = _interopRequireDefault(require("./CustomLayout"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/Spinner/Spinner.d.ts

@@ -21,9 +21,15 @@ export type Props = {
      * The politeness setting of the spinner alert.
      */
     ariaLive?: "assertive" | "off" | "polite";
+    /**
+     * Whether the Loader is replacing the main component in the application layout.
+     * In that case, the loader has to be wrapped with a main panel of the application
+     * layout. This is important for the mobile view. This prop enables the wrapping.
+     */
+    isMainComponent?: boolean;
 } & HTMLProps<HTMLSpanElement>;
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Spin](https://docs.vanillaframework.io/settings/animation-settings/#spin) animation.
  */
-declare const Spinner: ({ className, text, isLight, ariaLive, role, ...props }: Props) => React.JSX.Element;
+declare const Spinner: ({ className, text, isLight, ariaLive, role, isMainComponent, ...props }: Props) => React.JSX.Element;
 export default Spinner;

package/dist/components/Spinner/Spinner.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _CustomLayout = _interopRequireDefault(require("../CustomLayout"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /**
@@ -19,9 +20,10 @@ const Spinner = _ref => {
     isLight = false,
     ariaLive = "polite",
     role = "alert",
+    isMainComponent = false,
     ...props
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("span", _extends({}, props, {
+  const loader = /*#__PURE__*/_react.default.createElement("span", _extends({}, props, {
     className: (0, _classnames.default)(className, "p-text--default"),
     role: role,
     "aria-live": ariaLive
@@ -30,11 +32,13 @@ const Spinner = _ref => {
       "is-light": isLight
     })
   }, text ? "" : "Loading"), text && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\u2002", /*#__PURE__*/_react.default.createElement("span", null, text)));
+  return isMainComponent ? /*#__PURE__*/_react.default.createElement(_CustomLayout.default, null, loader) : loader;
 };
 Spinner.propTypes = {
   isLight: _propTypes.default.bool,
   text: _propTypes.default.string,
   role: _propTypes.default.string,
-  ariaLive: _propTypes.default.oneOf(["assertive", "off", "polite"])
+  ariaLive: _propTypes.default.oneOf(["assertive", "off", "polite"]),
+  isMainComponent: _propTypes.default.bool
 };
 var _default = exports.default = Spinner;

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

@@ -0,0 +1,22 @@
+import React from "react";
+import type { HTMLProps, ReactNode } from "react";
+export type Props = {
+    /**
+     * This prop can be used to replace the header area of the panel when the default implementation is not sufficient.
+     */
+    header?: ReactNode;
+    /**
+     * The main content.
+     */
+    children: ReactNode;
+    /**
+     * Classes to apply to the main content.
+     */
+    mainClassName?: string;
+    /**
+     * Classes to apply to the main area.
+     */
+    contentClassName?: string;
+} & HTMLProps<HTMLDivElement>;
+declare const CustomLayout: ({ header, children, mainClassName, contentClassName, }: Props) => React.JSX.Element;
+export default CustomLayout;

package/dist/esm/components/CustomLayout/CustomLayout.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { AppMain } from "../ApplicationLayout";
+import Panel from "../Panel";
+var CustomLayout = _ref => {
+  var {
+    header,
+    children,
+    mainClassName,
+    contentClassName
+  } = _ref;
+  return /*#__PURE__*/React.createElement(AppMain, {
+    className: mainClassName,
+    id: "main-content"
+  }, /*#__PURE__*/React.createElement(Panel, {
+    contentClassName: contentClassName,
+    header: header
+  }, children));
+};
+export default CustomLayout;

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import CustomLayout from "./CustomLayout";
+declare const meta: Meta<typeof CustomLayout>;
+export default meta;
+type Story = StoryObj<typeof CustomLayout>;
+export declare const Default: Story;
+export declare const Content: Story;

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

@@ -0,0 +1,21 @@
+import React from "react";
+import Panel from "../Panel";
+import CustomLayout from "./CustomLayout";
+import AppMain from "../ApplicationLayout/AppMain";
+var meta = {
+  component: CustomLayout,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  args: {
+    children: "CustomLayout"
+  }
+};
+export var Content = {
+  render: () => {
+    return /*#__PURE__*/React.createElement(AppMain, {
+      id: "main-content"
+    }, /*#__PURE__*/React.createElement(Panel, null, "test"));
+  }
+};

package/dist/esm/components/CustomLayout/CustomLayout.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/CustomLayout/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./CustomLayout";
+export type { Props as CustomLayoutProps } from "./CustomLayout";

package/dist/esm/components/CustomLayout/index.js

@@ -0,0 +1 @@
+export { default } from "./CustomLayout";

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

@@ -21,9 +21,15 @@ export type Props = {
      * The politeness setting of the spinner alert.
      */
     ariaLive?: "assertive" | "off" | "polite";
+    /**
+     * Whether the Loader is replacing the main component in the application layout.
+     * In that case, the loader has to be wrapped with a main panel of the application
+     * layout. This is important for the mobile view. This prop enables the wrapping.
+     */
+    isMainComponent?: boolean;
 } & HTMLProps<HTMLSpanElement>;
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Spin](https://docs.vanillaframework.io/settings/animation-settings/#spin) animation.
  */
-declare const Spinner: ({ className, text, isLight, ariaLive, role, ...props }: Props) => React.JSX.Element;
+declare const Spinner: ({ className, text, isLight, ariaLive, role, isMainComponent, ...props }: Props) => React.JSX.Element;
 export default Spinner;

package/dist/esm/components/Spinner/Spinner.js

@@ -1,10 +1,11 @@
 import _pt from "prop-types";
-var _excluded = ["className", "text", "isLight", "ariaLive", "role"];
+var _excluded = ["className", "text", "isLight", "ariaLive", "role", "isMainComponent"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from "react";
 import classNames from "classnames";
+import CustomLayout from "../CustomLayout";
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Spin](https://docs.vanillaframework.io/settings/animation-settings/#spin) animation.
  */
@@ -14,10 +15,11 @@ var Spinner = _ref => {
       text,
       isLight = false,
       ariaLive = "polite",
-      role = "alert"
+      role = "alert",
+      isMainComponent = false
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+  var loader = /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: classNames(className, "p-text--default"),
     role: role,
     "aria-live": ariaLive
@@ -26,11 +28,13 @@ var Spinner = _ref => {
       "is-light": isLight
     })
   }, text ? "" : "Loading"), text && /*#__PURE__*/React.createElement(React.Fragment, null, "\u2002", /*#__PURE__*/React.createElement("span", null, text)));
+  return isMainComponent ? /*#__PURE__*/React.createElement(CustomLayout, null, loader) : loader;
 };
 Spinner.propTypes = {
   isLight: _pt.bool,
   text: _pt.string,
   role: _pt.string,
-  ariaLive: _pt.oneOf(["assertive", "off", "polite"])
+  ariaLive: _pt.oneOf(["assertive", "off", "polite"]),
+  isMainComponent: _pt.bool
 };
 export default Spinner;

package/dist/esm/index.d.ts

@@ -71,6 +71,7 @@ export { ToastNotification, ToastNotificationList, ToastNotificationProvider, us
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";
 export { default as TablePaginationControls } from "./components/TablePagination/TablePaginationControls";
+export { default as CustomLayout } from "./components/CustomLayout";
 export { default as CustomSelect } from "./components/CustomSelect";
 export type { AccordionProps } from "./components/Accordion";
 export type { ActionButtonProps } from "./components/ActionButton";

package/dist/esm/index.js

@@ -71,6 +71,7 @@ export { ToastNotification, ToastNotificationList, ToastNotificationProvider, us
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";
 export { default as TablePaginationControls } from "./components/TablePagination/TablePaginationControls";
+export { default as CustomLayout } from "./components/CustomLayout";
 export { default as CustomSelect } from "./components/CustomSelect";
 export { useOnClickOutside, useClickOutside, useId, useListener, useOnEscapePressed, usePagination, usePrevious, usePrefersReducedMotion, useThrottle, useWindowFitment } from "./hooks";
 export { isNavigationAnchor, isNavigationButton } from "./utils";

package/dist/index.d.ts

@@ -71,6 +71,7 @@ export { ToastNotification, ToastNotificationList, ToastNotificationProvider, us
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";
 export { default as TablePaginationControls } from "./components/TablePagination/TablePaginationControls";
+export { default as CustomLayout } from "./components/CustomLayout";
 export { default as CustomSelect } from "./components/CustomSelect";
 export type { AccordionProps } from "./components/Accordion";
 export type { ActionButtonProps } from "./components/ActionButton";

package/dist/index.js

@@ -94,6 +94,7 @@ var _exportNames = {
   Tooltip: true,
   TablePagination: true,
   TablePaginationControls: true,
+  CustomLayout: true,
   CustomSelect: true,
   useOnClickOutside: true,
   useClickOutside: true,
@@ -248,6 +249,12 @@ Object.defineProperty(exports, "ContextualMenu", {
     return _ContextualMenu.default;
   }
 });
+Object.defineProperty(exports, "CustomLayout", {
+  enumerable: true,
+  get: function () {
+    return _CustomLayout.default;
+  }
+});
 Object.defineProperty(exports, "CustomSelect", {
   enumerable: true,
   get: function () {
@@ -823,6 +830,7 @@ var _ThemeSwitcher = _interopRequireWildcard(require("./components/ThemeSwitcher
 var _Tooltip = _interopRequireDefault(require("./components/Tooltip"));
 var _TablePagination = _interopRequireDefault(require("./components/TablePagination"));
 var _TablePaginationControls = _interopRequireDefault(require("./components/TablePagination/TablePaginationControls"));
+var _CustomLayout = _interopRequireDefault(require("./components/CustomLayout"));
 var _CustomSelect = _interopRequireDefault(require("./components/CustomSelect"));
 var _hooks = require("./hooks");
 var _utils = require("./utils");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.9.0",
+  "version": "2.10.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.26.0",
+    "vanilla-framework": "4.26.1",
     "wait-on": "8.0.2",
     "webpack": "5.98.0"
   },