@chayns-components/core 5.0.0-beta.1174 → 5.0.0-beta.1176

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.
@@ -31,7 +31,7 @@ const StyledMotionDelayedDropdownContent = exports.StyledMotionDelayedDropdownCo
31
31
  pointer-events: none;
32
32
  z-index: -1;
33
33
  ` : (0, _styledComponents.css)`
34
- z-index: 4;
34
+ z-index: 5;
35
35
  `}
36
36
  `;
37
37
  //# sourceMappingURL=DelayedDropdownContent.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DelayedDropdownContent.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionDelayedDropdownContent","exports","styled","motion","div","$coordinates","y","x","$transform","$shouldHideContent","css"],"sources":["../../../../../src/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { DropdownCoordinates, DropdownTransform } from '../../../types/dropdown';\n\ntype StyledMotionDelayedDropdownContentProps = WithTheme<{\n $shouldHideContent: boolean;\n $coordinates: DropdownCoordinates;\n $transform: DropdownTransform;\n}>;\n\nexport const StyledMotionDelayedDropdownContent = styled(\n motion.div,\n)<StyledMotionDelayedDropdownContentProps>`\n position: absolute;\n\n height: fit-content;\n width: fit-content;\n\n top: ${({ $coordinates }) => $coordinates.y}px;\n left: ${({ $coordinates }) => $coordinates.x}px;\n\n transform: ${({ $transform }) => `translate(${$transform.x}, ${$transform.y})`};\n\n ${({ $shouldHideContent }) =>\n $shouldHideContent\n ? css`\n visibility: hidden;\n pointer-events: none;\n z-index: -1;\n `\n : css`\n z-index: 4;\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAE,wBAAAC,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAH,uBAAA,YAAAA,CAAAC,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAUzC,MAAMkB,kCAAkC,GAAAC,OAAA,CAAAD,kCAAA,GAAG,IAAAE,yBAAM,EACpDC,aAAM,CAACC,GACX,CAA0C;AAC1C;AACA;AACA;AACA;AACA;AACA,WAAW,CAAC;EAAEC;AAAa,CAAC,KAAKA,YAAY,CAACC,CAAC;AAC/C,YAAY,CAAC;EAAED;AAAa,CAAC,KAAKA,YAAY,CAACE,CAAC;AAChD;AACA,iBAAiB,CAAC;EAAEC;AAAW,CAAC,KAAK,aAAaA,UAAU,CAACD,CAAC,KAAKC,UAAU,CAACF,CAAC,GAAG;AAClF;AACA,MAAM,CAAC;EAAEG;AAAmB,CAAC,KACrBA,kBAAkB,GACZ,IAAAC,qBAAG;AACjB;AACA;AACA;AACA,eAAe,GACD,IAAAA,qBAAG;AACjB;AACA,eAAe;AACf,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"DelayedDropdownContent.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionDelayedDropdownContent","exports","styled","motion","div","$coordinates","y","x","$transform","$shouldHideContent","css"],"sources":["../../../../../src/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { DropdownCoordinates, DropdownTransform } from '../../../types/dropdown';\n\ntype StyledMotionDelayedDropdownContentProps = WithTheme<{\n $shouldHideContent: boolean;\n $coordinates: DropdownCoordinates;\n $transform: DropdownTransform;\n}>;\n\nexport const StyledMotionDelayedDropdownContent = styled(\n motion.div,\n)<StyledMotionDelayedDropdownContentProps>`\n position: absolute;\n\n height: fit-content;\n width: fit-content;\n\n top: ${({ $coordinates }) => $coordinates.y}px;\n left: ${({ $coordinates }) => $coordinates.x}px;\n\n transform: ${({ $transform }) => `translate(${$transform.x}, ${$transform.y})`};\n\n ${({ $shouldHideContent }) =>\n $shouldHideContent\n ? css`\n visibility: hidden;\n pointer-events: none;\n z-index: -1;\n `\n : css`\n z-index: 5;\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAE,wBAAAC,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAH,uBAAA,YAAAA,CAAAC,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAUzC,MAAMkB,kCAAkC,GAAAC,OAAA,CAAAD,kCAAA,GAAG,IAAAE,yBAAM,EACpDC,aAAM,CAACC,GACX,CAA0C;AAC1C;AACA;AACA;AACA;AACA;AACA,WAAW,CAAC;EAAEC;AAAa,CAAC,KAAKA,YAAY,CAACC,CAAC;AAC/C,YAAY,CAAC;EAAED;AAAa,CAAC,KAAKA,YAAY,CAACE,CAAC;AAChD;AACA,iBAAiB,CAAC;EAAEC;AAAW,CAAC,KAAK,aAAaA,UAAU,CAACD,CAAC,KAAKC,UAAU,CAACF,CAAC,GAAG;AAClF;AACA,MAAM,CAAC;EAAEG;AAAmB,CAAC,KACrBA,kBAAkB,GACZ,IAAAC,qBAAG;AACjB;AACA;AACA;AACA,eAAe,GACD,IAAAA,qBAAG;AACjB;AACA,eAAe;AACf,CAAC","ignoreList":[]}
@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.useContainer = exports.ContainerAnchor = void 0;
7
7
  var _react = require("react");
8
8
  let ContainerAnchor = exports.ContainerAnchor = /*#__PURE__*/function (ContainerAnchor) {
9
- ContainerAnchor["TAPP"] = ".tapp";
10
9
  ContainerAnchor["BODY"] = "body";
11
10
  ContainerAnchor["DIALOG"] = ".dialog-inner";
12
11
  ContainerAnchor["PAGE"] = ".page-provider";
12
+ ContainerAnchor["TAPP"] = ".tapp";
13
+ ContainerAnchor["WALLET"] = ".wallet";
13
14
  return ContainerAnchor;
14
15
  }({});
15
- const DEFAULT_CONTAINER_ANCHORS = [ContainerAnchor.DIALOG, ContainerAnchor.PAGE, ContainerAnchor.TAPP, ContainerAnchor.BODY];
16
+ const DEFAULT_CONTAINER_ANCHORS = [ContainerAnchor.BODY, ContainerAnchor.DIALOG, ContainerAnchor.PAGE, ContainerAnchor.TAPP, ContainerAnchor.WALLET];
16
17
  const useContainer = ({
17
18
  ref,
18
19
  anchorElement,
@@ -28,6 +29,11 @@ const useContainer = ({
28
29
  el = ref.current;
29
30
  }
30
31
  if (!container) {
32
+ const walletContainer = document.querySelector(ContainerAnchor.WALLET);
33
+ if (walletContainer && walletContainer.contains(el)) {
34
+ setNewContainer(walletContainer);
35
+ return;
36
+ }
31
37
  const element = el.closest(anchors === null || anchors === void 0 ? void 0 : anchors.join(', '));
32
38
  setNewContainer(element ?? undefined);
33
39
  }
@@ -1 +1 @@
1
- {"version":3,"file":"container.js","names":["_react","require","ContainerAnchor","exports","DEFAULT_CONTAINER_ANCHORS","DIALOG","PAGE","TAPP","BODY","useContainer","ref","anchorElement","container","anchors","newContainer","setNewContainer","useState","undefined","useEffect","el","current","element","closest","join","Element"],"sources":["../../../src/hooks/container.ts"],"sourcesContent":["import { MutableRefObject, useEffect, useState } from 'react';\n\nexport enum ContainerAnchor {\n TAPP = '.tapp',\n BODY = 'body',\n DIALOG = '.dialog-inner',\n PAGE = '.page-provider',\n}\n\nconst DEFAULT_CONTAINER_ANCHORS = [\n ContainerAnchor.DIALOG,\n ContainerAnchor.PAGE,\n ContainerAnchor.TAPP,\n ContainerAnchor.BODY,\n];\n\ninterface UseContainerProps {\n ref?: MutableRefObject<HTMLDivElement | HTMLLabelElement | HTMLSpanElement | null>;\n anchorElement?: Element;\n container?: Element | null;\n anchors?: ContainerAnchor[];\n}\n\nexport const useContainer = ({\n ref,\n anchorElement,\n container,\n anchors = DEFAULT_CONTAINER_ANCHORS,\n}: UseContainerProps) => {\n const [newContainer, setNewContainer] = useState<Element | undefined>(container ?? undefined);\n\n // Get the closest container if none is set\n useEffect(() => {\n let el = anchorElement as HTMLElement;\n\n if (ref?.current) {\n el = ref.current as HTMLElement;\n }\n\n if (!container) {\n const element = el.closest(anchors?.join(', '));\n\n setNewContainer(element ?? undefined);\n }\n }, [anchors, container, anchorElement, ref]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n return newContainer;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAA8D,IAElDC,eAAe,GAAAC,OAAA,CAAAD,eAAA,0BAAfA,eAAe;EAAfA,eAAe;EAAfA,eAAe;EAAfA,eAAe;EAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA;AAO3B,MAAME,yBAAyB,GAAG,CAC9BF,eAAe,CAACG,MAAM,EACtBH,eAAe,CAACI,IAAI,EACpBJ,eAAe,CAACK,IAAI,EACpBL,eAAe,CAACM,IAAI,CACvB;AASM,MAAMC,YAAY,GAAGA,CAAC;EACzBC,GAAG;EACHC,aAAa;EACbC,SAAS;EACTC,OAAO,GAAGT;AACK,CAAC,KAAK;EACrB,MAAM,CAACU,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAAC,eAAQ,EAAsBJ,SAAS,IAAIK,SAAS,CAAC;;EAE7F;EACA,IAAAC,gBAAS,EAAC,MAAM;IACZ,IAAIC,EAAE,GAAGR,aAA4B;IAErC,IAAID,GAAG,aAAHA,GAAG,eAAHA,GAAG,CAAEU,OAAO,EAAE;MACdD,EAAE,GAAGT,GAAG,CAACU,OAAsB;IACnC;IAEA,IAAI,CAACR,SAAS,EAAE;MACZ,MAAMS,OAAO,GAAGF,EAAE,CAACG,OAAO,CAACT,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEU,IAAI,CAAC,IAAI,CAAC,CAAC;MAE/CR,eAAe,CAACM,OAAO,IAAIJ,SAAS,CAAC;IACzC;EACJ,CAAC,EAAE,CAACJ,OAAO,EAAED,SAAS,EAAED,aAAa,EAAED,GAAG,CAAC,CAAC;EAE5C,IAAAQ,gBAAS,EAAC,MAAM;IACZ,IAAIN,SAAS,YAAYY,OAAO,EAAE;MAC9BT,eAAe,CAACH,SAAS,CAAC;IAC9B;EACJ,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,OAAOE,YAAY;AACvB,CAAC;AAACX,OAAA,CAAAM,YAAA,GAAAA,YAAA","ignoreList":[]}
1
+ {"version":3,"file":"container.js","names":["_react","require","ContainerAnchor","exports","DEFAULT_CONTAINER_ANCHORS","BODY","DIALOG","PAGE","TAPP","WALLET","useContainer","ref","anchorElement","container","anchors","newContainer","setNewContainer","useState","undefined","useEffect","el","current","walletContainer","document","querySelector","contains","element","closest","join","Element"],"sources":["../../../src/hooks/container.ts"],"sourcesContent":["import { MutableRefObject, useEffect, useState } from 'react';\n\nexport enum ContainerAnchor {\n BODY = 'body',\n DIALOG = '.dialog-inner',\n PAGE = '.page-provider',\n TAPP = '.tapp',\n WALLET = '.wallet',\n}\n\nconst DEFAULT_CONTAINER_ANCHORS = [\n ContainerAnchor.BODY,\n ContainerAnchor.DIALOG,\n ContainerAnchor.PAGE,\n ContainerAnchor.TAPP,\n ContainerAnchor.WALLET,\n];\n\ninterface UseContainerProps {\n ref?: MutableRefObject<HTMLDivElement | HTMLLabelElement | HTMLSpanElement | null>;\n anchorElement?: Element;\n container?: Element | null;\n anchors?: ContainerAnchor[];\n}\n\nexport const useContainer = ({\n ref,\n anchorElement,\n container,\n anchors = DEFAULT_CONTAINER_ANCHORS,\n}: UseContainerProps) => {\n const [newContainer, setNewContainer] = useState<Element | undefined>(container ?? undefined);\n\n // Get the closest container if none is set\n useEffect(() => {\n let el = anchorElement as HTMLElement;\n\n if (ref?.current) {\n el = ref.current as HTMLElement;\n }\n\n if (!container) {\n const walletContainer = document.querySelector(ContainerAnchor.WALLET);\n\n if (walletContainer && walletContainer.contains(el)) {\n setNewContainer(walletContainer);\n\n return;\n }\n\n const element = el.closest(anchors?.join(', '));\n\n setNewContainer(element ?? undefined);\n }\n }, [anchors, container, anchorElement, ref]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n return newContainer;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAA8D,IAElDC,eAAe,GAAAC,OAAA,CAAAD,eAAA,0BAAfA,eAAe;EAAfA,eAAe;EAAfA,eAAe;EAAfA,eAAe;EAAfA,eAAe;EAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA;AAQ3B,MAAME,yBAAyB,GAAG,CAC9BF,eAAe,CAACG,IAAI,EACpBH,eAAe,CAACI,MAAM,EACtBJ,eAAe,CAACK,IAAI,EACpBL,eAAe,CAACM,IAAI,EACpBN,eAAe,CAACO,MAAM,CACzB;AASM,MAAMC,YAAY,GAAGA,CAAC;EACzBC,GAAG;EACHC,aAAa;EACbC,SAAS;EACTC,OAAO,GAAGV;AACK,CAAC,KAAK;EACrB,MAAM,CAACW,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAAC,eAAQ,EAAsBJ,SAAS,IAAIK,SAAS,CAAC;;EAE7F;EACA,IAAAC,gBAAS,EAAC,MAAM;IACZ,IAAIC,EAAE,GAAGR,aAA4B;IAErC,IAAID,GAAG,aAAHA,GAAG,eAAHA,GAAG,CAAEU,OAAO,EAAE;MACdD,EAAE,GAAGT,GAAG,CAACU,OAAsB;IACnC;IAEA,IAAI,CAACR,SAAS,EAAE;MACZ,MAAMS,eAAe,GAAGC,QAAQ,CAACC,aAAa,CAACtB,eAAe,CAACO,MAAM,CAAC;MAEtE,IAAIa,eAAe,IAAIA,eAAe,CAACG,QAAQ,CAACL,EAAE,CAAC,EAAE;QACjDJ,eAAe,CAACM,eAAe,CAAC;QAEhC;MACJ;MAEA,MAAMI,OAAO,GAAGN,EAAE,CAACO,OAAO,CAACb,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEc,IAAI,CAAC,IAAI,CAAC,CAAC;MAE/CZ,eAAe,CAACU,OAAO,IAAIR,SAAS,CAAC;IACzC;EACJ,CAAC,EAAE,CAACJ,OAAO,EAAED,SAAS,EAAED,aAAa,EAAED,GAAG,CAAC,CAAC;EAE5C,IAAAQ,gBAAS,EAAC,MAAM;IACZ,IAAIN,SAAS,YAAYgB,OAAO,EAAE;MAC9Bb,eAAe,CAACH,SAAS,CAAC;IAC9B;EACJ,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,OAAOE,YAAY;AACvB,CAAC;AAACZ,OAAA,CAAAO,YAAA,GAAAA,YAAA","ignoreList":[]}
@@ -24,7 +24,7 @@ export const StyledMotionDelayedDropdownContent = styled(motion.div)`
24
24
  pointer-events: none;
25
25
  z-index: -1;
26
26
  ` : css`
27
- z-index: 4;
27
+ z-index: 5;
28
28
  `}
29
29
  `;
30
30
  //# sourceMappingURL=DelayedDropdownContent.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DelayedDropdownContent.styles.js","names":["motion","styled","css","StyledMotionDelayedDropdownContent","div","$coordinates","y","x","$transform","$shouldHideContent"],"sources":["../../../../../src/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { DropdownCoordinates, DropdownTransform } from '../../../types/dropdown';\n\ntype StyledMotionDelayedDropdownContentProps = WithTheme<{\n $shouldHideContent: boolean;\n $coordinates: DropdownCoordinates;\n $transform: DropdownTransform;\n}>;\n\nexport const StyledMotionDelayedDropdownContent = styled(\n motion.div,\n)<StyledMotionDelayedDropdownContentProps>`\n position: absolute;\n\n height: fit-content;\n width: fit-content;\n\n top: ${({ $coordinates }) => $coordinates.y}px;\n left: ${({ $coordinates }) => $coordinates.x}px;\n\n transform: ${({ $transform }) => `translate(${$transform.x}, ${$transform.y})`};\n\n ${({ $shouldHideContent }) =>\n $shouldHideContent\n ? css`\n visibility: hidden;\n pointer-events: none;\n z-index: -1;\n `\n : css`\n z-index: 4;\n `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAU/C,OAAO,MAAMC,kCAAkC,GAAGF,MAAM,CACpDD,MAAM,CAACI,GACX,CAA0C;AAC1C;AACA;AACA;AACA;AACA;AACA,WAAW,CAAC;EAAEC;AAAa,CAAC,KAAKA,YAAY,CAACC,CAAC;AAC/C,YAAY,CAAC;EAAED;AAAa,CAAC,KAAKA,YAAY,CAACE,CAAC;AAChD;AACA,iBAAiB,CAAC;EAAEC;AAAW,CAAC,KAAK,aAAaA,UAAU,CAACD,CAAC,KAAKC,UAAU,CAACF,CAAC,GAAG;AAClF;AACA,MAAM,CAAC;EAAEG;AAAmB,CAAC,KACrBA,kBAAkB,GACZP,GAAG;AACjB;AACA;AACA;AACA,eAAe,GACDA,GAAG;AACjB;AACA,eAAe;AACf,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"DelayedDropdownContent.styles.js","names":["motion","styled","css","StyledMotionDelayedDropdownContent","div","$coordinates","y","x","$transform","$shouldHideContent"],"sources":["../../../../../src/components/dropdown-body-wrapper/delayed-dropdown-content/DelayedDropdownContent.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { DropdownCoordinates, DropdownTransform } from '../../../types/dropdown';\n\ntype StyledMotionDelayedDropdownContentProps = WithTheme<{\n $shouldHideContent: boolean;\n $coordinates: DropdownCoordinates;\n $transform: DropdownTransform;\n}>;\n\nexport const StyledMotionDelayedDropdownContent = styled(\n motion.div,\n)<StyledMotionDelayedDropdownContentProps>`\n position: absolute;\n\n height: fit-content;\n width: fit-content;\n\n top: ${({ $coordinates }) => $coordinates.y}px;\n left: ${({ $coordinates }) => $coordinates.x}px;\n\n transform: ${({ $transform }) => `translate(${$transform.x}, ${$transform.y})`};\n\n ${({ $shouldHideContent }) =>\n $shouldHideContent\n ? css`\n visibility: hidden;\n pointer-events: none;\n z-index: -1;\n `\n : css`\n z-index: 5;\n `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAU/C,OAAO,MAAMC,kCAAkC,GAAGF,MAAM,CACpDD,MAAM,CAACI,GACX,CAA0C;AAC1C;AACA;AACA;AACA;AACA;AACA,WAAW,CAAC;EAAEC;AAAa,CAAC,KAAKA,YAAY,CAACC,CAAC;AAC/C,YAAY,CAAC;EAAED;AAAa,CAAC,KAAKA,YAAY,CAACE,CAAC;AAChD;AACA,iBAAiB,CAAC;EAAEC;AAAW,CAAC,KAAK,aAAaA,UAAU,CAACD,CAAC,KAAKC,UAAU,CAACF,CAAC,GAAG;AAClF;AACA,MAAM,CAAC;EAAEG;AAAmB,CAAC,KACrBA,kBAAkB,GACZP,GAAG;AACjB;AACA;AACA;AACA,eAAe,GACDA,GAAG;AACjB;AACA,eAAe;AACf,CAAC","ignoreList":[]}
@@ -1,12 +1,13 @@
1
1
  import { useEffect, useState } from 'react';
2
2
  export let ContainerAnchor = /*#__PURE__*/function (ContainerAnchor) {
3
- ContainerAnchor["TAPP"] = ".tapp";
4
3
  ContainerAnchor["BODY"] = "body";
5
4
  ContainerAnchor["DIALOG"] = ".dialog-inner";
6
5
  ContainerAnchor["PAGE"] = ".page-provider";
6
+ ContainerAnchor["TAPP"] = ".tapp";
7
+ ContainerAnchor["WALLET"] = ".wallet";
7
8
  return ContainerAnchor;
8
9
  }({});
9
- const DEFAULT_CONTAINER_ANCHORS = [ContainerAnchor.DIALOG, ContainerAnchor.PAGE, ContainerAnchor.TAPP, ContainerAnchor.BODY];
10
+ const DEFAULT_CONTAINER_ANCHORS = [ContainerAnchor.BODY, ContainerAnchor.DIALOG, ContainerAnchor.PAGE, ContainerAnchor.TAPP, ContainerAnchor.WALLET];
10
11
  export const useContainer = ({
11
12
  ref,
12
13
  anchorElement,
@@ -22,6 +23,11 @@ export const useContainer = ({
22
23
  el = ref.current;
23
24
  }
24
25
  if (!container) {
26
+ const walletContainer = document.querySelector(ContainerAnchor.WALLET);
27
+ if (walletContainer && walletContainer.contains(el)) {
28
+ setNewContainer(walletContainer);
29
+ return;
30
+ }
25
31
  const element = el.closest(anchors?.join(', '));
26
32
  setNewContainer(element ?? undefined);
27
33
  }
@@ -1 +1 @@
1
- {"version":3,"file":"container.js","names":["useEffect","useState","ContainerAnchor","DEFAULT_CONTAINER_ANCHORS","DIALOG","PAGE","TAPP","BODY","useContainer","ref","anchorElement","container","anchors","newContainer","setNewContainer","undefined","el","current","element","closest","join","Element"],"sources":["../../../src/hooks/container.ts"],"sourcesContent":["import { MutableRefObject, useEffect, useState } from 'react';\n\nexport enum ContainerAnchor {\n TAPP = '.tapp',\n BODY = 'body',\n DIALOG = '.dialog-inner',\n PAGE = '.page-provider',\n}\n\nconst DEFAULT_CONTAINER_ANCHORS = [\n ContainerAnchor.DIALOG,\n ContainerAnchor.PAGE,\n ContainerAnchor.TAPP,\n ContainerAnchor.BODY,\n];\n\ninterface UseContainerProps {\n ref?: MutableRefObject<HTMLDivElement | HTMLLabelElement | HTMLSpanElement | null>;\n anchorElement?: Element;\n container?: Element | null;\n anchors?: ContainerAnchor[];\n}\n\nexport const useContainer = ({\n ref,\n anchorElement,\n container,\n anchors = DEFAULT_CONTAINER_ANCHORS,\n}: UseContainerProps) => {\n const [newContainer, setNewContainer] = useState<Element | undefined>(container ?? undefined);\n\n // Get the closest container if none is set\n useEffect(() => {\n let el = anchorElement as HTMLElement;\n\n if (ref?.current) {\n el = ref.current as HTMLElement;\n }\n\n if (!container) {\n const element = el.closest(anchors?.join(', '));\n\n setNewContainer(element ?? undefined);\n }\n }, [anchors, container, anchorElement, ref]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n return newContainer;\n};\n"],"mappings":"AAAA,SAA2BA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAE7D,WAAYC,eAAe,0BAAfA,eAAe;EAAfA,eAAe;EAAfA,eAAe;EAAfA,eAAe;EAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA;AAO3B,MAAMC,yBAAyB,GAAG,CAC9BD,eAAe,CAACE,MAAM,EACtBF,eAAe,CAACG,IAAI,EACpBH,eAAe,CAACI,IAAI,EACpBJ,eAAe,CAACK,IAAI,CACvB;AASD,OAAO,MAAMC,YAAY,GAAGA,CAAC;EACzBC,GAAG;EACHC,aAAa;EACbC,SAAS;EACTC,OAAO,GAAGT;AACK,CAAC,KAAK;EACrB,MAAM,CAACU,YAAY,EAAEC,eAAe,CAAC,GAAGb,QAAQ,CAAsBU,SAAS,IAAII,SAAS,CAAC;;EAE7F;EACAf,SAAS,CAAC,MAAM;IACZ,IAAIgB,EAAE,GAAGN,aAA4B;IAErC,IAAID,GAAG,EAAEQ,OAAO,EAAE;MACdD,EAAE,GAAGP,GAAG,CAACQ,OAAsB;IACnC;IAEA,IAAI,CAACN,SAAS,EAAE;MACZ,MAAMO,OAAO,GAAGF,EAAE,CAACG,OAAO,CAACP,OAAO,EAAEQ,IAAI,CAAC,IAAI,CAAC,CAAC;MAE/CN,eAAe,CAACI,OAAO,IAAIH,SAAS,CAAC;IACzC;EACJ,CAAC,EAAE,CAACH,OAAO,EAAED,SAAS,EAAED,aAAa,EAAED,GAAG,CAAC,CAAC;EAE5CT,SAAS,CAAC,MAAM;IACZ,IAAIW,SAAS,YAAYU,OAAO,EAAE;MAC9BP,eAAe,CAACH,SAAS,CAAC;IAC9B;EACJ,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,OAAOE,YAAY;AACvB,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"container.js","names":["useEffect","useState","ContainerAnchor","DEFAULT_CONTAINER_ANCHORS","BODY","DIALOG","PAGE","TAPP","WALLET","useContainer","ref","anchorElement","container","anchors","newContainer","setNewContainer","undefined","el","current","walletContainer","document","querySelector","contains","element","closest","join","Element"],"sources":["../../../src/hooks/container.ts"],"sourcesContent":["import { MutableRefObject, useEffect, useState } from 'react';\n\nexport enum ContainerAnchor {\n BODY = 'body',\n DIALOG = '.dialog-inner',\n PAGE = '.page-provider',\n TAPP = '.tapp',\n WALLET = '.wallet',\n}\n\nconst DEFAULT_CONTAINER_ANCHORS = [\n ContainerAnchor.BODY,\n ContainerAnchor.DIALOG,\n ContainerAnchor.PAGE,\n ContainerAnchor.TAPP,\n ContainerAnchor.WALLET,\n];\n\ninterface UseContainerProps {\n ref?: MutableRefObject<HTMLDivElement | HTMLLabelElement | HTMLSpanElement | null>;\n anchorElement?: Element;\n container?: Element | null;\n anchors?: ContainerAnchor[];\n}\n\nexport const useContainer = ({\n ref,\n anchorElement,\n container,\n anchors = DEFAULT_CONTAINER_ANCHORS,\n}: UseContainerProps) => {\n const [newContainer, setNewContainer] = useState<Element | undefined>(container ?? undefined);\n\n // Get the closest container if none is set\n useEffect(() => {\n let el = anchorElement as HTMLElement;\n\n if (ref?.current) {\n el = ref.current as HTMLElement;\n }\n\n if (!container) {\n const walletContainer = document.querySelector(ContainerAnchor.WALLET);\n\n if (walletContainer && walletContainer.contains(el)) {\n setNewContainer(walletContainer);\n\n return;\n }\n\n const element = el.closest(anchors?.join(', '));\n\n setNewContainer(element ?? undefined);\n }\n }, [anchors, container, anchorElement, ref]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n return newContainer;\n};\n"],"mappings":"AAAA,SAA2BA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAE7D,WAAYC,eAAe,0BAAfA,eAAe;EAAfA,eAAe;EAAfA,eAAe;EAAfA,eAAe;EAAfA,eAAe;EAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA;AAQ3B,MAAMC,yBAAyB,GAAG,CAC9BD,eAAe,CAACE,IAAI,EACpBF,eAAe,CAACG,MAAM,EACtBH,eAAe,CAACI,IAAI,EACpBJ,eAAe,CAACK,IAAI,EACpBL,eAAe,CAACM,MAAM,CACzB;AASD,OAAO,MAAMC,YAAY,GAAGA,CAAC;EACzBC,GAAG;EACHC,aAAa;EACbC,SAAS;EACTC,OAAO,GAAGV;AACK,CAAC,KAAK;EACrB,MAAM,CAACW,YAAY,EAAEC,eAAe,CAAC,GAAGd,QAAQ,CAAsBW,SAAS,IAAII,SAAS,CAAC;;EAE7F;EACAhB,SAAS,CAAC,MAAM;IACZ,IAAIiB,EAAE,GAAGN,aAA4B;IAErC,IAAID,GAAG,EAAEQ,OAAO,EAAE;MACdD,EAAE,GAAGP,GAAG,CAACQ,OAAsB;IACnC;IAEA,IAAI,CAACN,SAAS,EAAE;MACZ,MAAMO,eAAe,GAAGC,QAAQ,CAACC,aAAa,CAACnB,eAAe,CAACM,MAAM,CAAC;MAEtE,IAAIW,eAAe,IAAIA,eAAe,CAACG,QAAQ,CAACL,EAAE,CAAC,EAAE;QACjDF,eAAe,CAACI,eAAe,CAAC;QAEhC;MACJ;MAEA,MAAMI,OAAO,GAAGN,EAAE,CAACO,OAAO,CAACX,OAAO,EAAEY,IAAI,CAAC,IAAI,CAAC,CAAC;MAE/CV,eAAe,CAACQ,OAAO,IAAIP,SAAS,CAAC;IACzC;EACJ,CAAC,EAAE,CAACH,OAAO,EAAED,SAAS,EAAED,aAAa,EAAED,GAAG,CAAC,CAAC;EAE5CV,SAAS,CAAC,MAAM;IACZ,IAAIY,SAAS,YAAYc,OAAO,EAAE;MAC9BX,eAAe,CAACH,SAAS,CAAC;IAC9B;EACJ,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,OAAOE,YAAY;AACvB,CAAC","ignoreList":[]}
@@ -1,9 +1,10 @@
1
1
  import { MutableRefObject } from 'react';
2
2
  export declare enum ContainerAnchor {
3
- TAPP = ".tapp",
4
3
  BODY = "body",
5
4
  DIALOG = ".dialog-inner",
6
- PAGE = ".page-provider"
5
+ PAGE = ".page-provider",
6
+ TAPP = ".tapp",
7
+ WALLET = ".wallet"
7
8
  }
8
9
  interface UseContainerProps {
9
10
  ref?: MutableRefObject<HTMLDivElement | HTMLLabelElement | HTMLSpanElement | null>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.0-beta.1174",
3
+ "version": "5.0.0-beta.1176",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -85,5 +85,5 @@
85
85
  "publishConfig": {
86
86
  "access": "public"
87
87
  },
88
- "gitHead": "77393ea2aca7dbafa11c646c3e7513616eef8442"
88
+ "gitHead": "f8c45cefb62bb6e2c6a6aa8b53d6058071a3e815"
89
89
  }