chore(ui): Update all caraml ui-lib versions (caraml-dev#107)

deadlycoconuts · web-flow · commit 41cc54beb67e · 2024-07-15T13:48:18.000+08:00
* Update all caraml ui-lib versions

* Remove react-sticky from AccordionForm
diff --git a/ui/package.json b/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@caraml-dev/ui-lib",
-  "version": "1.7.6",
+  "version": "1.13.0",
   "private": true,
   "repository": {
     "type": "git",
diff --git a/ui/packages/app/package.json b/ui/packages/app/package.json
@@ -1,10 +1,10 @@
 {
   "name": "mlp-ui",
-  "version": "1.7.6",
+  "version": "1.13.0",
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {
-    "@caraml-dev/ui-lib": "^1.7.5-build.5-59f13e1",
+    "@caraml-dev/ui-lib": "^1.13.0-build.1-d1f1876",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eui": "^94.5.2",
     "@emotion/css": "^11.11.2",
diff --git a/ui/packages/lib/package.json b/ui/packages/lib/package.json
@@ -45,7 +45,7 @@
     "react-ellipsis-text": "^1.2.1",
     "react-fast-compare": "^3.2.2",
     "react-scroll": "^1.9.0",
-    "react-sticky": "^6.0.3",
+    "react-stickynode": "^4.1.1",
     "resize-observer-polyfill": "^1.5.1",
     "yup": "^1.4.0"
   },
diff --git a/ui/packages/lib/src/components/accordion_form/AccordionForm.js b/ui/packages/lib/src/components/accordion_form/AccordionForm.js
@@ -1,6 +1,6 @@
 import React, { useRef } from "react";
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from "@elastic/eui";
-import { Sticky, StickyContainer } from "react-sticky";
+import Sticky from "react-stickynode";
 import { StepActions } from "../multi_steps_form";
 import FormValidationContext from "../form/validation/context";
 import { MultiSectionFormValidationContextProvider } from "../form";
@@ -23,70 +23,63 @@ export const AccordionForm = ({
   const { height: lastSectionHeight } = useDimension(lastSectionRef);
 
   return (
-    <StickyContainer className="container">
-      <EuiFlexGroup direction="row" gutterSize="none" className="accordionForm">
-        <EuiFlexItem grow={false} className="accordionForm--sideNavContainer">
-          <Sticky>
-            {({ style, isSticky }) => (
-              <span style={style}>
-                {isSticky && <EuiSpacer size="m" />}
-                <AccordionFormSideNav name={name} sections={sections} />
-              </span>
-            )}
-          </Sticky>
-        </EuiFlexItem>
-        <EuiFlexItem grow={true} className="accordionForm--content">
-          <MultiSectionFormValidationContextProvider
-            onSubmit={onSubmit}
-            schemas={sections.map(s => s.validationSchema)}
-            contexts={sections.map(s => s.validationContext)}>
-            <FormValidationContext.Consumer>
-              {({ errors, onSubmit, isSubmitting }) => (
-                <EuiFlexGroup
-                  direction="column"
-                  gutterSize="none"
-                  alignItems="center">
-                  <AccordionFormScrollController sections={sections} />
+    <EuiFlexGroup direction="row" gutterSize="none" className="accordionForm">
+      <EuiFlexItem grow={false} className="accordionForm--sideNavContainer">
+        <Sticky enabled={true}>
+          <AccordionFormSideNav name={name} sections={sections} />
+        </Sticky>
+      </EuiFlexItem>
+      <EuiFlexItem grow={true} className="accordionForm--content">
+        <MultiSectionFormValidationContextProvider
+          onSubmit={onSubmit}
+          schemas={sections.map(s => s.validationSchema)}
+          contexts={sections.map(s => s.validationContext)}>
+          <FormValidationContext.Consumer>
+            {({ errors, onSubmit, isSubmitting }) => (
+              <EuiFlexGroup
+                direction="column"
+                gutterSize="none"
+                alignItems="center">
+                <AccordionFormScrollController sections={sections} />
 
-                  {sections.map((section, idx) => (
-                    <EuiFlexItem key={idx}>
-                      <span
-                        ref={
-                          idx === sections.length - 1
-                            ? lastSectionRef
-                            : undefined
-                        }>
-                        <AccordionFormSection
-                          section={section}
-                          errors={errors[idx]}
-                          renderTitle={renderTitle}
-                        />
-                      </span>
-                    </EuiFlexItem>
-                  ))}
+                {sections.map((section, idx) => (
+                  <EuiFlexItem key={idx}>
+                    <span
+                      ref={
+                        idx === sections.length - 1
+                          ? lastSectionRef
+                          : undefined
+                      }>
+                      <AccordionFormSection
+                        section={section}
+                        errors={errors[idx]}
+                        renderTitle={renderTitle}
+                      />
+                    </span>
+                  </EuiFlexItem>
+                ))}
 
-                  <EuiSpacer size="l" />
+                <EuiSpacer size="l" />
 
-                  <EuiFlexItem
-                    // set the minHeight dynamically, based on the height of the last section
-                    style={{
-                      minHeight: `calc(100vh - ${lastSectionHeight +
-                        24 +
-                        16}px)`
-                    }}>
-                    <StepActions
-                      submitLabel={submitLabel}
-                      onCancel={onCancel}
-                      onSubmit={onSubmit}
-                      isSubmitting={isSubmitting}
-                    />
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              )}
-            </FormValidationContext.Consumer>
-          </MultiSectionFormValidationContextProvider>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </StickyContainer>
+                <EuiFlexItem
+                  // set the minHeight dynamically, based on the height of the last section
+                  style={{
+                    minHeight: `calc(100vh - ${lastSectionHeight +
+                      24 +
+                      16}px)`
+                  }}>
+                  <StepActions
+                    submitLabel={submitLabel}
+                    onCancel={onCancel}
+                    onSubmit={onSubmit}
+                    isSubmitting={isSubmitting}
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            )}
+          </FormValidationContext.Consumer>
+        </MultiSectionFormValidationContextProvider>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };
diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -3758,7 +3758,7 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.3.1.tgz#c485341ae8fd999ca4ee5af2d7a1c9ae01e0099c"
   integrity sha512-a3KdPAANPbNE4ZUv9h6LckSl9zLsYOP4MBmhIPkRaeyybt+r4UghLvq+xw/YwUcC1gqylCkL4rdVs3Lwupjm4Q==
 
-classnames@^2.5.1:
+classnames@^2.0.0, classnames@^2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
@@ -3987,7 +3987,7 @@ core-js-pure@^3.23.3:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.37.1.tgz#2b4b34281f54db06c9a9a5bd60105046900553bd"
   integrity sha512-J/r5JTHSmzTxbiYYrzXg9w1VpqrYt+gexenBE9pugeyhwPZTAEJddyiReJWsLO6uNQ8xJZFbod6XC7KKwatCiA==
 
-core-js@3, core-js@^3.19.2:
+core-js@3, core-js@^3.19.2, core-js@^3.6.5:
   version "3.37.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.37.1.tgz#d21751ddb756518ac5a00e4d66499df981a62db9"
   integrity sha512-Xn6qmxrQZyB0FFY8E3bgRXei3lWDJHhvI+u0q9TKIYM49G8pAr0FgnnrFRAmsbptZL1yxRADVXn+x5AGsbBfyw==
@@ -5104,6 +5104,11 @@ etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
 
+eventemitter3@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
+  integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==
+
 eventemitter3@^4.0.0:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@@ -7396,7 +7401,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
-lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
+lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -8856,7 +8861,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -8953,7 +8958,7 @@ raf-schd@^4.0.3:
   resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
   integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
 
-raf@^3.3.0, raf@^3.4.1:
+raf@^3.0.0, raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
   integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
@@ -9252,13 +9257,16 @@ react-scroll@^1.9.0:
     lodash.throttle "^4.1.1"
     prop-types "^15.7.2"
 
-react-sticky@^6.0.3:
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/react-sticky/-/react-sticky-6.0.3.tgz#7a18b643e1863da113d7f7036118d2a75d9ecde4"
-  integrity sha512-LNH4UJlRatOqo29/VHxDZOf6fwbgfgcHO4mkEFvrie5FuaZCSTGtug5R8NGqJ0kSnX8gHw8qZN37FcvnFBJpTQ==
+react-stickynode@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/react-stickynode/-/react-stickynode-4.1.1.tgz#ea63509a1d83195a7846d8f39be1e4e9ccbf1d3e"
+  integrity sha512-+Xp3xantrxbFjqNiSbpvsZwCqZYiPq0njKTA+QsIZdmEHih1H/lOV9/LpS37d+v92iSydJJTZMeRaENWeqGeIA==
   dependencies:
-    prop-types "^15.5.8"
-    raf "^3.3.0"
+    classnames "^2.0.0"
+    core-js "^3.6.5"
+    prop-types "^15.6.0"
+    shallowequal "^1.0.0"
+    subscribe-ui-event "^2.0.6"
 
 react-style-singleton@^2.2.1:
   version "2.2.1"
@@ -9955,6 +9963,11 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
+shallowequal@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -10242,7 +10255,16 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -10357,7 +10379,14 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -10426,6 +10455,15 @@ stylis@4.2.0:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
   integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
 
+subscribe-ui-event@^2.0.6:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/subscribe-ui-event/-/subscribe-ui-event-2.0.7.tgz#8d18b6339c35b25246a5335775573f0e5dc461f8"
+  integrity sha512-Acrtf9XXl6lpyHAWYeRD1xTPUQHDERfL4GHeNuYAtZMc4Z8Us2iDBP0Fn3xiRvkQ1FO+hx+qRLmPEwiZxp7FDQ==
+  dependencies:
+    eventemitter3 "^3.0.0"
+    lodash "^4.17.15"
+    raf "^3.0.0"
+
 sucrase@^3.32.0:
   version "3.35.0"
   resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
@@ -11642,7 +11680,16 @@ workbox-window@6.6.1:
     "@types/trusted-types" "^2.0.2"
     workbox-core "6.6.1"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@caraml-dev/ui-lib",`
`3`		`- "version": "1.7.6",`
	`3`	`+ "version": "1.13.0",`
`4`	`4`	`"private": true,`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`