@chayns-components/core 5.0.0-beta.21 → 5.0.0-beta.25

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.
@@ -15,6 +15,10 @@ declare type AccordionProps = {
15
15
  * This can be used to automatically expand the Accordion during the first render.
16
16
  */
17
17
  isDefaultOpen?: boolean;
18
+ /**
19
+ * This will disable the Accordion so that it cannot be opened and will gray out the title.
20
+ */
21
+ isDisabled?: boolean;
18
22
  /**
19
23
  * This can be used so that the Accordion cannot be opened or closed.
20
24
  * In addition, in this case the icon is exchanged to mark the Accordions.
@@ -29,6 +33,14 @@ declare type AccordionProps = {
29
33
  * the head and the padding of the content.
30
34
  */
31
35
  isWrapped?: boolean;
36
+ /**
37
+ * Function that is executed when the accordion will be closed.
38
+ */
39
+ onClose?: VoidFunction;
40
+ /**
41
+ * Function that is executed when the accordion will be opened.
42
+ */
43
+ onOpen?: VoidFunction;
32
44
  /**
33
45
  * Function that is executed when the text of the search in the accordion
34
46
  * head changes. When this function is given, the search field is displayed
@@ -51,12 +51,16 @@ var Accordion = function Accordion(_ref) {
51
51
  icon = _ref.icon,
52
52
  _ref$isDefaultOpen = _ref.isDefaultOpen,
53
53
  isDefaultOpen = _ref$isDefaultOpen === void 0 ? false : _ref$isDefaultOpen,
54
+ _ref$isDisabled = _ref.isDisabled,
55
+ isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
54
56
  _ref$isFixed = _ref.isFixed,
55
57
  isFixed = _ref$isFixed === void 0 ? false : _ref$isFixed,
56
58
  _ref$isTitleGreyed = _ref.isTitleGreyed,
57
59
  isTitleGreyed = _ref$isTitleGreyed === void 0 ? false : _ref$isTitleGreyed,
58
60
  _ref$isWrapped = _ref.isWrapped,
59
61
  isWrapped = _ref$isWrapped === void 0 ? false : _ref$isWrapped,
62
+ onClose = _ref.onClose,
63
+ onOpen = _ref.onOpen,
60
64
  onSearchChange = _ref.onSearchChange,
61
65
  rightElement = _ref.rightElement,
62
66
  searchIcon = _ref.searchIcon,
@@ -74,9 +78,14 @@ var Accordion = function Accordion(_ref) {
74
78
  setIsAccordionOpen = _useState2[1];
75
79
 
76
80
  var uuid = (0, _uuid.useUuid)();
81
+ var isInitialRenderRef = (0, _react.useRef)(true);
77
82
  var isInGroup = typeof updateOpenAccordionUuid === 'function';
78
83
  var isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;
79
84
  var handleHeadClick = (0, _react.useCallback)(function () {
85
+ if (isDisabled) {
86
+ return;
87
+ }
88
+
80
89
  if (typeof updateOpenAccordionUuid === 'function') {
81
90
  updateOpenAccordionUuid(uuid);
82
91
  }
@@ -84,7 +93,18 @@ var Accordion = function Accordion(_ref) {
84
93
  setIsAccordionOpen(function (currentIsAccordionOpen) {
85
94
  return !currentIsAccordionOpen;
86
95
  });
87
- }, [updateOpenAccordionUuid, uuid]);
96
+ }, [isDisabled, updateOpenAccordionUuid, uuid]);
97
+ (0, _react.useEffect)(function () {
98
+ if (isInitialRenderRef.current) {
99
+ isInitialRenderRef.current = false;
100
+ } else if (isOpen) {
101
+ if (typeof onOpen === 'function') {
102
+ onOpen();
103
+ }
104
+ } else if (typeof onClose === 'function') {
105
+ onClose();
106
+ }
107
+ }, [isOpen, onClose, onOpen]);
88
108
  (0, _react.useEffect)(function () {
89
109
  if (isDefaultOpen && typeof updateOpenAccordionUuid === 'function') {
90
110
  updateOpenAccordionUuid(uuid, {
@@ -108,7 +128,7 @@ var Accordion = function Accordion(_ref) {
108
128
  icon: icon,
109
129
  isOpen: isOpen,
110
130
  isFixed: isFixed,
111
- isTitleGreyed: isTitleGreyed,
131
+ isTitleGreyed: isTitleGreyed || isDisabled,
112
132
  isWrapped: isWrapped,
113
133
  onClick: handleHeadClick,
114
134
  onSearchChange: onSearchChange,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/accordion/Accordion.tsx"],"names":["AccordionContext","React","createContext","isWrapped","displayName","Accordion","children","icon","isDefaultOpen","isFixed","isTitleGreyed","onSearchChange","rightElement","searchIcon","searchPlaceholder","title","titleElement","AccordionGroupContext","openAccordionUuid","updateOpenAccordionUuid","isAccordionOpen","setIsAccordionOpen","uuid","isInGroup","isOpen","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","type"],"mappings":";;;;;;;;;AAAA;;AACA;;AASA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAEO,IAAMA,gBAAgB,gBAAGC,eAAMC,aAAN,CAAoB;AAAEC,EAAAA,SAAS,EAAE;AAAb,CAApB,CAAzB;;;AAEPH,gBAAgB,CAACI,WAAjB,GAA+B,kBAA/B;;AAyDA,IAAMC,SAA6B,GAAG,SAAhCA,SAAgC,OAahC;AAAA,MAZFC,QAYE,QAZFA,QAYE;AAAA,MAXFC,IAWE,QAXFA,IAWE;AAAA,gCAVFC,aAUE;AAAA,MAVFA,aAUE,mCAVc,KAUd;AAAA,0BATFC,OASE;AAAA,MATFA,OASE,6BATQ,KASR;AAAA,gCARFC,aAQE;AAAA,MARFA,aAQE,mCARc,KAQd;AAAA,4BAPFP,SAOE;AAAA,MAPFA,SAOE,+BAPU,KAOV;AAAA,MANFQ,cAME,QANFA,cAME;AAAA,MALFC,YAKE,QALFA,YAKE;AAAA,MAJFC,UAIE,QAJFA,UAIE;AAAA,MAHFC,iBAGE,QAHFA,iBAGE;AAAA,MAFFC,KAEE,QAFFA,KAEE;AAAA,MADFC,YACE,QADFA,YACE;;AACF,oBAAuD,uBAAWC,qCAAX,CAAvD;AAAA,MAAQC,iBAAR,eAAQA,iBAAR;AAAA,MAA2BC,uBAA3B,eAA2BA,uBAA3B;;AAEA,kBAA8C,qBAAkBX,aAAlB,CAA9C;AAAA;AAAA,MAAOY,eAAP;AAAA,MAAwBC,kBAAxB;;AAEA,MAAMC,IAAI,GAAG,oBAAb;AAEA,MAAMC,SAAS,GAAG,OAAOJ,uBAAP,KAAmC,UAArD;AAEA,MAAMK,MAAM,GAAGD,SAAS,GAAGL,iBAAiB,KAAKI,IAAzB,GAAgCF,eAAxD;AAEA,MAAMK,eAAe,GAAG,wBAAY,YAAM;AACtC,QAAI,OAAON,uBAAP,KAAmC,UAAvC,EAAmD;AAC/CA,MAAAA,uBAAuB,CAACG,IAAD,CAAvB;AACH;;AAEDD,IAAAA,kBAAkB,CAAC,UAACK,sBAAD;AAAA,aAA4B,CAACA,sBAA7B;AAAA,KAAD,CAAlB;AACH,GANuB,EAMrB,CAACP,uBAAD,EAA0BG,IAA1B,CANqB,CAAxB;AAQA,wBAAU,YAAM;AACZ,QAAId,aAAa,IAAI,OAAOW,uBAAP,KAAmC,UAAxD,EAAoE;AAChEA,MAAAA,uBAAuB,CAACG,IAAD,EAAO;AAAEK,QAAAA,cAAc,EAAE;AAAlB,OAAP,CAAvB;AACH;AACJ,GAJD,EAIG,CAACnB,aAAD,EAAgBW,uBAAhB,EAAyCG,IAAzC,CAJH;AAMA,sBACI,6BAAC,0BAAD;AAAiB,IAAA,SAAS,EAAC,uBAA3B;AAAmD,IAAA,MAAM,EAAEE,MAA3D;AAAmE,IAAA,SAAS,EAAErB;AAA9E,kBACI,6BAAC,gBAAD,CAAkB,QAAlB;AAA2B,IAAA,KAAK,EAAE;AAAEA,MAAAA,SAAS,EAATA;AAAF;AAAlC,kBACI,6BAAC,0BAAD;AAAc,IAAA,UAAU,EAAE;AAAEyB,MAAAA,IAAI,EAAE;AAAR;AAA1B,kBACI,6BAAC,sBAAD;AACI,IAAA,IAAI,EAAErB,IADV;AAEI,IAAA,MAAM,EAAEiB,MAFZ;AAGI,IAAA,OAAO,EAAEf,OAHb;AAII,IAAA,aAAa,EAAEC,aAJnB;AAKI,IAAA,SAAS,EAAEP,SALf;AAMI,IAAA,OAAO,EAAEsB,eANb;AAOI,IAAA,cAAc,EAAEd,cAPpB;AAQI,IAAA,YAAY,EAAEC,YARlB;AASI,IAAA,UAAU,EAAEC,UAThB;AAUI,IAAA,iBAAiB,EAAEC,iBAVvB;AAWI,IAAA,KAAK,EAAEC,KAXX;AAYI,IAAA,YAAY,EAAEC;AAZlB,IADJ,eAeI,6BAAC,6BAAD;AAAiB,IAAA,OAAO,EAAE;AAA1B,KACKQ,MAAM,iBAAI,6BAAC,sBAAD,QAAgBlB,QAAhB,CADf,CAfJ,CADJ,CADJ,CADJ;AAyBH,CA/DD;;AAiEAD,SAAS,CAACD,WAAV,GAAwB,WAAxB;eAEeC,S","sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n FC,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { StyledAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nAccordionContext.displayName = 'AccordionContext';\n\ntype AccordionProps = {\n /**\n * The content of the accordion body\n */\n children: ReactNode;\n /**\n * The icon that is displayed in front of the title\n */\n icon?: string;\n /**\n * This can be used to automatically expand the Accordion during the first render.\n */\n isDefaultOpen?: boolean;\n /**\n * This can be used so that the Accordion cannot be opened or closed.\n * In addition, in this case the icon is exchanged to mark the Accordions.\n */\n isFixed?: boolean;\n /**\n * This will gray out the title of the Accordion to indicate hidden content, for example.\n */\n isTitleGreyed?: boolean;\n /**\n * This value must be set for nested Accordions. This adjusts the style of\n * the head and the padding of the content.\n */\n isWrapped?: boolean;\n /**\n * Function that is executed when the text of the search in the accordion\n * head changes. When this function is given, the search field is displayed\n * in the Accordion Head.\n */\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Content to be displayed on the right side in the head of the Accordion\n */\n rightElement?: ReactNode;\n /**\n * Icon to be displayed on the right side in the search input\n */\n searchIcon?: string[];\n /**\n * The placeholder to be used for the search\n */\n searchPlaceholder?: string;\n /**\n * Title of the Accordion displayed in the head\n */\n title: string;\n /**\n * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: ReactNode;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n children,\n icon,\n isDefaultOpen = false,\n isFixed = false,\n isTitleGreyed = false,\n isWrapped = false,\n onSearchChange,\n rightElement,\n searchIcon,\n searchPlaceholder,\n title,\n titleElement,\n}) => {\n const { openAccordionUuid, updateOpenAccordionUuid } = useContext(AccordionGroupContext);\n\n const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen);\n\n const uuid = useUuid();\n\n const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n const handleHeadClick = useCallback(() => {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }, [updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isDefaultOpen && typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n }\n }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n return (\n <StyledAccordion className=\"beta-chayns-accordion\" isOpen={isOpen} isWrapped={isWrapped}>\n <AccordionContext.Provider value={{ isWrapped }}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AccordionHead\n icon={icon}\n isOpen={isOpen}\n isFixed={isFixed}\n isTitleGreyed={isTitleGreyed}\n isWrapped={isWrapped}\n onClick={handleHeadClick}\n onSearchChange={onSearchChange}\n rightElement={rightElement}\n searchIcon={searchIcon}\n searchPlaceholder={searchPlaceholder}\n title={title}\n titleElement={titleElement}\n />\n <AnimatePresence initial={false}>\n {isOpen && <AccordionBody>{children}</AccordionBody>}\n </AnimatePresence>\n </MotionConfig>\n </AccordionContext.Provider>\n </StyledAccordion>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"file":"Accordion.js"}
1
+ {"version":3,"sources":["../../../src/components/accordion/Accordion.tsx"],"names":["AccordionContext","React","createContext","isWrapped","displayName","Accordion","children","icon","isDefaultOpen","isDisabled","isFixed","isTitleGreyed","onClose","onOpen","onSearchChange","rightElement","searchIcon","searchPlaceholder","title","titleElement","AccordionGroupContext","openAccordionUuid","updateOpenAccordionUuid","isAccordionOpen","setIsAccordionOpen","uuid","isInitialRenderRef","isInGroup","isOpen","handleHeadClick","currentIsAccordionOpen","current","shouldOnlyOpen","type"],"mappings":"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","sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n FC,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { StyledAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nAccordionContext.displayName = 'AccordionContext';\n\ntype AccordionProps = {\n /**\n * The content of the accordion body\n */\n children: ReactNode;\n /**\n * The icon that is displayed in front of the title\n */\n icon?: string;\n /**\n * This can be used to automatically expand the Accordion during the first render.\n */\n isDefaultOpen?: boolean;\n /**\n * This will disable the Accordion so that it cannot be opened and will gray out the title.\n */\n isDisabled?: boolean;\n /**\n * This can be used so that the Accordion cannot be opened or closed.\n * In addition, in this case the icon is exchanged to mark the Accordions.\n */\n isFixed?: boolean;\n /**\n * This will gray out the title of the Accordion to indicate hidden content, for example.\n */\n isTitleGreyed?: boolean;\n /**\n * This value must be set for nested Accordions. This adjusts the style of\n * the head and the padding of the content.\n */\n isWrapped?: boolean;\n /**\n * Function that is executed when the accordion will be closed.\n */\n onClose?: VoidFunction;\n /**\n * Function that is executed when the accordion will be opened.\n */\n onOpen?: VoidFunction;\n /**\n * Function that is executed when the text of the search in the accordion\n * head changes. When this function is given, the search field is displayed\n * in the Accordion Head.\n */\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Content to be displayed on the right side in the head of the Accordion\n */\n rightElement?: ReactNode;\n /**\n * Icon to be displayed on the right side in the search input\n */\n searchIcon?: string[];\n /**\n * The placeholder to be used for the search\n */\n searchPlaceholder?: string;\n /**\n * Title of the Accordion displayed in the head\n */\n title: string;\n /**\n * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: ReactNode;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n children,\n icon,\n isDefaultOpen = false,\n isDisabled = false,\n isFixed = false,\n isTitleGreyed = false,\n isWrapped = false,\n onClose,\n onOpen,\n onSearchChange,\n rightElement,\n searchIcon,\n searchPlaceholder,\n title,\n titleElement,\n}) => {\n const { openAccordionUuid, updateOpenAccordionUuid } = useContext(AccordionGroupContext);\n\n const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen);\n\n const uuid = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n const handleHeadClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isOpen) {\n if (typeof onOpen === 'function') {\n onOpen();\n }\n } else if (typeof onClose === 'function') {\n onClose();\n }\n }, [isOpen, onClose, onOpen]);\n\n useEffect(() => {\n if (isDefaultOpen && typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n }\n }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n return (\n <StyledAccordion className=\"beta-chayns-accordion\" isOpen={isOpen} isWrapped={isWrapped}>\n <AccordionContext.Provider value={{ isWrapped }}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AccordionHead\n icon={icon}\n isOpen={isOpen}\n isFixed={isFixed}\n isTitleGreyed={isTitleGreyed || isDisabled}\n isWrapped={isWrapped}\n onClick={handleHeadClick}\n onSearchChange={onSearchChange}\n rightElement={rightElement}\n searchIcon={searchIcon}\n searchPlaceholder={searchPlaceholder}\n title={title}\n titleElement={titleElement}\n />\n <AnimatePresence initial={false}>\n {isOpen && <AccordionBody>{children}</AccordionBody>}\n </AnimatePresence>\n </MotionConfig>\n </AccordionContext.Provider>\n </StyledAccordion>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"file":"Accordion.js"}
@@ -13,6 +13,14 @@ declare type AccordionGroupProps = {
13
13
  * automatically closed when an `Accordion` of the group is opened.
14
14
  */
15
15
  children: ReactNode;
16
+ /**
17
+ * Function that is executed when all accordions in group are closed.
18
+ */
19
+ onClose?: VoidFunction;
20
+ /**
21
+ * Function that is executed when any accordion in group will be opened.
22
+ */
23
+ onOpen?: VoidFunction;
16
24
  };
17
25
  declare const AccordionGroup: FC<AccordionGroupProps>;
18
26
  export default AccordionGroup;
@@ -34,13 +34,16 @@ exports.AccordionGroupContext = AccordionGroupContext;
34
34
  AccordionGroupContext.displayName = 'AccordionGroupContext';
35
35
 
36
36
  var AccordionGroup = function AccordionGroup(_ref) {
37
- var children = _ref.children;
37
+ var children = _ref.children,
38
+ onClose = _ref.onClose,
39
+ onOpen = _ref.onOpen;
38
40
 
39
41
  var _useState = (0, _react.useState)(undefined),
40
42
  _useState2 = _slicedToArray(_useState, 2),
41
43
  openAccordionUuid = _useState2[0],
42
44
  setOpenAccordionUuid = _useState2[1];
43
45
 
46
+ var isInitialRenderRef = (0, _react.useRef)(true);
44
47
  var updateOpenAccordionUuid = (0, _react.useCallback)(function (uuid) {
45
48
  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
46
49
  shouldOnlyOpen = _ref2.shouldOnlyOpen;
@@ -53,6 +56,17 @@ var AccordionGroup = function AccordionGroup(_ref) {
53
56
  return uuid;
54
57
  });
55
58
  }, [setOpenAccordionUuid]);
59
+ (0, _react.useEffect)(function () {
60
+ if (isInitialRenderRef.current) {
61
+ isInitialRenderRef.current = false;
62
+ } else if (typeof openAccordionUuid === 'string') {
63
+ if (typeof onOpen === 'function') {
64
+ onOpen();
65
+ }
66
+ } else if (typeof onClose === 'function') {
67
+ onClose();
68
+ }
69
+ }, [onClose, onOpen, openAccordionUuid]);
56
70
  var providerValue = (0, _react.useMemo)(function () {
57
71
  return {
58
72
  openAccordionUuid: openAccordionUuid,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/accordion/accordion-group/AccordionGroup.tsx"],"names":["AccordionGroupContext","React","createContext","openAccordionUuid","undefined","updateOpenAccordionUuid","displayName","AccordionGroup","children","setOpenAccordionUuid","uuid","shouldOnlyOpen","currentOpenAccordionUuid","providerValue"],"mappings":";;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;AASO,IAAMA,qBAAqB,gBAAGC,eAAMC,aAAN,CAA4C;AAC7EC,EAAAA,iBAAiB,EAAEC,SAD0D;AAE7EC,EAAAA,uBAAuB,EAAED;AAFoD,CAA5C,CAA9B;;;AAKPJ,qBAAqB,CAACM,WAAtB,GAAoC,uBAApC;;AAUA,IAAMC,cAAuC,GAAG,SAA1CA,cAA0C,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;;AAC9D,kBACI,qBAAsDJ,SAAtD,CADJ;AAAA;AAAA,MAAOD,iBAAP;AAAA,MAA0BM,oBAA1B;;AAGA,MAAMJ,uBAAuB,GAAG,wBAC5B,UAACK,IAAD,EAAmC;AAAA,oFAAP,EAAO;AAAA,QAA1BC,cAA0B,SAA1BA,cAA0B;;AAC/BF,IAAAA,oBAAoB,CAAC,UAACG,wBAAD,EAA8B;AAC/C,UAAIA,wBAAwB,KAAKF,IAA7B,IAAqCC,cAAc,KAAK,IAA5D,EAAkE;AAC9D,eAAOP,SAAP;AACH;;AAED,aAAOM,IAAP;AACH,KANmB,CAApB;AAOH,GAT2B,EAU5B,CAACD,oBAAD,CAV4B,CAAhC;AAaA,MAAMI,aAAa,GAAG,oBAClB;AAAA,WAAO;AACHV,MAAAA,iBAAiB,EAAjBA,iBADG;AAEHE,MAAAA,uBAAuB,EAAvBA;AAFG,KAAP;AAAA,GADkB,EAKlB,CAACF,iBAAD,EAAoBE,uBAApB,CALkB,CAAtB;AAQA,sBACI,6BAAC,qBAAD,CAAuB,QAAvB;AAAgC,IAAA,KAAK,EAAEQ;AAAvC,KACKL,QADL,CADJ;AAKH,CA9BD;;AAgCAD,cAAc,CAACD,WAAf,GAA6B,gBAA7B;eAEeC,c","sourcesContent":["import React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\n\ntype IUpdateOpenAccordionUuid = (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n\ninterface IAccordionGroupContext {\n openAccordionUuid: string | undefined;\n updateOpenAccordionUuid?: IUpdateOpenAccordionUuid;\n}\n\nexport const AccordionGroupContext = React.createContext<IAccordionGroupContext>({\n openAccordionUuid: undefined,\n updateOpenAccordionUuid: undefined,\n});\n\nAccordionGroupContext.displayName = 'AccordionGroupContext';\n\ntype AccordionGroupProps = {\n /**\n * The Accordions that should be grouped. Accordions with the same group are\n * automatically closed when an `Accordion` of the group is opened.\n */\n children: ReactNode;\n};\n\nconst AccordionGroup: FC<AccordionGroupProps> = ({ children }) => {\n const [openAccordionUuid, setOpenAccordionUuid] =\n useState<IAccordionGroupContext['openAccordionUuid']>(undefined);\n\n const updateOpenAccordionUuid = useCallback<IUpdateOpenAccordionUuid>(\n (uuid, { shouldOnlyOpen } = {}) => {\n setOpenAccordionUuid((currentOpenAccordionUuid) => {\n if (currentOpenAccordionUuid === uuid && shouldOnlyOpen !== true) {\n return undefined;\n }\n\n return uuid;\n });\n },\n [setOpenAccordionUuid]\n );\n\n const providerValue = useMemo<IAccordionGroupContext>(\n () => ({\n openAccordionUuid,\n updateOpenAccordionUuid,\n }),\n [openAccordionUuid, updateOpenAccordionUuid]\n );\n\n return (\n <AccordionGroupContext.Provider value={providerValue}>\n {children}\n </AccordionGroupContext.Provider>\n );\n};\n\nAccordionGroup.displayName = 'AccordionGroup';\n\nexport default AccordionGroup;\n"],"file":"AccordionGroup.js"}
1
+ {"version":3,"sources":["../../../../src/components/accordion/accordion-group/AccordionGroup.tsx"],"names":["AccordionGroupContext","React","createContext","openAccordionUuid","undefined","updateOpenAccordionUuid","displayName","AccordionGroup","children","onClose","onOpen","setOpenAccordionUuid","isInitialRenderRef","uuid","shouldOnlyOpen","currentOpenAccordionUuid","current","providerValue"],"mappings":";;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;AASO,IAAMA,qBAAqB,gBAAGC,eAAMC,aAAN,CAA4C;AAC7EC,EAAAA,iBAAiB,EAAEC,SAD0D;AAE7EC,EAAAA,uBAAuB,EAAED;AAFoD,CAA5C,CAA9B;;;AAKPJ,qBAAqB,CAACM,WAAtB,GAAoC,uBAApC;;AAkBA,IAAMC,cAAuC,GAAG,SAA1CA,cAA0C,OAAmC;AAAA,MAAhCC,QAAgC,QAAhCA,QAAgC;AAAA,MAAtBC,OAAsB,QAAtBA,OAAsB;AAAA,MAAbC,MAAa,QAAbA,MAAa;;AAC/E,kBACI,qBAAsDN,SAAtD,CADJ;AAAA;AAAA,MAAOD,iBAAP;AAAA,MAA0BQ,oBAA1B;;AAGA,MAAMC,kBAAkB,GAAG,mBAAO,IAAP,CAA3B;AAEA,MAAMP,uBAAuB,GAAG,wBAC5B,UAACQ,IAAD,EAAmC;AAAA,oFAAP,EAAO;AAAA,QAA1BC,cAA0B,SAA1BA,cAA0B;;AAC/BH,IAAAA,oBAAoB,CAAC,UAACI,wBAAD,EAA8B;AAC/C,UAAIA,wBAAwB,KAAKF,IAA7B,IAAqCC,cAAc,KAAK,IAA5D,EAAkE;AAC9D,eAAOV,SAAP;AACH;;AAED,aAAOS,IAAP;AACH,KANmB,CAApB;AAOH,GAT2B,EAU5B,CAACF,oBAAD,CAV4B,CAAhC;AAaA,wBAAU,YAAM;AACZ,QAAIC,kBAAkB,CAACI,OAAvB,EAAgC;AAC5BJ,MAAAA,kBAAkB,CAACI,OAAnB,GAA6B,KAA7B;AACH,KAFD,MAEO,IAAI,OAAOb,iBAAP,KAA6B,QAAjC,EAA2C;AAC9C,UAAI,OAAOO,MAAP,KAAkB,UAAtB,EAAkC;AAC9BA,QAAAA,MAAM;AACT;AACJ,KAJM,MAIA,IAAI,OAAOD,OAAP,KAAmB,UAAvB,EAAmC;AACtCA,MAAAA,OAAO;AACV;AACJ,GAVD,EAUG,CAACA,OAAD,EAAUC,MAAV,EAAkBP,iBAAlB,CAVH;AAYA,MAAMc,aAAa,GAAG,oBAClB;AAAA,WAAO;AACHd,MAAAA,iBAAiB,EAAjBA,iBADG;AAEHE,MAAAA,uBAAuB,EAAvBA;AAFG,KAAP;AAAA,GADkB,EAKlB,CAACF,iBAAD,EAAoBE,uBAApB,CALkB,CAAtB;AAQA,sBACI,6BAAC,qBAAD,CAAuB,QAAvB;AAAgC,IAAA,KAAK,EAAEY;AAAvC,KACKT,QADL,CADJ;AAKH,CA5CD;;AA8CAD,cAAc,CAACD,WAAf,GAA6B,gBAA7B;eAEeC,c","sourcesContent":["import React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\ntype IUpdateOpenAccordionUuid = (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n\ninterface IAccordionGroupContext {\n openAccordionUuid: string | undefined;\n updateOpenAccordionUuid?: IUpdateOpenAccordionUuid;\n}\n\nexport const AccordionGroupContext = React.createContext<IAccordionGroupContext>({\n openAccordionUuid: undefined,\n updateOpenAccordionUuid: undefined,\n});\n\nAccordionGroupContext.displayName = 'AccordionGroupContext';\n\ntype AccordionGroupProps = {\n /**\n * The Accordions that should be grouped. Accordions with the same group are\n * automatically closed when an `Accordion` of the group is opened.\n */\n children: ReactNode;\n /**\n * Function that is executed when all accordions in group are closed.\n */\n onClose?: VoidFunction;\n /**\n * Function that is executed when any accordion in group will be opened.\n */\n onOpen?: VoidFunction;\n};\n\nconst AccordionGroup: FC<AccordionGroupProps> = ({ children, onClose, onOpen }) => {\n const [openAccordionUuid, setOpenAccordionUuid] =\n useState<IAccordionGroupContext['openAccordionUuid']>(undefined);\n\n const isInitialRenderRef = useRef(true);\n\n const updateOpenAccordionUuid = useCallback<IUpdateOpenAccordionUuid>(\n (uuid, { shouldOnlyOpen } = {}) => {\n setOpenAccordionUuid((currentOpenAccordionUuid) => {\n if (currentOpenAccordionUuid === uuid && shouldOnlyOpen !== true) {\n return undefined;\n }\n\n return uuid;\n });\n },\n [setOpenAccordionUuid]\n );\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (typeof openAccordionUuid === 'string') {\n if (typeof onOpen === 'function') {\n onOpen();\n }\n } else if (typeof onClose === 'function') {\n onClose();\n }\n }, [onClose, onOpen, openAccordionUuid]);\n\n const providerValue = useMemo<IAccordionGroupContext>(\n () => ({\n openAccordionUuid,\n updateOpenAccordionUuid,\n }),\n [openAccordionUuid, updateOpenAccordionUuid]\n );\n\n return (\n <AccordionGroupContext.Provider value={providerValue}>\n {children}\n </AccordionGroupContext.Provider>\n );\n};\n\nAccordionGroup.displayName = 'AccordionGroup';\n\nexport default AccordionGroup;\n"],"file":"AccordionGroup.js"}
@@ -108,7 +108,7 @@ var AccordionHead = function AccordionHead(_ref) {
108
108
  }, typeof onSearchChange === 'function' && isOpen ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledMotionRightInput, {
109
109
  animate: {
110
110
  opacity: 1,
111
- width: 'auto'
111
+ width: '165px'
112
112
  },
113
113
  autoComplete: "off",
114
114
  exit: {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"names":["AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchIcon","searchPlaceholder","title","titleElement","closed","open","headHeight","setHeadHeight","titleWrapperRef","hasSearchIcon","Array","isArray","width","current","clientWidth","height","rotate","undefined","opacity","scale","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AASA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAiCA,IAAMA,aAAqC,GAAG,SAAxCA,aAAwC,OAaxC;AAAA,MAZFC,IAYE,QAZFA,IAYE;AAAA,MAXFC,MAWE,QAXFA,MAWE;AAAA,MAVFC,OAUE,QAVFA,OAUE;AAAA,MATFC,aASE,QATFA,aASE;AAAA,MARFC,SAQE,QARFA,SAQE;AAAA,MAPFC,OAOE,QAPFA,OAOE;AAAA,MANFC,cAME,QANFA,cAME;AAAA,MALFC,YAKE,QALFA,YAKE;AAAA,MAJFC,UAIE,QAJFA,UAIE;AAAA,MAHFC,iBAGE,QAHFA,iBAGE;AAAA,MAFFC,KAEE,QAFFA,KAEE;AAAA,MADFC,YACE,QADFA,YACE;;AACF,kBAAoC,qBAAqB;AACrDC,IAAAA,MAAM,EAAER,SAAS,GAAG,EAAH,GAAQ,EAD4B;AAErDS,IAAAA,IAAI,EAAET,SAAS,GAAG,EAAH,GAAQ;AAF8B,GAArB,CAApC;AAAA;AAAA,MAAOU,UAAP;AAAA,MAAmBC,aAAnB;;AAKA,MAAMC,eAAe,GAAG,mBAAuB,IAAvB,CAAxB;AAEA,MAAMC,aAAa,GAAGC,KAAK,CAACC,OAAN,CAAcX,UAAd,CAAtB;AAEA,wBAAU,YAAM;AAAA;;AACZO,IAAAA,aAAa,CACT,mCAAuB;AACnBX,MAAAA,SAAS,EAATA,SADmB;AAEnBM,MAAAA,KAAK,EAALA,KAFmB;AAGnBU,MAAAA,KAAK,EAAE,oDAACJ,eAAe,CAACK,OAAjB,2DAAC,uBAAyBC,WAA1B,yEAAyC,CAAzC,IAA8C;AAHlC,KAAvB,CADS,CAAb;AAOH,GARD,EAQG,CAAClB,SAAD,EAAYM,KAAZ,CARH;AAUA,sBACI,6BAAC,wCAAD;AACI,IAAA,OAAO,EAAE;AAAEa,MAAAA,MAAM,EAAEtB,MAAM,GAAGa,UAAU,CAACD,IAAd,GAAqBC,UAAU,CAACF;AAAhD,KADb;AAEI,IAAA,SAAS,EAAC,4BAFd;AAGI,IAAA,OAAO,EAAE;AAHb,kBAKI,6BAAC,sCAAD;AACI,IAAA,OAAO,EAAE;AAAEY,MAAAA,MAAM,EAAEvB,MAAM,IAAIC,OAAV,GAAoB,EAApB,GAAyB;AAAnC,KADb;AAEI,IAAA,OAAO,EAAE,KAFb;AAGI,IAAA,OAAO,EAAE,CAACA,OAAD,GAAWG,OAAX,GAAqBoB;AAHlC,kBAKI,6BAAC,aAAD;AAAM,IAAA,KAAK,EAAE,CAACvB,OAAO,GAAG,uBAAH,GAA6BF,IAA7B,aAA6BA,IAA7B,cAA6BA,IAA7B,GAAqC,qBAA7C;AAAb,IALJ,CALJ,eAYI,6BAAC,yCAAD;AACI,IAAA,OAAO,EAAE;AAAE0B,MAAAA,OAAO,EAAEvB,aAAa,GAAG,GAAH,GAAS;AAAjC,KADb;AAEI,IAAA,OAAO,EAAE,KAFb;AAGI,IAAA,OAAO,EAAE,CAACD,OAAD,GAAWG,OAAX,GAAqBoB,SAHlC;AAII,IAAA,GAAG,EAAET;AAJT,kBAMI,6BAAC,iCAAD,qBACI,6BAAC,uCAAD,qBACI,6BAAC,6BAAD;AAAiB,IAAA,OAAO,EAAE;AAA1B,kBACI,6BAAC,gCAAD;AACI,IAAA,OAAO,EAAE;AAAEW,MAAAA,KAAK,EAAE;AAAT,KADb;AAEI,IAAA,OAAO,EAAE;AAAEA,MAAAA,KAAK,EAAE1B,MAAM,IAAI,CAACG,SAAX,GAAuB,IAAI,GAA3B,GAAiC;AAA1C,KAFb;AAGI,IAAA,MAAM,EAAEH,MAHZ;AAII,IAAA,SAAS,EAAEG,SAJf;AAKI,IAAA,GAAG,EACCH,MAAM,IAAI,CAACG,SAAX,GACM,uBADN,GAEM;AARd,KAWKM,KAXL,CADJ,CADJ,CADJ,EAkBKC,YAAY,iBACT,6BAAC,8CAAD;AAAiC,IAAA,MAAM;AAAvC,KACKA,YADL,CAnBR,CANJ,CAZJ,EA2CK,CAAC,OAAOL,cAAP,KAA0B,UAA1B,IAAwCC,YAAzC,kBACG,6BAAC,iCAAD,qBACI,6BAAC,6BAAD;AAAiB,IAAA,OAAO,EAAE;AAA1B,KACK,OAAOD,cAAP,KAA0B,UAA1B,IAAwCL,MAAxC,gBACG,yEACI,6BAAC,qCAAD;AACI,IAAA,OAAO,EAAE;AAAEyB,MAAAA,OAAO,EAAE,CAAX;AAAcN,MAAAA,KAAK,EAAE;AAArB,KADb;AAEI,IAAA,YAAY,EAAC,KAFjB;AAGI,IAAA,IAAI,EAAE;AAAEM,MAAAA,OAAO,EAAE,CAAX;AAAcN,MAAAA,KAAK,EAAE;AAArB,KAHV;AAII,IAAA,OAAO,EAAEH,aAJb;AAKI,IAAA,OAAO,EAAE;AAAES,MAAAA,OAAO,EAAE,CAAX;AAAcN,MAAAA,KAAK,EAAE;AAArB,KALb;AAMI,IAAA,GAAG,EAAC,YANR;AAOI,IAAA,QAAQ,EAAEd,cAPd;AAQI,IAAA,WAAW,EAAEG,iBARjB;AASI,IAAA,IAAI,EAAC;AATT,IADJ,EAYKQ,aAAa,iBACV,6BAAC,gDAAD;AACI,IAAA,OAAO,EAAE;AAAES,MAAAA,OAAO,EAAE;AAAX,KADb;AAEI,IAAA,IAAI,EAAE;AAAEA,MAAAA,OAAO,EAAE;AAAX,KAFV;AAGI,IAAA,OAAO,EAAE;AAAEA,MAAAA,OAAO,EAAE;AAAX,KAHb;AAII,IAAA,GAAG,EAAC;AAJR,kBAMI,6BAAC,aAAD;AAAM,IAAA,KAAK,EAAElB;AAAb,IANJ,CAbR,CADH,gBAyBG,6BAAC,8CAAD;AACI,IAAA,OAAO,EAAE;AAAEkB,MAAAA,OAAO,EAAE;AAAX,KADb;AAEI,IAAA,IAAI,EAAE;AAAEA,MAAAA,OAAO,EAAE;AAAX,KAFV;AAGI,IAAA,OAAO,EAAE;AAAEA,MAAAA,OAAO,EAAE;AAAX,KAHb;AAII,IAAA,GAAG,EAAC;AAJR,KAMKnB,YANL,CA1BR,CADJ,CA5CR,CADJ;AAsFH,CAvHD;;AAyHAR,aAAa,CAAC6B,WAAd,GAA4B,eAA5B;eAEe7B,a","sourcesContent":["import { AnimatePresence, AnimateSharedLayout } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n FC,\n MouseEventHandler,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport Icon from '../../icon/Icon';\nimport { getAccordionHeadHeight } from '../utils';\nimport {\n StyledMotionAccordionHead,\n StyledMotionContentWrapper,\n StyledMotionIconWrapper,\n StyledMotionRightElementWrapper,\n StyledMotionRightInput,\n StyledMotionRightInputIconWrapper,\n StyledMotionTitle,\n StyledMotionTitleElementWrapper,\n StyledMotionTitleWrapper,\n StyledRightWrapper,\n} from './AccordionHead.styles';\n\ntype AccordionHeadProps = {\n icon?: string;\n isOpen: boolean;\n isFixed: boolean;\n isTitleGreyed: boolean;\n isWrapped: boolean;\n onClick: MouseEventHandler<HTMLDivElement>;\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n rightElement?: ReactNode;\n searchIcon?: string[];\n searchPlaceholder?: string;\n title: string;\n titleElement?: ReactNode;\n};\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n icon,\n isOpen,\n isFixed,\n isTitleGreyed,\n isWrapped,\n onClick,\n onSearchChange,\n rightElement,\n searchIcon,\n searchPlaceholder,\n title,\n titleElement,\n}) => {\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: isWrapped ? 40 : 33,\n open: isWrapped ? 40 : 33,\n });\n\n const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n const hasSearchIcon = Array.isArray(searchIcon);\n\n useEffect(() => {\n setHeadHeight(\n getAccordionHeadHeight({\n isWrapped,\n title,\n width: (titleWrapperRef.current?.clientWidth ?? 0) - 10,\n })\n );\n }, [isWrapped, title]);\n\n return (\n <StyledMotionAccordionHead\n animate={{ height: isOpen ? headHeight.open : headHeight.closed }}\n className=\"beta-chayns-accordion-head\"\n initial={false}\n >\n <StyledMotionIconWrapper\n animate={{ rotate: isOpen || isFixed ? 90 : 0 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n >\n <Icon icons={[isFixed ? 'fa fa-horizontal-rule' : icon ?? 'fa fa-chevron-right']} />\n </StyledMotionIconWrapper>\n <StyledMotionContentWrapper\n animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n ref={titleWrapperRef}\n >\n <AnimateSharedLayout>\n <StyledMotionTitleWrapper>\n <AnimatePresence initial={false}>\n <StyledMotionTitle\n animate={{ scale: 1 }}\n initial={{ scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n isOpen={isOpen}\n isWrapped={isWrapped}\n key={\n isOpen && !isWrapped\n ? 'accordionHeadTitleBig'\n : 'accordionHeadTitle'\n }\n >\n {title}\n </StyledMotionTitle>\n </AnimatePresence>\n </StyledMotionTitleWrapper>\n {titleElement && (\n <StyledMotionTitleElementWrapper layout>\n {titleElement}\n </StyledMotionTitleElementWrapper>\n )}\n </AnimateSharedLayout>\n </StyledMotionContentWrapper>\n {(typeof onSearchChange === 'function' || rightElement) && (\n <StyledRightWrapper>\n <AnimatePresence initial={false}>\n {typeof onSearchChange === 'function' && isOpen ? (\n <>\n <StyledMotionRightInput\n animate={{ opacity: 1, width: 'auto' }}\n autoComplete=\"off\"\n exit={{ opacity: 0, width: 0 }}\n hasIcon={hasSearchIcon}\n initial={{ opacity: 0, width: 0 }}\n key=\"rightInput\"\n onChange={onSearchChange}\n placeholder={searchPlaceholder}\n type=\"text\"\n />\n {hasSearchIcon && (\n <StyledMotionRightInputIconWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key=\"rightInputIcon\"\n >\n <Icon icons={searchIcon} />\n </StyledMotionRightInputIconWrapper>\n )}\n </>\n ) : (\n <StyledMotionRightElementWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key=\"rightElementWrapper\"\n >\n {rightElement}\n </StyledMotionRightElementWrapper>\n )}\n </AnimatePresence>\n </StyledRightWrapper>\n )}\n </StyledMotionAccordionHead>\n );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"file":"AccordionHead.js"}
1
+ {"version":3,"sources":["../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"names":["AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchIcon","searchPlaceholder","title","titleElement","closed","open","headHeight","setHeadHeight","titleWrapperRef","hasSearchIcon","Array","isArray","width","current","clientWidth","height","rotate","undefined","opacity","scale","displayName"],"mappings":"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","sourcesContent":["import { AnimatePresence, AnimateSharedLayout } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n FC,\n MouseEventHandler,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport Icon from '../../icon/Icon';\nimport { getAccordionHeadHeight } from '../utils';\nimport {\n StyledMotionAccordionHead,\n StyledMotionContentWrapper,\n StyledMotionIconWrapper,\n StyledMotionRightElementWrapper,\n StyledMotionRightInput,\n StyledMotionRightInputIconWrapper,\n StyledMotionTitle,\n StyledMotionTitleElementWrapper,\n StyledMotionTitleWrapper,\n StyledRightWrapper,\n} from './AccordionHead.styles';\n\ntype AccordionHeadProps = {\n icon?: string;\n isOpen: boolean;\n isFixed: boolean;\n isTitleGreyed: boolean;\n isWrapped: boolean;\n onClick: MouseEventHandler<HTMLDivElement>;\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n rightElement?: ReactNode;\n searchIcon?: string[];\n searchPlaceholder?: string;\n title: string;\n titleElement?: ReactNode;\n};\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n icon,\n isOpen,\n isFixed,\n isTitleGreyed,\n isWrapped,\n onClick,\n onSearchChange,\n rightElement,\n searchIcon,\n searchPlaceholder,\n title,\n titleElement,\n}) => {\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: isWrapped ? 40 : 33,\n open: isWrapped ? 40 : 33,\n });\n\n const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n const hasSearchIcon = Array.isArray(searchIcon);\n\n useEffect(() => {\n setHeadHeight(\n getAccordionHeadHeight({\n isWrapped,\n title,\n width: (titleWrapperRef.current?.clientWidth ?? 0) - 10,\n })\n );\n }, [isWrapped, title]);\n\n return (\n <StyledMotionAccordionHead\n animate={{ height: isOpen ? headHeight.open : headHeight.closed }}\n className=\"beta-chayns-accordion-head\"\n initial={false}\n >\n <StyledMotionIconWrapper\n animate={{ rotate: isOpen || isFixed ? 90 : 0 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n >\n <Icon icons={[isFixed ? 'fa fa-horizontal-rule' : icon ?? 'fa fa-chevron-right']} />\n </StyledMotionIconWrapper>\n <StyledMotionContentWrapper\n animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n ref={titleWrapperRef}\n >\n <AnimateSharedLayout>\n <StyledMotionTitleWrapper>\n <AnimatePresence initial={false}>\n <StyledMotionTitle\n animate={{ scale: 1 }}\n initial={{ scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n isOpen={isOpen}\n isWrapped={isWrapped}\n key={\n isOpen && !isWrapped\n ? 'accordionHeadTitleBig'\n : 'accordionHeadTitle'\n }\n >\n {title}\n </StyledMotionTitle>\n </AnimatePresence>\n </StyledMotionTitleWrapper>\n {titleElement && (\n <StyledMotionTitleElementWrapper layout>\n {titleElement}\n </StyledMotionTitleElementWrapper>\n )}\n </AnimateSharedLayout>\n </StyledMotionContentWrapper>\n {(typeof onSearchChange === 'function' || rightElement) && (\n <StyledRightWrapper>\n <AnimatePresence initial={false}>\n {typeof onSearchChange === 'function' && isOpen ? (\n <>\n <StyledMotionRightInput\n animate={{ opacity: 1, width: '165px' }}\n autoComplete=\"off\"\n exit={{ opacity: 0, width: 0 }}\n hasIcon={hasSearchIcon}\n initial={{ opacity: 0, width: 0 }}\n key=\"rightInput\"\n onChange={onSearchChange}\n placeholder={searchPlaceholder}\n type=\"text\"\n />\n {hasSearchIcon && (\n <StyledMotionRightInputIconWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key=\"rightInputIcon\"\n >\n <Icon icons={searchIcon} />\n </StyledMotionRightInputIconWrapper>\n )}\n </>\n ) : (\n <StyledMotionRightElementWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key=\"rightElementWrapper\"\n >\n {rightElement}\n </StyledMotionRightElementWrapper>\n )}\n </AnimatePresence>\n </StyledRightWrapper>\n )}\n </StyledMotionAccordionHead>\n );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"file":"AccordionHead.js"}
@@ -64,7 +64,7 @@ var StyledRightWrapper = _styledComponents.default.div(_templateObject8 || (_tem
64
64
  exports.StyledRightWrapper = StyledRightWrapper;
65
65
  var StyledMotionRightElementWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n align-items: center;\n display: flex;\n grid-area: header;\n justify-content: flex-end;\n"])));
66
66
  exports.StyledMotionRightElementWrapper = StyledMotionRightElementWrapper;
67
- var StyledMotionRightInput = (0, _styledComponents.default)(_framerMotion.motion.input)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n border: 1px solid transparent;\n border-bottom-color: rgba(\n ", ",\n 0.45\n );\n grid-area: header;\n padding: ", ";\n"])), function (_ref9) {
67
+ var StyledMotionRightInput = (0, _styledComponents.default)(_framerMotion.motion.input)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n background-color: transparent;\n border: 1px solid transparent;\n border-bottom-color: rgba(\n ", ",\n 0.45\n );\n grid-area: header;\n padding: ", ";\n"])), function (_ref9) {
68
68
  var theme = _ref9.theme;
69
69
  return theme['headline-rgb'];
70
70
  }, function (_ref10) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"names":["StyledMotionAccordionHead","motion","div","theme","text","StyledMotionIconWrapper","onClick","StyledMotionContentWrapper","StyledMotionTitleWrapper","StyledMotionTitle","isOpen","isWrapped","undefined","css","StyledMotionTitleElementWrapper","StyledRightWrapper","styled","StyledMotionRightElementWrapper","StyledMotionRightInput","input","hasIcon","StyledMotionRightInputIconWrapper"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;AAKO,IAAMA,yBAAyB,GAAG,+BAAOC,qBAAOC,GAAd,CAAH,oLAEzB;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,SAA+CA,KAAK,CAACC,IAArD;AAAA,CAFyB,CAA/B;;AAQA,IAAMC,uBAAuB,GAAG,+BAAOJ,qBAAOC,GAAd,CAAH,mOAEtB;AAAA,MAAGI,OAAH,SAAGA,OAAH;AAAA,SAAkB,OAAOA,OAAP,KAAmB,UAAnB,GAAgC,SAAhC,GAA4C,SAA9D;AAAA,CAFsB,CAA7B;;AAUA,IAAMC,0BAA0B,GAAG,+BAAON,qBAAOC,GAAd,CAAH,sOAEzB;AAAA,MAAGI,OAAH,SAAGA,OAAH;AAAA,SAAkB,OAAOA,OAAP,KAAmB,UAAnB,GAAgC,SAAhC,GAA4C,SAA9D;AAAA,CAFyB,CAAhC;;AAUA,IAAME,wBAAwB,GAAG,+BAAOP,qBAAOC,GAAd,CAAH,sJAA9B;;AAWA,IAAMO,iBAAiB,GAAG,+BAAOR,qBAAOC,GAAd,CAAH,qTACb;AAAA,MAAGQ,MAAH,SAAGA,MAAH;AAAA,MAAWC,SAAX,SAAWA,SAAX;AAAA,SAA4BD,MAAM,IAAI,CAACC,SAAX,GAAuB,QAAvB,GAAkCC,SAA9D;AAAA,CADa,EAEX;AAAA,MAAGF,MAAH,SAAGA,MAAH;AAAA,MAAWC,SAAX,SAAWA,SAAX;AAAA,SAA4BD,MAAM,IAAIC,SAAV,GAAsB,GAAtB,GAA4B,QAAxD;AAAA,CAFW,EAIhB;AAAA,MAAGA,SAAH,SAAGA,SAAH;AAAA,SAAoBA,SAAS,GAAG,MAAH,GAAYC,SAAzC;AAAA,CAJgB,EASX;AAAA,MAAGF,MAAH,SAAGA,MAAH;AAAA,MAAWC,SAAX,SAAWA,SAAX;AAAA,SAA4BD,MAAM,IAAI,CAACC,SAAX,GAAuB,QAAvB,GAAkC,QAA9D;AAAA,CATW,EAWxB;AAAA,MAAGA,SAAH,SAAGA,SAAH;AAAA,SACEA,SAAS,QACTE,qBADS,gJADX;AAAA,CAXwB,CAAvB;;AAmBA,IAAMC,+BAA+B,GAAG,+BAAOb,qBAAOC,GAAd,CAAH,8IAArC;;;AAMA,IAAMa,kBAAkB,GAAGC,0BAAOd,GAAV,6NAAxB;;;AASA,IAAMe,+BAA+B,GAAG,+BAAOhB,qBAAOC,GAAd,CAAH,+KAArC;;AAWA,IAAMgB,sBAAsB,GAAG,+BAAOjB,qBAAOkB,KAAd,CAAH,iOAGzB;AAAA,MAAGhB,KAAH,SAAGA,KAAH;AAAA,SAA4CA,KAAK,CAAC,cAAD,CAAjD;AAAA,CAHyB,EAOpB;AAAA,MAAGiB,OAAH,UAAGA,OAAH;AAAA,SAAkBA,OAAO,GAAG,kBAAH,GAAwB,SAAjD;AAAA,CAPoB,CAA5B;;AAUA,IAAMC,iCAAiC,GAAG,+BAAOpB,qBAAOC,GAAd,CAAH,iOAAvC","sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)`\n align-items: center;\n color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n display: flex;\n overflow: hidden;\n padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)`\n align-items: center;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n height: 25px;\n justify-content: center;\n width: 25px;\n`;\n\nexport const StyledMotionContentWrapper = styled(motion.div)`\n align-self: flex-start;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n display: flex;\n flex: 1 1 auto;\n height: 100%;\n overflow: hidden;\n margin-right: 10px;\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)`\n display: grid;\n flex: 0 1 auto;\n grid-template-areas: 'header';\n`;\n\ninterface StyledMotionTitleProps {\n isOpen: boolean;\n isWrapped: boolean;\n}\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n font-size: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? '1.3rem' : undefined)};\n font-weight: ${({ isOpen, isWrapped }) => (isOpen && isWrapped ? 700 : 'normal')};\n grid-area: header;\n height: ${({ isWrapped }) => (isWrapped ? '100%' : undefined)};\n overflow: hidden;\n text-overflow: ellipsis;\n transform-origin: top left;\n user-select: none;\n white-space: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? 'normal' : 'nowrap')};\n\n ${({ isWrapped }) =>\n isWrapped &&\n css`\n align-items: center;\n display: flex;\n `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n margin-left: 8px;\n`;\n\nexport const StyledRightWrapper = styled.div`\n display: grid;\n flex: 0 0 auto;\n grid-template-areas: 'right';\n margin-right: 5px;\n overflow: hidden;\n position: relative;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n grid-area: header;\n justify-content: flex-end;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n border: 1px solid transparent;\n border-bottom-color: rgba(\n ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n 0.45\n );\n grid-area: header;\n padding: ${({ hasIcon }) => (hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n position: absolute;\n right: 4px;\n top: 0;\n`;\n"],"file":"AccordionHead.styles.js"}
1
+ {"version":3,"sources":["../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"names":["StyledMotionAccordionHead","motion","div","theme","text","StyledMotionIconWrapper","onClick","StyledMotionContentWrapper","StyledMotionTitleWrapper","StyledMotionTitle","isOpen","isWrapped","undefined","css","StyledMotionTitleElementWrapper","StyledRightWrapper","styled","StyledMotionRightElementWrapper","StyledMotionRightInput","input","hasIcon","StyledMotionRightInputIconWrapper"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;AAKO,IAAMA,yBAAyB,GAAG,+BAAOC,qBAAOC,GAAd,CAAH,oLAEzB;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,SAA+CA,KAAK,CAACC,IAArD;AAAA,CAFyB,CAA/B;;AAQA,IAAMC,uBAAuB,GAAG,+BAAOJ,qBAAOC,GAAd,CAAH,mOAEtB;AAAA,MAAGI,OAAH,SAAGA,OAAH;AAAA,SAAkB,OAAOA,OAAP,KAAmB,UAAnB,GAAgC,SAAhC,GAA4C,SAA9D;AAAA,CAFsB,CAA7B;;AAUA,IAAMC,0BAA0B,GAAG,+BAAON,qBAAOC,GAAd,CAAH,sOAEzB;AAAA,MAAGI,OAAH,SAAGA,OAAH;AAAA,SAAkB,OAAOA,OAAP,KAAmB,UAAnB,GAAgC,SAAhC,GAA4C,SAA9D;AAAA,CAFyB,CAAhC;;AAUA,IAAME,wBAAwB,GAAG,+BAAOP,qBAAOC,GAAd,CAAH,sJAA9B;;AAWA,IAAMO,iBAAiB,GAAG,+BAAOR,qBAAOC,GAAd,CAAH,qTACb;AAAA,MAAGQ,MAAH,SAAGA,MAAH;AAAA,MAAWC,SAAX,SAAWA,SAAX;AAAA,SAA4BD,MAAM,IAAI,CAACC,SAAX,GAAuB,QAAvB,GAAkCC,SAA9D;AAAA,CADa,EAEX;AAAA,MAAGF,MAAH,SAAGA,MAAH;AAAA,MAAWC,SAAX,SAAWA,SAAX;AAAA,SAA4BD,MAAM,IAAIC,SAAV,GAAsB,GAAtB,GAA4B,QAAxD;AAAA,CAFW,EAIhB;AAAA,MAAGA,SAAH,SAAGA,SAAH;AAAA,SAAoBA,SAAS,GAAG,MAAH,GAAYC,SAAzC;AAAA,CAJgB,EASX;AAAA,MAAGF,MAAH,SAAGA,MAAH;AAAA,MAAWC,SAAX,SAAWA,SAAX;AAAA,SAA4BD,MAAM,IAAI,CAACC,SAAX,GAAuB,QAAvB,GAAkC,QAA9D;AAAA,CATW,EAWxB;AAAA,MAAGA,SAAH,SAAGA,SAAH;AAAA,SACEA,SAAS,QACTE,qBADS,gJADX;AAAA,CAXwB,CAAvB;;AAmBA,IAAMC,+BAA+B,GAAG,+BAAOb,qBAAOC,GAAd,CAAH,8IAArC;;;AAMA,IAAMa,kBAAkB,GAAGC,0BAAOd,GAAV,6NAAxB;;;AASA,IAAMe,+BAA+B,GAAG,+BAAOhB,qBAAOC,GAAd,CAAH,+KAArC;;AAWA,IAAMgB,sBAAsB,GAAG,+BAAOjB,qBAAOkB,KAAd,CAAH,qQAIzB;AAAA,MAAGhB,KAAH,SAAGA,KAAH;AAAA,SAA4CA,KAAK,CAAC,cAAD,CAAjD;AAAA,CAJyB,EAQpB;AAAA,MAAGiB,OAAH,UAAGA,OAAH;AAAA,SAAkBA,OAAO,GAAG,kBAAH,GAAwB,SAAjD;AAAA,CARoB,CAA5B;;AAWA,IAAMC,iCAAiC,GAAG,+BAAOpB,qBAAOC,GAAd,CAAH,iOAAvC","sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)`\n align-items: center;\n color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n display: flex;\n overflow: hidden;\n padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)`\n align-items: center;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n height: 25px;\n justify-content: center;\n width: 25px;\n`;\n\nexport const StyledMotionContentWrapper = styled(motion.div)`\n align-self: flex-start;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n display: flex;\n flex: 1 1 auto;\n height: 100%;\n overflow: hidden;\n margin-right: 10px;\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)`\n display: grid;\n flex: 0 1 auto;\n grid-template-areas: 'header';\n`;\n\ninterface StyledMotionTitleProps {\n isOpen: boolean;\n isWrapped: boolean;\n}\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n font-size: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? '1.3rem' : undefined)};\n font-weight: ${({ isOpen, isWrapped }) => (isOpen && isWrapped ? 700 : 'normal')};\n grid-area: header;\n height: ${({ isWrapped }) => (isWrapped ? '100%' : undefined)};\n overflow: hidden;\n text-overflow: ellipsis;\n transform-origin: top left;\n user-select: none;\n white-space: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? 'normal' : 'nowrap')};\n\n ${({ isWrapped }) =>\n isWrapped &&\n css`\n align-items: center;\n display: flex;\n `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n margin-left: 8px;\n`;\n\nexport const StyledRightWrapper = styled.div`\n display: grid;\n flex: 0 0 auto;\n grid-template-areas: 'right';\n margin-right: 5px;\n overflow: hidden;\n position: relative;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n grid-area: header;\n justify-content: flex-end;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n background-color: transparent;\n border: 1px solid transparent;\n border-bottom-color: rgba(\n ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n 0.45\n );\n grid-area: header;\n padding: ${({ hasIcon }) => (hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n position: absolute;\n right: 4px;\n top: 0;\n`;\n"],"file":"AccordionHead.styles.js"}
@@ -0,0 +1,3 @@
1
+ import { FC } from 'react';
2
+ declare const AccordionIntro: FC;
3
+ export default AccordionIntro;
@@ -0,0 +1,24 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _AccordionIntro = require("./AccordionIntro.styles");
11
+
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+
14
+ var AccordionIntro = function AccordionIntro(_ref) {
15
+ var children = _ref.children;
16
+ return /*#__PURE__*/_react.default.createElement(_AccordionIntro.StyledAccordionIntro, {
17
+ className: "beta-chayns-accordion-intro"
18
+ }, children);
19
+ };
20
+
21
+ AccordionIntro.displayName = 'AccordionIntro';
22
+ var _default = AccordionIntro;
23
+ exports.default = _default;
24
+ //# sourceMappingURL=AccordionIntro.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/components/accordion/accordion-intro/AccordionIntro.tsx"],"names":["AccordionIntro","children","displayName"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEA,IAAMA,cAAkB,GAAG,SAArBA,cAAqB;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,sBACvB,6BAAC,oCAAD;AAAsB,IAAA,SAAS,EAAC;AAAhC,KAA+DA,QAA/D,CADuB;AAAA,CAA3B;;AAIAD,cAAc,CAACE,WAAf,GAA6B,gBAA7B;eAEeF,c","sourcesContent":["import React, { FC } from 'react';\nimport { StyledAccordionIntro } from './AccordionIntro.styles';\n\nconst AccordionIntro: FC = ({ children }) => (\n <StyledAccordionIntro className=\"beta-chayns-accordion-intro\">{children}</StyledAccordionIntro>\n);\n\nAccordionIntro.displayName = 'AccordionIntro';\n\nexport default AccordionIntro;\n"],"file":"AccordionIntro.js"}
@@ -0,0 +1 @@
1
+ export declare const StyledAccordionIntro: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.StyledAccordionIntro = void 0;
7
+
8
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
9
+
10
+ var _templateObject;
11
+
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+
14
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
15
+
16
+ var StyledAccordionIntro = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: 0 9px 6px;\n"])));
17
+
18
+ exports.StyledAccordionIntro = StyledAccordionIntro;
19
+ //# sourceMappingURL=AccordionIntro.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/components/accordion/accordion-intro/AccordionIntro.styles.ts"],"names":["StyledAccordionIntro","styled","div"],"mappings":";;;;;;;AAAA;;;;;;;;AAEO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,gGAA1B","sourcesContent":["import styled from 'styled-components';\n\nexport const StyledAccordionIntro = styled.div`\n padding: 0 9px 6px;\n`;\n"],"file":"AccordionIntro.styles.js"}
package/lib/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export { default as Accordion } from './components/accordion/Accordion';
2
2
  export { default as AccordionContent } from './components/accordion/accordion-content/AccordionContent';
3
3
  export { default as AccordionGroup } from './components/accordion/accordion-group/AccordionGroup';
4
+ export { default as AccordionIntro } from './components/accordion/accordion-intro/AccordionIntro';
4
5
  export { default as Badge } from './components/badge/Badge';
5
6
  export { default as Button } from './components/button/Button';
6
7
  export { default as ColorSchemeProvider } from './components/color-scheme-provider/ColorSchemeProvider';
package/lib/index.js CHANGED
@@ -21,6 +21,12 @@ Object.defineProperty(exports, "AccordionGroup", {
21
21
  return _AccordionGroup.default;
22
22
  }
23
23
  });
24
+ Object.defineProperty(exports, "AccordionIntro", {
25
+ enumerable: true,
26
+ get: function get() {
27
+ return _AccordionIntro.default;
28
+ }
29
+ });
24
30
  Object.defineProperty(exports, "Badge", {
25
31
  enumerable: true,
26
32
  get: function get() {
@@ -82,6 +88,8 @@ var _AccordionContent = _interopRequireDefault(require("./components/accordion/a
82
88
 
83
89
  var _AccordionGroup = _interopRequireDefault(require("./components/accordion/accordion-group/AccordionGroup"));
84
90
 
91
+ var _AccordionIntro = _interopRequireDefault(require("./components/accordion/accordion-intro/AccordionIntro"));
92
+
85
93
  var _Badge = _interopRequireDefault(require("./components/badge/Badge"));
86
94
 
87
95
  var _Button = _interopRequireDefault(require("./components/button/Button"));
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export { default as Accordion } from './components/accordion/Accordion';\nexport { default as AccordionContent } from './components/accordion/accordion-content/AccordionContent';\nexport { default as AccordionGroup } from './components/accordion/accordion-group/AccordionGroup';\nexport { default as Badge } from './components/badge/Badge';\nexport { default as Button } from './components/button/Button';\nexport { default as ColorSchemeProvider } from './components/color-scheme-provider/ColorSchemeProvider';\nexport { default as ContextMenu } from './components/context-menu/ContextMenu';\nexport { default as GridImage } from './components/grid-image/GridImage';\nexport { default as Icon } from './components/icon/Icon';\nexport { default as List } from './components/list/List';\nexport { default as ListItemContent } from './components/list/list-item/list-item-content/ListItemContent';\nexport { default as ListItem } from './components/list/list-item/ListItem';\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export { default as Accordion } from './components/accordion/Accordion';\nexport { default as AccordionContent } from './components/accordion/accordion-content/AccordionContent';\nexport { default as AccordionGroup } from './components/accordion/accordion-group/AccordionGroup';\nexport { default as AccordionIntro } from './components/accordion/accordion-intro/AccordionIntro';\nexport { default as Badge } from './components/badge/Badge';\nexport { default as Button } from './components/button/Button';\nexport { default as ColorSchemeProvider } from './components/color-scheme-provider/ColorSchemeProvider';\nexport { default as ContextMenu } from './components/context-menu/ContextMenu';\nexport { default as GridImage } from './components/grid-image/GridImage';\nexport { default as Icon } from './components/icon/Icon';\nexport { default as List } from './components/list/List';\nexport { default as ListItemContent } from './components/list/list-item/list-item-content/ListItemContent';\nexport { default as ListItem } from './components/list/list-item/ListItem';\n"],"file":"index.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.0-beta.21",
3
+ "version": "5.0.0-beta.25",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "keywords": [
6
6
  "chayns",
@@ -61,5 +61,5 @@
61
61
  "publishConfig": {
62
62
  "access": "public"
63
63
  },
64
- "gitHead": "8702d0115aa8ad0fc0b3d365383d3705a973b9d3"
64
+ "gitHead": "bbd2561950d231cbe1c30c4e1d1c8e2a3da106ec"
65
65
  }