@stack-spot/portal-components 2.27.0 → 2.27.2

package/dist/svg/NotFound.d.ts

@@ -1,5 +1,5 @@
 export declare const NotFound: ({ className, style }: {
     className?: string;
     style?: React.CSSProperties;
-}) => import("react/jsx-runtime.js").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=NotFound.d.ts.map

package/dist/svg/NotFound.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable max-len */
 export const NotFound = ({ className, style }) => (_jsxs("svg", { width: "136", height: "154", viewBox: "0 0 136 154", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style, children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M54.3307 0.59375C53.716 0.59375 53.2178 1.092 53.2178 1.70662C53.2178 2.32123 53.716 2.81948 54.3307 2.81948C93.8 2.81948 125.796 34.8157 125.796 74.2851C125.796 93.0828 118.539 110.185 106.673 122.944L94.4411 110.712L94.4248 110.696C103.164 101.078 108.49 88.3032 108.49 74.2843C108.49 44.3719 84.2415 20.1231 54.3291 20.1231C24.4167 20.1231 0.167971 44.3719 0.167969 74.2843C0.167969 104.197 24.4167 128.445 54.3291 128.445C69.4218 128.445 83.0726 122.272 92.8942 112.313L105.132 124.55C92.1785 137.641 74.2017 145.751 54.3307 145.751C53.716 145.751 53.2178 146.249 53.2178 146.864C53.2178 147.478 53.716 147.976 54.3307 147.976C74.8163 147.976 93.3495 139.617 106.706 126.124L134.039 153.458C134.474 153.892 135.178 153.892 135.613 153.458C136.048 153.023 136.048 152.318 135.613 151.884L108.248 124.519C120.516 111.357 128.022 93.6974 128.022 74.2851C128.022 33.5865 95.0293 0.59375 54.3307 0.59375ZM106.265 74.2843C106.265 45.6011 83.0122 22.3489 54.3291 22.3489C25.646 22.3489 2.39371 45.6011 2.39371 74.2843C2.39371 102.967 25.646 126.22 54.3291 126.22C83.0122 126.22 106.265 102.967 106.265 74.2843Z", fill: "url(#paint0_linear_3383_224507)" }), _jsx("circle", { opacity: "0.16", cx: "54.4578", cy: "74.1883", r: "41.5984", fill: "#FAFAFB" }), _jsx("circle", { opacity: "0.16", cx: "54.0295", cy: "74.6155", r: "30.8772", fill: "#FAFAFB" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M51.915 76.8282C51.9232 78.034 52.9074 79.0048 54.1131 78.9966C55.3189 78.9884 56.2897 78.0043 56.2815 76.7985L56.1278 64.0513C56.1196 62.8455 55.1355 61.8747 53.9297 61.8829C52.7239 61.8911 51.7531 62.8752 51.7613 64.081L51.915 76.8282ZM52.218 85.6913C52.7436 86.1712 53.3605 86.4111 54.0689 86.4111C54.8001 86.4111 55.4171 86.1597 55.9198 85.657C56.4453 85.1543 56.7081 84.5602 56.7081 83.8747C56.7081 83.1663 56.4453 82.5722 55.9198 82.0924C55.3942 81.5897 54.7658 81.3383 54.0346 81.3383C53.3263 81.3383 52.7093 81.5897 52.1838 82.0924C51.681 82.5951 51.4297 83.2006 51.4297 83.909C51.4297 84.5945 51.6925 85.1886 52.218 85.6913Z", fill: "#14141A" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "paint0_linear_3383_224507", x1: "62.1628", y1: "150.93", x2: "211.15", y2: "63.5124", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#BCBCCF", stopOpacity: "0.61" }), _jsx("stop", { offset: "0.766098", stopColor: "#353546", stopOpacity: "0" })] }) })] }));
 //# sourceMappingURL=NotFound.js.map

package/dist/svg/ServerError.d.ts

@@ -1,5 +1,5 @@
 export declare const ServerError: ({ className, style }: {
     className?: string;
     style?: React.CSSProperties;
-}) => import("react/jsx-runtime.js").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ServerError.d.ts.map

package/dist/svg/ServerError.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable max-len */
 export const ServerError = ({ className, style }) => (_jsxs("svg", { width: "187", height: "115", viewBox: "0 0 187 115", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style, children: [_jsx("path", { opacity: "0.1", d: "M148.767 98.4641C148.767 79.4314 138.994 62.667 124.163 52.8555M38.5703 98.4641C38.5703 79.4314 48.343 62.667 63.174 52.8555", stroke: "url(#paint0_linear_3383_197709)", strokeWidth: "2.5731" }), _jsxs("g", { opacity: "0.5", children: [_jsx("mask", { id: "path2-inside1_3383_197709", fill: "white", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.1671 0.320312C14.2745 0.320312 11.1189 3.47587 11.1189 7.36846V52.3732V98.0428H7.77081C3.87822 98.0428 0.722656 101.198 0.722656 105.091V107.775C0.722656 111.667 3.87823 114.823 7.77082 114.823H179.562C183.454 114.823 186.61 111.667 186.61 107.775V105.091C186.61 101.198 183.454 98.0428 179.562 98.0428H176.907V7.36846C176.907 3.47588 173.752 0.320312 169.859 0.320312H18.1671ZM13.3446 7.36846C13.3446 4.70512 15.5037 2.54604 18.1671 2.54604H169.859C172.522 2.54604 174.681 4.70511 174.681 7.36846V98.042H13.3446V52.3732V7.36846ZM2.94839 105.091C2.94839 102.428 5.10746 100.269 7.77081 100.269H179.562C182.225 100.269 184.384 102.428 184.384 105.091V107.775C184.384 110.438 182.225 112.597 179.562 112.597H7.77082C5.10747 112.597 2.94839 110.438 2.94839 107.775V105.091Z" }) }), _jsx("path", { d: "M11.1189 98.0428V100.273H13.3489V98.0428H11.1189ZM176.907 98.0428H174.677V100.273H176.907V98.0428ZM174.681 98.042V100.272H176.912V98.042H174.681ZM13.3446 98.042H11.1146V100.272H13.3446V98.042ZM13.3489 7.36846C13.3489 4.70749 15.5061 2.55033 18.1671 2.55033V1.90971C13.0429 -1.90971 8.8889 2.24426 8.8889 7.36846H13.3489ZM13.3489 52.3732V7.36846H8.8889V52.3732H13.3489ZM13.3489 98.0428V52.3732H8.8889V98.0428H13.3489ZM7.77081 100.273H11.1189V95.8128H7.77081V100.273ZM2.95268 105.091C2.95268 102.43 5.10983 100.273 7.77081 100.273V95.8128C2.64661 95.8128 -1.50736 99.9668 -1.50736 105.091H2.95268ZM2.95268 107.775V105.091H1.50736V107.775H2.95268ZM7.77082 112.593C5.10984 112.593 2.95268 110.436 2.95268 107.775H1.50736C1.50736 112.899 2.64663 117.053 7.77082 117.053V112.593ZM179.562 112.593H7.77082V117.053H179.562V112.593ZM184.38 107.775C184.38 110.436 182.223 112.593 179.562 112.593V117.053C184.686 117.053 188.84 112.899 188.84 107.775H184.38ZM184.38 105.091V107.775H188.84V105.091H184.38ZM179.562 100.273C182.223 100.273 184.38 102.43 184.38 105.091H188.84C188.84 99.9668 184.686 95.8128 179.562 95.8128V100.273ZM176.907 100.273H179.562V95.8128H176.907V100.273ZM174.677 7.36846V98.0428H179.137V7.36846H174.677ZM169.859 2.55033C172.52 2.55033 174.677 4.70748 174.677 7.36846H179.137C179.137 2.24427 174.983 -1.90971 169.859 -1.90971V2.55033ZM18.1671 2.55033H169.859V1.90971H18.1671V2.55033ZM18.1671 0.316024C14.2721 0.316024 11.1146 3.47351 11.1146 7.36846H15.5747C15.5747 5.93673 16.7353 4.77606 18.1671 4.77606V0.316024ZM169.859 0.316024H18.1671V4.77606H169.859V0.316024ZM176.912 7.36846C176.912 3.47351 173.754 0.316024 169.859 0.316024V4.77606C171.291 4.77606 172.451 5.93672 172.451 7.36846H176.912ZM176.912 98.042V7.36846H172.451V98.042H176.912ZM13.3446 100.272H174.681V95.812H13.3446V100.272ZM11.1146 52.3732V98.042H15.5747V52.3732H11.1146ZM11.1146 7.36846V52.3732H15.5747V7.36846H11.1146ZM7.77081 98.0385C3.87585 98.0385 0.718369 101.196 0.718369 105.091H5.17841C5.17841 103.659 6.33906 102.499 7.77081 102.499V98.0385ZM179.562 98.0385H7.77081V102.499H179.562V98.0385ZM186.614 105.091C186.614 101.196 183.457 98.0385 179.562 98.0385V102.499C180.993 102.499 182.154 103.659 182.154 105.091H186.614ZM186.614 107.775V105.091H182.154V107.775H186.614ZM179.562 114.827C183.457 114.827 186.614 111.67 186.614 107.775H182.154C182.154 109.206 180.993 110.367 179.562 110.367V114.827ZM7.77082 114.827H179.562V110.367H7.77082V114.827ZM0.718369 107.775C0.718369 111.67 3.87587 114.827 7.77082 114.827V110.367C6.33907 110.367 5.17841 109.206 5.17841 107.775H0.718369ZM0.718369 105.091V107.775H5.17841V105.091H0.718369Z", fill: "url(#paint1_linear_3383_197709)", mask: "url(#path2-inside1_3383_197709)" })] }), _jsx("path", { opacity: "0.1", d: "M167.976 39.7734V98.097M19.5938 98.097V70.1762V39.7734", stroke: "url(#paint2_linear_3383_197709)", strokeWidth: "2.22573" }), _jsx("path", { opacity: "0.16", d: "M89.4439 19.7907C92.033 18.2959 95.223 18.2959 97.8121 19.7907L117.92 31.4003C120.51 32.8951 122.105 35.6577 122.105 38.6473V61.8665C122.105 64.8562 120.51 67.6187 117.92 69.1135L97.8121 80.7231C95.223 82.218 92.033 82.218 89.4439 80.7231L69.3355 69.1135C66.7464 67.6187 65.1514 64.8562 65.1514 61.8665V38.6473C65.1514 35.6577 66.7464 32.8951 69.3355 31.4003L89.4439 19.7907Z", fill: "#FAFAFB" }), _jsx("path", { opacity: "0.16", d: "M89.4447 26.8376C92.0338 25.3427 95.2237 25.3427 97.8128 26.8376L111.819 34.9241C114.408 36.4189 116.003 39.1815 116.003 42.1711V58.3442C116.003 61.3339 114.408 64.0964 111.819 65.5912L97.8128 73.6778C95.2237 75.1726 92.0338 75.1726 89.4447 73.6778L75.4384 65.5912C72.8493 64.0964 71.2543 61.3338 71.2543 58.3442V42.1711C71.2543 39.1815 72.8493 36.4189 75.4384 34.9241L89.4447 26.8376Z", fill: "#FAFAFB" }), _jsx("path", { opacity: "0.16", d: "M91.6031 34.1543C93.2213 33.2201 95.215 33.2201 96.8332 34.1543L107.367 40.236C108.985 41.1702 109.982 42.8968 109.982 44.7654V56.9287C109.982 58.7972 108.985 60.5238 107.367 61.4581L96.8332 67.5397C95.215 68.474 93.2213 68.474 91.6031 67.5397L81.0693 61.4581C79.4511 60.5238 78.4543 58.7972 78.4543 56.9286V44.7654C78.4543 42.8968 79.4511 41.1702 81.0694 40.236L91.6031 34.1543Z", fill: "#FAFAFB" }), _jsx("path", { d: "M100.941 43.7109L87.0802 57.5722", stroke: "#14141A", strokeWidth: "3.5491", strokeLinecap: "round" }), _jsx("path", { d: "M100.941 57.5703L87.0802 43.7091", stroke: "#14141A", strokeWidth: "3.5491", strokeLinecap: "round" }), _jsxs("defs", { children: [_jsxs("linearGradient", { id: "paint0_linear_3383_197709", x1: "93.6687", y1: "43.7117", x2: "93.6687", y2: "98.4635", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#BCBCCF", stopOpacity: "0" }), _jsx("stop", { offset: "1", stopColor: "#BCBCCF" })] }), _jsxs("linearGradient", { id: "paint1_linear_3383_197709", x1: "186.891", y1: "111.975", x2: "-6.87233", y2: "-64.7069", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#BCBCCF" }), _jsx("stop", { offset: "0.766098", stopColor: "#353546", stopOpacity: "0.09" })] }), _jsxs("linearGradient", { id: "paint2_linear_3383_197709", x1: "25.9349", y1: "96.8508", x2: "76.0716", y2: "-32.8361", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#BCBCCF" }), _jsx("stop", { offset: "0.766098", stopColor: "#353546", stopOpacity: "0.09" })] })] })] }));
 //# sourceMappingURL=ServerError.js.map

package/dist/svg/Unauthenticated.d.ts

@@ -1,5 +1,5 @@
 export declare const Unauthenticated: ({ className, style }: {
     className?: string;
     style?: React.CSSProperties;
-}) => import("react/jsx-runtime.js").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Unauthenticated.d.ts.map

package/dist/svg/Unauthenticated.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable max-len */
 export const Unauthenticated = ({ className, style }) => (_jsxs("svg", { width: "178", height: "160", viewBox: "0 0 178 160", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style, children: [_jsx("circle", { opacity: "0.16", cx: "89.6761", cy: "80.2113", r: "31.5629", fill: "#FAFAFB" }), _jsx("ellipse", { opacity: "0.16", cx: "89.6721", cy: "80.6057", rx: "22.094", ry: "21.6995", fill: "#FAFAFB" }), _jsx("ellipse", { opacity: "0.16", cx: "89.6759", cy: "80.6056", rx: "13.4142", ry: "13.0197", fill: "#FAFAFB" }), _jsx("path", { opacity: "0.5", fillRule: "evenodd", clipRule: "evenodd", d: "M44.7029 19.055C69.3231 -5.56521 109.24 -5.56521 133.861 19.055L177.651 62.8454C178.086 63.2808 178.086 63.9868 177.651 64.4222C177.215 64.8577 176.509 64.8577 176.074 64.4222L132.284 20.6319C108.534 -3.11747 70.0291 -3.11747 46.2798 20.6319C45.8443 21.0673 45.1383 21.0673 44.7029 20.6319C44.2675 20.1964 44.2675 19.4904 44.7029 19.055ZM161.243 79.8912L126.447 45.0949C105.747 24.3952 72.1863 24.3952 51.4866 45.0949L16.6903 79.8912L51.4866 114.687C72.1863 135.387 105.747 135.387 126.447 114.687L161.243 79.8912ZM128.024 43.518C106.453 21.9474 71.4803 21.9474 49.9097 43.5181L15.1135 78.3143L13.5366 79.8912L15.1135 81.468L49.9097 116.264C71.4803 137.835 106.453 137.835 128.024 116.264L162.82 81.468L164.397 79.8912L162.82 78.3143L128.024 43.518ZM44.7029 141.115C69.3231 165.736 109.24 165.736 133.861 141.115C134.296 140.68 134.296 139.974 133.861 139.538C133.425 139.103 132.719 139.103 132.284 139.538C108.534 163.288 70.0291 163.288 46.2798 139.538L2.48938 95.7481C2.05394 95.3126 1.34795 95.3126 0.912516 95.7481C0.477078 96.1835 0.477077 96.8895 0.912518 97.3249L44.7029 141.115Z", fill: "url(#paint0_linear_3383_243082)" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "paint0_linear_3383_243082", x1: "-3.35603", y1: "94.0049", x2: "89.5555", y2: "212.99", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#BCBCCF" }), _jsx("stop", { offset: "0.766098", stopColor: "#353546", stopOpacity: "0.09" })] }) })] }));
 //# sourceMappingURL=Unauthenticated.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-components",
-  "version": "2.27.0",
+  "version": "2.27.2",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -29,6 +29,11 @@
     "./ContentValidateFilter": "./dist/components/ContentValidateFilter.js",
     "./Form": "./dist/components/form/Form/index.js"
   },
+  "scripts": {
+    "build": "rimraf dist && tsc && tsc-esm-fix --target='dist'",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "check-tree-shaking": "agadoo"
+  },
   "peerDependencies": {
     "@citric/core": "^6.5.1",
     "@citric/icons": "^5.10.0",
@@ -72,10 +77,5 @@
     "rehype-raw": "^7.0.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.0"
-  },
-  "scripts": {
-    "build": "rimraf dist && tsc && tsc-esm-fix --target='dist'",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "check-tree-shaking": "agadoo"
   }
 }

package/readme.md

@@ -1,66 +1,66 @@
-# Components
-A collection of UI components, hooks, SVG images, utilities and variables shared among Stackspot web projects.
-
-What about the Design System (DS)? Some components here may be upgraded to the design system level eventually. But this is a place where we
-can have any kind of component, despite it belonging to a DS or not.
-
-## Presentation components
-These are pure functions, i.e. they rely only in their inputs to render the UI. Furthermore, they don't have any collateral effect.
-
-Exceptions: translations are the only exception here. These components can access the current language without having it passed as
-parameter.
-
-- `BreadcrumbList`: renders a list of breadcrumb navigation items. Must be imported from `@stack-spot/portal-components/Breadcrumb`.
-- `BannerWarning`: a yellow alert box with an exclamation icon and the content passed as parameter. Used for warning messages.
-- `ChatBot`: an orange circular button that can toggle the chat window from Service Now. The button has a chat icon when the window is
-closed and a close icon when it's open.
-- `ErrorFeedback`: a box with an icon and an error message. This is used for giving error feedbacks to the user.
-- `SelectionList`: a selection UI that allows the selection of one single item. These items can be divided in sections (groups). This
-component is highly customizable and has lots of accessibility features implemented.
-- `AnchorProvider`: a way to provide an anchor component (links) to be used by Stackspot libraries. This allows these libraries not to be
-coupled with an specific React navigators. To retrieve the component, use `useLinkComponent`. Must be imported from
-`@stack-spot/portal-components/anchor`.
-
-## Hooks
-
-These are useful react hooks shared among the StackSpot portals.
-
-- `useEffectOnce()`: runs an effect only once, when the component is mounted. This prevents React from running the effect twice when in
-development mode.
-- `useTitleEffect(title)`: changes the title for the current page. The title is returned to its original value as soon as the component is
-unmounted.
-- `useCheckTextOverflow()`: checks if the text fits completely in the space available.
-- `useLinkComponent()`: retrieves the anchor component declared at the closest `AnchorProvider`. If no component was provided, returns a
-component that renders the HTML `<a>` tag directly. This is useful for integration with navigators for React. Must be imported from
-`@stack-spot/portal-components/anchor`.
-- `useKeyboardControls(options)`: creates listeners for controlling a Menu UI through the keyboard (up, down, tab, esc, enter).
-- `useServiceNowEffect(options)`, `useServiceNowChatButtonVisibility()`: Service Now hooks (chat capabilities).
-
-## SVG images
-Some SVG images are exported as React components at `@stack-spot/portal-components/svg`.
-
-## Utilities and variables
-These are useful functions shared among the StackSpot portals.
-
-#### Accessibility
-- `focusNextIgnoringChildren(element)`: focus the next element in the hierarchy, ignoring the children of the element passed as parameter.
-- `focusFirstChild(element, options)`: focus the first child of element that is focusable according to the options.
-- `isFocusable(element)`: checks if the element can receive focus.
-- `focusAccessibleElement(element)`: tries to focus the element passed as parameter, but if it's not focusable, finds another element to
-focus according to accessibility rules.
-
-#### Cookie
-- `setupCookies(domainRegex)`: setup a domain regex for the cookies. Use this if the domain is different than localhost or *.stackspot.com.
-- `getCookies()`: retrieves an object with all the cookies.
-- `getCookie(name)`: same as `getCookies()[name]`.
-- `setCookie(name, value)`: sets the value of a cookie.
-- `removeCookie(name)`: removes a cookie.
-
-#### Other
-- `isNewTourStep(step)`, `hasFinishedTourStep(key)`, `tourStepBuilder(options)`, `defaultTourConfig`: related to React Tour (tutorial).
-- `openServiceNowChat()`, `serviceNowDictionary`: related to Service Now chat service.
-
-# Developer notes
-- Since not every component in this library will be used by every project. This library must be tree-shakeable! Before committing, make sure
-`pnpm check-tree-shaking` passes.
-
+# Components
+A collection of UI components, hooks, SVG images, utilities and variables shared among Stackspot web projects.
+
+What about the Design System (DS)? Some components here may be upgraded to the design system level eventually. But this is a place where we
+can have any kind of component, despite it belonging to a DS or not.
+
+## Presentation components
+These are pure functions, i.e. they rely only in their inputs to render the UI. Furthermore, they don't have any collateral effect.
+
+Exceptions: translations are the only exception here. These components can access the current language without having it passed as
+parameter.
+
+- `BreadcrumbList`: renders a list of breadcrumb navigation items. Must be imported from `@stack-spot/portal-components/Breadcrumb`.
+- `BannerWarning`: a yellow alert box with an exclamation icon and the content passed as parameter. Used for warning messages.
+- `ChatBot`: an orange circular button that can toggle the chat window from Service Now. The button has a chat icon when the window is
+closed and a close icon when it's open.
+- `ErrorFeedback`: a box with an icon and an error message. This is used for giving error feedbacks to the user.
+- `SelectionList`: a selection UI that allows the selection of one single item. These items can be divided in sections (groups). This
+component is highly customizable and has lots of accessibility features implemented.
+- `AnchorProvider`: a way to provide an anchor component (links) to be used by Stackspot libraries. This allows these libraries not to be
+coupled with an specific React navigators. To retrieve the component, use `useLinkComponent`. Must be imported from
+`@stack-spot/portal-components/anchor`.
+
+## Hooks
+
+These are useful react hooks shared among the StackSpot portals.
+
+- `useEffectOnce()`: runs an effect only once, when the component is mounted. This prevents React from running the effect twice when in
+development mode.
+- `useTitleEffect(title)`: changes the title for the current page. The title is returned to its original value as soon as the component is
+unmounted.
+- `useCheckTextOverflow()`: checks if the text fits completely in the space available.
+- `useLinkComponent()`: retrieves the anchor component declared at the closest `AnchorProvider`. If no component was provided, returns a
+component that renders the HTML `<a>` tag directly. This is useful for integration with navigators for React. Must be imported from
+`@stack-spot/portal-components/anchor`.
+- `useKeyboardControls(options)`: creates listeners for controlling a Menu UI through the keyboard (up, down, tab, esc, enter).
+- `useServiceNowEffect(options)`, `useServiceNowChatButtonVisibility()`: Service Now hooks (chat capabilities).
+
+## SVG images
+Some SVG images are exported as React components at `@stack-spot/portal-components/svg`.
+
+## Utilities and variables
+These are useful functions shared among the StackSpot portals.
+
+#### Accessibility
+- `focusNextIgnoringChildren(element)`: focus the next element in the hierarchy, ignoring the children of the element passed as parameter.
+- `focusFirstChild(element, options)`: focus the first child of element that is focusable according to the options.
+- `isFocusable(element)`: checks if the element can receive focus.
+- `focusAccessibleElement(element)`: tries to focus the element passed as parameter, but if it's not focusable, finds another element to
+focus according to accessibility rules.
+
+#### Cookie
+- `setupCookies(domainRegex)`: setup a domain regex for the cookies. Use this if the domain is different than localhost or *.stackspot.com.
+- `getCookies()`: retrieves an object with all the cookies.
+- `getCookie(name)`: same as `getCookies()[name]`.
+- `setCookie(name, value)`: sets the value of a cookie.
+- `removeCookie(name)`: removes a cookie.
+
+#### Other
+- `isNewTourStep(step)`, `hasFinishedTourStep(key)`, `tourStepBuilder(options)`, `defaultTourConfig`: related to React Tour (tutorial).
+- `openServiceNowChat()`, `serviceNowDictionary`: related to Service Now chat service.
+
+# Developer notes
+- Since not every component in this library will be used by every project. This library must be tree-shakeable! Before committing, make sure
+`pnpm check-tree-shaking` passes.
+

package/src/components/AnimatedHeight.tsx

@@ -1,174 +1,174 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { useCallback, useEffect, useLayoutEffect, useRef } from 'react'
-import styled from 'styled-components'
-import { useManualRender } from '../hooks/manual-render'
-
-interface Props {
-  /**
-   * A header with fixed height.
-   */
-  header?: React.ReactElement,
-  /**
-   * The content. This may change its height whenever. When the height changes, the animation will play making a fluid transition from the
-   * previous height to the next.
-   */
-  children: React.ReactElement,
-  /**
-   * A footer with fixed height.
-   */
-  footer?: React.ReactElement,
-  /**
-   * Whether or not this panel is visible. Changing this value, animates the panel's height.
-   * @default true
-   */
-  visible?: boolean,
-  /**
-   * The duration of the animations in milliseconds.
-   * @default 300
-   */
-  duration?: number,
-  /**
-   * This component wraps its content in a div that changes its height from zero to the size of its content. It is not recommended to add
-   * styles to it, but if you need to, use this property.
-   */
-  outerStyle?: React.CSSProperties,
-  /**
-   * This component wraps its content in a div that changes its height from zero to the size of its content. It is not recommended to add
-   * classes to it, but if you need to, use this property.
-   */
-  outerClassName?: string,
-  /**
-   * The style to apply to the whole panel.
-   * 
-   * Attention: this is not the outer-most div, use `outerStyle` if you need to style it.
-   */
-  style?: React.CSSProperties,
-  /**
-   * The class to apply to the whole panel.
-   * 
-   * Attention: this is not the outer-most div, use `outerClassName` if you need to add a class to it.
-   */
-  className?: string,
-}
-
-interface Heights {
-  header: number,
-  content: number,
-  footer: number,
-  extra: number,
-}
-
-type ComponentStatus = 'initial' | 'hidden' | 'visible'
-
-const Box = styled.div<{ $animationMs: number }>`
-  overflow-y: clip; // <-- do not use hidden, it's buggy in Chrome.
-  transition: height ease-in-out ${({ $animationMs }) => $animationMs / 1000}s;
-
-  .wrapper {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &.initial {
-    opacity: 0;
-    pointer-events: none;
-    overflow: inherit;
-    transition: none;
-
-    &.content {
-      overflow: inherit;
-      transition: none;
-    }
-  }
-
-  .content {
-    overflow: hidden;
-    transition: height ease-in-out ${({ $animationMs }) => $animationMs / 1000}s;
-  }
-`
-
-function getActualContent(wrapper: HTMLElement) {
-  const firstChild = wrapper.firstChild
-  if (!firstChild || !('tagName' in firstChild)) throw new Error('AnimatedHeight could not find any content to animate')
-  return firstChild as HTMLElement
-}
-
-function onChangeHeight(element: HTMLElement, callback: (height: number) => void) {
-  const resizeObserver = new ResizeObserver((entries) => {
-    const entry = entries[0]
-    const newHeight = entry.borderBoxSize[0].blockSize
-    callback(newHeight)
-  })
-  resizeObserver.observe(element)
-  return () => resizeObserver.disconnect()
-}
-
-/**
- * This is a generic component for animating the height of a panel whenever its content changes.
- * 
- * You can provide a header and a footer with fixed height, these won't change during the animations and will always be visible.
- * 
- * This panel can also be hidden or visible and transitions between these two state will be animated.
- * @param props the React props for this component. {@link Props}.
- */
-export const AnimatedHeight = (
-  { children, footer, header, visible = true, duration = 300, className, style, outerClassName, outerStyle } : Props,
-) => {
-  const { repaint } = useManualRender()
-  const boxRef = useRef<HTMLDivElement>(null)
-  const wrapperRef = useRef<HTMLDivElement>(null)
-  const headerRef = useRef<HTMLDivElement>(null)
-  const contentRef = useRef<HTMLDivElement>(null)
-  const footerRef = useRef<HTMLDivElement>(null)
-  const heights = useRef<Heights>({ content: 0, footer: 0, header: 0, extra: 0 })
-  const status = useRef<ComponentStatus>('initial')
-
-  const updateHeight = useCallback(() => {
-    if (boxRef.current) {
-      boxRef.current.style.height = `${heights.current.content + heights.current.header + heights.current.footer + heights.current.extra}px`
-    }
-    if (contentRef.current) contentRef.current.style.height = `${heights.current.content}px`
-  }, [])
-
-  useLayoutEffect(() => {
-    let unsubscribe: (() => void) | undefined
-    if (headerRef.current) heights.current.header = headerRef.current.getBoundingClientRect().height
-    if (contentRef.current) {
-      heights.current.content = contentRef.current.getBoundingClientRect().height
-      unsubscribe = onChangeHeight(getActualContent(contentRef.current), (height) => {
-        heights.current.content = height
-        if (status.current === 'visible' && boxRef.current) updateHeight()
-      })
-    }
-    if (footerRef.current) heights.current.footer = footerRef.current.getBoundingClientRect().height
-    if (wrapperRef.current) heights.current.extra = wrapperRef.current.getBoundingClientRect().height
-      - heights.current.header
-      - heights.current.footer
-      - heights.current.content
-    status.current = visible ? 'visible' : 'hidden'
-    repaint()
-    return unsubscribe
-  }, [])
-
-  useEffect(() => {
-    if (status.current === 'initial') return
-    status.current = visible ? 'visible' : 'hidden'
-    if (visible) updateHeight()
-    else if (boxRef.current) boxRef.current.style.height = '0'
-  }, [visible])
-
-  return (
-    <Box
-      ref={boxRef}
-      $animationMs={duration}
-      className={listToClass([outerClassName, status.current === 'initial' && 'initial'])}
-      style={outerStyle}
-    >
-      <div ref={wrapperRef} className={listToClass(['wrapper', className])} style={style}>
-        {header && <div ref={headerRef}>{header}</div>}
-        <div ref={contentRef} className="content">{children}</div>
-        {footer && <div ref={footerRef}>{footer}</div>}
-      </div>
-    </Box>
-  )
-}
+import { listToClass } from '@stack-spot/portal-theme'
+import { useCallback, useEffect, useLayoutEffect, useRef } from 'react'
+import styled from 'styled-components'
+import { useManualRender } from '../hooks/manual-render'
+
+interface Props {
+  /**
+   * A header with fixed height.
+   */
+  header?: React.ReactElement,
+  /**
+   * The content. This may change its height whenever. When the height changes, the animation will play making a fluid transition from the
+   * previous height to the next.
+   */
+  children: React.ReactElement,
+  /**
+   * A footer with fixed height.
+   */
+  footer?: React.ReactElement,
+  /**
+   * Whether or not this panel is visible. Changing this value, animates the panel's height.
+   * @default true
+   */
+  visible?: boolean,
+  /**
+   * The duration of the animations in milliseconds.
+   * @default 300
+   */
+  duration?: number,
+  /**
+   * This component wraps its content in a div that changes its height from zero to the size of its content. It is not recommended to add
+   * styles to it, but if you need to, use this property.
+   */
+  outerStyle?: React.CSSProperties,
+  /**
+   * This component wraps its content in a div that changes its height from zero to the size of its content. It is not recommended to add
+   * classes to it, but if you need to, use this property.
+   */
+  outerClassName?: string,
+  /**
+   * The style to apply to the whole panel.
+   * 
+   * Attention: this is not the outer-most div, use `outerStyle` if you need to style it.
+   */
+  style?: React.CSSProperties,
+  /**
+   * The class to apply to the whole panel.
+   * 
+   * Attention: this is not the outer-most div, use `outerClassName` if you need to add a class to it.
+   */
+  className?: string,
+}
+
+interface Heights {
+  header: number,
+  content: number,
+  footer: number,
+  extra: number,
+}
+
+type ComponentStatus = 'initial' | 'hidden' | 'visible'
+
+const Box = styled.div<{ $animationMs: number }>`
+  overflow-y: clip; // <-- do not use hidden, it's buggy in Chrome.
+  transition: height ease-in-out ${({ $animationMs }) => $animationMs / 1000}s;
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &.initial {
+    opacity: 0;
+    pointer-events: none;
+    overflow: inherit;
+    transition: none;
+
+    &.content {
+      overflow: inherit;
+      transition: none;
+    }
+  }
+
+  .content {
+    overflow: hidden;
+    transition: height ease-in-out ${({ $animationMs }) => $animationMs / 1000}s;
+  }
+`
+
+function getActualContent(wrapper: HTMLElement) {
+  const firstChild = wrapper.firstChild
+  if (!firstChild || !('tagName' in firstChild)) throw new Error('AnimatedHeight could not find any content to animate')
+  return firstChild as HTMLElement
+}
+
+function onChangeHeight(element: HTMLElement, callback: (height: number) => void) {
+  const resizeObserver = new ResizeObserver((entries) => {
+    const entry = entries[0]
+    const newHeight = entry.borderBoxSize[0].blockSize
+    callback(newHeight)
+  })
+  resizeObserver.observe(element)
+  return () => resizeObserver.disconnect()
+}
+
+/**
+ * This is a generic component for animating the height of a panel whenever its content changes.
+ * 
+ * You can provide a header and a footer with fixed height, these won't change during the animations and will always be visible.
+ * 
+ * This panel can also be hidden or visible and transitions between these two state will be animated.
+ * @param props the React props for this component. {@link Props}.
+ */
+export const AnimatedHeight = (
+  { children, footer, header, visible = true, duration = 300, className, style, outerClassName, outerStyle } : Props,
+) => {
+  const { repaint } = useManualRender()
+  const boxRef = useRef<HTMLDivElement>(null)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  const headerRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+  const footerRef = useRef<HTMLDivElement>(null)
+  const heights = useRef<Heights>({ content: 0, footer: 0, header: 0, extra: 0 })
+  const status = useRef<ComponentStatus>('initial')
+
+  const updateHeight = useCallback(() => {
+    if (boxRef.current) {
+      boxRef.current.style.height = `${heights.current.content + heights.current.header + heights.current.footer + heights.current.extra}px`
+    }
+    if (contentRef.current) contentRef.current.style.height = `${heights.current.content}px`
+  }, [])
+
+  useLayoutEffect(() => {
+    let unsubscribe: (() => void) | undefined
+    if (headerRef.current) heights.current.header = headerRef.current.getBoundingClientRect().height
+    if (contentRef.current) {
+      heights.current.content = contentRef.current.getBoundingClientRect().height
+      unsubscribe = onChangeHeight(getActualContent(contentRef.current), (height) => {
+        heights.current.content = height
+        if (status.current === 'visible' && boxRef.current) updateHeight()
+      })
+    }
+    if (footerRef.current) heights.current.footer = footerRef.current.getBoundingClientRect().height
+    if (wrapperRef.current) heights.current.extra = wrapperRef.current.getBoundingClientRect().height
+      - heights.current.header
+      - heights.current.footer
+      - heights.current.content
+    status.current = visible ? 'visible' : 'hidden'
+    repaint()
+    return unsubscribe
+  }, [])
+
+  useEffect(() => {
+    if (status.current === 'initial') return
+    status.current = visible ? 'visible' : 'hidden'
+    if (visible) updateHeight()
+    else if (boxRef.current) boxRef.current.style.height = '0'
+  }, [visible])
+
+  return (
+    <Box
+      ref={boxRef}
+      $animationMs={duration}
+      className={listToClass([outerClassName, status.current === 'initial' && 'initial'])}
+      style={outerStyle}
+    >
+      <div ref={wrapperRef} className={listToClass(['wrapper', className])} style={style}>
+        {header && <div ref={headerRef}>{header}</div>}
+        <div ref={contentRef} className="content">{children}</div>
+        {footer && <div ref={footerRef}>{footer}</div>}
+      </div>
+    </Box>
+  )
+}