@chayns-components/core 5.0.0-beta.488 → 5.0.0-beta.489
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.
- package/lib/components/list/List.js +8 -1
- package/lib/components/list/List.js.map +1 -1
- package/lib/components/list/list-item/ListItem.js +15 -2
- package/lib/components/list/list-item/ListItem.js.map +1 -1
- package/lib/components/list/list-item/ListItem.styles.d.ts +264 -1
- package/lib/components/list/list-item/ListItem.styles.js +3 -1
- package/lib/components/list/list-item/ListItem.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { AnimatePresence, MotionConfig } from 'framer-motion';
|
|
1
2
|
import React, { useCallback, useMemo, useState } from 'react';
|
|
2
3
|
export const ListContext = /*#__PURE__*/React.createContext({
|
|
3
4
|
incrementExpandableItemCount: () => () => {},
|
|
@@ -40,7 +41,13 @@ const List = _ref => {
|
|
|
40
41
|
}), [expandableItemCount, incrementExpandableItemCount, isWrapped, openItemUuid, updateOpenItemUuid]);
|
|
41
42
|
return /*#__PURE__*/React.createElement(ListContext.Provider, {
|
|
42
43
|
value: providerValue
|
|
43
|
-
},
|
|
44
|
+
}, /*#__PURE__*/React.createElement(MotionConfig, {
|
|
45
|
+
transition: {
|
|
46
|
+
type: 'tween'
|
|
47
|
+
}
|
|
48
|
+
}, /*#__PURE__*/React.createElement(AnimatePresence, {
|
|
49
|
+
initial: false
|
|
50
|
+
}, children)));
|
|
44
51
|
};
|
|
45
52
|
List.displayName = 'List';
|
|
46
53
|
export default List;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","names":["React","useCallback","useMemo","useState","ListContext","createContext","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","undefined","updateOpenItemUuid","displayName","List","_ref","children","setOpenItemUuid","expandableItemCount","setExpandableItemCount","uuid","shouldOnlyOpen","arguments","length","currentOpenItemUuid","count","providerValue","createElement","Provider","value"],"sources":["../../../src/components/list/List.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\n\ninterface IListContext {\n incrementExpandableItemCount: () => () => void;\n isAnyItemExpandable: boolean;\n isWrapped: boolean;\n openItemUuid: string | undefined;\n updateOpenItemUuid: (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n}\n\nexport const ListContext = React.createContext<IListContext>({\n incrementExpandableItemCount: () => () => {},\n isAnyItemExpandable: false,\n isWrapped: false,\n openItemUuid: undefined,\n updateOpenItemUuid: () => {},\n});\n\nListContext.displayName = 'ListContext';\n\ntype ListProps = {\n /**\n * The items of the list\n */\n children: ReactNode;\n /**\n * This value must be set for nested AccordionGroup components. This adjusts the style of\n * the head and the padding of the content accordions.\n */\n isWrapped?: boolean;\n};\n\nconst List: FC<ListProps> = ({ children, isWrapped = false }) => {\n const [openItemUuid, setOpenItemUuid] = useState<IListContext['openItemUuid']>(undefined);\n const [expandableItemCount, setExpandableItemCount] = useState<number>(0);\n\n const updateOpenItemUuid = useCallback<IListContext['updateOpenItemUuid']>(\n (uuid, { shouldOnlyOpen } = {}) => {\n setOpenItemUuid((currentOpenItemUuid) => {\n if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {\n return undefined;\n }\n\n return uuid;\n });\n },\n [setOpenItemUuid],\n );\n\n const incrementExpandableItemCount = useCallback(() => {\n setExpandableItemCount((count) => count + 1);\n\n return () => {\n setExpandableItemCount((count) => count - 1);\n };\n }, [setExpandableItemCount]);\n\n const providerValue = useMemo<IListContext>(\n () => ({\n incrementExpandableItemCount,\n isAnyItemExpandable: expandableItemCount > 0,\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n }),\n [\n expandableItemCount,\n incrementExpandableItemCount,\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n ],\n );\n\n return <ListContext.Provider value={providerValue}>{children}</ListContext.Provider
|
|
1
|
+
{"version":3,"file":"List.js","names":["AnimatePresence","MotionConfig","React","useCallback","useMemo","useState","ListContext","createContext","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","undefined","updateOpenItemUuid","displayName","List","_ref","children","setOpenItemUuid","expandableItemCount","setExpandableItemCount","uuid","shouldOnlyOpen","arguments","length","currentOpenItemUuid","count","providerValue","createElement","Provider","value","transition","type","initial"],"sources":["../../../src/components/list/List.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\n\ninterface IListContext {\n incrementExpandableItemCount: () => () => void;\n isAnyItemExpandable: boolean;\n isWrapped: boolean;\n openItemUuid: string | undefined;\n updateOpenItemUuid: (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n}\n\nexport const ListContext = React.createContext<IListContext>({\n incrementExpandableItemCount: () => () => {},\n isAnyItemExpandable: false,\n isWrapped: false,\n openItemUuid: undefined,\n updateOpenItemUuid: () => {},\n});\n\nListContext.displayName = 'ListContext';\n\ntype ListProps = {\n /**\n * The items of the list\n */\n children: ReactNode;\n /**\n * This value must be set for nested AccordionGroup components. This adjusts the style of\n * the head and the padding of the content accordions.\n */\n isWrapped?: boolean;\n};\n\nconst List: FC<ListProps> = ({ children, isWrapped = false }) => {\n const [openItemUuid, setOpenItemUuid] = useState<IListContext['openItemUuid']>(undefined);\n const [expandableItemCount, setExpandableItemCount] = useState<number>(0);\n\n const updateOpenItemUuid = useCallback<IListContext['updateOpenItemUuid']>(\n (uuid, { shouldOnlyOpen } = {}) => {\n setOpenItemUuid((currentOpenItemUuid) => {\n if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {\n return undefined;\n }\n\n return uuid;\n });\n },\n [setOpenItemUuid],\n );\n\n const incrementExpandableItemCount = useCallback(() => {\n setExpandableItemCount((count) => count + 1);\n\n return () => {\n setExpandableItemCount((count) => count - 1);\n };\n }, [setExpandableItemCount]);\n\n const providerValue = useMemo<IListContext>(\n () => ({\n incrementExpandableItemCount,\n isAnyItemExpandable: expandableItemCount > 0,\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n }),\n [\n expandableItemCount,\n incrementExpandableItemCount,\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n ],\n );\n\n return (\n <ListContext.Provider value={providerValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AnimatePresence initial={false}>{children}</AnimatePresence>\n </MotionConfig>\n </ListContext.Provider>\n );\n};\n\nList.displayName = 'List';\n\nexport default List;\n"],"mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,eAAe;AAC7D,OAAOC,KAAK,IAAmBC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAU5E,OAAO,MAAMC,WAAW,gBAAGJ,KAAK,CAACK,aAAa,CAAe;EACzDC,4BAA4B,EAAEA,CAAA,KAAM,MAAM,CAAC,CAAC;EAC5CC,mBAAmB,EAAE,KAAK;EAC1BC,SAAS,EAAE,KAAK;EAChBC,YAAY,EAAEC,SAAS;EACvBC,kBAAkB,EAAEA,CAAA,KAAM,CAAC;AAC/B,CAAC,CAAC;AAEFP,WAAW,CAACQ,WAAW,GAAG,aAAa;AAcvC,MAAMC,IAAmB,GAAGC,IAAA,IAAqC;EAAA,IAApC;IAAEC,QAAQ;IAAEP,SAAS,GAAG;EAAM,CAAC,GAAAM,IAAA;EACxD,MAAM,CAACL,YAAY,EAAEO,eAAe,CAAC,GAAGb,QAAQ,CAA+BO,SAAS,CAAC;EACzF,MAAM,CAACO,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGf,QAAQ,CAAS,CAAC,CAAC;EAEzE,MAAMQ,kBAAkB,GAAGV,WAAW,CAClC,UAACkB,IAAI,EAA8B;IAAA,IAA5B;MAAEC;IAAe,CAAC,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAX,SAAA,GAAAW,SAAA,MAAG,CAAC,CAAC;IAC1BL,eAAe,CAAEO,mBAAmB,IAAK;MACrC,IAAIA,mBAAmB,KAAKJ,IAAI,IAAIC,cAAc,KAAK,IAAI,EAAE;QACzD,OAAOV,SAAS;MACpB;MAEA,OAAOS,IAAI;IACf,CAAC,CAAC;EACN,CAAC,EACD,CAACH,eAAe,CACpB,CAAC;EAED,MAAMV,4BAA4B,GAAGL,WAAW,CAAC,MAAM;IACnDiB,sBAAsB,CAAEM,KAAK,IAAKA,KAAK,GAAG,CAAC,CAAC;IAE5C,OAAO,MAAM;MACTN,sBAAsB,CAAEM,KAAK,IAAKA,KAAK,GAAG,CAAC,CAAC;IAChD,CAAC;EACL,CAAC,EAAE,CAACN,sBAAsB,CAAC,CAAC;EAE5B,MAAMO,aAAa,GAAGvB,OAAO,CACzB,OAAO;IACHI,4BAA4B;IAC5BC,mBAAmB,EAAEU,mBAAmB,GAAG,CAAC;IAC5CT,SAAS;IACTC,YAAY;IACZE;EACJ,CAAC,CAAC,EACF,CACIM,mBAAmB,EACnBX,4BAA4B,EAC5BE,SAAS,EACTC,YAAY,EACZE,kBAAkB,CAE1B,CAAC;EAED,oBACIX,KAAA,CAAA0B,aAAA,CAACtB,WAAW,CAACuB,QAAQ;IAACC,KAAK,EAAEH;EAAc,gBACvCzB,KAAA,CAAA0B,aAAA,CAAC3B,YAAY;IAAC8B,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ;EAAE,gBACxC9B,KAAA,CAAA0B,aAAA,CAAC5B,eAAe;IAACiC,OAAO,EAAE;EAAM,GAAEhB,QAA0B,CAClD,CACI,CAAC;AAE/B,CAAC;AAEDF,IAAI,CAACD,WAAW,GAAG,MAAM;AAEzB,eAAeC,IAAI"}
|
|
@@ -4,7 +4,7 @@ import { useUuid } from '../../../hooks/uuid';
|
|
|
4
4
|
import { ListContext } from '../List';
|
|
5
5
|
import ListItemBody from './list-item-body/ListItemBody';
|
|
6
6
|
import ListItemHead from './list-item-head/ListItemHead';
|
|
7
|
-
import {
|
|
7
|
+
import { StyledMotionListItem } from './ListItem.styles';
|
|
8
8
|
const ListItem = _ref => {
|
|
9
9
|
let {
|
|
10
10
|
children,
|
|
@@ -54,8 +54,21 @@ const ListItem = _ref => {
|
|
|
54
54
|
});
|
|
55
55
|
}
|
|
56
56
|
}, [isDefaultOpen, updateOpenItemUuid, uuid]);
|
|
57
|
-
return /*#__PURE__*/React.createElement(
|
|
57
|
+
return /*#__PURE__*/React.createElement(StyledMotionListItem, {
|
|
58
|
+
animate: {
|
|
59
|
+
height: 'auto',
|
|
60
|
+
opacity: 1
|
|
61
|
+
},
|
|
58
62
|
className: "beta-chayns-list-item",
|
|
63
|
+
exit: {
|
|
64
|
+
height: 0,
|
|
65
|
+
opacity: 0
|
|
66
|
+
},
|
|
67
|
+
initial: {
|
|
68
|
+
height: 0,
|
|
69
|
+
opacity: 0
|
|
70
|
+
},
|
|
71
|
+
key: `list-item-${uuid}`,
|
|
59
72
|
$isClickable: typeof onClick === 'function' || isExpandable,
|
|
60
73
|
$isOpen: isItemOpen,
|
|
61
74
|
$isWrapped: isWrapped
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useUuid","ListContext","ListItemBody","ListItemHead","
|
|
1
|
+
{"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useUuid","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","subtitle","shouldShowRoundImage","title","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","uuid","isExpandable","undefined","isItemOpen","handleHeadClick","event","shouldOnlyOpen","createElement","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isWrapped","id","displayName"],"sources":["../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useContext,\n useEffect,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\ntype ListItemProps = {\n /**\n * The content of the `ListItem` body. When the `ListItem` has children,\n * it can be opened and also gets an icon as an indicator automatically.\n */\n children?: ReactNode;\n /**\n * Element that is displayed when hovering over the `ListItem` on the right\n * side. On mobile devices, this element is not displayed.\n */\n hoverItem?: ReactNode;\n /**\n * The FontAwesome or tobit icons to render like an image on the left side\n * of the header. Multiple icons are stacked. See the `Icon` component\n * documentation for more information.\n */\n icons?: string[];\n /**\n * A list of image URLs that are displayed on the left side of the header.\n * If multiple URLs are passed, the image is assembled from the first three\n * image URLs as a puzzle.\n */\n images?: string[];\n /**\n * This can be used to automatically expand the `ListItem` during the first render.\n */\n isDefaultOpen?: boolean;\n /**\n * This overrides the internal opening state of the item and makes it controlled.\n */\n isOpen?: boolean;\n /**\n * Function to be executed when the header of the `ListItem` was clicked\n */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the header of the `ListItem` is pressed for\n * 400 milliseconds.\n */\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n /**\n * Elements that are displayed on the left side of the header. If multiple\n * elements are specified, they are displayed one aside the other.\n */\n leftElements?: [ReactNode, ...ReactNode[]];\n /**\n * Elements that are displayed on the right side of the header. If multiple\n * elements are specified, they are displayed one below the other.\n */\n rightElements?: [ReactNode, ...ReactNode[]];\n /**\n * Images of users should always be displayed in a round shape. Therefore,\n * this property can be set to true.\n */\n shouldShowRoundImage?: boolean;\n /**\n * Subtitle of the `ListItem` displayed in the head below the title\n */\n subtitle?: ReactNode;\n /**\n * Title of the `ListItem` displayed in the head\n */\n title: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n children,\n hoverItem,\n icons,\n images,\n isDefaultOpen,\n isOpen,\n onClick,\n onLongPress,\n leftElements,\n rightElements,\n subtitle,\n shouldShowRoundImage,\n title,\n}) => {\n const {\n incrementExpandableItemCount,\n isAnyItemExpandable,\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n } = useContext(ListContext);\n\n const uuid = useUuid();\n\n const isExpandable = children !== undefined;\n const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n if (isExpandable) {\n updateOpenItemUuid(uuid);\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n },\n [isExpandable, onClick, updateOpenItemUuid, uuid],\n );\n\n useEffect(() => {\n if (isExpandable) {\n // The incrementExpandableItemCount function returns an cleanup\n // function to decrement expandableItemCount if component unmounts\n return incrementExpandableItemCount();\n }\n\n return undefined;\n }, [incrementExpandableItemCount, isExpandable]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n }\n }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n return (\n <StyledMotionListItem\n animate={{ height: 'auto', opacity: 1 }}\n className=\"beta-chayns-list-item\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n key={`list-item-${uuid}`}\n $isClickable={typeof onClick === 'function' || isExpandable}\n $isOpen={isItemOpen}\n $isWrapped={isWrapped}\n >\n <ListItemHead\n hoverItem={hoverItem}\n icons={icons}\n images={images}\n isAnyItemExpandable={isAnyItemExpandable}\n isExpandable={isExpandable}\n isOpen={isItemOpen}\n onClick={handleHeadClick}\n onLongPress={onLongPress}\n leftElements={leftElements}\n rightElements={rightElements}\n subtitle={subtitle}\n shouldShowRoundImage={shouldShowRoundImage}\n title={title}\n />\n <AnimatePresence initial={false}>\n {isExpandable && isItemOpen && <ListItemBody id={uuid}>{children}</ListItemBody>}\n </AnimatePresence>\n </StyledMotionListItem>\n );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAKRC,WAAW,EACXC,UAAU,EACVC,SAAS,QACN,OAAO;AACd,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,WAAW,QAAQ,SAAS;AACrC,OAAOC,YAAY,MAAM,+BAA+B;AACxD,OAAOC,YAAY,MAAM,+BAA+B;AACxD,SAASC,oBAAoB,QAAQ,mBAAmB;AAmExD,MAAMC,QAA2B,GAAGC,IAAA,IAc9B;EAAA,IAd+B;IACjCC,QAAQ;IACRC,SAAS;IACTC,KAAK;IACLC,MAAM;IACNC,aAAa;IACbC,MAAM;IACNC,OAAO;IACPC,WAAW;IACXC,YAAY;IACZC,aAAa;IACbC,QAAQ;IACRC,oBAAoB;IACpBC;EACJ,CAAC,GAAAb,IAAA;EACG,MAAM;IACFc,4BAA4B;IAC5BC,mBAAmB;IACnBC,SAAS;IACTC,YAAY;IACZC;EACJ,CAAC,GAAG1B,UAAU,CAACG,WAAW,CAAC;EAE3B,MAAMwB,IAAI,GAAGzB,OAAO,CAAC,CAAC;EAEtB,MAAM0B,YAAY,GAAGnB,QAAQ,KAAKoB,SAAS;EAC3C,MAAMC,UAAU,GAAGhB,MAAM,IAAIW,YAAY,KAAKE,IAAI;EAElD,MAAMI,eAAe,GAAGhC,WAAW,CAC9BiC,KAAK,IAAK;IACP,IAAIJ,YAAY,EAAE;MACdF,kBAAkB,CAACC,IAAI,CAAC;IAC5B;IAEA,IAAI,OAAOZ,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACiB,KAAK,CAAC;IAClB;EACJ,CAAC,EACD,CAACJ,YAAY,EAAEb,OAAO,EAAEW,kBAAkB,EAAEC,IAAI,CACpD,CAAC;EAED1B,SAAS,CAAC,MAAM;IACZ,IAAI2B,YAAY,EAAE;MACd;MACA;MACA,OAAON,4BAA4B,CAAC,CAAC;IACzC;IAEA,OAAOO,SAAS;EACpB,CAAC,EAAE,CAACP,4BAA4B,EAAEM,YAAY,CAAC,CAAC;EAEhD3B,SAAS,CAAC,MAAM;IACZ,IAAIY,aAAa,EAAE;MACfa,kBAAkB,CAACC,IAAI,EAAE;QAAEM,cAAc,EAAE;MAAK,CAAC,CAAC;IACtD;EACJ,CAAC,EAAE,CAACpB,aAAa,EAAEa,kBAAkB,EAAEC,IAAI,CAAC,CAAC;EAE7C,oBACI7B,KAAA,CAAAoC,aAAA,CAAC5B,oBAAoB;IACjB6B,OAAO,EAAE;MAAEC,MAAM,EAAE,MAAM;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxCC,SAAS,EAAC,uBAAuB;IACjCC,IAAI,EAAE;MAAEH,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChCG,OAAO,EAAE;MAAEJ,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IACnCI,GAAG,EAAG,aAAYd,IAAK,EAAE;IACzBe,YAAY,EAAE,OAAO3B,OAAO,KAAK,UAAU,IAAIa,YAAa;IAC5De,OAAO,EAAEb,UAAW;IACpBc,UAAU,EAAEpB;EAAU,gBAEtB1B,KAAA,CAAAoC,aAAA,CAAC7B,YAAY;IACTK,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfW,mBAAmB,EAAEA,mBAAoB;IACzCK,YAAY,EAAEA,YAAa;IAC3Bd,MAAM,EAAEgB,UAAW;IACnBf,OAAO,EAAEgB,eAAgB;IACzBf,WAAW,EAAEA,WAAY;IACzBC,YAAY,EAAEA,YAAa;IAC3BC,aAAa,EAAEA,aAAc;IAC7BC,QAAQ,EAAEA,QAAS;IACnBC,oBAAoB,EAAEA,oBAAqB;IAC3CC,KAAK,EAAEA;EAAM,CAChB,CAAC,eACFvB,KAAA,CAAAoC,aAAA,CAACrC,eAAe;IAAC2C,OAAO,EAAE;EAAM,GAC3BZ,YAAY,IAAIE,UAAU,iBAAIhC,KAAA,CAAAoC,aAAA,CAAC9B,YAAY;IAACyC,EAAE,EAAElB;EAAK,GAAElB,QAAuB,CAClE,CACC,CAAC;AAE/B,CAAC;AAEDF,QAAQ,CAACuC,WAAW,GAAG,UAAU;AAEjC,eAAevC,QAAQ"}
|
|
@@ -1,9 +1,272 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react" />
|
|
2
3
|
import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';
|
|
3
4
|
type StyledListItemProps = WithTheme<{
|
|
4
5
|
$isClickable: boolean;
|
|
5
6
|
$isOpen: boolean;
|
|
6
7
|
$isWrapped: boolean;
|
|
7
8
|
}>;
|
|
8
|
-
export declare const
|
|
9
|
+
export declare const StyledMotionListItem: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<{
|
|
10
|
+
slot?: string | undefined;
|
|
11
|
+
title?: string | undefined;
|
|
12
|
+
defaultChecked?: boolean | undefined;
|
|
13
|
+
defaultValue?: string | number | readonly string[] | undefined;
|
|
14
|
+
suppressContentEditableWarning?: boolean | undefined;
|
|
15
|
+
suppressHydrationWarning?: boolean | undefined;
|
|
16
|
+
accessKey?: string | undefined;
|
|
17
|
+
autoFocus?: boolean | undefined;
|
|
18
|
+
className?: string | undefined;
|
|
19
|
+
contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
|
|
20
|
+
contextMenu?: string | undefined;
|
|
21
|
+
dir?: string | undefined;
|
|
22
|
+
draggable?: (boolean | "true" | "false") | undefined;
|
|
23
|
+
hidden?: boolean | undefined;
|
|
24
|
+
id?: string | undefined;
|
|
25
|
+
lang?: string | undefined;
|
|
26
|
+
nonce?: string | undefined;
|
|
27
|
+
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
28
|
+
tabIndex?: number | undefined;
|
|
29
|
+
translate?: "yes" | "no" | undefined;
|
|
30
|
+
radioGroup?: string | undefined;
|
|
31
|
+
role?: import("react").AriaRole | undefined;
|
|
32
|
+
about?: string | undefined;
|
|
33
|
+
content?: string | undefined;
|
|
34
|
+
datatype?: string | undefined;
|
|
35
|
+
inlist?: any;
|
|
36
|
+
prefix?: string | undefined;
|
|
37
|
+
property?: string | undefined;
|
|
38
|
+
rel?: string | undefined;
|
|
39
|
+
resource?: string | undefined;
|
|
40
|
+
rev?: string | undefined;
|
|
41
|
+
typeof?: string | undefined;
|
|
42
|
+
vocab?: string | undefined;
|
|
43
|
+
autoCapitalize?: string | undefined;
|
|
44
|
+
autoCorrect?: string | undefined;
|
|
45
|
+
autoSave?: string | undefined;
|
|
46
|
+
color?: string | undefined;
|
|
47
|
+
itemProp?: string | undefined;
|
|
48
|
+
itemScope?: boolean | undefined;
|
|
49
|
+
itemType?: string | undefined;
|
|
50
|
+
itemID?: string | undefined;
|
|
51
|
+
itemRef?: string | undefined;
|
|
52
|
+
results?: number | undefined;
|
|
53
|
+
security?: string | undefined;
|
|
54
|
+
unselectable?: "on" | "off" | undefined;
|
|
55
|
+
inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
|
56
|
+
is?: string | undefined;
|
|
57
|
+
"aria-activedescendant"?: string | undefined;
|
|
58
|
+
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|
|
59
|
+
"aria-autocomplete"?: "list" | "none" | "both" | "inline" | undefined;
|
|
60
|
+
"aria-braillelabel"?: string | undefined;
|
|
61
|
+
"aria-brailleroledescription"?: string | undefined;
|
|
62
|
+
"aria-busy"?: (boolean | "true" | "false") | undefined;
|
|
63
|
+
"aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
|
|
64
|
+
"aria-colcount"?: number | undefined;
|
|
65
|
+
"aria-colindex"?: number | undefined;
|
|
66
|
+
"aria-colindextext"?: string | undefined;
|
|
67
|
+
"aria-colspan"?: number | undefined;
|
|
68
|
+
"aria-controls"?: string | undefined;
|
|
69
|
+
"aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
|
|
70
|
+
"aria-describedby"?: string | undefined;
|
|
71
|
+
"aria-description"?: string | undefined;
|
|
72
|
+
"aria-details"?: string | undefined;
|
|
73
|
+
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
74
|
+
"aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
|
|
75
|
+
"aria-errormessage"?: string | undefined;
|
|
76
|
+
"aria-expanded"?: (boolean | "true" | "false") | undefined;
|
|
77
|
+
"aria-flowto"?: string | undefined;
|
|
78
|
+
"aria-grabbed"?: (boolean | "true" | "false") | undefined;
|
|
79
|
+
"aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
|
|
80
|
+
"aria-hidden"?: (boolean | "true" | "false") | undefined;
|
|
81
|
+
"aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
|
|
82
|
+
"aria-keyshortcuts"?: string | undefined;
|
|
83
|
+
"aria-label"?: string | undefined;
|
|
84
|
+
"aria-labelledby"?: string | undefined;
|
|
85
|
+
"aria-level"?: number | undefined;
|
|
86
|
+
"aria-live"?: "off" | "assertive" | "polite" | undefined;
|
|
87
|
+
"aria-modal"?: (boolean | "true" | "false") | undefined;
|
|
88
|
+
"aria-multiline"?: (boolean | "true" | "false") | undefined;
|
|
89
|
+
"aria-multiselectable"?: (boolean | "true" | "false") | undefined;
|
|
90
|
+
"aria-orientation"?: "horizontal" | "vertical" | undefined;
|
|
91
|
+
"aria-owns"?: string | undefined;
|
|
92
|
+
"aria-placeholder"?: string | undefined;
|
|
93
|
+
"aria-posinset"?: number | undefined;
|
|
94
|
+
"aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
|
|
95
|
+
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
96
|
+
"aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
|
|
97
|
+
"aria-required"?: (boolean | "true" | "false") | undefined;
|
|
98
|
+
"aria-roledescription"?: string | undefined;
|
|
99
|
+
"aria-rowcount"?: number | undefined;
|
|
100
|
+
"aria-rowindex"?: number | undefined;
|
|
101
|
+
"aria-rowindextext"?: string | undefined;
|
|
102
|
+
"aria-rowspan"?: number | undefined;
|
|
103
|
+
"aria-selected"?: (boolean | "true" | "false") | undefined;
|
|
104
|
+
"aria-setsize"?: number | undefined;
|
|
105
|
+
"aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
|
|
106
|
+
"aria-valuemax"?: number | undefined;
|
|
107
|
+
"aria-valuemin"?: number | undefined;
|
|
108
|
+
"aria-valuenow"?: number | undefined;
|
|
109
|
+
"aria-valuetext"?: string | undefined;
|
|
110
|
+
dangerouslySetInnerHTML?: {
|
|
111
|
+
__html: string | TrustedHTML;
|
|
112
|
+
} | undefined;
|
|
113
|
+
onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
114
|
+
onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
115
|
+
onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
116
|
+
onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
117
|
+
onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
118
|
+
onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
119
|
+
onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
120
|
+
onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
121
|
+
onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
122
|
+
onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
123
|
+
onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
124
|
+
onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
125
|
+
onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
126
|
+
onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
127
|
+
onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
128
|
+
onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
129
|
+
onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
130
|
+
onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
131
|
+
onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
132
|
+
onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
133
|
+
onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
134
|
+
onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
135
|
+
onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
136
|
+
onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
137
|
+
onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
138
|
+
onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
139
|
+
onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
140
|
+
onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
141
|
+
onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
142
|
+
onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
143
|
+
onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
144
|
+
onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
145
|
+
onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
146
|
+
onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
147
|
+
onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
148
|
+
onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
149
|
+
onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
150
|
+
onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
151
|
+
onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
152
|
+
onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
153
|
+
onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
154
|
+
onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
155
|
+
onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
156
|
+
onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
157
|
+
onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
158
|
+
onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
159
|
+
onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
160
|
+
onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
161
|
+
onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
162
|
+
onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
163
|
+
onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
164
|
+
onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
165
|
+
onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
166
|
+
onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
167
|
+
onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
168
|
+
onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
169
|
+
onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
170
|
+
onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
171
|
+
onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
172
|
+
onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
173
|
+
onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
174
|
+
onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
175
|
+
onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
176
|
+
onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
177
|
+
onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
178
|
+
onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
179
|
+
onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
180
|
+
onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
181
|
+
onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
182
|
+
onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
183
|
+
onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
184
|
+
onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
185
|
+
onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
186
|
+
onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
187
|
+
onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
188
|
+
onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
189
|
+
onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
190
|
+
onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
191
|
+
onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
192
|
+
onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
193
|
+
onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
194
|
+
onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
195
|
+
onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
196
|
+
onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
197
|
+
onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
198
|
+
onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
199
|
+
onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
200
|
+
onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
201
|
+
onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
202
|
+
onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
203
|
+
onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
204
|
+
onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
205
|
+
onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
206
|
+
onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
207
|
+
onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
208
|
+
onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
209
|
+
onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
210
|
+
onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
211
|
+
onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
212
|
+
onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
213
|
+
onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
214
|
+
onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
215
|
+
onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
216
|
+
onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
217
|
+
onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
218
|
+
onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
219
|
+
onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
220
|
+
onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
221
|
+
onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
222
|
+
onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
223
|
+
onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
224
|
+
onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
225
|
+
onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
226
|
+
onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
227
|
+
onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
228
|
+
onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
229
|
+
onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
230
|
+
onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
231
|
+
onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
232
|
+
onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
233
|
+
onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
234
|
+
onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
235
|
+
onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
236
|
+
onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
237
|
+
onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
238
|
+
onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
239
|
+
onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
240
|
+
onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
241
|
+
onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
242
|
+
onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
243
|
+
onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
244
|
+
onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
245
|
+
onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
246
|
+
onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
247
|
+
onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
248
|
+
onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
249
|
+
onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
250
|
+
onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
251
|
+
onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
252
|
+
onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
253
|
+
onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
254
|
+
onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
255
|
+
onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
256
|
+
onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
257
|
+
onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
258
|
+
onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
259
|
+
onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
260
|
+
onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
|
|
261
|
+
onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
|
|
262
|
+
onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
|
|
263
|
+
onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
|
|
264
|
+
onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
265
|
+
onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
266
|
+
onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
267
|
+
onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
268
|
+
onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
269
|
+
onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
270
|
+
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
271
|
+
} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, StyledListItemProps>> & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
|
|
9
272
|
export {};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import { motion } from 'framer-motion';
|
|
1
2
|
import styled, { css } from 'styled-components';
|
|
2
|
-
export const
|
|
3
|
+
export const StyledMotionListItem = styled(motion.div)`
|
|
3
4
|
${_ref => {
|
|
4
5
|
let {
|
|
5
6
|
$isOpen,
|
|
@@ -10,6 +11,7 @@ export const StyledListItem = styled.div`
|
|
|
10
11
|
`;
|
|
11
12
|
}}
|
|
12
13
|
|
|
14
|
+
overflow: hidden;
|
|
13
15
|
transition: background-color 0.3s ease;
|
|
14
16
|
|
|
15
17
|
${_ref2 => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.styles.js","names":["styled","css","
|
|
1
|
+
{"version":3,"file":"ListItem.styles.js","names":["motion","styled","css","StyledMotionListItem","div","_ref","$isOpen","theme","cardBackgroundOpacity","_ref2","$isClickable","_ref3","accordionLines","headline","_ref4","$isWrapped"],"sources":["../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemProps = WithTheme<{\n $isClickable: boolean;\n $isOpen: boolean;\n $isWrapped: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n ${({ $isOpen, theme }) =>\n $isOpen &&\n css`\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n `}\n\n overflow: hidden;\n transition: background-color 0.3s ease;\n\n ${({ $isClickable, theme }) =>\n $isClickable &&\n css`\n :hover {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n `}\n \n ${({ theme }: StyledListItemProps) =>\n theme.accordionLines &&\n css`\n &:not(:last-child) {\n border-bottom: 1px solid ${theme.headline};\n }\n `}}\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n padding-left: 26px;\n `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,oBAAoB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAuB;AAC5E,MAAMC,IAAA;EAAA,IAAC;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAAF,IAAA;EAAA,OACjBC,OAAO,IACPJ,GAAI;AACZ,qCAAqCK,KAAK,CAAC,SAAS,CAAE,KAAIA,KAAK,CAACC,qBAAsB;AACtF,SAAS;AAAA,CAAC;AACV;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,YAAY;IAAEH;EAAM,CAAC,GAAAE,KAAA;EAAA,OACtBC,YAAY,IACZR,GAAI;AACZ;AACA,yCAAyCK,KAAK,CAAC,SAAS,CAAE,KAAIA,KAAK,CAACC,qBAAsB;AAC1F;AACA,SAAS;AAAA,CAAC;AACV;AACA,MAAMG,KAAA;EAAA,IAAC;IAAEJ;EAA2B,CAAC,GAAAI,KAAA;EAAA,OAC7BJ,KAAK,CAACK,cAAc,IACpBV,GAAI;AACZ;AACA,2CAA2CK,KAAK,CAACM,QAAS;AAC1D;AACA,SAAS;AAAA,CAAC;AACV;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OACbC,UAAU,IACVb,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.489",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"publishConfig": {
|
|
74
74
|
"access": "public"
|
|
75
75
|
},
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "0cb3163ed12d79932c78379215e410074fe4a040"
|
|
77
77
|
}
|