@onepercentio/one-ui 0.2.8 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (118) hide show
  1. package/cypress/support/{commands.js → commands.ts} +14 -1
  2. package/cypress/support/component-index.html +12 -0
  3. package/cypress/support/component.ts +39 -0
  4. package/cypress/support/{index.js → e2e.js} +0 -0
  5. package/dist/components/AdaptiveButton/AdaptiveButton.js +17 -15
  6. package/dist/components/AdaptiveButton/AdaptiveButton.js.map +1 -1
  7. package/dist/components/AdaptiveSidebar/AdaptiveSidebar.d.ts +6 -2
  8. package/dist/components/AdaptiveSidebar/AdaptiveSidebar.js +10 -7
  9. package/dist/components/AdaptiveSidebar/AdaptiveSidebar.js.map +1 -1
  10. package/dist/components/AdaptiveSidebar/AdaptiveSidebar.module.scss +1 -0
  11. package/dist/components/AdaptiveSidebar/AdaptiveSidebar.stories.d.ts +3 -2
  12. package/dist/components/AnchoredTooltip/AnchoredTooltip.js +1 -1
  13. package/dist/components/AnchoredTooltip/AnchoredTooltip.js.map +1 -1
  14. package/dist/components/AnchoredTooltip/AnchoredTooltip.module.scss +1 -0
  15. package/dist/components/AnimatedEntrance/AnimatedEntrance.d.ts +18 -0
  16. package/dist/components/AnimatedEntrance/AnimatedEntrance.js +122 -0
  17. package/dist/components/AnimatedEntrance/AnimatedEntrance.js.map +1 -0
  18. package/dist/components/AnimatedEntrance/AnimatedEntrance.module.scss +106 -0
  19. package/dist/components/AnimatedEntrance/AnimatedEntrance.stories.d.ts +14 -0
  20. package/dist/components/AnimatedEntrance/AnimatedEntrance.stories.js +67 -0
  21. package/dist/components/AnimatedEntrance/AnimatedEntrance.stories.js.map +1 -0
  22. package/dist/components/AnimatedEntrance/index.d.ts +1 -0
  23. package/dist/components/AnimatedEntrance/index.js +9 -0
  24. package/dist/components/AnimatedEntrance/index.js.map +1 -0
  25. package/dist/components/Button/Button.d.ts +7 -0
  26. package/dist/components/Button/Button.js +5 -3
  27. package/dist/components/Button/Button.js.map +1 -1
  28. package/dist/components/Button/Button.stories.d.ts +2 -6
  29. package/dist/components/Button/Button.stories.js +29 -5
  30. package/dist/components/Button/Button.stories.js.map +1 -1
  31. package/dist/components/CheckBox/CheckBox.stories.js +25 -2
  32. package/dist/components/CheckBox/CheckBox.stories.js.map +1 -1
  33. package/dist/components/Collapsable/Collapsable.d.ts +0 -2
  34. package/dist/components/Collapsable/Collapsable.js +0 -2
  35. package/dist/components/Collapsable/Collapsable.js.map +1 -1
  36. package/dist/components/Countdown/Countdown.stories.js +25 -2
  37. package/dist/components/Countdown/Countdown.stories.js.map +1 -1
  38. package/dist/components/Form/Form.d.ts +3 -1
  39. package/dist/components/Form/Form.js +2 -2
  40. package/dist/components/Form/Form.js.map +1 -1
  41. package/dist/components/Form/Form.stories.d.ts +13 -0
  42. package/dist/components/Form/Form.stories.js +36 -0
  43. package/dist/components/Form/Form.stories.js.map +1 -0
  44. package/dist/components/Input/Input.js +2 -1
  45. package/dist/components/Input/Input.js.map +1 -1
  46. package/dist/components/InstantCounter/InstantCounter.js +3 -3
  47. package/dist/components/InstantCounter/InstantCounter.js.map +1 -1
  48. package/dist/components/InstantCounter/InstantCounter.stories.d.ts +13 -0
  49. package/dist/components/InstantCounter/InstantCounter.stories.js +48 -3
  50. package/dist/components/InstantCounter/InstantCounter.stories.js.map +1 -1
  51. package/dist/components/LinkToId/LinkToId.stories.d.ts +7 -0
  52. package/dist/components/LinkToId/LinkToId.stories.js +15 -0
  53. package/dist/components/LinkToId/LinkToId.stories.js.map +1 -0
  54. package/dist/components/LoaderDotsIndicator/LoaderDotsIndicator.stories.d.ts +7 -0
  55. package/dist/components/LoaderDotsIndicator/LoaderDotsIndicator.stories.js +15 -0
  56. package/dist/components/LoaderDotsIndicator/LoaderDotsIndicator.stories.js.map +1 -0
  57. package/dist/components/PasswordInput/PasswordInput.js +1 -1
  58. package/dist/components/PasswordInput/PasswordInput.js.map +1 -1
  59. package/dist/components/PasswordInput/PasswordInput.stories.d.ts +45 -0
  60. package/dist/components/PasswordInput/PasswordInput.stories.js +22 -0
  61. package/dist/components/PasswordInput/PasswordInput.stories.js.map +1 -0
  62. package/dist/components/Portal/Portal.d.ts +11 -0
  63. package/dist/components/Portal/Portal.js +62 -0
  64. package/dist/components/Portal/Portal.js.map +1 -0
  65. package/dist/components/Portal/Portal.module.scss +3 -0
  66. package/dist/components/Portal/Portal.stories.d.ts +7 -0
  67. package/dist/components/Portal/Portal.stories.js +15 -0
  68. package/dist/components/Portal/Portal.stories.js.map +1 -0
  69. package/dist/components/Portal/index.d.ts +1 -0
  70. package/dist/components/Portal/index.js +10 -0
  71. package/dist/components/Portal/index.js.map +1 -0
  72. package/dist/components/SectionContainer/SectionContainer.stories.d.ts +14 -0
  73. package/dist/components/SectionContainer/SectionContainer.stories.js +15 -0
  74. package/dist/components/SectionContainer/SectionContainer.stories.js.map +1 -0
  75. package/dist/components/Tabs/Tabs.js +1 -1
  76. package/dist/components/Tabs/Tabs.js.map +1 -1
  77. package/dist/components/Tabs/Tabs.stories.d.ts +17 -0
  78. package/dist/components/Tabs/Tabs.stories.js +57 -0
  79. package/dist/components/Tabs/Tabs.stories.js.map +1 -0
  80. package/dist/components/Text/Text.d.ts +8 -1
  81. package/dist/components/Text/Text.js +5 -3
  82. package/dist/components/Text/Text.js.map +1 -1
  83. package/dist/components/Text/Text.stories.d.ts +2 -7
  84. package/dist/components/Text/Text.stories.js +26 -3
  85. package/dist/components/Text/Text.stories.js.map +1 -1
  86. package/dist/components/Transition/Transition.js +4 -4
  87. package/dist/components/Transition/Transition.js.map +1 -1
  88. package/dist/components/UncontrolledTransition/UncontrolledTransition.d.ts +1 -0
  89. package/dist/components/UncontrolledTransition/UncontrolledTransition.js +3 -1
  90. package/dist/components/UncontrolledTransition/UncontrolledTransition.js.map +1 -1
  91. package/dist/components/UncontrolledTransition/UncontrolledTransition.stories.d.ts +2 -0
  92. package/dist/components/WalletConnectionWrapper/WalletConnectionWrapper.d.ts +2 -2
  93. package/dist/components/WalletConnectionWrapper/WalletConnectionWrapper.js +3 -2
  94. package/dist/components/WalletConnectionWrapper/WalletConnectionWrapper.js.map +1 -1
  95. package/dist/components/WalletConnectionWrapper/WalletConnectionWrapper.stories.d.ts +3 -3
  96. package/dist/components/utilitary/ScrollAndFocusLock/ScrollAndFocusLock.js +6 -2
  97. package/dist/components/utilitary/ScrollAndFocusLock/ScrollAndFocusLock.js.map +1 -1
  98. package/dist/components/utilitary/ScrollAndFocusLock/ScrollAndFocusLock.module.scss +5 -0
  99. package/dist/context/OneUIProvider.d.ts +1 -1
  100. package/dist/context/OneUIProvider.js +15 -4
  101. package/dist/context/OneUIProvider.js.map +1 -1
  102. package/dist/hooks/shims/ObjectWatchShim.js +24 -17
  103. package/dist/hooks/shims/ObjectWatchShim.js.map +1 -1
  104. package/dist/hooks/useAsyncControl.d.ts +5 -3
  105. package/dist/hooks/useAsyncControl.js +8 -9
  106. package/dist/hooks/useAsyncControl.js.map +1 -1
  107. package/dist/hooks/useFirestoreWatch.d.ts +12 -0
  108. package/dist/hooks/useFirestoreWatch.js +38 -0
  109. package/dist/hooks/useFirestoreWatch.js.map +1 -0
  110. package/dist/hooks/useForm.d.ts +2 -0
  111. package/dist/hooks/useObserve.d.ts +1 -1
  112. package/dist/hooks/useObserve.js +6 -4
  113. package/dist/hooks/useObserve.js.map +1 -1
  114. package/dist/hooks/useRebound.d.ts +9 -0
  115. package/dist/hooks/useRebound.js +24 -0
  116. package/dist/hooks/useRebound.js.map +1 -0
  117. package/package.json +23 -4
  118. package/scripts/start-emulator.js +2 -0
@@ -1,5 +1,7 @@
1
+ /// <reference types="cypress" />
2
+ import "@muritavo/cypress-toolkit/dist/support/essentials"
1
3
  // ***********************************************
2
- // This example commands.js shows you how to
4
+ // This example commands.ts shows you how to
3
5
  // create various custom commands and overwrite
4
6
  // existing commands.
5
7
  //
@@ -23,3 +25,14 @@
23
25
  //
24
26
  // -- This will overwrite an existing command --
25
27
  // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
28
+ //
29
+ // declare global {
30
+ // namespace Cypress {
31
+ // interface Chainable {
32
+ // login(email: string, password: string): Chainable<void>
33
+ // drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
34
+ // dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
35
+ // visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
36
+ // }
37
+ // }
38
+ // }
@@ -0,0 +1,12 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
7
+ <title>Components App</title>
8
+ </head>
9
+ <body>
10
+ <div data-cy-root></div>
11
+ </body>
12
+ </html>
@@ -0,0 +1,39 @@
1
+ // ***********************************************************
2
+ // This example support/component.ts is processed and
3
+ // loaded automatically before your test files.
4
+ //
5
+ // This is a great place to put global configuration and
6
+ // behavior that modifies Cypress.
7
+ //
8
+ // You can change the location of this file or turn off
9
+ // automatically serving support files with the
10
+ // 'supportFile' configuration option.
11
+ //
12
+ // You can read more here:
13
+ // https://on.cypress.io/configuration
14
+ // ***********************************************************
15
+
16
+ // Import commands.js using ES2015 syntax:
17
+ import './commands'
18
+
19
+ // Alternatively you can use CommonJS syntax:
20
+ // require('./commands')
21
+
22
+ import { mount } from 'cypress/react'
23
+
24
+ // Augment the Cypress namespace to include type definitions for
25
+ // your custom command.
26
+ // Alternatively, can be defined in cypress/support/component.d.ts
27
+ // with a <reference path="./component" /> at the top of your spec.
28
+ declare global {
29
+ namespace Cypress {
30
+ interface Chainable {
31
+ mount: typeof mount
32
+ }
33
+ }
34
+ }
35
+
36
+ Cypress.Commands.add('mount', mount)
37
+
38
+ // Example use:
39
+ // cy.mount(<MyComponent />)
File without changes
@@ -54,22 +54,24 @@ function AdaptiveButton(_a) {
54
54
  if (sectionDiv)
55
55
  sectionDiv.style.width = `${sectionDiv.clientWidth}px`;
56
56
  setTimeout(() => {
57
- const sectionDiv = uncontrolledRef.current.sectionRef.current;
58
- if (sectionDiv) {
59
- const lastChild = sectionDiv.lastChild;
60
- if (lastChild) {
61
- const contentWidth = lastChild.clientWidth;
62
- const targetWidth = `${contentWidth}px`;
63
- sectionDiv.style.width = targetWidth;
64
- function transEnd() {
65
- setTimeout(() => {
66
- if ((sectionDiv === null || sectionDiv === void 0 ? void 0 : sectionDiv.style.width) === `${contentWidth}px`)
67
- sectionDiv.style.width = "";
68
- }, 100);
69
- if (sectionDiv)
70
- sectionDiv.removeEventListener("transitionend", transEnd);
57
+ if (uncontrolledRef.current) {
58
+ const sectionDiv = uncontrolledRef.current.sectionRef.current;
59
+ if (sectionDiv) {
60
+ const lastChild = sectionDiv.lastChild;
61
+ if (lastChild) {
62
+ const contentWidth = lastChild.clientWidth;
63
+ const targetWidth = `${contentWidth}px`;
64
+ sectionDiv.style.width = targetWidth;
65
+ function transEnd() {
66
+ setTimeout(() => {
67
+ if ((sectionDiv === null || sectionDiv === void 0 ? void 0 : sectionDiv.style.width) === `${contentWidth}px`)
68
+ sectionDiv.style.width = "";
69
+ }, 100);
70
+ if (sectionDiv)
71
+ sectionDiv.removeEventListener("transitionend", transEnd);
72
+ }
73
+ sectionDiv.addEventListener("transitionend", transEnd);
71
74
  }
72
- sectionDiv.addEventListener("transitionend", transEnd);
73
75
  }
74
76
  }
75
77
  }, 100);
@@ -1 +1 @@
1
- {"version":3,"file":"AdaptiveButton.js","sourceRoot":"","sources":["../../../src/components/AdaptiveButton/AdaptiveButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAMe;AACf,uDAA+B;AAC/B,8CAAyD;AACzD,uFAA+D;AAC/D,8FAAkD;AAElD;;IAEI;AACJ,SAAwB,cAAc,CAAC,EAMN;QANM,EACrC,QAAQ,EACR,SAAS,GAAG,EAAE,OAIiB,EAH5B,WAAW,cAHuB,yBAItC,CADe;IAId,MAAM,eAAe,GACnB,IAAA,cAAM,EAA4C,IAAI,CAAC,CAAC;IAC1D,MAAM,SAAS,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IAElD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,eAAe,CAAC,OAAQ,CAAC,UAAU,CAAC,OAAO,CAAC;QAC/D,IAAI,UAAU;YAAE,UAAU,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,UAAU,CAAC,WAAW,IAAI,CAAC;QACvE,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,UAAU,GAAG,eAAe,CAAC,OAAQ,CAAC,UAAU,CAAC,OAAO,CAAC;YAC/D,IAAI,UAAU,EAAE;gBACd,MAAM,SAAS,GAAG,UAAU,CAAC,SAA2B,CAAC;gBACzD,IAAI,SAAS,EAAE;oBACb,MAAM,YAAY,GAAG,SAAS,CAAC,WAAW,CAAC;oBAC3C,MAAM,WAAW,GAAG,GAAG,YAAY,IAAI,CAAC;oBACxC,UAAU,CAAC,KAAK,CAAC,KAAK,GAAG,WAAW,CAAC;oBACrC,SAAS,QAAQ;wBACf,UAAU,CAAC,GAAG,EAAE;4BACd,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,CAAC,KAAK,MAAK,GAAG,YAAY,IAAI;gCACjD,UAAW,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;wBACjC,CAAC,EAAE,GAAG,CAAC,CAAC;wBAER,IAAI,UAAU;4BACZ,UAAU,CAAC,mBAAmB,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;oBAC9D,CAAC;oBACD,UAAU,CAAC,gBAAgB,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;iBACxD;aACF;QACH,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL;QACE,8BAAC,gBAAM,kBACL,SAAS,EAAE,GAAG,oCAAM,CAAC,WAAW,IAAI,SAAS,EAAE,EAC/C,GAAG,EAAE,SAAS,IACV,WAAW;YAEf,8BAAC,gCAAsB,IACrB,GAAG,EAAE,eAAe,EACpB,cAAc,EAAE,qCAAwB,CAAC,MAAM,EAC/C,mBAAmB,EAAE,KAAK,EAC1B,MAAM,EAAE;oBACN,QAAQ,EAAE;wBACR,cAAc,EAAE,oCAAM,CAAC,eAAe;wBACtC,eAAe,EAAE,oCAAM,CAAC,aAAa;qBACtC;oBACD,OAAO,EAAE;wBACP,cAAc,EAAE,oCAAM,CAAC,eAAe;wBACtC,eAAe,EAAE,oCAAM,CAAC,aAAa;qBACtC;iBACF,EACD,SAAS,EAAE,oCAAM,CAAC,YAAY,IAE7B,QAAQ,CACc,CAClB,CACR,CACJ,CAAC;AACJ,CAAC;AAjED,iCAiEC"}
1
+ {"version":3,"file":"AdaptiveButton.js","sourceRoot":"","sources":["../../../src/components/AdaptiveButton/AdaptiveButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAMe;AACf,uDAA+B;AAC/B,8CAAyD;AACzD,uFAA+D;AAC/D,8FAAkD;AAElD;;IAEI;AACJ,SAAwB,cAAc,CAAC,EAMN;QANM,EACrC,QAAQ,EACR,SAAS,GAAG,EAAE,OAIiB,EAH5B,WAAW,cAHuB,yBAItC,CADe;IAId,MAAM,eAAe,GACnB,IAAA,cAAM,EAA4C,IAAI,CAAC,CAAC;IAC1D,MAAM,SAAS,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IAElD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,eAAe,CAAC,OAAQ,CAAC,UAAU,CAAC,OAAO,CAAC;QAC/D,IAAI,UAAU;YAAE,UAAU,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,UAAU,CAAC,WAAW,IAAI,CAAC;QACvE,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,eAAe,CAAC,OAAO,EAAE;gBAC3B,MAAM,UAAU,GAAG,eAAe,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC;gBAC9D,IAAI,UAAU,EAAE;oBACd,MAAM,SAAS,GAAG,UAAU,CAAC,SAA2B,CAAC;oBACzD,IAAI,SAAS,EAAE;wBACb,MAAM,YAAY,GAAG,SAAS,CAAC,WAAW,CAAC;wBAC3C,MAAM,WAAW,GAAG,GAAG,YAAY,IAAI,CAAC;wBACxC,UAAU,CAAC,KAAK,CAAC,KAAK,GAAG,WAAW,CAAC;wBACrC,SAAS,QAAQ;4BACf,UAAU,CAAC,GAAG,EAAE;gCACd,IAAI,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,CAAC,KAAK,MAAK,GAAG,YAAY,IAAI;oCACjD,UAAW,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;4BACjC,CAAC,EAAE,GAAG,CAAC,CAAC;4BAER,IAAI,UAAU;gCACZ,UAAU,CAAC,mBAAmB,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;wBAC9D,CAAC;wBACD,UAAU,CAAC,gBAAgB,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;qBACxD;iBACF;aACF;QACH,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL;QACE,8BAAC,gBAAM,kBACL,SAAS,EAAE,GAAG,oCAAM,CAAC,WAAW,IAAI,SAAS,EAAE,EAC/C,GAAG,EAAE,SAAS,IACV,WAAW;YAEf,8BAAC,gCAAsB,IACrB,GAAG,EAAE,eAAe,EACpB,cAAc,EAAE,qCAAwB,CAAC,MAAM,EAC/C,mBAAmB,EAAE,KAAK,EAC1B,MAAM,EAAE;oBACN,QAAQ,EAAE;wBACR,cAAc,EAAE,oCAAM,CAAC,eAAe;wBACtC,eAAe,EAAE,oCAAM,CAAC,aAAa;qBACtC;oBACD,OAAO,EAAE;wBACP,cAAc,EAAE,oCAAM,CAAC,eAAe;wBACtC,eAAe,EAAE,oCAAM,CAAC,aAAa;qBACtC;iBACF,EACD,SAAS,EAAE,oCAAM,CAAC,YAAY,IAE7B,QAAQ,CACc,CAClB,CACR,CACJ,CAAC;AACJ,CAAC;AAnED,iCAmEC"}
@@ -2,9 +2,13 @@ import React, { PropsWithChildren } from "react";
2
2
  /**
3
3
  * A component that you can put anywhere but hides when small enough and shows the control via a fixed floating button
4
4
  **/
5
- export default function AdaptiveSidebar({ children, className, visibilityControlComponent: VisibilityControlComponent, ...props }: PropsWithChildren<{
5
+ export default function AdaptiveSidebar({ open: externalOpen, children, className, visibilityControlComponent: VisibilityControlComponent, ...props }: PropsWithChildren<{
6
+ /** To control AdaptiveSidebar externally
7
+ * (created for flows that requires floating views when on mobile)
8
+ **/
9
+ open?: boolean;
6
10
  className?: string;
7
- visibilityControlComponent: (props: {
11
+ visibilityControlComponent?: (props: {
8
12
  open: boolean;
9
13
  }) => React.ReactElement;
10
14
  } & React.HTMLProps<HTMLDivElement>>): JSX.Element;
@@ -46,9 +46,10 @@ const DefaultVisibilityControl = ({ open }) => (react_1.default.createElement(Mu
46
46
  * A component that you can put anywhere but hides when small enough and shows the control via a fixed floating button
47
47
  **/
48
48
  function AdaptiveSidebar(_a) {
49
- var { children, className = "", visibilityControlComponent: VisibilityControlComponent = DefaultVisibilityControl } = _a, props = __rest(_a, ["children", "className", "visibilityControlComponent"]);
49
+ var { open: externalOpen, children, className = "", visibilityControlComponent: VisibilityControlComponent = DefaultVisibilityControl } = _a, props = __rest(_a, ["open", "children", "className", "visibilityControlComponent"]);
50
50
  const [open, setOpen] = (0, react_1.useState)(false);
51
51
  const containerRef = (0, react_1.useRef)(null);
52
+ const _open = externalOpen === undefined ? open : externalOpen;
52
53
  (0, react_1.useEffect)(() => {
53
54
  if (process.env.NODE_ENV === "test")
54
55
  return;
@@ -57,14 +58,16 @@ function AdaptiveSidebar(_a) {
57
58
  behavior: "smooth",
58
59
  top: 0,
59
60
  });
60
- }, [open]);
61
+ }, [_open]);
62
+ const externalControl = externalOpen !== undefined;
61
63
  return (react_1.default.createElement(react_1.default.Fragment, null,
62
- react_1.default.createElement("div", Object.assign({ ref: containerRef, className: `${AdaptiveSidebar_module_scss_1.default.container} ${DefaultVisibilityControl === VisibilityControlComponent
64
+ react_1.default.createElement("div", Object.assign({ ref: containerRef, className: `${AdaptiveSidebar_module_scss_1.default.container} ${!externalControl &&
65
+ DefaultVisibilityControl === VisibilityControlComponent
63
66
  ? AdaptiveSidebar_module_scss_1.default.defaultPadding
64
- : ""} ${open ? AdaptiveSidebar_module_scss_1.default.open : AdaptiveSidebar_module_scss_1.default.closed} ${className}` }, props),
65
- react_1.default.createElement(ScrollAndFocusLock_1.default, { open: open }, children)),
66
- react_1.default.createElement("div", { className: AdaptiveSidebar_module_scss_1.default.hamburger, onClick: () => setOpen((a) => !a) },
67
- react_1.default.createElement(VisibilityControlComponent, { open: open }))));
67
+ : ""} ${_open ? AdaptiveSidebar_module_scss_1.default.open : AdaptiveSidebar_module_scss_1.default.closed} ${className}` }, props),
68
+ react_1.default.createElement(ScrollAndFocusLock_1.default, { open: _open }, children)),
69
+ !externalControl && (react_1.default.createElement("div", { className: AdaptiveSidebar_module_scss_1.default.hamburger, onClick: () => setOpen((a) => !a) },
70
+ react_1.default.createElement(VisibilityControlComponent, { open: _open })))));
68
71
  }
69
72
  exports.default = AdaptiveSidebar;
70
73
  //# sourceMappingURL=AdaptiveSidebar.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"AdaptiveSidebar.js","sourceRoot":"","sources":["../../../src/components/AdaptiveSidebar/AdaptiveSidebar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8E;AAC9E,uFAA+D;AAC/D,yFAAiE;AACjE,gGAAmD;AAEnD,MAAM,wBAAwB,GAAG,CAAC,EAAE,IAAI,EAAqB,EAAE,EAAE,CAAC,CAChE,8BAAC,gCAAsB,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,GAAI,CACzE,CAAC;AAEF;;IAEI;AACJ,SAAwB,eAAe,CAAC,EAavC;QAbuC,EACtC,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,0BAA0B,EACxB,0BAA0B,GAAG,wBAAwB,OASxD,EARI,KAAK,cAL8B,uDAMvC,CADS;IASR,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxC,MAAM,YAAY,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAElD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,MAAM;YAAE,OAAO;QAC5C,YAAY,CAAC,OAAQ,CAAC,QAAQ,CAAC;YAC7B,IAAI,EAAE,CAAC;YACP,QAAQ,EAAE,QAAQ;YAClB,GAAG,EAAE,CAAC;SACP,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL;QACE,qDACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,GAAG,qCAAM,CAAC,SAAS,IAC5B,wBAAwB,KAAK,0BAA0B;gBACrD,CAAC,CAAC,qCAAM,CAAC,cAAc;gBACvB,CAAC,CAAC,EACN,IAAI,IAAI,CAAC,CAAC,CAAC,qCAAM,CAAC,IAAI,CAAC,CAAC,CAAC,qCAAM,CAAC,MAAM,IAAI,SAAS,EAAE,IACjD,KAAK;YAET,8BAAC,4BAAkB,IAAC,IAAI,EAAE,IAAI,IAAG,QAAQ,CAAsB,CAC3D;QACN,uCAAK,SAAS,EAAE,qCAAM,CAAC,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;YACjE,8BAAC,0BAA0B,IAAC,IAAI,EAAE,IAAI,GAAI,CACtC,CACL,CACJ,CAAC;AACJ,CAAC;AA5CD,kCA4CC"}
1
+ {"version":3,"file":"AdaptiveSidebar.js","sourceRoot":"","sources":["../../../src/components/AdaptiveSidebar/AdaptiveSidebar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8E;AAC9E,uFAA+D;AAC/D,yFAAiE;AACjE,gGAAmD;AAEnD,MAAM,wBAAwB,GAAG,CAAC,EAAE,IAAI,EAAqB,EAAE,EAAE,CAAC,CAChE,8BAAC,gCAAsB,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,GAAI,CACzE,CAAC;AAEF;;IAEI;AACJ,SAAwB,eAAe,CAAC,EAkBvC;QAlBuC,EACtC,IAAI,EAAE,YAAY,EAClB,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,0BAA0B,EACxB,0BAA0B,GAAG,wBAAwB,OAaxD,EAZI,KAAK,cAN8B,+DAOvC,CADS;IAaR,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxC,MAAM,YAAY,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,KAAK,GAAG,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC;IAE/D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,MAAM;YAAE,OAAO;QAC5C,YAAY,CAAC,OAAQ,CAAC,QAAQ,CAAC;YAC7B,IAAI,EAAE,CAAC;YACP,QAAQ,EAAE,QAAQ;YAClB,GAAG,EAAE,CAAC;SACP,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACZ,MAAM,eAAe,GAAG,YAAY,KAAK,SAAS,CAAC;IAEnD,OAAO,CACL;QACE,qDACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,GAAG,qCAAM,CAAC,SAAS,IAC5B,CAAC,eAAe;gBAChB,wBAAwB,KAAK,0BAA0B;gBACrD,CAAC,CAAC,qCAAM,CAAC,cAAc;gBACvB,CAAC,CAAC,EACN,IAAI,KAAK,CAAC,CAAC,CAAC,qCAAM,CAAC,IAAI,CAAC,CAAC,CAAC,qCAAM,CAAC,MAAM,IAAI,SAAS,EAAE,IAClD,KAAK;YAET,8BAAC,4BAAkB,IAAC,IAAI,EAAE,KAAK,IAAG,QAAQ,CAAsB,CAC5D;QACL,CAAC,eAAe,IAAI,CACnB,uCAAK,SAAS,EAAE,qCAAM,CAAC,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;YACjE,8BAAC,0BAA0B,IAAC,IAAI,EAAE,KAAK,GAAI,CACvC,CACP,CACA,CACJ,CAAC;AACJ,CAAC;AAtDD,kCAsDC"}
@@ -37,6 +37,7 @@ $hamburgerOffset: 24;
37
37
  position: fixed;
38
38
  width: 100%;
39
39
  overflow: auto;
40
+ z-index: 1000;
40
41
 
41
42
  &.open {
42
43
  transition: transform $veryFast ease-out;
@@ -8,10 +8,11 @@ export default _default;
8
8
  export declare const InitialImplementation: {
9
9
  (args: any): JSX.Element;
10
10
  args: Partial<{
11
+ open?: boolean | undefined;
11
12
  className?: string | undefined;
12
- visibilityControlComponent: (props: {
13
+ visibilityControlComponent?: ((props: {
13
14
  open: boolean;
14
- }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
15
+ }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
15
16
  } & React.HTMLProps<HTMLDivElement> & {
16
17
  children?: React.ReactNode;
17
18
  }>;
@@ -101,7 +101,7 @@ exports.updateTooltipPosition = updateTooltipPosition;
101
101
  function AnchoredTooltip(props) {
102
102
  const { open, children, anchorRef } = props;
103
103
  const tooltipRef = (0, react_1.useRef)(null);
104
- const { component: { tooltip: { className = "" } = {} } = {} } = (0, OneUIProvider_1.useOneUIContext)();
104
+ const className = (0, OneUIProvider_1.useOneUIConfig)("component.tooltip.className");
105
105
  (0, react_1.useEffect)(() => {
106
106
  if (open) {
107
107
  if (anchorRef.current && tooltipRef.current)
@@ -1 +1 @@
1
- {"version":3,"file":"AnchoredTooltip.js","sourceRoot":"","sources":["../../../src/components/AnchoredTooltip/AnchoredTooltip.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"AnchoredTooltip.js","sourceRoot":"","sources":["../../../src/components/AnchoredTooltip/AnchoredTooltip.tsx"],"names":[],"mappings":"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"}
@@ -40,6 +40,7 @@
40
40
  margin: auto;
41
41
  position: relative;
42
42
  left: var(--anchor-indicator-offset-left, 0px);
43
+ z-index: -1;
43
44
  }
44
45
 
45
46
  &::before {
@@ -0,0 +1,18 @@
1
+ import { Key, ReactElement } from "react";
2
+ export declare enum EntranceType {
3
+ SLIDE_AND_EXPAND = 0,
4
+ EXPAND = 1
5
+ }
6
+ export declare function AnimatedEntranceItem({ children, noEntranceAnimation, onRemoveChildren, entranceType, }: {
7
+ children: ReactElement;
8
+ noEntranceAnimation: boolean;
9
+ onRemoveChildren: (key: Key) => void;
10
+ entranceType: EntranceType;
11
+ }): JSX.Element;
12
+ /**
13
+ * Animates the entrance and exit of a component
14
+ **/
15
+ export default function AnimatedEntrance({ children, entranceType, }: {
16
+ children: ReactElement[];
17
+ entranceType?: EntranceType;
18
+ }): JSX.Element;
@@ -0,0 +1,122 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
28
+ Object.defineProperty(exports, "__esModule", { value: true });
29
+ exports.AnimatedEntranceItem = exports.EntranceType = void 0;
30
+ const react_1 = __importStar(require("react"));
31
+ const Transition_1 = require("../Transition");
32
+ const UncontrolledTransition_1 = __importDefault(require("../UncontrolledTransition"));
33
+ const AnimatedEntrance_module_scss_1 = __importDefault(require("./AnimatedEntrance.module.scss"));
34
+ var EntranceType;
35
+ (function (EntranceType) {
36
+ EntranceType[EntranceType["SLIDE_AND_EXPAND"] = 0] = "SLIDE_AND_EXPAND";
37
+ EntranceType[EntranceType["EXPAND"] = 1] = "EXPAND";
38
+ })(EntranceType = exports.EntranceType || (exports.EntranceType = {}));
39
+ const CONFIGS_BY_ENTRANCE_TYPE = {
40
+ [EntranceType.SLIDE_AND_EXPAND]: {
41
+ forward: {
42
+ elementEntering: AnimatedEntrance_module_scss_1.default.elementEntering,
43
+ elementExiting: AnimatedEntrance_module_scss_1.default.elementExiting,
44
+ },
45
+ backward: {
46
+ elementEntering: AnimatedEntrance_module_scss_1.default.elementEnteringReverse,
47
+ elementExiting: AnimatedEntrance_module_scss_1.default.elementExitingReverse,
48
+ },
49
+ },
50
+ [EntranceType.EXPAND]: {
51
+ forward: {
52
+ elementEntering: AnimatedEntrance_module_scss_1.default.elementExpanding,
53
+ elementExiting: AnimatedEntrance_module_scss_1.default.elementShrinking,
54
+ },
55
+ backward: {
56
+ elementEntering: AnimatedEntrance_module_scss_1.default.elementExpandingReverse,
57
+ elementExiting: AnimatedEntrance_module_scss_1.default.elementShrinkingReverse,
58
+ },
59
+ },
60
+ };
61
+ function AnimatedEntranceItem({ children, noEntranceAnimation, onRemoveChildren, entranceType, }) {
62
+ const uncontRef = (0, react_1.useRef)(null);
63
+ const [screen, setScreen] = (0, react_1.useState)(noEntranceAnimation ? children : react_1.default.createElement(react_1.Fragment, { key: "null" }));
64
+ (0, react_1.useEffect)(() => {
65
+ if (String(children.key).includes("-nullated")) {
66
+ uncontRef.current.setOrientation("backward");
67
+ }
68
+ setScreen(children);
69
+ }, [children.key]);
70
+ (0, react_1.useEffect)(() => {
71
+ const x = setTimeout(() => {
72
+ const key = String(screen.key);
73
+ if (key === "null" || key.includes("-nullated"))
74
+ uncontRef.current.sectionRef.current.style.maxHeight = `0px`;
75
+ else
76
+ uncontRef.current.sectionRef.current.style.maxHeight = `${uncontRef.current.sectionRef.current.scrollHeight}px`;
77
+ }, 100);
78
+ return () => {
79
+ clearTimeout(x);
80
+ };
81
+ }, [screen]);
82
+ const className = (0, react_1.useMemo)(() => (!noEntranceAnimation ? AnimatedEntrance_module_scss_1.default.maxHeight : ""), [String(children.key).includes("-nullated")]);
83
+ return (react_1.default.createElement(UncontrolledTransition_1.default, { ref: uncontRef, transitionType: Transition_1.TransitionAnimationTypes.CUSTOM, className: `${AnimatedEntrance_module_scss_1.default.resetHeight} ${className}`, lockTransitionWidth: true, key: String(children.key).replace("-nullated", ""), onDiscardStep: (k) => {
84
+ if (k !== "null")
85
+ onRemoveChildren(k);
86
+ }, config: CONFIGS_BY_ENTRANCE_TYPE[entranceType] }, screen));
87
+ }
88
+ exports.AnimatedEntranceItem = AnimatedEntranceItem;
89
+ /**
90
+ * Animates the entrance and exit of a component
91
+ **/
92
+ function AnimatedEntrance({ children, entranceType = EntranceType.SLIDE_AND_EXPAND, }) {
93
+ const firstRef = (0, react_1.useRef)(true);
94
+ (0, react_1.useEffect)(() => {
95
+ firstRef.current = false;
96
+ }, []);
97
+ const prevChildren = (0, react_1.useRef)([]);
98
+ const childrenDelayed = (0, react_1.useMemo)(() => {
99
+ var _a;
100
+ const newChildren = children.filter((c) => !prevChildren.current.find((a) => a.key === c.key));
101
+ const filteredOutChildren = prevChildren.current.map((c) => {
102
+ return children.find((a) => a.key === c.key) ? ( // If the previous child still exists, mantain
103
+ c) : (
104
+ // If not, toggle to null to animate exit
105
+ react_1.default.createElement(react_1.Fragment, { key: String(c.key).includes("-nullated") ? c.key : `${c.key}-nullated` }));
106
+ });
107
+ for (let child of newChildren) {
108
+ const previousChildKey = (_a = children[children.indexOf(child) - 1]) === null || _a === void 0 ? void 0 : _a.key;
109
+ if (previousChildKey) {
110
+ filteredOutChildren.splice(filteredOutChildren.findIndex((a) => a.key === previousChildKey) + 1, 0, child);
111
+ }
112
+ else {
113
+ filteredOutChildren.unshift(child);
114
+ }
115
+ }
116
+ return filteredOutChildren;
117
+ }, [children]);
118
+ prevChildren.current = childrenDelayed;
119
+ return (react_1.default.createElement(react_1.default.Fragment, null, childrenDelayed.map((child) => (react_1.default.createElement(AnimatedEntranceItem, { key: String(child.key).replace("-nullated", ""), noEntranceAnimation: firstRef.current, entranceType: entranceType, onRemoveChildren: (k) => (prevChildren.current = prevChildren.current.filter((a) => a.key !== String(k) + "-nullated")) }, child)))));
120
+ }
121
+ exports.default = AnimatedEntrance;
122
+ //# sourceMappingURL=AnimatedEntrance.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AnimatedEntrance.js","sourceRoot":"","sources":["../../../src/components/AnimatedEntrance/AnimatedEntrance.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,106 @@
1
+ @keyframes expand {
2
+ 0% {
3
+ transform: translateX(100%);
4
+ }
5
+
6
+ 35% {
7
+ transform: translateX(100%);
8
+ }
9
+
10
+ 85% {
11
+ transform: translateX(-5%);
12
+ }
13
+
14
+ 100% {
15
+ transform: translateX(0%);
16
+ }
17
+ }
18
+
19
+ @keyframes exiting {
20
+ 100% {
21
+ transform: translateX(100%);
22
+ }
23
+
24
+ 65% {
25
+ transform: translateX(100%);
26
+ }
27
+
28
+ 50% {
29
+ opacity: 0;
30
+ }
31
+
32
+ 15% {
33
+ transform: translateX(-5%);
34
+ opacity: 1;
35
+ }
36
+
37
+ 0% {
38
+ transform: translateX(0%);
39
+ }
40
+ }
41
+ $duration: 1s;
42
+
43
+ .elementExiting {
44
+ animation-duration: $duration !important;
45
+ animation-name: exiting;
46
+ position: absolute;
47
+ }
48
+
49
+ .elementEntering {
50
+ animation-duration: $duration !important;
51
+ animation-name: expand;
52
+ }
53
+ .elementExitingReverse {
54
+ animation-duration: $duration !important;
55
+ animation-name: exiting;
56
+ }
57
+
58
+ .elementEnteringReverse {
59
+ animation-duration: $duration !important;
60
+ animation-name: expand;
61
+ position: absolute;
62
+ }
63
+
64
+ .resetHeight {
65
+ transition: max-height $duration/2 $duration * 0.2;
66
+ min-height: initial;
67
+ align-items: flex-start !important;
68
+ > * {
69
+ justify-content: flex-start !important;
70
+ }
71
+ }
72
+
73
+ .maxHeight {
74
+ max-height: 0px;
75
+ }
76
+
77
+ @keyframes nothing {
78
+ 100% {
79
+ transform: translateX(0%);
80
+ }
81
+
82
+ 0% {
83
+ transform: translateX(0%);
84
+ }
85
+ }
86
+
87
+ .elementShrinking {
88
+ animation-duration: $duration !important;
89
+ animation-name: nothing;
90
+ position: absolute;
91
+ }
92
+
93
+ .elementExpanding {
94
+ animation-duration: $duration !important;
95
+ animation-name: nothing;
96
+ }
97
+ .elementShrinkingReverse {
98
+ animation-duration: $duration !important;
99
+ animation-name: nothing;
100
+ }
101
+
102
+ .elementExpandingReverse {
103
+ animation-duration: $duration !important;
104
+ animation-name: nothing;
105
+ position: absolute;
106
+ }
@@ -0,0 +1,14 @@
1
+ import React from "react";
2
+ import AnimatedEntrance from "./AnimatedEntrance";
3
+ declare const _default: {
4
+ component: typeof AnimatedEntrance;
5
+ title: string;
6
+ };
7
+ export default _default;
8
+ export declare const InitialImplementation: {
9
+ (args: any): JSX.Element;
10
+ args: Partial<{
11
+ children: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
12
+ entranceType?: import("./AnimatedEntrance").EntranceType | undefined;
13
+ }>;
14
+ };
@@ -0,0 +1,67 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
28
+ Object.defineProperty(exports, "__esModule", { value: true });
29
+ exports.InitialImplementation = void 0;
30
+ const react_1 = __importStar(require("react"));
31
+ const Button_1 = __importDefault(require("../Button"));
32
+ const AnimatedEntrance_1 = __importDefault(require("./AnimatedEntrance"));
33
+ exports.default = {
34
+ component: AnimatedEntrance_1.default,
35
+ title: "Animated Entrance",
36
+ };
37
+ const ExampleEL = (key, removeElCb) => {
38
+ return (react_1.default.createElement("div", { key: key },
39
+ "Elemento ",
40
+ key,
41
+ " ",
42
+ react_1.default.createElement(Button_1.default, { variant: "outline", onClick: () => removeElCb((prev) => {
43
+ const filteredOut = prev.filter((prev) => String(prev.key) !== String(key));
44
+ return filteredOut;
45
+ }) }, "Remove")));
46
+ };
47
+ const InitialImplementation = (args) => {
48
+ const [exampleElements, setE] = (0, react_1.useState)([]);
49
+ (0, react_1.useMemo)(() => {
50
+ exampleElements.push(ExampleEL(1, setE));
51
+ exampleElements.push(ExampleEL(2, setE));
52
+ exampleElements.push(ExampleEL(3, setE));
53
+ exampleElements.push(ExampleEL(4, setE));
54
+ }, []);
55
+ const counter = (0, react_1.useRef)(4);
56
+ return (react_1.default.createElement(react_1.default.Fragment, null,
57
+ react_1.default.createElement("div", { style: { minHeight: 800 } },
58
+ react_1.default.createElement(AnimatedEntrance_1.default, null, exampleElements)),
59
+ react_1.default.createElement(Button_1.default, { variant: "filled", onClick: () => setE((prev) => {
60
+ counter.current++;
61
+ const currCounter = counter.current;
62
+ return [...prev, ExampleEL(currCounter, setE)];
63
+ }) }, "Add element")));
64
+ };
65
+ exports.InitialImplementation = InitialImplementation;
66
+ exports.InitialImplementation.args = {};
67
+ //# sourceMappingURL=AnimatedEntrance.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AnimatedEntrance.stories.js","sourceRoot":"","sources":["../../../src/components/AnimatedEntrance/AnimatedEntrance.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAOe;AACf,uDAA+B;AAC/B,0EAAkD;AAElD,kBAAe;IACb,SAAS,EAAE,0BAAgB;IAC3B,KAAK,EAAE,mBAAmB;CAC3B,CAAC;AAEF,MAAM,SAAS,GAAG,CAChB,GAAW,EACX,UAAiE,EACjE,EAAE;IACF,OAAO,CACL,uCAAK,GAAG,EAAE,GAAG;;QACD,GAAG;QAAE,GAAG;QAClB,8BAAC,gBAAM,IACL,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,GAAG,EAAE,CACZ,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE;gBAClB,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAC7B,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,MAAM,CAAC,GAAG,CAAC,CAC3C,CAAC;gBACF,OAAO,WAAW,CAAC;YACrB,CAAC,CAAC,aAIG,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEK,MAAM,qBAAqB,GAAG,CAAC,IAAS,EAAE,EAAE;IACjD,MAAM,CAAC,eAAe,EAAE,IAAI,CAAC,GAAG,IAAA,gBAAQ,EAAiB,EAAE,CAAC,CAAC;IAE7D,IAAA,eAAO,EAAC,GAAG,EAAE;QACX,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;QACzC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;QACzC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;QACzC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;IAC3C,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,OAAO,GAAG,IAAA,cAAM,EAAC,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL;QACE,uCAAK,KAAK,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE;YAC5B,8BAAC,0BAAgB,QAAE,eAAe,CAAoB,CAClD;QACN,8BAAC,gBAAM,IACL,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE,CACZ,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;gBACZ,OAAO,CAAC,OAAO,EAAE,CAAC;gBAClB,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC;gBACpC,OAAO,CAAC,GAAG,IAAI,EAAE,SAAS,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;YACjD,CAAC,CAAC,kBAIG,CACR,CACJ,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,qBAAqB,yBA8BhC;AACF,6BAAqB,CAAC,IAAI,GAAG,EAE5B,CAAC"}
@@ -0,0 +1 @@
1
+ export { default } from './AnimatedEntrance';
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.default = void 0;
7
+ var AnimatedEntrance_1 = require("./AnimatedEntrance");
8
+ Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AnimatedEntrance_1).default; } });
9
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AnimatedEntrance/index.tsx"],"names":[],"mappings":";;;;;;AAAA,uDAA6C;AAApC,4HAAA,OAAO,OAAA"}