intelicoreact 1.6.19 → 1.6.20

package/dist/Atomic/UI/ExampleChartIntegration/ExampleChartIntegration.js

@@ -1 +1,221 @@
-function t(t,n){(null==n||n>t.length)&&(n=t.length);for(var r=0,e=Array(n);r<n;r++)e[r]=t[r];return e}function n(t){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{},e=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(r).filter(function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable}))),e.forEach(function(n){var e;e=r[n],n in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e})}return t}function r(t,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):(function(t,n){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(t);r.push.apply(r,e)}return r})(Object(n)).forEach(function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(n,r))}),t}function e(n,r){return function(t){if(Array.isArray(t))return t}(n)||function(t,n){var r,e,a=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=a){var o=[],i=!0,u=!1;try{for(a=a.call(t);!(i=(r=a.next()).done)&&(o.push(r.value),!n||o.length!==n);i=!0);}catch(t){u=!0,e=t}finally{try{i||null==a.return||a.return()}finally{if(u)throw e}}return o}}(n,r)||function(n,r){if(n){if("string"==typeof n)return t(n,r);var e=Object.prototype.toString.call(n).slice(8,-1);if("Object"===e&&n.constructor&&(e=n.constructor.name),"Map"===e||"Set"===e)return Array.from(e);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return t(n,r)}}(n,r)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}import{jsx as a,jsxs as o}from"react/jsx-runtime";import{createElement as i}from"react";import{useLayoutEffect as u,useMemo as l,useState as c}from"react";import s from"classnames";import"uuid";import{formatToPriceWithUSD as b}from"../../../Functions/fieldValueFormatters";import{clone as f}from"../../../Functions/utils";import p from"../../FormElements/InputDateRange/InputDateRange";import d from"../Chart/Chart";import{getLabels as m,getMockValue as y,getSafelyDateRange as h,getTab as g}from"./partial/utils";import"./partial/AnyOuterClass.scss";export default function(t){var v=t||{},O=v.inputDateRangeProps,j=v.chartProps,w=O||{},C=w.value,P=w.onChange,k=(j||{}).initialChartType,L=l(function(){return h(C)},[C]),S=e(c(k||"Bar"),2),T=S[0],B=S[1],M=e(c("tab1"),2),D=M[0],x=M[1],A=e(c("Bar"===T?"finturfLoadingModeBar":"finturfLoadingModeLine"),2),N=A[0],E=A[1],F=e(c(null),2),I=F[0],_=F[1],R=e(c(null),2),V=R[0],J=R[1],U=e(c(null),2),$=U[0],q=U[1],z=e(c(null),2),G=z[0],H=z[1],K=e(c(null),2),Q=K[0],W=K[1],X=function(){var t=m(L);return{labels:t,datasets:[{data:t.map(function(t){return y()})}]}},Y=function(t){switch(t){case"tab1":return I?f(I):null;case"tab2":return V?f(V):null;case"tab3":return $?f($):null;case"tab4":return G?f(G):null;default:return null}},Z=l(function(){return Y(D)?["finturfChartBar","finturfChartLine"]:["finturfLoadingModeBar","finturfLoadingModeLine"]},[!!Y(D)]),tt=function(t,n){switch(n){case"tab1":_(t);break;case"tab2":J(t);break;case"tab3":q(t);break;case"tab4":H(t)}return t};return u(function(){_(null),J(null),q(null),H(null),Promise.all([g("tab1",L,tt),g("tab2",L,tt),g("tab3",L,tt),g("tab4",L,tt)])},[L]),u(function(){E(Y(D)?"Bar"===T?"finturfChartBar":"finturfChartLine":"Bar"===T?"finturfLoadingModeBar":"finturfLoadingModeLine"),W(Y(D)?Y(D):X())},[!!Y(D),D,T]),o("div",{className:"example-wrapper",children:[a(p,r(n({},O),{value:C,onChange:P})),o("div",{className:"buttons-block",children:[a("button",{className:s("tab-button",{"tab-button_active":"tab1"===D}),onClick:function(){return x("tab1")},children:"Tab 1"}),a("button",{className:s("tab-button",{"tab-button_active":"tab2"===D}),onClick:function(){return x("tab2")},children:"Tab 2"}),a("button",{className:s("tab-button",{"tab-button_active":"tab3"===D}),onClick:function(){return x("tab3")},children:"Tab 3"}),a("button",{className:s("tab-button",{"tab-button_active":"tab4"===D}),onClick:function(){return x("tab4")},children:"Tab 4"})]}),i(d,r(n({},j),{key:JSON.stringify(Q),data:Q,setModelExternalValue:function(t){B(t.includes("Line")?"Line":"Bar"),E(t)},initialModel:N,modelsForSwitch:Z,description:{label:function(t){switch(t){case"tab1":return"Tab 1";case"tab2":return"Tab 2";case"tab3":return"Tab 3";case"tab4":return"Tab 4";default:return null}}(D)},addToDatasets:{id:D},modifyOptions:function(t){var e,a,o,i,u,l;return r(n({},t),{options:r(n({},null==t?void 0:t.options),{plugins:r(n({},null==t||null==(e=t.options)?void 0:e.plugins),{tooltip:r(n({},null==t||null==(o=t.options)||null==(a=o.plugins)?void 0:a.tooltip),{callbacks:r(n({},null==t||null==(l=t.options)||null==(u=l.plugins)||null==(i=u.tooltip)?void 0:i.callbacks),{label:function(t){return"tab3"===t.dataset.id||"tab4"===t.dataset.id?b(t.raw||"0"):t.raw||"0"}})})})})})}}))]})}
+import React, { useLayoutEffect, useMemo, useState } from "react";
+
+import cn from "classnames";
+import { v4 as uuid } from "uuid";
+
+import { formatToPriceWithUSD } from "../../../Functions/fieldValueFormatters";
+import { clone } from "../../../Functions/utils";
+import InputDateRange from "../../FormElements/InputDateRange/InputDateRange";
+import Chart from "../Chart/Chart";
+
+import {
+  getLabels,
+  getMockValue,
+  getSafelyDateRange,
+  getTab,
+} from "./partial/utils";
+
+import "./partial/AnyOuterClass.scss";
+
+const ExampleChartIntegration = (props) => {
+  const { inputDateRangeProps, chartProps } = props || {};
+  const { value: outerDateRange, onChange: changeDateRange } =
+    inputDateRangeProps || {};
+  const { initialChartType } = chartProps || {};
+  const dateRange = useMemo(
+    () => getSafelyDateRange(outerDateRange),
+    [outerDateRange],
+  );
+
+  const [chartType, setChartType] = useState(initialChartType || "Bar");
+  const [tab, setTab] = useState("tab1");
+  const [initialModel, setInitialModel] = useState(
+    chartType === "Bar" ? "finturfLoadingModeBar" : "finturfLoadingModeLine",
+  );
+
+  const [tab1, setTab1] = useState(null);
+  const [tab2, setTab2] = useState(null);
+  const [tab3, setTab3] = useState(null);
+  const [tab4, setTab4] = useState(null);
+
+  const [dataForRender, setDataForRender] = useState(null);
+
+  const getMockData = () => {
+    const labels = getLabels(dateRange);
+    const mock = () => labels.map((label) => getMockValue());
+    return {
+      labels,
+      datasets: [
+        {
+          data: mock(),
+        },
+      ],
+    };
+  };
+
+  const getTabData = (tabId) => {
+    switch (tabId) {
+      case "tab1":
+        return !tab1 ? null : clone(tab1);
+      case "tab2":
+        return !tab2 ? null : clone(tab2);
+      case "tab3":
+        return !tab3 ? null : clone(tab3);
+      case "tab4":
+        return !tab4 ? null : clone(tab4);
+      default:
+        return null;
+    }
+  };
+
+  const getDescription = (tabId) => {
+    switch (tabId) {
+      case "tab1":
+        return "Tab 1";
+      case "tab2":
+        return "Tab 2";
+      case "tab3":
+        return "Tab 3";
+      case "tab4":
+        return "Tab 4";
+      default:
+        return null;
+    }
+  };
+
+  const selectData = () => (getTabData(tab) ? getTabData(tab) : getMockData());
+
+  const modelsForSwitch = useMemo(
+    () =>
+      getTabData(tab)
+        ? ["finturfChartBar", "finturfChartLine"]
+        : ["finturfLoadingModeBar", "finturfLoadingModeLine"],
+    [Boolean(getTabData(tab))],
+  );
+
+  const handleChangeChartType = (model) => {
+    setChartType(model.includes("Line") ? "Line" : "Bar");
+    setInitialModel(model);
+  };
+
+  const getModel = () => {
+    if (!getTabData(tab))
+      return chartType === "Bar"
+        ? "finturfLoadingModeBar"
+        : "finturfLoadingModeLine";
+    else return chartType === "Bar" ? "finturfChartBar" : "finturfChartLine";
+  };
+
+  const processResponse = (res, tabId) => {
+    switch (tabId) {
+      case "tab1":
+        setTab1(res);
+        break;
+      case "tab2":
+        setTab2(res);
+        break;
+      case "tab3":
+        setTab3(res);
+        break;
+      case "tab4":
+        setTab4(res);
+        break;
+      default:
+        break;
+    }
+    return res;
+  };
+
+  useLayoutEffect(() => {
+    setTab1(null);
+    setTab2(null);
+    setTab3(null);
+    setTab4(null);
+
+    // эмуляция запросов
+    // вся логика происходит в самих входящих промисах
+    // Promise.all добавлен для расширения на случай надобности описания эффектов по завершении всех запросов
+    Promise.all([
+      getTab("tab1", dateRange, processResponse),
+      getTab("tab2", dateRange, processResponse),
+      getTab("tab3", dateRange, processResponse),
+      getTab("tab4", dateRange, processResponse),
+    ]);
+  }, [dateRange]);
+
+  useLayoutEffect(() => {
+    setInitialModel(getModel());
+    setDataForRender(selectData());
+  }, [Boolean(getTabData(tab)), tab, chartType]);
+
+  return (
+    <div className="example-wrapper">
+      <InputDateRange
+        {...inputDateRangeProps}
+        value={outerDateRange}
+        onChange={changeDateRange}
+      />
+
+      <div className="buttons-block">
+        <button
+          className={cn("tab-button", { "tab-button_active": tab === "tab1" })}
+          onClick={() => setTab("tab1")}
+        >
+          Tab 1
+        </button>
+        <button
+          className={cn("tab-button", { "tab-button_active": tab === "tab2" })}
+          onClick={() => setTab("tab2")}
+        >
+          Tab 2
+        </button>
+        <button
+          className={cn("tab-button", { "tab-button_active": tab === "tab3" })}
+          onClick={() => setTab("tab3")}
+        >
+          Tab 3
+        </button>
+        <button
+          className={cn("tab-button", { "tab-button_active": tab === "tab4" })}
+          onClick={() => setTab("tab4")}
+        >
+          Tab 4
+        </button>
+      </div>
+
+      <Chart
+        {...chartProps}
+        key={JSON.stringify(dataForRender)}
+        data={dataForRender}
+        setModelExternalValue={handleChangeChartType}
+        initialModel={initialModel}
+        modelsForSwitch={modelsForSwitch}
+        description={{ label: getDescription(tab) }}
+        addToDatasets={{ id: tab }}
+        modifyOptions={(options) => ({
+          ...options,
+          options: {
+            ...options?.options,
+            plugins: {
+              ...options?.options?.plugins,
+              tooltip: {
+                ...options?.options?.plugins?.tooltip,
+                callbacks: {
+                  ...options?.options?.plugins?.tooltip?.callbacks,
+                  label: (context) => {
+                    return context.dataset.id === "tab3" ||
+                      context.dataset.id === "tab4"
+                      ? formatToPriceWithUSD(context.raw || "0")
+                      : context.raw || "0";
+                  },
+                },
+              },
+            },
+          },
+        })}
+      />
+    </div>
+  );
+};
+
+export default ExampleChartIntegration;

package/dist/Atomic/UI/ExampleChartIntegration/partial/utils.js

@@ -1 +1,106 @@
-var t,e;function r(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=Array(e);r<e;r++)n[r]=t[r];return n}function n(t,e,r,n,a,o,i){try{var u=t[o](i),l=u.value}catch(t){r(t);return}u.done?e(l):Promise.resolve(l).then(n,a)}import a from"moment-timezone";import{getActualDateRange as o}from"../../../FormElements/InputDateRange/dependencies";export var getSafelyDateRange=function(t){return(null==t?void 0:t.start)&&(null==t?void 0:t.end)||(null==t?void 0:t.intervalKey)&&(null==t?void 0:t.intervalKey)!=="allTime"?o(t):o({start:"2022-01-01T00:00:00",end:a().endOf("day").format("YYYY-MM-DDTHH:mm:ss")})};export var getLabels=function(t){var e="hour",n=o(t),i=a(null==n?void 0:n.start).startOf(e),u=a(null==n?void 0:n.end).startOf(e),l=function(t){var e,n;switch(t){case"minutes":n="MM.DD hh:mm";break;case"hours":n="MM.DD.YYYY h A";break;case"days":n="MM.DD.YYYY";break;case"months":n="MM.YYYY";break;default:n="YYYY"}return((function(t){if(Array.isArray(t))return r(t)})(e=Array(u.diff(i,t)).keys())||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(e)||function(t,e){if(t){if("string"==typeof t)return r(t,void 0);var n=Object.prototype.toString.call(t).slice(8,-1);if("Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return r(t,e)}}(e)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()).reduce(function(e,r){return e.values.push(e.point.format(n)),e.point=a(e.point).add(1,t),e},{point:i,values:[]}).values};return 3>=u.diff(i,"hours")?l("minutes"):48>=u.diff(i,"hours")?l("hours"):2>=u.diff(i,"months")?l("days"):24>=u.diff(i,"months")?l("months"):l("years")};export var getMockValue=function(){return Math.trunc(1e6*Math.random())};export var getTab=(t=function(t,e,r){var n;return function(t,e){var r,n,a,o={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]},i=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return i.next=u(0),i.throw=u(1),i.return=u(2),"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function u(u){return function(l){var s=[u,l];if(r)throw TypeError("Generator is already executing.");for(;i&&(i=0,s[0]&&(o=0)),o;)try{if(r=1,n&&(a=2&s[0]?n.return:s[0]?n.throw||((a=n.return)&&a.call(n),0):n.next)&&!(a=a.call(n,s[1])).done)return a;switch(n=0,a&&(s=[2&s[0],a.value]),s[0]){case 0:case 1:a=s;break;case 4:return o.label++,{value:s[1],done:!1};case 5:o.label++,n=s[1],s=[0];continue;case 7:s=o.ops.pop(),o.trys.pop();continue;default:if(!(a=(a=o.trys).length>0&&a[a.length-1])&&(6===s[0]||2===s[0])){o=0;continue}if(3===s[0]&&(!a||s[1]>a[0]&&s[1]<a[3])){o.label=s[1];break}if(6===s[0]&&o.label<a[1]){o.label=a[1],a=s;break}if(a&&o.label<a[2]){o.label=a[2],o.ops.push(s);break}a[2]&&o.ops.pop(),o.trys.pop();continue}s=e.call(t,o)}catch(t){s=[6,t],n=0}finally{r=a=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}}}(this,function(a){switch(t){case"tab1":n=2e3;break;case"tab2":n=1500;break;case"tab3":n=3e3;break;case"tab4":n=500;break;default:n=1e3}return[2,new Promise(function(t){return setTimeout(function(){var r=getLabels(e);t({labels:r,datasets:[{data:r.map(function(){return getMockValue()})}]})},n)}).then(function(e){return r?r(e,t):e})]})},e=function(){var e=this,r=arguments;return new Promise(function(a,o){var i=t.apply(e,r);function u(t){n(i,a,o,u,l,"next",t)}function l(t){n(i,a,o,u,l,"throw",t)}u(void 0)})},function(t,r,n){return e.apply(this,arguments)});
+import moment from "moment-timezone";
+
+import { getActualDateRange } from "../../../FormElements/InputDateRange/dependencies";
+
+export const getSafelyDateRange = (dateRange) =>
+  (!dateRange?.start || !dateRange?.end) &&
+  (!dateRange?.intervalKey || dateRange?.intervalKey === "allTime")
+    ? getActualDateRange({
+        start: "2022-01-01T00:00:00",
+        end: moment().endOf("day").format("YYYY-MM-DDTHH:mm:ss"),
+      })
+    : getActualDateRange(dateRange);
+
+export const getLabels = (range) => {
+  const MINIMUM_INTERVAL = "hour";
+  const NO_MORE_THAN_THREE_HOURS = 3; // this is hours
+  const NO_MORE_THAN_TWO_DAYS = 48; // this is hours
+  const NO_MORE_THAN_TWO_MONTHS = 2; // this is months
+  const NO_MORE_THAN_THREE_YEARS = 24; // this is months
+
+  // safely Range must have 'start' and 'end' properties
+  const safelyRange = getActualDateRange(range);
+  const start = moment(safelyRange?.start).startOf(MINIMUM_INTERVAL);
+  const end = moment(safelyRange?.end).startOf(MINIMUM_INTERVAL);
+
+  const getValues = (intervalStepKey) => {
+    let format;
+    switch (intervalStepKey) {
+      case "minutes":
+        format = "MM.DD hh:mm";
+        break;
+      case "hours":
+        format = "MM.DD.YYYY h A";
+        break;
+      case "days":
+        format = "MM.DD.YYYY";
+        break;
+      case "months":
+        format = "MM.YYYY";
+        break;
+      default:
+        format = "YYYY";
+        break;
+    }
+
+    const structure = [...Array(end.diff(start, intervalStepKey)).keys()];
+
+    const process = structure.reduce(
+      (acc, iteration) => {
+        acc.values.push(acc.point.format(format));
+        acc.point = moment(acc.point).add(1, intervalStepKey);
+        return acc;
+      },
+      { point: start, values: [] },
+    );
+
+    return process.values;
+  };
+
+  if (end.diff(start, "hours") <= NO_MORE_THAN_THREE_HOURS)
+    return getValues("minutes");
+  else if (end.diff(start, "hours") <= NO_MORE_THAN_TWO_DAYS)
+    return getValues("hours");
+  else if (end.diff(start, "months") <= NO_MORE_THAN_TWO_MONTHS)
+    return getValues("days");
+  else if (end.diff(start, "months") <= NO_MORE_THAN_THREE_YEARS)
+    return getValues("months");
+  else return getValues("years");
+};
+
+export const getMockValue = () => Math.trunc(Math.random() * 1000000);
+
+export const getTab = async (tabId, range, callback) => {
+  let requestDelay;
+  switch (tabId) {
+    case "tab1":
+      requestDelay = 2000;
+      break;
+    case "tab2":
+      requestDelay = 1500;
+      break;
+    case "tab3":
+      requestDelay = 3000;
+      break;
+    case "tab4":
+      requestDelay = 500;
+      break;
+    default:
+      requestDelay = 1000;
+      break;
+  }
+
+  return new Promise((res) =>
+    setTimeout(() => {
+      const labels = getLabels(range);
+      res({
+        labels,
+        datasets: [
+          {
+            data: labels.map(() => getMockValue()),
+          },
+        ],
+      });
+    }, requestDelay),
+  ).then((res) => (callback ? callback(res, tabId) : res));
+};

package/dist/Atomic/UI/Hint/Hint.js

@@ -1 +1,193 @@
-function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function t(t,n){return function(e){if(Array.isArray(e))return e}(t)||function(e,t){var n,r,i=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=i){var o=[],l=!0,u=!1;try{for(i=i.call(e);!(l=(n=i.next()).done)&&(o.push(n.value),!t||o.length!==t);l=!0);}catch(e){u=!0,r=e}finally{try{l||null==i.return||i.return()}finally{if(u)throw r}}return o}}(t,n)||function(t,n){if(t){if("string"==typeof t)return e(t,n);var r=Object.prototype.toString.call(t).slice(8,-1);if("Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return e(t,n)}}(t,n)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return p}});var n=require("react/jsx-runtime"),r=d(require("classnames")),i=function(e,t){if(e&&e.__esModule)return e;if(null===e||(void 0===e?"undefined":e&&"undefined"!=typeof Symbol&&e.constructor===Symbol?"symbol":typeof e)!="object"&&"function"!=typeof e)return{default:e};var n=f(t);if(n&&n.has(e))return n.get(e);var r={__proto__:null},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var o in e)if("default"!==o&&Object.prototype.hasOwnProperty.call(e,o)){var l=i?Object.getOwnPropertyDescriptor(e,o):null;l&&(l.get||l.set)?Object.defineProperty(r,o,l):r[o]=e[o]}return r.default=e,n&&n.set(e,r),r}(require("react")),o=require("react-dom"),l=require("react-feather"),u=require("../../../Functions/utils"),c=require("../../../Molecular/CustomIcons"),a=d(require("../../Layout/Spinner/Spinner")),s=require("./partials/_utils");function d(e){return e&&e.__esModule?e:{default:e}}function f(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(f=function(e){return e?n:t})(e)}require("./Hint.scss");var v=!1,h={};function m(){}var p=function(e){var d,f,p=e.hint,_=e.side,b=void 0===_?"right":_,y=e.className,g=e.hintContainer,x=void 0===g?h:g,C=e.label,j=void 0===C?"":C,L=e.variant,k=void 0===L?"filled":L,M=e.handleOpenType,S=void 0===M?"click":M,N=e.onClickCallback,O=e.onOpenChange,w=void 0===O?m:O,T=e.key,E=e.id,H=e.children,q=e.icon,A=e.isAccessability,P=void 0!==A&&A,I=e.testId,B=void 0===I?"hint":I,W=e.isHoverableContent,D=void 0!==W&&W,F=e.isLoading,R=e.isCloseOnChildrenClick,z=(0,i.useRef)(null),U=(0,i.useRef)(null),$=t((0,i.useState)(null!=(f=null!=T?T:E)?f:Math.random().toString(16).slice(2)),1)[0],G=t((0,i.useState)(!1),2),J=G[0],K=G[1],Q=t((0,i.useState)(new s.HandleScrollObj(K)),1)[0],V=t((0,i.useState)(new s.HandleClickOutsideObj($,K)),1)[0],X="function"==typeof N,Y={onMouseEnter:function(){"hover"===S&&(U.current=setTimeout(function(){K(!0),J||null==N||N()},350))},onMouseLeave:function(){D||"hover"!==S?D&&"hover"===S&&(null!==U.current&&clearTimeout(U.current),U.current=setTimeout(function(){v||K(!1)},100)):(null!==U.current&&clearTimeout(U.current),U.current=setTimeout(function(){K(!1)},1e3))},onMouseLeaveHoverableContent:function(){D&&"hover"===S&&(null!==U.current&&clearTimeout(U.current),U.current=setTimeout(function(){K(!1),v=!1},100))},onClick:void 0!==R&&R?function(){return K(!1)}:function(){}},Z=function(){var e,t,n,r,i=(0,s.getHintContainer)($);if(!i||!J)return!1;var o=(null==z?void 0:z.current)!==null?null==z||null==(e=z.current)?void 0:e.getBoundingClientRect():{},l=o.width,u=void 0===l?0:l,c=o.top,a=void 0===c?0:c,d=o.left,f=void 0===d?0:d,v=null!=x?x:{},h=v.addWidth,m=v.addLeft,p=v.addTop,_=document.documentElement.clientWidth,y=document.documentElement.clientHeight,g=i.getElementsByClassName("hint__text")[0],C=(null==g?void 0:g.getBoundingClientRect())||{},j=C.width,L=C.height;switch(i.style.width=J?null==(t=(h&&!Number.isNaN(+h)?+h:0)+u)?void 0:t.toString().concat("px"):"0",i.style.left=J?null==(n=(m&&!Number.isNaN(+m)?+m:0)+f)?void 0:n.toString().concat("px"):"0",i.style.top=J?null==(r=(p&&!Number.isNaN(+p)?+p:0)+a)?void 0:r.toString().concat("px"):"0",i.style.maxHeight=J?null==L?void 0:L.toString().concat("px"):"0",b){case"top":case"centeredTop":a-L-10<0&&(g.classList.remove("hint__text_".concat(b)),g.classList.add("hint__text_".concat("top"===b?"bottom":"centeredBottom")));break;case"bottom":case"centeredBottom":a+L+20>y&&(g.classList.remove("hint__text_".concat(b)),g.classList.add("hint__text_".concat("bottom"===b?"top":"centeredTop")));break;case"left":f-j-10<0&&(g.classList.remove("hint__text_".concat(b)),g.classList.add("hint__text_right"));break;default:f+u+j+10>_&&(g.classList.remove("hint__text_".concat(b)),g.classList.add("hint__text_left"))}};return(0,i.useEffect)(function(){return(0,s.initHintContainer)($,x),function(){null!==U.current&&clearTimeout(U.current)}},[]),(0,i.useEffect)(function(){return Z(),null==w||w(J),J?(document.addEventListener("scroll",Q,!0),document.addEventListener("click",V,!0)):(document.removeEventListener("scroll",Q,!0),document.removeEventListener("click",V,!0)),function(){null!==U.current&&clearTimeout(U.current)}},[J]),(0,n.jsxs)("div",{"data-testid":B,className:(0,r.default)("hint",y),ref:z,children:[(0,n.jsxs)("button",{tabIndex:P?0:-1,"data-testid":"string"==typeof j&&j.length?null==(d=j.replace)?void 0:d.call(j,/\s/g,"-"):"".concat(B,"--button"),"aria-label":P&&"string"==typeof j?j:"",onClick:function(){return"click"===S&&(X?null==N?void 0:N():K(!J))},onMouseEnter:Y.onMouseEnter,onMouseLeave:Y.onMouseLeave,className:(0,r.default)("hint__button",{hint__button_active:J}),children:[q||null===q||(0,n.jsxs)(n.Fragment,{children:["outlined"===k&&(0,n.jsx)(l.HelpCircle,{width:16,height:16,className:"hint__icon outlined"}),"filled"===k&&(0,n.jsx)(c.HelpCircleFilled,{className:"hint__icon filled"}),"warning"===k&&(0,n.jsx)(l.AlertTriangle,{className:"hint__icon",color:"#F06D8D",width:16,height:16})]}),j&&(0,n.jsx)("span",{className:(0,r.default)("hint__label",{"color--primary":J}),children:(0,u.capitalized)(j)})]}),J&&function(e){var t=(0,s.getHintContainer)($);return t?(0,o.createPortal)((0,n.jsxs)("div",{"data-testid":"test-hint-text",className:(0,r.default)("hint__text","hint__text_".concat(b),"hint--".concat(e,"__text")),onMouseEnter:function(){v=!0},onMouseLeave:Y.onMouseLeaveHoverableContent,onClick:Y.onClick,children:[F&&(0,n.jsx)(a.default,{size:"small"}),p,H]}),t):null}(y)]})};
+function e(e, t) {
+    (null == t || t > e.length) && (t = e.length);
+    for(var n = 0, r = Array(t); n < t; n++)r[n] = e[n];
+    return r;
+}
+function t(t, n) {
+    return function(e) {
+        if (Array.isArray(e)) return e;
+    }(t) || function(e, t) {
+        var n, r, i = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != i) {
+            var o = [], l = !0, u = !1;
+            try {
+                for(i = i.call(e); !(l = (n = i.next()).done) && (o.push(n.value), !t || o.length !== t); l = !0);
+            } catch (e) {
+                u = !0, r = e;
+            } finally{
+                try {
+                    l || null == i.return || i.return();
+                } finally{
+                    if (u) throw r;
+                }
+            }
+            return o;
+        }
+    }(t, n) || function(t, n) {
+        if (t) {
+            if ("string" == typeof t) return e(t, n);
+            var r = Object.prototype.toString.call(t).slice(8, -1);
+            if ("Object" === r && t.constructor && (r = t.constructor.name), "Map" === r || "Set" === r) return Array.from(r);
+            if ("Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return e(t, n);
+        }
+    }(t, n) || function() {
+        throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+    }();
+}
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), Object.defineProperty(exports, "default", {
+    enumerable: !0,
+    get: function() {
+        return p;
+    }
+});
+var n = require("react/jsx-runtime"), r = d(require("classnames")), i = function(e, t) {
+    if (e && e.__esModule) return e;
+    if (null === e || (void 0 === e ? "undefined" : e && "undefined" != typeof Symbol && e.constructor === Symbol ? "symbol" : typeof e) != "object" && "function" != typeof e) return {
+        default: e
+    };
+    var n = f(t);
+    if (n && n.has(e)) return n.get(e);
+    var r = {
+        __proto__: null
+    }, i = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var o in e)if ("default" !== o && Object.prototype.hasOwnProperty.call(e, o)) {
+        var l = i ? Object.getOwnPropertyDescriptor(e, o) : null;
+        l && (l.get || l.set) ? Object.defineProperty(r, o, l) : r[o] = e[o];
+    }
+    return r.default = e, n && n.set(e, r), r;
+}(require("react")), o = require("react-dom"), l = require("react-feather"), u = require("../../../Functions/utils"), c = require("../../../Molecular/CustomIcons"), a = d(require("../../Layout/Spinner/Spinner")), s = require("./partials/_utils");
+function d(e) {
+    return e && e.__esModule ? e : {
+        default: e
+    };
+}
+function f(e) {
+    if ("function" != typeof WeakMap) return null;
+    var t = new WeakMap(), n = new WeakMap();
+    return (f = function(e) {
+        return e ? n : t;
+    })(e);
+}
+require("./Hint.scss");
+var v = !1, h = {};
+function m() {}
+var p = function(e) {
+    var d, f, p = e.hint, _ = e.side, b = void 0 === _ ? 'right' : _, y = e.className, g = e.hintContainer, x = void 0 === g ? h : g, C = e.label, j = void 0 === C ? '' : C, L = e.variant, k = void 0 === L ? 'filled' : L, M = e.handleOpenType, S = void 0 === M ? 'click' : M, N = e.onClickCallback, O = e.onOpenChange, w = void 0 === O ? m : O, T = e.key, E = e.id, H = e.children, q = e.icon, A = e.isAccessability, P = void 0 !== A && A, I = e.testId, B = void 0 === I ? 'hint' : I, W = e.isHoverableContent, D = void 0 !== W && W, F = e.isLoading, R = e.isCloseOnChildrenClick, z = (0, i.useRef)(null), U = (0, i.useRef)(null), $ = t((0, i.useState)(null != (f = null != T ? T : E) ? f : Math.random().toString(16).slice(2)), 1)[0], G = t((0, i.useState)(!1), 2), J = G[0], K = G[1], Q = t((0, i.useState)(new s.HandleScrollObj(K)), 1)[0], V = t((0, i.useState)(new s.HandleClickOutsideObj($, K)), 1)[0], X = 'function' == typeof N, Y = {
+        onMouseEnter: function() {
+            'hover' === S && (U.current = setTimeout(function() {
+                K(!0), J || null == N || N();
+            }, 350));
+        },
+        onMouseLeave: function() {
+            D || 'hover' !== S ? D && 'hover' === S && (null !== U.current && clearTimeout(U.current), U.current = setTimeout(function() {
+                v || K(!1);
+            }, 100)) : (null !== U.current && clearTimeout(U.current), U.current = setTimeout(function() {
+                K(!1);
+            }, 1000));
+        },
+        onMouseLeaveHoverableContent: function() {
+            D && 'hover' === S && (null !== U.current && clearTimeout(U.current), U.current = setTimeout(function() {
+                K(!1), v = !1;
+            }, 100));
+        },
+        onClick: void 0 !== R && R ? function() {
+            return K(!1);
+        } : function() {}
+    }, Z = function() {
+        var e, t, n, r, i = (0, s.getHintContainer)($);
+        if (!i || !J) return !1;
+        var o = (null == z ? void 0 : z.current) !== null ? null == z || null == (e = z.current) ? void 0 : e.getBoundingClientRect() : {}, l = o.width, u = void 0 === l ? 0 : l, c = o.top, a = void 0 === c ? 0 : c, d = o.left, f = void 0 === d ? 0 : d, v = null != x ? x : {}, h = v.addWidth, m = v.addLeft, p = v.addTop, _ = document.documentElement.clientWidth, y = document.documentElement.clientHeight, g = i.getElementsByClassName('hint__text')[0], C = (null == g ? void 0 : g.getBoundingClientRect()) || {}, j = C.width, L = C.height;
+        switch(i.style.width = J ? null == (t = (h && !Number.isNaN(+h) ? +h : 0) + u) ? void 0 : t.toString().concat('px') : '0', i.style.left = J ? null == (n = (m && !Number.isNaN(+m) ? +m : 0) + f) ? void 0 : n.toString().concat('px') : '0', i.style.top = J ? null == (r = (p && !Number.isNaN(+p) ? +p : 0) + a) ? void 0 : r.toString().concat('px') : '0', i.style.maxHeight = J ? null == L ? void 0 : L.toString().concat('px') : '0', b){
+            case 'top':
+            case 'centeredTop':
+                a - L - 10 < 0 && (g.classList.remove("hint__text_".concat(b)), g.classList.add("hint__text_".concat('top' === b ? 'bottom' : 'centeredBottom')));
+                break;
+            case 'bottom':
+            case 'centeredBottom':
+                a + L + 20 > y && (g.classList.remove("hint__text_".concat(b)), g.classList.add("hint__text_".concat('bottom' === b ? 'top' : 'centeredTop')));
+                break;
+            case 'left':
+                f - j - 10 < 0 && (g.classList.remove("hint__text_".concat(b)), g.classList.add('hint__text_right'));
+                break;
+            default:
+                f + u + j + 10 > _ && (g.classList.remove("hint__text_".concat(b)), g.classList.add('hint__text_left'));
+        }
+    };
+    return (0, i.useEffect)(function() {
+        return (0, s.initHintContainer)($, x), function() {
+            null !== U.current && clearTimeout(U.current);
+        };
+    }, []), (0, i.useEffect)(function() {
+        return Z(), null == w || w(J), J ? (document.addEventListener('scroll', Q, !0), document.addEventListener('click', V, !0)) : (document.removeEventListener('scroll', Q, !0), document.removeEventListener('click', V, !0)), function() {
+            null !== U.current && clearTimeout(U.current);
+        };
+    }, [
+        J
+    ]), (0, n.jsxs)("div", {
+        "data-testid": B,
+        className: (0, r.default)('hint', y),
+        ref: z,
+        children: [
+            (0, n.jsxs)("button", {
+                tabIndex: P ? 0 : -1,
+                "data-testid": 'string' == typeof j && j.length ? null == (d = j.replace) ? void 0 : d.call(j, /\s/g, '-') : "".concat(B, "--button"),
+                "aria-label": P && 'string' == typeof j ? j : '',
+                onClick: function() {
+                    return 'click' === S && (X ? null == N ? void 0 : N() : K(!J));
+                },
+                onMouseEnter: Y.onMouseEnter,
+                onMouseLeave: Y.onMouseLeave,
+                className: (0, r.default)('hint__button', {
+                    hint__button_active: J
+                }),
+                children: [
+                    q || null === q || (0, n.jsxs)(n.Fragment, {
+                        children: [
+                            'outlined' === k && (0, n.jsx)(l.HelpCircle, {
+                                width: 16,
+                                height: 16,
+                                className: "hint__icon outlined"
+                            }),
+                            'filled' === k && (0, n.jsx)(c.HelpCircleFilled, {
+                                className: "hint__icon filled"
+                            }),
+                            'warning' === k && (0, n.jsx)(l.AlertTriangle, {
+                                className: "hint__icon",
+                                color: "#F06D8D",
+                                width: 16,
+                                height: 16
+                            })
+                        ]
+                    }),
+                    j && (0, n.jsx)("span", {
+                        className: (0, r.default)('hint__label', {
+                            'color--primary': J
+                        }),
+                        children: (0, u.capitalized)(j)
+                    })
+                ]
+            }),
+            J && function(e) {
+                var t = (0, s.getHintContainer)($);
+                return t ? (0, o.createPortal)((0, n.jsxs)("div", {
+                    "data-testid": "test-hint-text",
+                    className: (0, r.default)('hint__text', "hint__text_".concat(b), "hint--".concat(e, "__text")),
+                    onMouseEnter: function() {
+                        v = !0;
+                    },
+                    onMouseLeave: Y.onMouseLeaveHoverableContent,
+                    onClick: Y.onClick,
+                    children: [
+                        F && (0, n.jsx)(a.default, {
+                            size: "small"
+                        }),
+                        p,
+                        H
+                    ]
+                }), t) : null;
+            }(y)
+        ]
+    });
+};

package/dist/Atomic/UI/Hint/partials/_utils.js

@@ -1 +1,51 @@
-Object.defineProperty(exports,"__esModule",{value:!0});var n=exports,t={HandleClickOutsideObj:function(){return d},HandleScrollObj:function(){return c},getHintContainer:function(){return r},getHintContainerId:function(){return i},getParentNode:function(){return o},initHintContainer:function(){return u}};for(var e in t)Object.defineProperty(n,e,{enumerable:!0,get:t[e]});var i=function(n){return"hint-container-for-hint--id-".concat(n)};function r(n){return document.getElementById(i(n))}function o(){var n,t;return null!=(t=null!=(n=document.querySelector("div#root"))?n:document.querySelector("div#app"))?t:document.body}function u(n,t){var e,r=t.className,u=document.createElement("div");u.setAttribute("id",i(n)),u.classList.add("hint__container"),r&&u.classList.add(r),null==(e=o())||e.append(u)}function c(n){this.setIsOpen=n,this.handleEvent=function(){this.setIsOpen(!1)}}function d(n,t){this.id=n,this.setIsOpen=t,this.handleEvent=function(n){r(this.id)&&!r(this.id).contains(null==n?void 0:n.target)&&this.setIsOpen(!1)}}
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+});
+var n = exports, t = {
+    HandleClickOutsideObj: function() {
+        return d;
+    },
+    HandleScrollObj: function() {
+        return c;
+    },
+    getHintContainer: function() {
+        return r;
+    },
+    getHintContainerId: function() {
+        return i;
+    },
+    getParentNode: function() {
+        return o;
+    },
+    initHintContainer: function() {
+        return u;
+    }
+};
+for(var e in t)Object.defineProperty(n, e, {
+    enumerable: !0,
+    get: t[e]
+});
+var i = function(n) {
+    return "hint-container-for-hint--id-".concat(n);
+};
+function r(n) {
+    return document.getElementById(i(n));
+}
+function o() {
+    var n, t;
+    return null != (t = null != (n = document.querySelector('div#root')) ? n : document.querySelector('div#app')) ? t : document.body;
+}
+function u(n, t) {
+    var e, r = t.className, u = document.createElement('div');
+    u.setAttribute('id', i(n)), u.classList.add('hint__container'), r && u.classList.add(r), null == (e = o()) || e.append(u);
+}
+function c(n) {
+    this.setIsOpen = n, this.handleEvent = function() {
+        this.setIsOpen(!1);
+    };
+}
+function d(n, t) {
+    this.id = n, this.setIsOpen = t, this.handleEvent = function(n) {
+        r(this.id) && !r(this.id).contains(null == n ? void 0 : n.target) && this.setIsOpen(!1);
+    };
+}