@stack-spot/portal-components 1.3.3-rc → 1.3.3

package/dist/components/Notifications/NotificationItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationItem.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"NotificationItem.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAiD,IAAI,EAAE,MAAM,cAAc,CAAA;AAC9G,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAGpD,MAAM,MAAM,GAAG;IACb,IAAI,EAAE,CAAC,KAAa,EAAE,MAAe,EAAE,EAAE,CAAC,CAAC;QACzC,UAAU,EAAE,aAAa,KAAK,EAAE;QAChC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;KAC1B,CAAC;CACgD,CAAA;AAEpD,MAAM,aAAa,GAAkD;IACnE,GAAG,EAAE,aAAa;IAClB,MAAM,EAAE,aAAa;IACrB,IAAI,EAAE,YAAY;CACnB,CAAA;AAOD,MAAM,KAAK,GAAW;IACpB,OAAO,EAAE;QACP,UAAU,EAAC;YACT,GAAG,EAAE,KAAK;SACX;KACF;CACF,CAAA;AAED;;;;GAIG;AACH,MAAM,kBAAkB,GAAG,CAAC,EAAE,YAAY,EAAE,SAAS,EAAyB,EAAE,EAAE,CAAC,CACjF,KAAC,IAAI,IAAC,cAAc,EAAC,eAAe,EAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAC,QAAQ,YAC3G,KAAC,IAAI,IAAC,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EAAE,cAAc,kBAC5D,YAAY,CAAC,KAAK,GACd,GACF,CACR,CAAA;AAED;;;;;GAKG;AACH,MAAM,UAAU,GAAG,CAAC,UAAkB,EAAU,EAAE;IAChD,MAAM,SAAS,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAA;IACtC,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAA;IACxB,OAAO,gBAAgB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;AAC3C,CAAC,CAAA;AAED;;;;GAIG;AACH,MAAM,mBAAmB,GAAG,CAAC,EAAE,YAAY,EAAE,SAAS,EAAS,EAAE,EAAE;IACjE,MAAM,EAAE,UAAU,EAAE,GAAG,gBAAgB,EAAE,CAAA;IACzC,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAElC,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,UAAU,CAAC,CAAA;IAEnD,OAAO,CACL,8BACG,CAAC,SAAS,IAAI,KAAC,IAAI,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,YAC/B,KAAC,YAAY,cAAE,YAAY,CAAC,WAAW,GAAgB,GAClD,EACP,MAAC,IAAI,eACH,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,WAAW,YAClD,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,GACnB,EACP,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,WAAW,EAAC,EAAE,EAAC,GAAG,uBAErD,EACN,CAAC,SAAS,IAAI,8BACb,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,WAAW,YAClD,UAAU,CAAC,YAAY,CAAC,UAAU,CAAC,GAC/B,EACP,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,WAAW,EAAC,EAAE,EAAC,GAAG,uBAErD,IACN,EACH,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,WAAW,YAClD,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,GAAG,GAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAC5C,IACF,IACN,CACJ,CAAA;AACH,CAAC,CAAA;AAOD;;;;GAIG;AACH,MAAM,kBAAkB,GAAG,CAAC,EAAE,cAAc,EAAE,qBAAqB,EAA2B,EAAE,EAAE;IAChG,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,MAAM,IAAI,GAAG,YAAY,EAAE,CAAA;IAE3B,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAC,GAAG,YACV,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,WAAW,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,cAAc,CAAC,YAC1F,KAAC,IAAI,IAAC,IAAI,EAAE,cAAc,YACxB,KAAC,IAAI,IAAC,WAAW,EAAE,sBAAsB,YACtC,CAAC,CAAC,WAAW,GACT,GACF,GACA,GACJ,CACR,CAAA;AACH,CAAC,CAAA;AAMD;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,qBAAqB,EAAyB,EAAE,EAAE;IAC5G,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,OAAO,CACL,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAC/B,MAAC,IAAI,IAAC,EAAE,EAAC,WAAW,EAAC,CAAC,EAAC,SAAS,EAAC,CAAC,EAAC,IAAI,EACrC,aAAa,EAAC,QAAQ,EAAC,CAAC,EAAC,MAAM,EAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,aAChH,KAAC,kBAAkB,IAAC,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,qBAAqB,EAAE,qBAAqB,GAAG,EACrH,KAAC,mBAAmB,IAAC,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,GAAI,EACxE,YAAY,CAAC,cAAc,IAAI,KAAC,kBAAkB,IAAC,cAAc,EAAE,YAAY,CAAC,cAAc,EAC7F,qBAAqB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,qBAAqB,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,GAAI,IACrF,EACP,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,YACzD,KAAC,OAAO,IAAC,IAAI,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,EAAE,QAAQ,EAAC,MAAM,EACpF,EAAE,EAAE,WAAW,YAAY,CAAC,KAAK,EAAE,EAAE,IAAI,EAAC,SAAS,EACnD,EAAE,EAAE,KAAK,CAAC,OAAO,YACjB,KAAC,UAAU,wBAAmB,WAAW,YAAY,CAAC,KAAK,EAAE,EAC3D,EAAE,EAAE,EAAE,OAAO,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,YACjD,KAAC,OAAO,IACN,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE;gCACZ,qBAAqB,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;4BACvD,CAAC,YAEA,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,QAAQ,KAAG,CAAC,CAAC,CAAC,KAAC,YAAY,KAAG,GACjD,GACC,GACL,GACN,IACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,WAAW,EAAE,eAAe;QAC5B,OAAO,EAAE,SAAS;QAClB,SAAS,EAAE,WAAW;QACtB,MAAM,EAAE,QAAQ;QAChB,OAAO,EAAE,UAAU;QACnB,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,cAAc;QAC1B,YAAY,EAAE,gBAAgB;KAC/B;IACD,EAAE,EAAE;QACF,WAAW,EAAE,iBAAiB;QAC9B,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,WAAW;QACtB,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,kBAAkB;QAC9B,YAAY,EAAE,sBAAsB;KACrC;CACmB,CAAA"}

package/dist/components/StatusCircle.d.ts

@@ -15,11 +15,10 @@ interface WithTooltip {
     style?: React.CSSProperties;
 }
 /**
- * StatusCircle component that displays a colored circle based on the status.
+ * Renders a component that displays a colored circle based on the status.
  * It also supports an optional tooltip.
  *
- * @param {Props} props - The props for the StatusCircle component.
- * @returns {JSX.Element} The StatusCircle component.
+ * @param props the component's props {@link Props}.
  */
 export declare const StatusCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<WithTooltip, Props>> & string & Omit<({ tooltip, className, style }: WithTooltip) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export {};

package/dist/components/StatusCircle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusCircle.d.ts","sourceRoot":"","sources":["../../src/components/StatusCircle.tsx"],"names":[],"mappings":";AAOA,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;AAE9E,UAAU,KAAK;IACb,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAsBD,UAAU,WAAW;IACnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAaD;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,4LAZiC,WAAW,4FAiBpE,CAAA"}
+{"version":3,"file":"StatusCircle.d.ts","sourceRoot":"","sources":["../../src/components/StatusCircle.tsx"],"names":[],"mappings":";AAOA,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;AAE9E,UAAU,KAAK;IACb,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAsBD,UAAU,WAAW;IACnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAYD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,4LAXiC,WAAW,4FAgBpE,CAAA"}

package/dist/components/StatusCircle.js

@@ -23,19 +23,17 @@ function getColorFromStatus(theme, status) {
 /**
  * CircleWithTooltip component that displays a circle with an optional tooltip.
  *
- * @param {WithTooltip} props - The props for the CircleWithTooltip component.
- * @returns {JSX.Element} The CircleWithTooltip component.
+ * @param props the component's props {@link WithTooltip}.
  */
 const CircleWithTooltip = ({ tooltip, className, style }) => {
     const circle = _jsx("div", { style: style, className: className });
     return tooltip && tooltip.length ? _jsx(Tooltip, { text: tooltip, children: circle }) : circle;
 };
 /**
- * StatusCircle component that displays a colored circle based on the status.
+ * Renders a component that displays a colored circle based on the status.
  * It also supports an optional tooltip.
  *
- * @param {Props} props - The props for the StatusCircle component.
- * @returns {JSX.Element} The StatusCircle component.
+ * @param props the component's props {@link Props}.
  */
 export const StatusCircle = styled(CircleWithTooltip) `
   background-color: ${({ status, theme }) => getColorFromStatus(theme, status)};

package/dist/components/StatusCircle.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusCircle.js","sourceRoot":"","sources":["../../src/components/StatusCircle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAatC,MAAM,aAAa,GAA0B;IAC3C,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,YAAY;IACpB,QAAQ,EAAE,eAAe;IACzB,OAAO,EAAE,oBAAoB;CAC9B,CAAA;AAED;;;;;;GAMG;AACH,SAAS,kBAAkB,CAAC,KAAY,EAAE,MAAe;IACvD,MAAM,SAAS,GAAG,MAAM,IAAI,MAAM,IAAI,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAA;IACnG,OAAO,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;AACnC,CAAC;AAWD;;;;;GAKG;AACH,MAAM,iBAAiB,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAe,EAAE,EAAE;IACvE,MAAM,MAAM,GAAG,cAAK,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAQ,CAAA;IAC9D,OAAO,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAE,OAAO,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAA;AACxF,CAAC,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAO;sBACtC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,kBAAkB,CAAC,KAAY,EAAE,MAAM,CAAC;;;;CAIpF,CAAA"}
+{"version":3,"file":"StatusCircle.js","sourceRoot":"","sources":["../../src/components/StatusCircle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAatC,MAAM,aAAa,GAA0B;IAC3C,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,YAAY;IACpB,QAAQ,EAAE,eAAe;IACzB,OAAO,EAAE,oBAAoB;CAC9B,CAAA;AAED;;;;;;GAMG;AACH,SAAS,kBAAkB,CAAC,KAAY,EAAE,MAAe;IACvD,MAAM,SAAS,GAAG,MAAM,IAAI,MAAM,IAAI,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAA;IACnG,OAAO,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;AACnC,CAAC;AAWD;;;;GAIG;AACH,MAAM,iBAAiB,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAe,EAAE,EAAE;IACvE,MAAM,MAAM,GAAG,cAAK,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAQ,CAAA;IAC9D,OAAO,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAE,OAAO,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAA;AACxF,CAAC,CAAA;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAO;sBACtC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,kBAAkB,CAAC,KAAY,EAAE,MAAM,CAAC;;;;CAIpF,CAAA"}

package/dist/index.d.ts

@@ -1,10 +1,12 @@
 export { BannerWarning } from './components/BannerWarning.js';
 export { ChatBot } from './components/ChatBot.js';
+export { AsyncContent } from './components/AsyncContent.js';
 export { useKeyboardControls } from './hooks/keyboard.js';
 export { openServiceNowChat, dictionary as serviceNowDictionary, useServiceNowChatButtonVisibility, useServiceNowEffect } from './hooks/service-now.js';
 export { useCheckTextOverflow } from './hooks/text.js';
 export { titleEffect, useTitleEffect } from './hooks/title.js';
 export { useEffectOnce } from './hooks/use-effect-once.js';
+export { useDateFormatter } from './hooks/date.js';
 export * from './utils/accessibility.js';
 export * from './utils/cookie.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,kBAAkB,EAAE,UAAU,IAAI,oBAAoB,EAAE,iCAAiC,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpJ,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,kBAAkB,EAAE,UAAU,IAAI,oBAAoB,EAAE,iCAAiC,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpJ,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA"}

package/dist/index.js

@@ -1,10 +1,12 @@
 export { BannerWarning } from './components/BannerWarning.js';
 export { ChatBot } from './components/ChatBot.js';
+export { AsyncContent } from './components/AsyncContent.js';
 export { useKeyboardControls } from './hooks/keyboard.js';
 export { openServiceNowChat, dictionary as serviceNowDictionary, useServiceNowChatButtonVisibility, useServiceNowEffect } from './hooks/service-now.js';
 export { useCheckTextOverflow } from './hooks/text.js';
 export { titleEffect, useTitleEffect } from './hooks/title.js';
 export { useEffectOnce } from './hooks/use-effect-once.js';
+export { useDateFormatter } from './hooks/date.js';
 export * from './utils/accessibility.js';
 export * from './utils/cookie.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,kBAAkB,EAAE,UAAU,IAAI,oBAAoB,EAAE,iCAAiC,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpJ,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,kBAAkB,EAAE,UAAU,IAAI,oBAAoB,EAAE,iCAAiC,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpJ,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-components",
-  "version": "1.3.3-rc",
+  "version": "1.3.3",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -14,6 +14,7 @@
     "./Notifications": "./dist/components/Notifications/index.js",
     "./StatusCircle": "./dist/components/StatusCircle.js",
     "./InfiniteScroll": "./dist/components/InfiniteScroll.js",
+    "./ScrollView": "./dist/components/ScrollView.js",
     "./svg": "./dist/svg/index.js",
     "./anchor": "./dist/context/anchor.js"
   },

package/readme.md

@@ -66,4 +66,3 @@ focus according to accessibility rules.
 # 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/LazyMarkdown/BlockquoteMd.tsx

@@ -6,6 +6,13 @@ import { createElement } from 'react'
 
 type IconName = keyof typeof icons
 
+/**
+ * BlockquoteMd component that renders a styled blockquote with an icon and text based on the provided props.
+ *
+ * @param {Object} props - The props for the BlockquoteMd component.
+ * @param {any} props.props - The properties passed to the component.
+ * @returns {JSX.Element} The BlockquoteMd component.
+ */
 export const BlockquoteMd = ({ props }: { props: any }) => {
   const t = useTranslate(dictionary)
   const arrayNode = props.node
@@ -44,6 +51,12 @@ export const BlockquoteMd = ({ props }: { props: any }) => {
   )
 }
 
+/**
+ * Get the style for the blockquote based on the block rule.
+ *
+ * @param {string} blockRule - The block rule to determine the style.
+ * @returns {{ color: OneOfColorSchemes, icon: IconName }} The style object containing color and icon.
+ */
 function blockquoteAlertStyle(blockRule: string) {
   const style: Record<string, { color: OneOfColorSchemes, icon: IconName }> = {
     '[!NOTE]': {
@@ -80,7 +93,7 @@ const dictionary = {
     '[!INFO]': 'Info',
     '[!IMPORTANT]': 'Important',
     '[!TIP]': 'Tip',
-    '[!WARNING]': 'Warning',
+    '[!WARNING]xw': 'Warning',
     '[!DANGER]': 'Danger',
   },
   pt: {

package/src/components/LazyMarkdown/CodeViewer.tsx

@@ -2,6 +2,7 @@ import { Box, Flex, Text } from '@citric/core'
 import { getColor, getRadius } from '@citric/core/dist/utils/theme'
 import { Copy, Refresh } from '@citric/icons'
 import { IconButton } from '@citric/ui'
+import { theme } from '@stack-spot/portal-theme'
 import { useTranslate } from '@stack-spot/portal-translate'
 import SyntaxHighlighter from 'react-syntax-highlighter'
 import styled from 'styled-components'
@@ -27,7 +28,7 @@ const style = {
 }
 
 const Wrapper = styled(Box)`
-  background-color: ${({ theme }) => getColor(theme as any, 'gray.900')};
+  background-color: ${theme.color.gray[900]};
   border-radius: ${({ theme }) => getRadius(theme as any, 'xs')};
   position: relative;
   padding: 8px;
@@ -42,12 +43,12 @@ const Wrapper = styled(Box)`
       height: 4px;
     }
     &::-webkit-scrollbar-track {
-      background: ${({ theme }) => getColor(theme as any, 'light.400')};
+      background: ${theme.color.light[400]};
       border-radius: 2px;
     }
     &::-webkit-scrollbar-thumb,
     &::-webkit-scrollbar-thumb:hover {
-      background: ${({ theme }) => getColor(theme as any, 'light.700')};
+      background: ${theme.color.light[700]};
       border-radius: 2px;
     }
   }
@@ -60,32 +61,32 @@ const Wrapper = styled(Box)`
     margin-top: 0;
     overflow: unset;
     text-shadow: none;
-    color: #fff;
+    color: ${theme.color.gray[50]};
   }
 
   .hljs-string {
-    color: ${({ theme }) => getColor(theme as any, 'teal.300')};
+    color: ${theme.color.teal[300]};
   }
   .hljs-tag {
     color: ${({ theme }) => getColor(theme as any, 'teal')};
   }
   .hljs-attr {
-    color: #fff;
+    color: ${theme.color.gray[50]};
   }
   .hljs-number {
-    color: #fff;
+    color: ${theme.color.gray[300]};
   }
   .hljs-property {
-    color: #fff;
+    color: ${theme.color.gray[50]};
   }
   .hljs-keyword {
-    color: #75dcff;
+    color: ${theme.color.blue[200]};
   }
   .comment {
-    color: #8e8e93;
+    color: ${theme.color.gray[400]};
   }
   .hljs-expression {
-    color: #f57f17;
+    color: ${theme.color.orange[400]};
   }
 
   .button-group {
@@ -111,6 +112,12 @@ interface Props {
   scrollable?: boolean,
   copyButton?: boolean,
 }
+
+/**
+ * CodeViewer component that displays code with syntax highlighting based on application theme and optional copy and refresh buttons.
+ *
+* @param options the props for rendering the component: {@link Props}. 
+ */
 export const CodeViewer = ({ language, data, onClickRefresh, scrollable = true, copyButton }: Props) => {
   const t = useTranslate(codeViewerLocale)
 

package/src/components/LazyMarkdown/Markdown.tsx

@@ -9,6 +9,9 @@ import { CodeViewer } from './CodeViewer'
 import { Video } from './Video'
 
 interface MarkdownProps {
+  /**
+   * The markdown content to be rendered.
+   */
   children: string,
 }
 
@@ -25,7 +28,6 @@ const styles: Record<string, SxProp | Record<string, SxProp>> = {
   table: {
     borderRadius: 'xs',
   },
-
   customScroll: {
     height: '232px',
     overflow: 'auto',
@@ -61,6 +63,9 @@ const styles: Record<string, SxProp | Record<string, SxProp>> = {
   },
 }
 
+/**
+ * Custom components for rendering markdown elements.
+ */
 const component = () => ({
   p: (props: any) => <Text appearance="body2" {...props} />,
   strong: (props: any) => <Text weight="bold" colorScheme="light.700" as="strong" {...props} />,
@@ -97,6 +102,11 @@ const component = () => ({
     </Text>,
 })
 
+/**
+ * Renders a component that provides markdown content visualization using citric components.
+ * 
+ * @param options the props for rendering the component: {@link MarkdownProps}. 
+ */
 const Markdown = ({ children }: MarkdownProps) => (
   <ReactMarkdown rehypePlugins={[rehypeRaw]} remarkPlugins={[remarkGfm]} components={component()}>
     {children}

package/src/components/LazyMarkdown/MarkdownButton.tsx

@@ -2,10 +2,21 @@ import { IconButton } from '@citric/ui'
 import { ReactNode } from 'react'
 
 interface MarkdownButtonProps {
+  /**
+   * Optional click handler for the button.
+   */
   onClick?: () => void,
+  /**
+   * The content to be displayed inside the button.
+   */
   children: ReactNode,
 }
 
+/**
+ * Renders a component that provides an IconButton with custom styles and content.
+ *
+ * @param options the props for rendering the component: {@link MarkdownButtonProps}. 
+ */
 export const MarkdownButton = ({ ...props }: MarkdownButtonProps) => (
   <IconButton sx={{ position: 'absolute', top: '16px', right: '16px' }} onClick={props.onClick}>
     {props.children}

package/src/components/LazyMarkdown/Video.tsx

@@ -1,3 +1,10 @@
+/**
+ * Video component that renders an iframe with the given source URL.
+ *
+ * @param {Object} props - The props for the Video component.
+ * @param {string} props.children - The URL to be used as the source of the iframe.
+ * @returns {JSX.Element} The rendered iframe element.
+ */
 export const Video = ({ children }: { children: string }) => (
   <iframe
     src={children}

package/src/components/Notifications/NotificationComponent.tsx

@@ -16,12 +16,9 @@ interface Props {
   hasUnreadNotification?: boolean,
 }
 
-const ANIMATION_DURATION_MS = 300
-const MAX_HEIGHT_TRANSITION = `max-height ease-in ${ANIMATION_DURATION_MS / 1000}s`
-
 const NotificationsComponent = styled(Flex) <{ $scroll?: boolean }>`
   max-height: 0;
-  z-index: 1;
+  z-index: 2;
   visibility: hidden;
   position: absolute;
   top: calc(var(--header-height) + 4px);
@@ -31,7 +28,6 @@ const NotificationsComponent = styled(Flex) <{ $scroll?: boolean }>`
   &.visible {
     min-height: 802px;
     visibility: visible;
-    transition: ${MAX_HEIGHT_TRANSITION};
   }
 
   .content {
@@ -41,7 +37,6 @@ const NotificationsComponent = styled(Flex) <{ $scroll?: boolean }>`
     background-color: ${theme.color.light[300]};
     overflow-y: ${({ $scroll }) => $scroll ? 'auto' : 'hidden'};
     overflow-x: hidden;
-    transition: ${MAX_HEIGHT_TRANSITION}, visibility 0s ${ANIMATION_DURATION_MS / 1000}s;
   }
 
   &::after {
@@ -58,6 +53,17 @@ const NotificationsComponent = styled(Flex) <{ $scroll?: boolean }>`
   }
 `
 
+const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: ${theme.color.primary.contrastText};
+  opacity: 0.6;
+  z-index: 1;
+`
+
 const StyledBox = styled(Box)`
   width: 100%;
   > div:first-child{
@@ -76,6 +82,11 @@ interface NotificationFilterButtonProps extends NotificationsFilterProps {
   enumType: NotificationTypeFilters,
 }
 
+/**
+ * NotificationFilterButton component that renders a button to be used in quick filters for notifications.
+ *
+ * @param props the component's props {@link NotificationFilterButtonProps}.
+ */
 const NotificationFilterButton = (props: NotificationFilterButtonProps) => {
   const { type, onChangeFilterType, ariaLabel, label, enumType } = props
   return (<Button
@@ -93,6 +104,11 @@ const NotificationFilterButton = (props: NotificationFilterButtonProps) => {
   )
 }
 
+/**
+ * NotificationsFilter component that renders the filter options for notifications.
+ *
+ * @param props the component's props {@link NotificationsFilterProps}.
+ */
 const NotificationsFilter = ({ type, onChangeFilterType }: NotificationsFilterProps) => {
   const t = useTranslate(dictionary)
 
@@ -144,6 +160,12 @@ interface Props {
   isSummary: boolean,
 }
 
+/**
+ * NotificationComponent component that renders the notifications panel.
+ * It render the notification icon and when clicked the notification modal is opened.
+ *
+ * @param props the component's props {@link Props}.
+ */
 export const NotificationComponent = ({ 
   hasUnreadNotification, onMarkAsReadUnread, notifications, isLoading, error, 
   type, onUpdateType,
@@ -171,6 +193,8 @@ export const NotificationComponent = ({
       <StatusCircle status={'danger'} />
     </Box>}
 
+    {visible && <Overlay />}
+
     <NotificationsComponent
       className={listToClass(['selection-list', visible ? 'visible' : undefined])}
       $scroll={true}
@@ -199,7 +223,7 @@ export const NotificationComponent = ({
                 hasMore={hasNextPage}
               >
                 <ScrollView direction="vertical" style={{ maxHeight: '630px' }}>
-                  <Flex sx={{ gap: '4px' }} mr="3">
+                  <Flex sx={{ gap: '4px' }} mr="3" flexDirection="column">
                     {notifications?.map((item) => (
                       <NotificationItem key={item.id} notification={item} 
                         isSummary={isSummary} onClickMarkReadUnread={(read, type) => onMarkAsReadUnread(item.id, read, type)} />

package/src/components/Notifications/NotificationItem.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex, IconBox, OneOfColorSchemesWithVariants, Styles, SxProp, Text } from '@citric/core'
+import { Box, Button, Flex, IconBox, OneOfColorSchemesWithVariants, Styles, SxProp, Text } from '@citric/core'
 import { Envelope, EnvelopeOpen } from '@citric/icons'
 import { IconButton, Tooltip } from '@citric/ui'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
@@ -34,37 +34,36 @@ const style: Styles = {
   },
 }
 
-const NotificationHeader = ({ notification, isSummary, onClickMarkReadUnread }: NotificationItemProps) => {
-  const t = useTranslate(dictionary)
-  return (
-    <Flex justifyContent="space-between" mb={2} sx={{ maxWidth: isSummary ? '330px' : '100%' }} flexWrap="nowrap">
-      <Text appearance={isSummary ? 'body2' : 'body1'} nowrapEllipsis>
-        {notification.title}
-      </Text>
-      <Tooltip text={notification.committed ? t.markAsUnread : t.markAsRead} position="left" 
-        id={`tooltip-${notification.title}`} role="tooltip"
-        sx={style.tooltip}>
-        <IconButton aria-describedby={`tooltip-${notification.title}`}>
-          <IconBox
-            size="xs"
-            onClick={() => {
-              onClickMarkReadUnread(!notification.committed, 'icon')
-            }}
-          >
-            {notification.committed ? <Envelope /> : <EnvelopeOpen />}
-          </IconBox>
-        </IconButton>
-      </Tooltip>
-    </Flex>
-  )
-}
+/**
+ * NotificationHeader component that renders the header of a notification.
+ *
+ * @param props the component's props {@link NotificationItemProps}.
+ */
+const NotificationHeader = ({ notification, isSummary }: NotificationItemProps) => (
+  <Flex justifyContent="space-between" mb={2} sx={{ maxWidth: isSummary ? '330px' : '100%' }} flexWrap="nowrap">
+    <Text appearance={isSummary ? 'body2' : 'body1'} nowrapEllipsis>
+      {notification.title}
+    </Text>
+  </Flex>
+)
 
+/**
+ * Get the number of days ago from the given date string.
+ *
+ * @param {string} dateString - The date string to calculate the days ago.
+ * @returns {number} The number of days ago.
+ */
 const getDaysAgo = (dateString: string): number => {
   const givenDate = parseISO(dateString)
   const today = new Date()
   return differenceInDays(today, givenDate)
 }
 
+/**
+ * NotificationContent component that renders the content of a notification.
+ *
+ * @param props the component's props {@link Props}.
+ */
 const NotificationContent = ({ notification, isSummary }: Props) => {
   const { formatDate } = useDateFormatter()
   const t = useTranslate(dictionary)
@@ -85,7 +84,7 @@ const NotificationContent = ({ notification, isSummary }: Props) => {
         </Text>
         {!isSummary && <>
           <Text appearance="microtext1" colorScheme="light.700">
-            {formatDate(notification.created_at)}
+            {formatDate(notification.trigger_at)}
           </Text>
           <Text appearance="microtext1" colorScheme="light.700" mx="2">
           •
@@ -98,11 +97,17 @@ const NotificationContent = ({ notification, isSummary }: Props) => {
     </>
   )
 }
+
 interface NotificationFooterProps  { 
   call_to_action: string, 
   onClickMarkReadUnread: (type: 'callToAction' | 'icon') => void,
 }
 
+/**
+ * NotificationFooter component that renders the footer of a notification.
+ *
+ * @param props the component's props {@link NotificationFooterProps}.
+ */
 const NotificationFooter = ({ call_to_action, onClickMarkReadUnread }: NotificationFooterProps) => {
   const t = useTranslate(dictionary)
   const Link = useAnchorTag()
@@ -124,15 +129,42 @@ interface NotificationItemProps extends Props {
   onClickMarkReadUnread: (read: boolean, type: 'callToAction' | 'icon') => void,
 }
 
-export const NotificationItem = ({ notification, isSummary, onClickMarkReadUnread }: NotificationItemProps) => (
-  <Flex bg="light.400" p="3 3 3 5" r="xs"
-    flexDirection="column" w="100%" sx={styles.item(statusToColor[notification.criticality], notification.committed)}>
-    <NotificationHeader notification={notification} isSummary={isSummary} onClickMarkReadUnread={onClickMarkReadUnread}/>
-    <NotificationContent notification={notification} isSummary={isSummary} />
-    {notification.call_to_action && <NotificationFooter call_to_action={notification.call_to_action} 
-      onClickMarkReadUnread={(type) => onClickMarkReadUnread(!notification.committed, type)} />}
-  </Flex>
-)
+/**
+ * NotificationItem component that renders a notification item.
+ *
+ * @param props the component's props {@link NotificationItemProps}.
+ */
+export const NotificationItem = ({ notification, isSummary, onClickMarkReadUnread }: NotificationItemProps) => {
+  const t = useTranslate(dictionary)
+  return (
+    <Box sx={{ position: 'relative' }}>
+      <Flex bg="light.400" p="3 3 3 5" r="xs"
+        flexDirection="column" w="100%" sx={styles.item(statusToColor[notification.criticality], notification.committed)}>
+        <NotificationHeader notification={notification} isSummary={isSummary} onClickMarkReadUnread={onClickMarkReadUnread}/>
+        <NotificationContent notification={notification} isSummary={isSummary} />
+        {notification.call_to_action && <NotificationFooter call_to_action={notification.call_to_action} 
+          onClickMarkReadUnread={(type) => onClickMarkReadUnread(notification.committed, type)} />}
+      </Flex>
+      <Box sx={{ position: 'absolute', top: '8px', right: '8px' }}>
+        <Tooltip text={notification.committed ? t.markAsUnread : t.markAsRead} position="left" 
+          id={`tooltip-${notification.title}`} role="tooltip"
+          sx={style.tooltip}>
+          <IconButton aria-describedby={`tooltip-${notification.title}`} 
+            sx={{ opacity: notification.committed ? 0.5 : 1 }}> 
+            <IconBox
+              size="xs"
+              onClick={() => {
+                onClickMarkReadUnread(notification.committed, 'icon')
+              }}
+            >
+              {notification.committed ? <Envelope /> : <EnvelopeOpen />}
+            </IconBox>
+          </IconButton>
+        </Tooltip>
+      </Box>
+    </Box>
+  )
+}
 
 const dictionary = {
   en: {

package/src/components/StatusCircle.tsx

@@ -46,8 +46,7 @@ interface WithTooltip {
 /**
  * CircleWithTooltip component that displays a circle with an optional tooltip.
  *
- * @param {WithTooltip} props - The props for the CircleWithTooltip component.
- * @returns {JSX.Element} The CircleWithTooltip component.
+ * @param props the component's props {@link WithTooltip}.
  */
 const CircleWithTooltip = ({ tooltip, className, style }: WithTooltip) => {
   const circle = <div style={style} className={className}></div>
@@ -55,11 +54,10 @@ const CircleWithTooltip = ({ tooltip, className, style }: WithTooltip) => {
 }
 
 /**
- * StatusCircle component that displays a colored circle based on the status.
+ * Renders a component that displays a colored circle based on the status.
  * It also supports an optional tooltip.
  *
- * @param {Props} props - The props for the StatusCircle component.
- * @returns {JSX.Element} The StatusCircle component.
+ * @param props the component's props {@link Props}.
  */
 export const StatusCircle = styled(CircleWithTooltip)<Props>`
   background-color: ${({ status, theme }) => getColorFromStatus(theme as any, status)};

package/src/index.ts

@@ -1,9 +1,11 @@
 export { BannerWarning } from './components/BannerWarning'
 export { ChatBot } from './components/ChatBot'
+export { AsyncContent } from './components/AsyncContent'
 export { useKeyboardControls } from './hooks/keyboard'
 export { openServiceNowChat, dictionary as serviceNowDictionary, useServiceNowChatButtonVisibility, useServiceNowEffect } from './hooks/service-now'
 export { useCheckTextOverflow } from './hooks/text'
 export { titleEffect, useTitleEffect } from './hooks/title'
 export { useEffectOnce } from './hooks/use-effect-once'
+export { useDateFormatter } from './hooks/date'
 export * from './utils/accessibility'
 export * from './utils/cookie'