npm - @chayns-components/core - Versions diffs - 5.0.0-beta.516 → 5.0.0-beta.519 - Mend

@chayns-components/core 5.0.0-beta.516 → 5.0.0-beta.519

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/lib/components/list/list-item/ListItem.js CHANGED Viewed

@@ -54,6 +54,7 @@ const ListItem = _ref => {
       });
     }
   }, [isDefaultOpen, updateOpenItemUuid, uuid]);
+  const isClickable = typeof onClick === 'function' || isExpandable;
   return /*#__PURE__*/React.createElement(StyledMotionListItem, {
     animate: {
       height: 'auto',
@@ -69,7 +70,7 @@ const ListItem = _ref => {
       opacity: 0
     },
     key: `list-item-${uuid}`,
-    $isClickable: typeof onClick === 'function' || isExpandable,
+    $isClickable: isClickable,
     $isOpen: isItemOpen,
     $isWrapped: isWrapped
   }, /*#__PURE__*/React.createElement(ListItemHead, {
@@ -79,7 +80,7 @@ const ListItem = _ref => {
     isAnyItemExpandable: isAnyItemExpandable,
     isExpandable: isExpandable,
     isOpen: isItemOpen,
-    onClick: handleHeadClick,
+    onClick: isClickable ? handleHeadClick : undefined,
     onLongPress: onLongPress,
     leftElements: leftElements,
     rightElements: rightElements,

package/lib/components/list/list-item/ListItem.js.map CHANGED Viewed

	@@ -1 +1 @@
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\nexport type 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	+ {"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","isClickable","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\nexport type 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 const isClickable = typeof onClick === 'function' \|\| isExpandable;\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={isClickable}\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={isClickable ? handleHeadClick : undefined}\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":"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"}

package/lib/components/list/list-item/list-item-head/ListItemHead.js CHANGED Viewed

@@ -50,6 +50,7 @@ const ListItemHead = _ref => {
   return /*#__PURE__*/React.createElement(StyledListItemHead, {
     className: "beta-chayns-list-item-head",
     $isClickable: typeof onClick === 'function' || isExpandable,
+    $isAnyItemExpandable: isAnyItemExpandable,
     onClick: onClick,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,

package/lib/components/list/list-item/list-item-head/ListItemHead.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemHead.js","names":["React","useCallback","useMemo","useRef","useState","Icon","ListItemIcon","ListItemImage","StyledListItemHead","StyledListItemHeadBottomRightElement","StyledListItemHeadContent","StyledListItemHeadRightElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadTitle","StyledListItemHeadTitleText","StyledListItemHeadTopRightElement","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadIndicator","ListItemHead","_ref","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","onClick","onLongPress","rightElements","subtitle","shouldShowRoundImage","title","leftElements","shouldShowHoverItem","setShouldShowHoverItem","longPressTimeoutRef","handleMouseEnter","handleMouseLeave","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","undefined","className","$isClickable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","animate","rotate","initial","transition","type","$isIconOrImageGiven","$isOpen","length","marginLeft","opacity","width","duration","displayName"],"sources":["../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport {\n StyledListItemHead,\n StyledListItemHeadBottomRightElement,\n StyledListItemHeadContent,\n StyledListItemHeadRightElement,\n StyledListItemHeadSubtitle,\n StyledListItemHeadSubtitleText,\n StyledListItemHeadTitle,\n StyledListItemHeadTitleText,\n StyledListItemHeadTopRightElement,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ntype ListItemHeadProps = {\n hoverItem?: ReactNode;\n icons?: string[];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: [ReactNode, ...ReactNode[]];\n subtitle?: ReactNode;\n leftElements?: ReactNode;\n shouldShowRoundImage?: boolean;\n title: ReactNode;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n hoverItem,\n icons,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n onClick,\n onLongPress,\n rightElements,\n subtitle,\n shouldShowRoundImage,\n title,\n leftElements,\n}) => {\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n\n const longPressTimeoutRef = useRef<number>();\n\n const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n (event) => {\n longPressTimeoutRef.current = window.setTimeout(() => {\n if (typeof onLongPress === 'function') {\n onLongPress(event);\n }\n }, 400);\n },\n [onLongPress],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(longPressTimeoutRef.current);\n }, []);\n\n const iconOrImageElement = useMemo(() => {\n if (icons) {\n return <ListItemIcon icons={icons} />;\n }\n\n if (images) {\n return <ListItemImage images={images} shouldShowRoundImage={!!shouldShowRoundImage} />;\n }\n\n return undefined;\n }, [icons, images, shouldShowRoundImage]);\n\n return (\n <StyledListItemHead\n className=\"beta-chayns-list-item-head\"\n $isClickable={typeof onClick === 'function' \|\| isExpandable}\n onClick={onClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n >\n {isAnyItemExpandable && (\n <StyledMotionListItemHeadIndicator\n animate={{ rotate: isOpen ? 90 : 0 }}\n initial={false}\n transition={{ type: 'tween' }}\n >\n {isExpandable && <Icon icons={['fa fa-chevron-right']} />}\n </StyledMotionListItemHeadIndicator>\n )}\n {leftElements}\n {iconOrImageElement}\n <StyledListItemHeadContent\n $isIconOrImageGiven={iconOrImageElement !== undefined}\n $isOpen={isOpen}\n >\n <StyledListItemHeadTitle>\n <StyledListItemHeadTitleText className=\"ellipsis\">\n {title}\n </StyledListItemHeadTitleText>\n {rightElements && rightElements.length > 1 && rightElements[0] && (\n <StyledListItemHeadTopRightElement>\n {rightElements[0]}\n </StyledListItemHeadTopRightElement>\n )}\n </StyledListItemHeadTitle>\n {subtitle && (\n <StyledListItemHeadSubtitle>\n <StyledListItemHeadSubtitleText className=\"ellipsis\">\n {subtitle}\n </StyledListItemHeadSubtitleText>\n {rightElements && rightElements.length > 1 && rightElements[1] && (\n <StyledListItemHeadBottomRightElement>\n {rightElements[1]}\n </StyledListItemHeadBottomRightElement>\n )}\n </StyledListItemHeadSubtitle>\n )}\n </StyledListItemHeadContent>\n {rightElements?.length === 1 && (\n <StyledListItemHeadRightElement>{rightElements[0]}</StyledListItemHeadRightElement>\n )}\n {hoverItem && (\n <StyledMotionListItemHeadHoverItem\n animate={{\n marginLeft: shouldShowHoverItem ? 8 : 0,\n opacity: shouldShowHoverItem ? 1 : 0,\n width: shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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"}
1	+ {"version":3,"file":"ListItemHead.js","names":["React","useCallback","useMemo","useRef","useState","Icon","ListItemIcon","ListItemImage","StyledListItemHead","StyledListItemHeadBottomRightElement","StyledListItemHeadContent","StyledListItemHeadRightElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadTitle","StyledListItemHeadTitleText","StyledListItemHeadTopRightElement","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadIndicator","ListItemHead","_ref","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","onClick","onLongPress","rightElements","subtitle","shouldShowRoundImage","title","leftElements","shouldShowHoverItem","setShouldShowHoverItem","longPressTimeoutRef","handleMouseEnter","handleMouseLeave","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","undefined","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","animate","rotate","initial","transition","type","$isIconOrImageGiven","$isOpen","length","marginLeft","opacity","width","duration","displayName"],"sources":["../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n FC,\n MouseEventHandler,\n ReactNode,\n TouchEventHandler,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport {\n StyledListItemHead,\n StyledListItemHeadBottomRightElement,\n StyledListItemHeadContent,\n StyledListItemHeadRightElement,\n StyledListItemHeadSubtitle,\n StyledListItemHeadSubtitleText,\n StyledListItemHeadTitle,\n StyledListItemHeadTitleText,\n StyledListItemHeadTopRightElement,\n StyledMotionListItemHeadHoverItem,\n StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ntype ListItemHeadProps = {\n hoverItem?: ReactNode;\n icons?: string[];\n images?: string[];\n isAnyItemExpandable: boolean;\n isExpandable: boolean;\n isOpen: boolean;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n rightElements?: [ReactNode, ...ReactNode[]];\n subtitle?: ReactNode;\n leftElements?: ReactNode;\n shouldShowRoundImage?: boolean;\n title: ReactNode;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n hoverItem,\n icons,\n images,\n isAnyItemExpandable,\n isExpandable,\n isOpen,\n onClick,\n onLongPress,\n rightElements,\n subtitle,\n shouldShowRoundImage,\n title,\n leftElements,\n}) => {\n const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n\n const longPressTimeoutRef = useRef<number>();\n\n const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n (event) => {\n longPressTimeoutRef.current = window.setTimeout(() => {\n if (typeof onLongPress === 'function') {\n onLongPress(event);\n }\n }, 400);\n },\n [onLongPress],\n );\n\n const handleTouchEnd = useCallback(() => {\n clearTimeout(longPressTimeoutRef.current);\n }, []);\n\n const iconOrImageElement = useMemo(() => {\n if (icons) {\n return <ListItemIcon icons={icons} />;\n }\n\n if (images) {\n return <ListItemImage images={images} shouldShowRoundImage={!!shouldShowRoundImage} />;\n }\n\n return undefined;\n }, [icons, images, shouldShowRoundImage]);\n\n return (\n <StyledListItemHead\n className=\"beta-chayns-list-item-head\"\n $isClickable={typeof onClick === 'function' \|\| isExpandable}\n $isAnyItemExpandable={isAnyItemExpandable}\n onClick={onClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n >\n {isAnyItemExpandable && (\n <StyledMotionListItemHeadIndicator\n animate={{ rotate: isOpen ? 90 : 0 }}\n initial={false}\n transition={{ type: 'tween' }}\n >\n {isExpandable && <Icon icons={['fa fa-chevron-right']} />}\n </StyledMotionListItemHeadIndicator>\n )}\n {leftElements}\n {iconOrImageElement}\n <StyledListItemHeadContent\n $isIconOrImageGiven={iconOrImageElement !== undefined}\n $isOpen={isOpen}\n >\n <StyledListItemHeadTitle>\n <StyledListItemHeadTitleText className=\"ellipsis\">\n {title}\n </StyledListItemHeadTitleText>\n {rightElements && rightElements.length > 1 && rightElements[0] && (\n <StyledListItemHeadTopRightElement>\n {rightElements[0]}\n </StyledListItemHeadTopRightElement>\n )}\n </StyledListItemHeadTitle>\n {subtitle && (\n <StyledListItemHeadSubtitle>\n <StyledListItemHeadSubtitleText className=\"ellipsis\">\n {subtitle}\n </StyledListItemHeadSubtitleText>\n {rightElements && rightElements.length > 1 && rightElements[1] && (\n <StyledListItemHeadBottomRightElement>\n {rightElements[1]}\n </StyledListItemHeadBottomRightElement>\n )}\n </StyledListItemHeadSubtitle>\n )}\n </StyledListItemHeadContent>\n {rightElements?.length === 1 && (\n <StyledListItemHeadRightElement>{rightElements[0]}</StyledListItemHeadRightElement>\n )}\n {hoverItem && (\n <StyledMotionListItemHeadHoverItem\n animate={{\n marginLeft: shouldShowHoverItem ? 8 : 0,\n opacity: shouldShowHoverItem ? 1 : 0,\n width: shouldShowHoverItem ? 'auto' : 0,\n }}\n initial={false}\n transition={{ duration: 0.15, type: 'tween' }}\n >\n {hoverItem}\n </StyledMotionListItemHeadHoverItem>\n )}\n </StyledListItemHead>\n );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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"}

package/lib/components/list/list-item/list-item-head/ListItemHead.styles.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@
 import type { WithTheme } from '../../../color-scheme-provider/ColorSchemeProvider';
 type StyledListItemHeadProps = WithTheme<{
     $isClickable: boolean;
+    $isAnyItemExpandable: boolean;
 }>;
 export declare const StyledListItemHead: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledListItemHeadProps>>;
 export declare const StyledMotionListItemHeadIndicator: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<{

package/lib/components/list/list-item/list-item-head/ListItemHead.styles.js CHANGED Viewed

@@ -14,8 +14,17 @@ export const StyledListItemHead = styled.div`
     ${_ref2 => {
   let {
-    $isClickable
+    $isAnyItemExpandable
   } = _ref2;
+  return !$isAnyItemExpandable && css`
+            padding-left: 12px;
+        `;
+}}
+    ${_ref3 => {
+  let {
+    $isClickable
+  } = _ref3;
   return $isClickable && css`
             cursor: pointer;
         `;
@@ -33,18 +42,18 @@ export const StyledListItemHeadContent = styled.div`
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
-    font-weight: ${_ref3 => {
+    font-weight: ${_ref4 => {
   let {
     $isOpen
-  } = _ref3;
+  } = _ref4;
   return $isOpen ? 'bold' : 'normal';
 }};
     justify-content: center;
     line-height: normal;
-    margin-left: ${_ref4 => {
+    margin-left: ${_ref5 => {
   let {
     $isIconOrImageGiven
-  } = _ref4;
+  } = _ref5;
   return $isIconOrImageGiven ? '10px' : undefined;
 }};
     min-width: 0;

package/lib/components/list/list-item/list-item-head/ListItemHead.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemHead.styles.js","names":["motion","styled","css","StyledListItemHead","div","_ref","theme","text","_ref2","$isClickable","StyledMotionListItemHeadIndicator","StyledListItemHeadContent","~~_ref3~~","$isOpen","~~_ref4~~","$isIconOrImageGiven","undefined","StyledListItemHeadTitle","StyledListItemHeadTitleText","span","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadTopRightElement","StyledListItemHeadBottomRightElement","StyledListItemHeadRightElement","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type {\n FramerMotionBugFix,\n WithTheme,\n} from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = WithTheme<{\n $isClickable: boolean;\n}>;\n\nexport const StyledListItemHead = styled.div<StyledListItemHeadProps>`\n align-items: center;\n color: ${({ theme }: StyledListItemHeadProps) => theme.text};\n display: flex;\n height: 64px;\n padding: 12px 9px;\n\n ${({ $isClickable }) =>\n $isClickable &&\n css`\n cursor: pointer;\n `}\n`;\n\nexport const StyledMotionListItemHeadIndicator = styled(motion.div)<FramerMotionBugFix>`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n height: 26px;\n justify-content: center;\n width: 26px;\n`;\n\ntype StyledListItemHeadContentProps = {\n $isIconOrImageGiven: boolean;\n $isOpen: boolean;\n};\n\nexport const StyledListItemHeadContent = styled.div<StyledListItemHeadContentProps>`\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n justify-content: center;\n line-height: normal;\n margin-left: ${({ $isIconOrImageGiven }) => ($isIconOrImageGiven ? '10px' : undefined)};\n min-width: 0;\n`;\n\nexport const StyledListItemHeadTitle = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n`;\n\nexport const StyledListItemHeadTitleText = styled.span`\n flex: 1 1 auto;\n min-width: 0;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-top: 2px;\n opacity: 0.75;\n`;\n\nexport const StyledListItemHeadSubtitleText = styled.span`\n flex: 1 1 auto;\n font-size: 85%;\n min-width: 0;\n`;\n\nexport const StyledListItemHeadTopRightElement = styled.div`\n flex: 0 0 auto;\n font-size: 85%;\n margin-left: 8px;\n opacity: 0.75;\n`;\n\nexport const StyledListItemHeadBottomRightElement = styled.div`\n flex: 0 0 auto;\n margin-left: 8px;\n font-size: 85%;\n`;\n\nexport const StyledListItemHeadRightElement = styled.div`\n flex: 0 0 auto;\n margin-left: 8px;\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled(motion.div)<FramerMotionBugFix>`\n overflow: hidden;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;~~AAU~~/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA6B;AACtE;AACA,aAAaC,IAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA,CAAC;AAChE;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OACfC,YAAY,~~IACZP~~,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAED,OAAO,~~MAAMQ~~,iCAAiC,~~GAAGT~~,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AACxF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,~~MAAMO~~,yBAAyB,~~GAAGV~~,MAAM,CAACG,GAAoC;AACpF;AACA;AACA;AACA,~~mBAAmBQ~~,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OAAMC,OAAO,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAE;AAClE;AACA;AACA,mBAAmBC,KAAA;EAAA,IAAC;IAAEC;EAAoB,CAAC,GAAAD,KAAA;EAAA,OAAMC,mBAAmB,GAAG,MAAM,GAAGC,SAAS;AAAA,CAAE;AAC3F;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,~~GAAGhB~~,MAAM,CAACG,GAAI;AAClD;AACA;AACA;AACA,CAAC;AAED,OAAO,~~MAAMc~~,2BAA2B,~~GAAGjB~~,MAAM,~~CAACkB~~,IAAK;AACvD;AACA;AACA,CAAC;AAED,OAAO,MAAMC,0BAA0B,~~GAAGnB~~,MAAM,CAACG,GAAI;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,~~MAAMiB~~,8BAA8B,~~GAAGpB~~,MAAM,~~CAACkB~~,IAAK;AAC1D;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMG,iCAAiC,~~GAAGrB~~,MAAM,CAACG,GAAI;AAC5D;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,~~MAAMmB~~,oCAAoC,~~GAAGtB~~,MAAM,CAACG,GAAI;AAC/D;AACA;AACA;AACA,CAAC;AAED,OAAO,~~MAAMoB~~,8BAA8B,~~GAAGvB~~,MAAM,CAACG,GAAI;AACzD;AACA;AACA,CAAC;AAED,OAAO,~~MAAMqB~~,iCAAiC,~~GAAGxB~~,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AACxF;AACA,CAAC"}
1	+ {"version":3,"file":"ListItemHead.styles.js","names":["motion","styled","css","StyledListItemHead","div","_ref","theme","text","_ref2","$isAnyItemExpandable","_ref3","$isClickable","StyledMotionListItemHeadIndicator","StyledListItemHeadContent","_ref4","$isOpen","_ref5","$isIconOrImageGiven","undefined","StyledListItemHeadTitle","StyledListItemHeadTitleText","span","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadTopRightElement","StyledListItemHeadBottomRightElement","StyledListItemHeadRightElement","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type {\n FramerMotionBugFix,\n WithTheme,\n} from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = WithTheme<{\n $isClickable: boolean;\n $isAnyItemExpandable: boolean;\n}>;\n\nexport const StyledListItemHead = styled.div<StyledListItemHeadProps>`\n align-items: center;\n color: ${({ theme }: StyledListItemHeadProps) => theme.text};\n display: flex;\n height: 64px;\n padding: 12px 9px;\n\n ${({ $isAnyItemExpandable }) =>\n !$isAnyItemExpandable &&\n css`\n padding-left: 12px;\n `}\n\n ${({ $isClickable }) =>\n $isClickable &&\n css`\n cursor: pointer;\n `}\n`;\n\nexport const StyledMotionListItemHeadIndicator = styled(motion.div)<FramerMotionBugFix>`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n height: 26px;\n justify-content: center;\n width: 26px;\n`;\n\ntype StyledListItemHeadContentProps = {\n $isIconOrImageGiven: boolean;\n $isOpen: boolean;\n};\n\nexport const StyledListItemHeadContent = styled.div<StyledListItemHeadContentProps>`\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n justify-content: center;\n line-height: normal;\n margin-left: ${({ $isIconOrImageGiven }) => ($isIconOrImageGiven ? '10px' : undefined)};\n min-width: 0;\n`;\n\nexport const StyledListItemHeadTitle = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n`;\n\nexport const StyledListItemHeadTitleText = styled.span`\n flex: 1 1 auto;\n min-width: 0;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-top: 2px;\n opacity: 0.75;\n`;\n\nexport const StyledListItemHeadSubtitleText = styled.span`\n flex: 1 1 auto;\n font-size: 85%;\n min-width: 0;\n`;\n\nexport const StyledListItemHeadTopRightElement = styled.div`\n flex: 0 0 auto;\n font-size: 85%;\n margin-left: 8px;\n opacity: 0.75;\n`;\n\nexport const StyledListItemHeadBottomRightElement = styled.div`\n flex: 0 0 auto;\n margin-left: 8px;\n font-size: 85%;\n`;\n\nexport const StyledListItemHeadRightElement = styled.div`\n flex: 0 0 auto;\n margin-left: 8px;\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled(motion.div)<FramerMotionBugFix>`\n overflow: hidden;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAW/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA6B;AACtE;AACA,aAAaC,IAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA,CAAC;AAChE;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OACvB,CAACC,oBAAoB,IACrBP,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV;AACA,MAAMQ,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OACfC,YAAY,IACZT,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAED,OAAO,MAAMU,iCAAiC,GAAGX,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AACxF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMS,yBAAyB,GAAGZ,MAAM,CAACG,GAAoC;AACpF;AACA;AACA;AACA,mBAAmBU,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OAAMC,OAAO,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAE;AAClE;AACA;AACA,mBAAmBC,KAAA;EAAA,IAAC;IAAEC;EAAoB,CAAC,GAAAD,KAAA;EAAA,OAAMC,mBAAmB,GAAG,MAAM,GAAGC,SAAS;AAAA,CAAE;AAC3F;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGlB,MAAM,CAACG,GAAI;AAClD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMgB,2BAA2B,GAAGnB,MAAM,CAACoB,IAAK;AACvD;AACA;AACA,CAAC;AAED,OAAO,MAAMC,0BAA0B,GAAGrB,MAAM,CAACG,GAAI;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMmB,8BAA8B,GAAGtB,MAAM,CAACoB,IAAK;AAC1D;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMG,iCAAiC,GAAGvB,MAAM,CAACG,GAAI;AAC5D;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMqB,oCAAoC,GAAGxB,MAAM,CAACG,GAAI;AAC/D;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMsB,8BAA8B,GAAGzB,MAAM,CAACG,GAAI;AACzD;AACA;AACA,CAAC;AAED,OAAO,MAAMuB,iCAAiC,GAAG1B,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AACxF;AACA,CAAC"}

package/lib/components/slider-button/SliderButton.js CHANGED Viewed

@@ -17,13 +17,6 @@ const SliderButton = _ref => {
   });
   const sliderButtonRef = useRef(null);
   const [scope, animate] = useAnimate();
-  useEffect(() => {
-    if (selectedButtonId) {
-      setSelectedButton(selectedButtonId);
-    } else {
-      setSelectedButton(items[0]?.id);
-    }
-  }, [items, selectedButtonId]);
   const itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);
   useEffect(() => {
     if (sliderButtonRef.current) {
@@ -41,6 +34,22 @@ const SliderButton = _ref => {
       duration: 0.2
     });
   }, [animate, scope]);
+  useEffect(() => {
+    if (selectedButtonId) {
+      setSelectedButton(selectedButtonId);
+      const index = items.findIndex(_ref2 => {
+        let {
+          id
+        } = _ref2;
+        return id === selectedButtonId;
+      });
+      if (index >= 0) {
+        void animation(itemWidth * index);
+      }
+    } else {
+      setSelectedButton(items[0]?.id);
+    }
+  }, [animation, itemWidth, items, selectedButtonId]);
   const handleClick = useCallback((id, index) => {
     if (isDisabled) {
       return;
@@ -53,11 +62,11 @@ const SliderButton = _ref => {
   }, [animation, isDisabled, itemWidth, onChange]);
   const buttons = useMemo(() => {
     const list = [];
-    items.forEach((_ref2, index) => {
+    items.forEach((_ref3, index) => {
       let {
         id,
         text
-      } = _ref2;
+      } = _ref3;
       list.push( /*#__PURE__*/React.createElement(StyledSliderButtonItem, {
         $width: itemWidth,
         key: `slider-button-${id}`,
@@ -68,10 +77,10 @@ const SliderButton = _ref => {
     return list;
   }, [handleClick, itemWidth, items, selectedButton]);
   const thumbText = useMemo(() => {
-    const selectedItem = items.find(_ref3 => {
+    const selectedItem = items.find(_ref4 => {
       let {
         id
-      } = _ref3;
+      } = _ref4;
       return id === selectedButton;
     });
     return selectedItem ? selectedItem.text : '';

package/lib/components/slider-button/SliderButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderButton.js","names":["AnimatePresence","useAnimate","React","useCallback","useEffect","useMemo","useRef","useState","calculateBiggestWidth","getNearestPoint","getThumbPosition","StyledMotionSliderButtonThumb","StyledSliderButton","StyledSliderButtonItem","SliderButton","_ref","selectedButtonId","isDisabled","items","onChange","selectedButton","setSelectedButton","undefined","dragRange","setDragRange","left","right","sliderButtonRef","scope","animate","id","itemWidth","current","offsetWidth","animation","x","type","duration","handleClick","index","buttons","list","forEach","_ref2","text","push","createElement","$width","key","onClick","$isSelected","thumbText","selectedItem","find","_ref3","snapPoints","points","i","length","handleDragEnd","position","nearestPoint","nearestIndex","handleWhileDrag","$isDisabled","ref","drag","dragElastic","dragConstraints","onDrag","onDragEnd","displayName"],"sources":["../../../src/components/slider-button/SliderButton.tsx"],"sourcesContent":["import { AnimatePresence, useAnimate } from 'framer-motion';\nimport React, {\n FC,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type ReactElement,\n} from 'react';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\nimport {\n StyledMotionSliderButtonThumb,\n StyledSliderButton,\n StyledSliderButtonItem,\n} from './SliderButton.styles';\n\nexport type SliderButtonProps = {\n /*\n Whether the button is disabled.\n /\n isDisabled?: boolean;\n /\n Function to be executed when a button is selected.\n * @param id\n /\n onChange?: (id: string) => void;\n /\n The buttons that are slidable.\n /\n items: SliderButtonItem[];\n /\n The id of a button that should be selected.\n /\n selectedButtonId?: string;\n};\n\nconst SliderButton: FC<SliderButtonProps> = ({ selectedButtonId, isDisabled, items, onChange }) => {\n const [selectedButton, setSelectedButton] = useState<string \| undefined>(undefined);\n const [dragRange, setDragRange] = useState({ left: 0, right: 0 });\n\n const sliderButtonRef = useRef<HTMLDivElement>(null);\n\n const [scope, animate] = useAnimate();\n\n useEffect(() => {\n if (selectedButtonId) {\n setSelectedButton(selectedButtonId);\n } else {\n setSelectedButton(items[0]?.id);\n }\n }, [items, selectedButtonId]);\n\n const itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n\n useEffect(() => {\n if (sliderButtonRef.current) {\n setDragRange({ left: 0, right: sliderButtonRef.current.offsetWidth - itemWidth });\n }\n }, [itemWidth]);\n\n const animation = useCallback(\n async (x: number) => {\n await animate(\n scope.current,\n { x },\n {\n type: 'tween',\n duration: 0.2,\n },\n );\n },\n [animate, scope],\n );\n\n const handleClick = useCallback(\n (id: string, index: number) => {\n if (isDisabled) {\n return;\n }\n\n setSelectedButton(id);\n\n if (typeof onChange === 'function') {\n onChange(id);\n }\n\n void animation(itemWidth index);\n },\n [animation, isDisabled, itemWidth, onChange],\n );\n\n const buttons = useMemo(() => {\n const list: ReactElement[] = [];\n\n items.forEach(({ id, text }, index) => {\n list.push(\n <StyledSliderButtonItem\n $width={itemWidth}\n key={`slider-button-${id}`}\n onClick={() => handleClick(id, index)}\n $isSelected={id === selectedButton}\n >\n {text}\n </StyledSliderButtonItem>,\n );\n });\n\n return list;\n }, [handleClick, itemWidth, items, selectedButton]);\n\n const thumbText = useMemo(() => {\n const selectedItem = items.find(({ id }) => id === selectedButton);\n\n return selectedItem ? selectedItem.text : '';\n }, [items, selectedButton]);\n\n /*\n Creates an array with the snap points relative to the width of the items\n /\n const snapPoints = useMemo(() => {\n const points = [0];\n\n for (let i = 1; i < items.length; i++) {\n points.push(itemWidth i);\n }\n\n return points;\n }, [itemWidth, items.length]);\n\n const handleDragEnd = useCallback(() => {\n const position = getThumbPosition({ scope, itemWidth });\n\n if (!position) {\n return;\n }\n\n const { nearestPoint, nearestIndex } = getNearestPoint({ snapPoints, position });\n\n if (nearestPoint >= 0 && nearestIndex >= 0) {\n void animation(nearestPoint);\n\n const id = items[nearestIndex]?.id;\n\n if (typeof onChange === 'function' && id) {\n onChange(id);\n }\n }\n }, [animation, itemWidth, items, onChange, scope, snapPoints]);\n\n const handleWhileDrag = useCallback(() => {\n const position = getThumbPosition({ scope, itemWidth });\n\n if (!position) {\n return;\n }\n\n const { nearestIndex } = getNearestPoint({ snapPoints, position });\n\n if (nearestIndex >= 0) {\n setSelectedButton(items[nearestIndex]?.id);\n }\n }, [itemWidth, items, scope, snapPoints]);\n\n return useMemo(\n () => (\n <StyledSliderButton $isDisabled={isDisabled} ref={sliderButtonRef}>\n <AnimatePresence>\n {buttons}\n <StyledMotionSliderButtonThumb\n ref={scope}\n drag={isDisabled ? false : 'x'}\n dragElastic={0}\n dragConstraints={{ ...dragRange }}\n $width={itemWidth}\n onDrag={handleWhileDrag}\n onDragEnd={handleDragEnd}\n >\n {thumbText}\n </StyledMotionSliderButtonThumb>\n </AnimatePresence>\n </StyledSliderButton>\n ),\n [\n buttons,\n dragRange,\n handleDragEnd,\n handleWhileDrag,\n isDisabled,\n itemWidth,\n scope,\n thumbText,\n ],\n );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"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"}
1	+ {"version":3,"file":"SliderButton.js","names":["AnimatePresence","useAnimate","React","useCallback","useEffect","useMemo","useRef","useState","calculateBiggestWidth","getNearestPoint","getThumbPosition","StyledMotionSliderButtonThumb","StyledSliderButton","StyledSliderButtonItem","SliderButton","_ref","selectedButtonId","isDisabled","items","onChange","selectedButton","setSelectedButton","undefined","dragRange","setDragRange","left","right","sliderButtonRef","scope","animate","itemWidth","current","offsetWidth","animation","x","type","duration","index","findIndex","_ref2","id","handleClick","buttons","list","forEach","_ref3","text","push","createElement","$width","key","onClick","$isSelected","thumbText","selectedItem","find","_ref4","snapPoints","points","i","length","handleDragEnd","position","nearestPoint","nearestIndex","handleWhileDrag","$isDisabled","ref","drag","dragElastic","dragConstraints","onDrag","onDragEnd","displayName"],"sources":["../../../src/components/slider-button/SliderButton.tsx"],"sourcesContent":["import { AnimatePresence, useAnimate } from 'framer-motion';\nimport React, {\n FC,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type ReactElement,\n} from 'react';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\nimport {\n StyledMotionSliderButtonThumb,\n StyledSliderButton,\n StyledSliderButtonItem,\n} from './SliderButton.styles';\n\nexport type SliderButtonProps = {\n /*\n Whether the button is disabled.\n /\n isDisabled?: boolean;\n /\n Function to be executed when a button is selected.\n * @param id\n /\n onChange?: (id: string) => void;\n /\n The buttons that are slidable.\n /\n items: SliderButtonItem[];\n /\n The id of a button that should be selected.\n /\n selectedButtonId?: string;\n};\n\nconst SliderButton: FC<SliderButtonProps> = ({ selectedButtonId, isDisabled, items, onChange }) => {\n const [selectedButton, setSelectedButton] = useState<string \| undefined>(undefined);\n const [dragRange, setDragRange] = useState({ left: 0, right: 0 });\n\n const sliderButtonRef = useRef<HTMLDivElement>(null);\n\n const [scope, animate] = useAnimate();\n\n const itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n\n useEffect(() => {\n if (sliderButtonRef.current) {\n setDragRange({ left: 0, right: sliderButtonRef.current.offsetWidth - itemWidth });\n }\n }, [itemWidth]);\n\n const animation = useCallback(\n async (x: number) => {\n await animate(\n scope.current,\n { x },\n {\n type: 'tween',\n duration: 0.2,\n },\n );\n },\n [animate, scope],\n );\n\n useEffect(() => {\n if (selectedButtonId) {\n setSelectedButton(selectedButtonId);\n\n const index = items.findIndex(({ id }) => id === selectedButtonId);\n\n if (index >= 0) {\n void animation(itemWidth index);\n }\n } else {\n setSelectedButton(items[0]?.id);\n }\n }, [animation, itemWidth, items, selectedButtonId]);\n\n const handleClick = useCallback(\n (id: string, index: number) => {\n if (isDisabled) {\n return;\n }\n\n setSelectedButton(id);\n\n if (typeof onChange === 'function') {\n onChange(id);\n }\n\n void animation(itemWidth * index);\n },\n [animation, isDisabled, itemWidth, onChange],\n );\n\n const buttons = useMemo(() => {\n const list: ReactElement[] = [];\n\n items.forEach(({ id, text }, index) => {\n list.push(\n <StyledSliderButtonItem\n $width={itemWidth}\n key={`slider-button-${id}`}\n onClick={() => handleClick(id, index)}\n $isSelected={id === selectedButton}\n >\n {text}\n </StyledSliderButtonItem>,\n );\n });\n\n return list;\n }, [handleClick, itemWidth, items, selectedButton]);\n\n const thumbText = useMemo(() => {\n const selectedItem = items.find(({ id }) => id === selectedButton);\n\n return selectedItem ? selectedItem.text : '';\n }, [items, selectedButton]);\n\n /*\n Creates an array with the snap points relative to the width of the items\n /\n const snapPoints = useMemo(() => {\n const points = [0];\n\n for (let i = 1; i < items.length; i++) {\n points.push(itemWidth i);\n }\n\n return points;\n }, [itemWidth, items.length]);\n\n const handleDragEnd = useCallback(() => {\n const position = getThumbPosition({ scope, itemWidth });\n\n if (!position) {\n return;\n }\n\n const { nearestPoint, nearestIndex } = getNearestPoint({ snapPoints, position });\n\n if (nearestPoint >= 0 && nearestIndex >= 0) {\n void animation(nearestPoint);\n\n const id = items[nearestIndex]?.id;\n\n if (typeof onChange === 'function' && id) {\n onChange(id);\n }\n }\n }, [animation, itemWidth, items, onChange, scope, snapPoints]);\n\n const handleWhileDrag = useCallback(() => {\n const position = getThumbPosition({ scope, itemWidth });\n\n if (!position) {\n return;\n }\n\n const { nearestIndex } = getNearestPoint({ snapPoints, position });\n\n if (nearestIndex >= 0) {\n setSelectedButton(items[nearestIndex]?.id);\n }\n }, [itemWidth, items, scope, snapPoints]);\n\n return useMemo(\n () => (\n <StyledSliderButton $isDisabled={isDisabled} ref={sliderButtonRef}>\n <AnimatePresence>\n {buttons}\n <StyledMotionSliderButtonThumb\n ref={scope}\n drag={isDisabled ? false : 'x'}\n dragElastic={0}\n dragConstraints={{ ...dragRange }}\n $width={itemWidth}\n onDrag={handleWhileDrag}\n onDragEnd={handleDragEnd}\n >\n {thumbText}\n </StyledMotionSliderButtonThumb>\n </AnimatePresence>\n </StyledSliderButton>\n ),\n [\n buttons,\n dragRange,\n handleDragEnd,\n handleWhileDrag,\n isDisabled,\n itemWidth,\n scope,\n thumbText,\n ],\n );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.516",
+    "version": "5.0.0-beta.519",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -73,5 +73,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "55bdb4af35ab87bd63fa6d960be0fc1d48baba6c"
+    "gitHead": "bac868dc6109d2afe6951c66dbc1a33457de959d"
 }