@chayns-components/core 5.0.0-beta.816 → 5.0.0-beta.822

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.
@@ -19,6 +19,7 @@ const StyledMotionContextMenuContent = exports.StyledMotionContextMenuContent =
19
19
  color: ${({
20
20
  theme
21
21
  }) => theme.text};
22
+ pointer-events: all;
22
23
  position: absolute;
23
24
  z-index: 10;
24
25
 
@@ -1 +1 @@
1
- {"version":3,"file":"ContextMenuContent.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_contextMenu","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionContextMenuContent","exports","styled","motion","div","theme","text","$position","ContextMenuAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","TopCenter","BottomCenter","undefined","StyledContextMenuContentItem","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { ContextMenuAlignment } from '../../../types/contextMenu';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n $position: ContextMenuAlignment;\n}>;\n\nexport const StyledMotionContextMenuContent = styled(\n motion.div,\n)<StyledMotionContextMenuContentProps>`\n background-color: ${({ theme }: StyledMotionContextMenuContentProps) => theme['001']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n position: absolute;\n z-index: 10;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ $position }) => {\n switch ($position) {\n case ContextMenuAlignment.TopLeft:\n return css`\n bottom: -7px;\n right: 7px;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomLeft:\n return css`\n top: -7px;\n right: 7px;\n transform: rotate(225deg);\n `;\n case ContextMenuAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: 7px;\n `;\n case ContextMenuAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 7px;\n `;\n case ContextMenuAlignment.TopCenter:\n return css`\n bottom: -7px;\n right: 45%;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomCenter:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 45%;\n `;\n\n default:\n return undefined;\n }\n }}\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n }\n`;\n\ntype StyledContextMenuContentItemProps = WithTheme<unknown>;\n\nexport const StyledContextMenuContentItem = styled.div<StyledContextMenuContentItemProps>`\n cursor: pointer;\n display: flex;\n padding: 5px 8px 5px 5px;\n transition: background-color 0.3s ease;\n\n &:hover {\n background-color: ${({ theme }: StyledContextMenuContentItemProps) =>\n theme['secondary-103']};\n }\n`;\n\nexport const StyledContextMenuContentItemIconWrapper = styled.div`\n flex: 0 0 auto;\n margin: 0 8px 0 3px;\n width: 20px;\n`;\n\nexport const StyledContextMenuContentItemText = styled.div`\n flex: 0 0 auto;\n white-space: nowrap;\n`;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ContextMenuContent.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_contextMenu","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionContextMenuContent","exports","styled","motion","div","theme","text","$position","ContextMenuAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","TopCenter","BottomCenter","undefined","StyledContextMenuContentItem","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { ContextMenuAlignment } from '../../../types/contextMenu';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n $position: ContextMenuAlignment;\n}>;\n\nexport const StyledMotionContextMenuContent = styled(\n motion.div,\n)<StyledMotionContextMenuContentProps>`\n background-color: ${({ theme }: StyledMotionContextMenuContentProps) => theme['001']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n pointer-events: all;\n position: absolute;\n z-index: 10;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ $position }) => {\n switch ($position) {\n case ContextMenuAlignment.TopLeft:\n return css`\n bottom: -7px;\n right: 7px;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomLeft:\n return css`\n top: -7px;\n right: 7px;\n transform: rotate(225deg);\n `;\n case ContextMenuAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: 7px;\n `;\n case ContextMenuAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 7px;\n `;\n case ContextMenuAlignment.TopCenter:\n return css`\n bottom: -7px;\n right: 45%;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomCenter:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 45%;\n `;\n\n default:\n return undefined;\n }\n }}\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n }\n`;\n\ntype StyledContextMenuContentItemProps = WithTheme<unknown>;\n\nexport const StyledContextMenuContentItem = styled.div<StyledContextMenuContentItemProps>`\n cursor: pointer;\n display: flex;\n padding: 5px 8px 5px 5px;\n transition: background-color 0.3s ease;\n\n &:hover {\n background-color: ${({ theme }: StyledContextMenuContentItemProps) =>\n theme['secondary-103']};\n }\n`;\n\nexport const StyledContextMenuContentItemIconWrapper = styled.div`\n flex: 0 0 auto;\n margin: 0 8px 0 3px;\n width: 20px;\n`;\n\nexport const StyledContextMenuContentItemText = styled.div`\n flex: 0 0 auto;\n white-space: nowrap;\n`;\n"],"mappings":"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","ignoreList":[]}
@@ -7,6 +7,7 @@ exports.default = void 0;
7
7
  var _framerMotion = require("framer-motion");
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _uuid = require("../../../hooks/uuid");
10
+ var _Accordion = require("../../accordion/Accordion");
10
11
  var _AreaContextProvider = _interopRequireDefault(require("../../area-provider/AreaContextProvider"));
11
12
  var _List = require("../List");
12
13
  var _ListItemBody = _interopRequireDefault(require("./list-item-body/ListItemBody"));
@@ -41,6 +42,9 @@ const ListItem = ({
41
42
  openItemUuid,
42
43
  updateOpenItemUuid
43
44
  } = (0, _react.useContext)(_List.ListContext);
45
+ const {
46
+ isWrapped: isParentAccordionWrapped
47
+ } = (0, _react.useContext)(_Accordion.AccordionContext);
44
48
  const uuid = (0, _uuid.useUuid)();
45
49
  const isExpandable = children !== undefined;
46
50
  const isItemOpen = isOpen ?? openItemUuid === uuid;
@@ -85,6 +89,7 @@ const ListItem = ({
85
89
  key: `list-item-${uuid}`,
86
90
  $isClickable: isClickable,
87
91
  $isOpen: isItemOpen,
92
+ $isParentAccordionWrapped: isParentAccordionWrapped,
88
93
  $isWrapped: isWrapped,
89
94
  $shouldShowSeparatorBelow: shouldShowSeparatorBelow
90
95
  }, /*#__PURE__*/_react.default.createElement(_ListItemHead.default, {
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_AreaContextProvider","_interopRequireDefault","_List","_ListItemBody","_ListItemHead","_ListItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItem","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","subtitle","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","useContext","ListContext","uuid","useUuid","isExpandable","undefined","isItemOpen","handleHeadClick","useCallback","event","useEffect","shouldOnlyOpen","isClickable","createElement","StyledMotionListItem","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isWrapped","$shouldShowSeparatorBelow","AnimatePresence","id","displayName","_default","exports"],"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 type { IListItemRightElements } from '../../../types/list';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\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 ListItemElements = [ReactNode, ...ReactNode[]];\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?: ListItemElements;\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?: IListItemRightElements;\n /**\n * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n * hidden.\n */\n shouldHideImageOrIconBackground?: boolean;\n /**\n * If the `ListItem` is expandable, the indicator is displayed on the left\n * side of the header. If this property is set to true, the indicator is\n * hidden.\n */\n shouldHideIndicator?: boolean;\n /**\n * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.\n */\n shouldShowRoundImageOrIcon?: boolean;\n /**\n * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n */\n shouldShowSeparatorBelow?: 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 * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: 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 shouldHideImageOrIconBackground,\n shouldHideIndicator,\n subtitle,\n shouldShowRoundImageOrIcon,\n shouldShowSeparatorBelow = false,\n title,\n titleElement,\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 $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n >\n <ListItemHead\n hoverItem={hoverItem}\n icons={icons}\n images={images}\n isAnyItemExpandable={isAnyItemExpandable}\n isExpandable={isExpandable}\n isOpen={isItemOpen}\n leftElements={leftElements}\n onClick={isClickable ? handleHeadClick : undefined}\n onLongPress={onLongPress}\n rightElements={rightElements}\n shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n shouldHideIndicator={shouldHideIndicator}\n subtitle={subtitle}\n shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n title={title}\n titleElement={titleElement}\n />\n <AnimatePresence initial={false}>\n {isExpandable && isItemOpen && (\n <ListItemBody id={uuid}>\n <AreaContextProvider>{children}</AreaContextProvider>\n </ListItemBody>\n )}\n </AnimatePresence>\n </StyledMotionListItem>\n );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ListItem.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_Accordion","_AreaContextProvider","_interopRequireDefault","_List","_ListItemBody","_ListItemHead","_ListItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItem","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","subtitle","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","useContext","ListContext","isParentAccordionWrapped","AccordionContext","uuid","useUuid","isExpandable","undefined","isItemOpen","handleHeadClick","useCallback","event","useEffect","shouldOnlyOpen","isClickable","createElement","StyledMotionListItem","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isParentAccordionWrapped","$isWrapped","$shouldShowSeparatorBelow","AnimatePresence","id","displayName","_default","exports"],"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 type { IListItemRightElements } from '../../../types/list';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\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 ListItemElements = [ReactNode, ...ReactNode[]];\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?: ListItemElements;\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?: IListItemRightElements;\n /**\n * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n * hidden.\n */\n shouldHideImageOrIconBackground?: boolean;\n /**\n * If the `ListItem` is expandable, the indicator is displayed on the left\n * side of the header. If this property is set to true, the indicator is\n * hidden.\n */\n shouldHideIndicator?: boolean;\n /**\n * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.\n */\n shouldShowRoundImageOrIcon?: boolean;\n /**\n * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n */\n shouldShowSeparatorBelow?: 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 * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: 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 shouldHideImageOrIconBackground,\n shouldHideIndicator,\n subtitle,\n shouldShowRoundImageOrIcon,\n shouldShowSeparatorBelow = false,\n title,\n titleElement,\n}) => {\n const {\n incrementExpandableItemCount,\n isAnyItemExpandable,\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n } = useContext(ListContext);\n\n const { isWrapped: isParentAccordionWrapped } = useContext(AccordionContext);\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 $isParentAccordionWrapped={isParentAccordionWrapped}\n $isWrapped={isWrapped}\n $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n >\n <ListItemHead\n hoverItem={hoverItem}\n icons={icons}\n images={images}\n isAnyItemExpandable={isAnyItemExpandable}\n isExpandable={isExpandable}\n isOpen={isItemOpen}\n leftElements={leftElements}\n onClick={isClickable ? handleHeadClick : undefined}\n onLongPress={onLongPress}\n rightElements={rightElements}\n shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n shouldHideIndicator={shouldHideIndicator}\n subtitle={subtitle}\n shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n title={title}\n titleElement={titleElement}\n />\n <AnimatePresence initial={false}>\n {isExpandable && isItemOpen && (\n <ListItemBody id={uuid}>\n <AreaContextProvider>{children}</AreaContextProvider>\n </ListItemBody>\n )}\n </AnimatePresence>\n </StyledMotionListItem>\n );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
@@ -19,6 +19,12 @@ const StyledMotionListItem = exports.StyledMotionListItem = (0, _styledComponent
19
19
  overflow: hidden;
20
20
  transition: background-color 0.3s ease;
21
21
 
22
+ ${({
23
+ $isParentAccordionWrapped
24
+ }) => $isParentAccordionWrapped && (0, _styledComponents.css)`
25
+ padding-left: 8px;
26
+ `}
27
+
22
28
  ${({
23
29
  $isClickable,
24
30
  theme
@@ -29,9 +35,11 @@ const StyledMotionListItem = exports.StyledMotionListItem = (0, _styledComponent
29
35
  `}
30
36
 
31
37
  ${({
38
+ $isOpen,
39
+ $isWrapped,
32
40
  $shouldShowSeparatorBelow,
33
41
  theme
34
- }) => ($shouldShowSeparatorBelow || theme.accordionLines) && (0, _styledComponents.css)`
42
+ }) => ($shouldShowSeparatorBelow || (!$isOpen || $isWrapped) && theme.accordionLines) && (0, _styledComponents.css)`
35
43
  &&:not(:last-child) {
36
44
  border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
37
45
  rgba(${theme['headline-rgb']}, 0.5);
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionListItem","exports","styled","motion","div","$isOpen","theme","css","cardBackgroundOpacity","$isClickable","$shouldShowSeparatorBelow","accordionLines","$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 $shouldShowSeparatorBelow: 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 ${({ $shouldShowSeparatorBelow, theme }: StyledListItemProps) =>\n ($shouldShowSeparatorBelow || theme.accordionLines) &&\n css`\n &&:not(:last-child) {\n border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n rgba(${theme['headline-rgb']}, 0.5);\n }\n `}}\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n padding-left: 26px;\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAUzC,MAAMW,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAsB;AAC3E,MAAM,CAAC;EAAEC,OAAO;EAAEC;AAAM,CAAC,KACjBD,OAAO,IACP,IAAAE,qBAAG;AACX,qCAAqCD,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACrF,SAAS;AACT;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,YAAY;EAAEH;AAAM,CAAC,KACtBG,YAAY,IACZ,IAAAF,qBAAG;AACX;AACA,yCAAyCD,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACzF;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEE,yBAAyB;EAAEJ;AAA2B,CAAC,KACxD,CAACI,yBAAyB,IAAIJ,KAAK,CAACK,cAAc,KAClD,IAAAJ,qBAAG;AACX;AACA,iCAAiCG,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC1E,2BAA2BJ,KAAK,CAAC,cAAc,CAAC;AAChD;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEM;AAAW,CAAC,KACbA,UAAU,IACV,IAAAL,qBAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"ListItem.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionListItem","exports","styled","motion","div","$isOpen","theme","css","cardBackgroundOpacity","$isParentAccordionWrapped","$isClickable","$isWrapped","$shouldShowSeparatorBelow","accordionLines"],"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 $isParentAccordionWrapped: boolean;\n $isWrapped: boolean;\n $shouldShowSeparatorBelow: 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 ${({ $isParentAccordionWrapped }: StyledListItemProps) =>\n $isParentAccordionWrapped &&\n css`\n padding-left: 8px;\n `}\n\n ${({ $isClickable, theme }) =>\n $isClickable &&\n css`\n &&:hover {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n `}\n \n ${({ $isOpen, $isWrapped, $shouldShowSeparatorBelow, theme }: StyledListItemProps) =>\n ($shouldShowSeparatorBelow || ((!$isOpen || $isWrapped) && theme.accordionLines)) &&\n css`\n &&:not(:last-child) {\n border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n rgba(${theme['headline-rgb']}, 0.5);\n }\n `}}\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n padding-left: 26px;\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAWzC,MAAMW,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAsB;AAC3E,MAAM,CAAC;EAAEC,OAAO;EAAEC;AAAM,CAAC,KACjBD,OAAO,IACP,IAAAE,qBAAG;AACX,qCAAqCD,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACrF,SAAS;AACT;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAA+C,CAAC,KACjDA,yBAAyB,IACzB,IAAAF,qBAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEG,YAAY;EAAEJ;AAAM,CAAC,KACtBI,YAAY,IACZ,IAAAH,qBAAG;AACX;AACA,yCAAyCD,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACzF;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEH,OAAO;EAAEM,UAAU;EAAEC,yBAAyB;EAAEN;AAA2B,CAAC,KAC7E,CAACM,yBAAyB,IAAK,CAAC,CAACP,OAAO,IAAIM,UAAU,KAAKL,KAAK,CAACO,cAAe,KAChF,IAAAN,qBAAG;AACX;AACA,iCAAiCK,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC1E,2BAA2BN,KAAK,CAAC,cAAc,CAAC;AAChD;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEK;AAAW,CAAC,KACbA,UAAU,IACV,IAAAJ,qBAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}
@@ -147,7 +147,12 @@ const Slider = ({
147
147
  */
148
148
  const handleInputChange = (0, _react.useCallback)(event => {
149
149
  void (0, _chaynsApi.setRefreshScrollEnabled)(false);
150
- const newValue = Number(event.target.value);
150
+ let newValue = Number(event.target.value);
151
+ if (newValue > maxValue) {
152
+ newValue = maxValue;
153
+ } else if (newValue < minValue) {
154
+ newValue = minValue;
155
+ }
151
156
  if (interval) {
152
157
  handleControlFromSlider(event);
153
158
  return;
@@ -156,7 +161,7 @@ const Slider = ({
156
161
  if (onChange) {
157
162
  onChange(newValue);
158
163
  }
159
- }, [handleControlFromSlider, interval, onChange]);
164
+ }, [handleControlFromSlider, interval, maxValue, minValue, onChange]);
160
165
  const fromSliderThumbPosition = (0, _react.useMemo)(() => {
161
166
  if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {
162
167
  return (0, _slider.calculateGradientOffset)({
@@ -230,8 +235,8 @@ const Slider = ({
230
235
  type: "range",
231
236
  value: fromValue,
232
237
  step: steps,
233
- max: maxValue,
234
- min: minValue,
238
+ max: maxValue % steps === 0 ? maxValue : maxValue + steps - maxValue % steps,
239
+ min: minValue % steps === 0 ? minValue : minValue - minValue % steps,
235
240
  onTouchStart: handleTouchStart,
236
241
  onTouchEnd: handleTouchEnd,
237
242
  onChange: handleInputChange,
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_useElementSize","_slider","_Slider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Slider","maxValue","minValue","value","onSelect","onChange","interval","thumbLabelFormatter","shouldShowThumbLabel","steps","fromValue","setFromValue","useState","toValue","setToValue","thumbWidth","setThumbWidth","isBigSlider","setIsBigSlider","fromSliderRef","useRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","fromSliderThumbContentRef","toSliderThumbContentRef","sliderWrapperRef","sliderWrapperSize","useElementSize","theme","useTheme","useEffect","getThumbMaxWidth","maxNumber","handleMouseUp","useCallback","_fromSliderRef$curren","_toSliderRef$current","setRefreshScrollEnabled","from","Number","current","to","undefined","handleControlFromSlider","event","target","fillSlider","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","newValue","fromSliderThumbPosition","useMemo","calculateGradientOffset","max","min","containerWidth","offsetWidth","toSliderThumbPosition","toSliderThumbContentPosition","calculatePopupPosition","sliderValue","popupWidth","fromSliderThumbContentPosition","handleTouchStart","handleTouchEnd","_fromSliderRef$curren2","_toSliderRef$current2","createElement","StyledSlider","ref","StyledSliderInput","animate","height","initial","exit","$thumbWidth","$isInterval","type","step","onTouchStart","onTouchEnd","onMouseUp","$max","$min","$value","StyledSliderThumb","$position","$isBigSlider","StyledSliderThumbLabel","$width","displayName","_default","exports"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport {\n calculateGradientOffset,\n calculatePopupPosition,\n fillSlider,\n getThumbMaxWidth,\n} from '../../utils/slider';\nimport {\n StyledSlider,\n StyledSliderInput,\n StyledSliderThumb,\n StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n maxValue: number;\n minValue: number;\n}\n\nexport type SliderProps = {\n /**\n * The range that can be selected with two thumbs..\n */\n interval?: SliderInterval;\n /**\n * The maximum value of the slider.\n */\n maxValue: number;\n /**\n * The minimum value of the slider.\n */\n minValue: number;\n /**\n * Function that will be executed when the value is selected.\n */\n onSelect?: (value?: number, interval?: SliderInterval) => void;\n /**\n * Function that will be executed when the value is changed.\n */\n onChange?: (value?: number, interval?: SliderInterval) => void;\n /**\n * Whether the current value should be displayed inside the slider thumb.\n */\n shouldShowThumbLabel?: boolean;\n /**\n * The steps of the slider.\n */\n steps?: number;\n /**\n * A function to format the thumb label.\n */\n thumbLabelFormatter?: (value: number) => string;\n /**\n * the Value that the slider should have.\n */\n value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n maxValue,\n minValue,\n value,\n onSelect,\n onChange,\n interval,\n thumbLabelFormatter,\n shouldShowThumbLabel = false,\n steps = 1,\n}) => {\n const [fromValue, setFromValue] = useState(0);\n const [toValue, setToValue] = useState(maxValue);\n const [thumbWidth, setThumbWidth] = useState(20);\n const [isBigSlider, setIsBigSlider] = useState(false);\n\n const fromSliderRef = useRef<HTMLInputElement>(null);\n const toSliderRef = useRef<HTMLInputElement>(null);\n const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n const toSliderThumbRef = useRef<HTMLDivElement>(null);\n const fromSliderThumbContentRef = useRef<HTMLDivElement>(null);\n const toSliderThumbContentRef = useRef<HTMLDivElement>(null);\n const sliderWrapperRef = useRef<HTMLDivElement>(null);\n\n const sliderWrapperSize = useElementSize(sliderWrapperRef);\n\n const theme = useTheme();\n\n useEffect(() => {\n if (shouldShowThumbLabel) {\n setThumbWidth(getThumbMaxWidth({ maxNumber: maxValue, thumbLabelFormatter }));\n }\n }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);\n\n /**\n * This function sets the value\n */\n useEffect(() => {\n if (typeof value !== 'number') {\n return;\n }\n\n if (value >= minValue && value <= maxValue) {\n setFromValue(value);\n }\n }, [maxValue, minValue, value]);\n\n useEffect(() => {\n if (fromValue > toValue) {\n setFromValue(toValue);\n }\n\n if (toValue < fromValue) {\n setToValue(fromValue);\n }\n }, [fromValue, toValue]);\n\n const handleMouseUp = useCallback(() => {\n void setRefreshScrollEnabled(true);\n\n const from = Number(fromSliderRef.current?.value);\n const to = Number(toSliderRef.current?.value);\n\n if (typeof onSelect === 'function') {\n onSelect(\n interval ? undefined : from,\n interval ? { maxValue: to, minValue: from } : undefined,\n );\n }\n }, [interval, onSelect]);\n\n const handleControlFromSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n if (!fromSliderRef.current || !toSliderRef.current) {\n return;\n }\n\n setFromValue(Number(event.target.value));\n\n const from = Number(fromSliderRef.current.value);\n const to = Number(toSliderRef.current.value);\n\n if (typeof onChange === 'function') {\n onChange(undefined, { maxValue: to, minValue: from });\n }\n\n fillSlider({\n toSlider: toSliderRef.current,\n fromSlider: fromSliderRef.current,\n theme,\n });\n\n if (from > to) {\n fromSliderRef.current.value = String(to);\n } else {\n fromSliderRef.current.value = String(from);\n }\n },\n [onChange, theme],\n );\n\n const handleControlToSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n void setRefreshScrollEnabled(false);\n\n if (!fromSliderRef.current || !toSliderRef.current) {\n return;\n }\n\n setToValue(Number(event.target.value));\n\n const from = Number(fromSliderRef.current.value);\n const to = Number(toSliderRef.current.value);\n\n if (typeof onChange === 'function') {\n onChange(undefined, { maxValue: to, minValue: from });\n }\n\n fillSlider({\n toSlider: toSliderRef.current,\n fromSlider: fromSliderRef.current,\n theme,\n });\n\n if (from <= to) {\n toSliderRef.current.value = String(to);\n } else {\n toSliderRef.current.value = String(from);\n }\n },\n [onChange, theme],\n );\n\n useEffect(() => {\n if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n return;\n }\n\n setFromValue(interval.minValue);\n setToValue(interval.maxValue);\n\n fromSliderRef.current.value = String(interval.minValue);\n toSliderRef.current.value = String(interval.maxValue);\n\n fillSlider({\n fromSlider: fromSliderRef.current,\n toSlider: toSliderRef.current,\n theme,\n });\n // Note: interval can´t be in the deps because of rerender\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [theme]);\n\n /**\n * This function updates the value\n */\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n void setRefreshScrollEnabled(false);\n\n const newValue = Number(event.target.value);\n\n if (interval) {\n handleControlFromSlider(event);\n\n return;\n }\n\n setFromValue(newValue);\n\n if (onChange) {\n onChange(newValue);\n }\n },\n [handleControlFromSlider, interval, onChange],\n );\n\n const fromSliderThumbPosition = useMemo(() => {\n if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {\n return calculateGradientOffset({\n max: maxValue,\n min: minValue,\n value: fromValue,\n thumbWidth: 40,\n containerWidth: fromSliderRef.current.offsetWidth,\n });\n }\n\n return 0;\n }, [fromValue, maxValue, minValue, sliderWrapperSize]);\n\n const toSliderThumbPosition = useMemo(() => {\n if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {\n return calculateGradientOffset({\n max: maxValue,\n min: minValue,\n value: toValue,\n thumbWidth: 40,\n containerWidth: toSliderRef.current.offsetWidth,\n });\n }\n return 0;\n }, [toValue, minValue, maxValue, sliderWrapperSize]);\n\n const toSliderThumbContentPosition = useMemo(\n () =>\n calculatePopupPosition({\n min: minValue,\n max: maxValue,\n sliderValue: toValue,\n popupWidth: thumbWidth,\n }),\n [maxValue, minValue, thumbWidth, toValue],\n );\n\n const fromSliderThumbContentPosition = useMemo(\n () =>\n calculatePopupPosition({\n min: minValue,\n max: maxValue,\n sliderValue: fromValue,\n popupWidth: thumbWidth,\n }),\n [fromValue, maxValue, minValue, thumbWidth],\n );\n\n const handleTouchStart = useCallback(() => {\n if (shouldShowThumbLabel) {\n setIsBigSlider(true);\n }\n }, [shouldShowThumbLabel]);\n\n const handleTouchEnd = useCallback(() => {\n const from = Number(fromSliderRef.current?.value);\n const to = Number(toSliderRef.current?.value);\n\n if (typeof onSelect === 'function') {\n onSelect(\n interval ? undefined : from,\n interval ? { maxValue: to, minValue: from } : undefined,\n );\n }\n\n if (shouldShowThumbLabel) {\n setIsBigSlider(false);\n }\n }, [interval, onSelect, shouldShowThumbLabel]);\n\n return useMemo(\n () => (\n <StyledSlider ref={sliderWrapperRef}>\n <StyledSliderInput\n animate={{ height: isBigSlider ? 30 : 10 }}\n initial={{ height: 10 }}\n exit={{ height: 10 }}\n $thumbWidth={40}\n ref={fromSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={fromValue}\n step={steps}\n max={maxValue}\n min={minValue}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onChange={handleInputChange}\n onMouseUp={handleMouseUp}\n $max={maxValue}\n $min={minValue}\n $value={fromValue}\n />\n <StyledSliderThumb\n ref={fromSliderThumbRef}\n $position={fromSliderThumbPosition}\n $isBigSlider={isBigSlider}\n >\n {shouldShowThumbLabel && (\n <StyledSliderThumbLabel\n $width={thumbWidth}\n $isBigSlider={isBigSlider}\n $position={fromSliderThumbContentPosition}\n ref={fromSliderThumbContentRef}\n >\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(fromValue)\n : fromValue}\n </StyledSliderThumbLabel>\n )}\n </StyledSliderThumb>\n {interval && (\n <StyledSliderThumb\n ref={toSliderThumbRef}\n $position={toSliderThumbPosition}\n $isBigSlider={isBigSlider}\n >\n {shouldShowThumbLabel && (\n <StyledSliderThumbLabel\n $width={thumbWidth}\n $isBigSlider={isBigSlider}\n $position={toSliderThumbContentPosition}\n ref={toSliderThumbContentRef}\n >\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(toValue)\n : toValue}\n </StyledSliderThumbLabel>\n )}\n </StyledSliderThumb>\n )}\n {interval && (\n <StyledSliderInput\n animate={{ height: isBigSlider ? 30 : 10 }}\n initial={{ height: 10 }}\n exit={{ height: 10 }}\n $thumbWidth={40}\n $max={maxValue}\n $min={minValue}\n $value={toValue}\n ref={toSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={toValue}\n step={steps}\n max={maxValue}\n min={minValue}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onChange={handleControlToSlider}\n onMouseUp={handleMouseUp}\n />\n )}\n </StyledSlider>\n ),\n [\n isBigSlider,\n interval,\n fromValue,\n steps,\n maxValue,\n minValue,\n handleTouchStart,\n handleTouchEnd,\n handleInputChange,\n handleMouseUp,\n fromSliderThumbPosition,\n shouldShowThumbLabel,\n thumbWidth,\n fromSliderThumbContentPosition,\n thumbLabelFormatter,\n toSliderThumbPosition,\n toSliderThumbContentPosition,\n toValue,\n handleControlToSlider,\n ],\n );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,eAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AAMA,IAAAM,OAAA,GAAAN,OAAA;AAKyB,SAAAO,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AA8CzB,MAAMW,MAAuB,GAAGA,CAAC;EAC7BC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,mBAAmB;EACnBC,oBAAoB,GAAG,KAAK;EAC5BC,KAAK,GAAG;AACZ,CAAC,KAAK;EACF,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAC,eAAQ,EAAC,CAAC,CAAC;EAC7C,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAG,IAAAF,eAAQ,EAACX,QAAQ,CAAC;EAChD,MAAM,CAACc,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAJ,eAAQ,EAAC,EAAE,CAAC;EAChD,MAAM,CAACK,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAN,eAAQ,EAAC,KAAK,CAAC;EAErD,MAAMO,aAAa,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EACpD,MAAMC,WAAW,GAAG,IAAAD,aAAM,EAAmB,IAAI,CAAC;EAClD,MAAME,kBAAkB,GAAG,IAAAF,aAAM,EAAiB,IAAI,CAAC;EACvD,MAAMG,gBAAgB,GAAG,IAAAH,aAAM,EAAiB,IAAI,CAAC;EACrD,MAAMI,yBAAyB,GAAG,IAAAJ,aAAM,EAAiB,IAAI,CAAC;EAC9D,MAAMK,uBAAuB,GAAG,IAAAL,aAAM,EAAiB,IAAI,CAAC;EAC5D,MAAMM,gBAAgB,GAAG,IAAAN,aAAM,EAAiB,IAAI,CAAC;EAErD,MAAMO,iBAAiB,GAAG,IAAAC,8BAAc,EAACF,gBAAgB,CAAC;EAE1D,MAAMG,KAAK,GAAG,IAAAC,0BAAQ,EAAC,CAAC;EAExB,IAAAC,gBAAS,EAAC,MAAM;IACZ,IAAIvB,oBAAoB,EAAE;MACtBQ,aAAa,CAAC,IAAAgB,wBAAgB,EAAC;QAAEC,SAAS,EAAEhC,QAAQ;QAAEM;MAAoB,CAAC,CAAC,CAAC;IACjF;EACJ,CAAC,EAAE,CAACN,QAAQ,EAAEO,oBAAoB,EAAED,mBAAmB,CAAC,CAAC;;EAEzD;AACJ;AACA;EACI,IAAAwB,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAO5B,KAAK,KAAK,QAAQ,EAAE;MAC3B;IACJ;IAEA,IAAIA,KAAK,IAAID,QAAQ,IAAIC,KAAK,IAAIF,QAAQ,EAAE;MACxCU,YAAY,CAACR,KAAK,CAAC;IACvB;EACJ,CAAC,EAAE,CAACF,QAAQ,EAAEC,QAAQ,EAAEC,KAAK,CAAC,CAAC;EAE/B,IAAA4B,gBAAS,EAAC,MAAM;IACZ,IAAIrB,SAAS,GAAGG,OAAO,EAAE;MACrBF,YAAY,CAACE,OAAO,CAAC;IACzB;IAEA,IAAIA,OAAO,GAAGH,SAAS,EAAE;MACrBI,UAAU,CAACJ,SAAS,CAAC;IACzB;EACJ,CAAC,EAAE,CAACA,SAAS,EAAEG,OAAO,CAAC,CAAC;EAExB,MAAMqB,aAAa,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAAA,IAAAC,qBAAA,EAAAC,oBAAA;IACpC,KAAK,IAAAC,kCAAuB,EAAC,IAAI,CAAC;IAElC,MAAMC,IAAI,GAAGC,MAAM,EAAAJ,qBAAA,GAACjB,aAAa,CAACsB,OAAO,cAAAL,qBAAA,uBAArBA,qBAAA,CAAuBjC,KAAK,CAAC;IACjD,MAAMuC,EAAE,GAAGF,MAAM,EAAAH,oBAAA,GAAChB,WAAW,CAACoB,OAAO,cAAAJ,oBAAA,uBAAnBA,oBAAA,CAAqBlC,KAAK,CAAC;IAE7C,IAAI,OAAOC,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CACJE,QAAQ,GAAGqC,SAAS,GAAGJ,IAAI,EAC3BjC,QAAQ,GAAG;QAAEL,QAAQ,EAAEyC,EAAE;QAAExC,QAAQ,EAAEqC;MAAK,CAAC,GAAGI,SAClD,CAAC;IACL;EACJ,CAAC,EAAE,CAACrC,QAAQ,EAAEF,QAAQ,CAAC,CAAC;EAExB,MAAMwC,uBAAuB,GAAG,IAAAT,kBAAW,EACtCU,KAAoC,IAAK;IACtC,IAAI,CAAC1B,aAAa,CAACsB,OAAO,IAAI,CAACpB,WAAW,CAACoB,OAAO,EAAE;MAChD;IACJ;IAEA9B,YAAY,CAAC6B,MAAM,CAACK,KAAK,CAACC,MAAM,CAAC3C,KAAK,CAAC,CAAC;IAExC,MAAMoC,IAAI,GAAGC,MAAM,CAACrB,aAAa,CAACsB,OAAO,CAACtC,KAAK,CAAC;IAChD,MAAMuC,EAAE,GAAGF,MAAM,CAACnB,WAAW,CAACoB,OAAO,CAACtC,KAAK,CAAC;IAE5C,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACsC,SAAS,EAAE;QAAE1C,QAAQ,EAAEyC,EAAE;QAAExC,QAAQ,EAAEqC;MAAK,CAAC,CAAC;IACzD;IAEA,IAAAQ,kBAAU,EAAC;MACPC,QAAQ,EAAE3B,WAAW,CAACoB,OAAO;MAC7BQ,UAAU,EAAE9B,aAAa,CAACsB,OAAO;MACjCZ;IACJ,CAAC,CAAC;IAEF,IAAIU,IAAI,GAAGG,EAAE,EAAE;MACXvB,aAAa,CAACsB,OAAO,CAACtC,KAAK,GAAG+C,MAAM,CAACR,EAAE,CAAC;IAC5C,CAAC,MAAM;MACHvB,aAAa,CAACsB,OAAO,CAACtC,KAAK,GAAG+C,MAAM,CAACX,IAAI,CAAC;IAC9C;EACJ,CAAC,EACD,CAAClC,QAAQ,EAAEwB,KAAK,CACpB,CAAC;EAED,MAAMsB,qBAAqB,GAAG,IAAAhB,kBAAW,EACpCU,KAAoC,IAAK;IACtC,KAAK,IAAAP,kCAAuB,EAAC,KAAK,CAAC;IAEnC,IAAI,CAACnB,aAAa,CAACsB,OAAO,IAAI,CAACpB,WAAW,CAACoB,OAAO,EAAE;MAChD;IACJ;IAEA3B,UAAU,CAAC0B,MAAM,CAACK,KAAK,CAACC,MAAM,CAAC3C,KAAK,CAAC,CAAC;IAEtC,MAAMoC,IAAI,GAAGC,MAAM,CAACrB,aAAa,CAACsB,OAAO,CAACtC,KAAK,CAAC;IAChD,MAAMuC,EAAE,GAAGF,MAAM,CAACnB,WAAW,CAACoB,OAAO,CAACtC,KAAK,CAAC;IAE5C,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACsC,SAAS,EAAE;QAAE1C,QAAQ,EAAEyC,EAAE;QAAExC,QAAQ,EAAEqC;MAAK,CAAC,CAAC;IACzD;IAEA,IAAAQ,kBAAU,EAAC;MACPC,QAAQ,EAAE3B,WAAW,CAACoB,OAAO;MAC7BQ,UAAU,EAAE9B,aAAa,CAACsB,OAAO;MACjCZ;IACJ,CAAC,CAAC;IAEF,IAAIU,IAAI,IAAIG,EAAE,EAAE;MACZrB,WAAW,CAACoB,OAAO,CAACtC,KAAK,GAAG+C,MAAM,CAACR,EAAE,CAAC;IAC1C,CAAC,MAAM;MACHrB,WAAW,CAACoB,OAAO,CAACtC,KAAK,GAAG+C,MAAM,CAACX,IAAI,CAAC;IAC5C;EACJ,CAAC,EACD,CAAClC,QAAQ,EAAEwB,KAAK,CACpB,CAAC;EAED,IAAAE,gBAAS,EAAC,MAAM;IACZ,IAAI,CAACZ,aAAa,CAACsB,OAAO,IAAI,CAACpB,WAAW,CAACoB,OAAO,IAAI,CAACnC,QAAQ,EAAE;MAC7D;IACJ;IAEAK,YAAY,CAACL,QAAQ,CAACJ,QAAQ,CAAC;IAC/BY,UAAU,CAACR,QAAQ,CAACL,QAAQ,CAAC;IAE7BkB,aAAa,CAACsB,OAAO,CAACtC,KAAK,GAAG+C,MAAM,CAAC5C,QAAQ,CAACJ,QAAQ,CAAC;IACvDmB,WAAW,CAACoB,OAAO,CAACtC,KAAK,GAAG+C,MAAM,CAAC5C,QAAQ,CAACL,QAAQ,CAAC;IAErD,IAAA8C,kBAAU,EAAC;MACPE,UAAU,EAAE9B,aAAa,CAACsB,OAAO;MACjCO,QAAQ,EAAE3B,WAAW,CAACoB,OAAO;MAC7BZ;IACJ,CAAC,CAAC;IACF;IACA;EACJ,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;;EAEX;AACJ;AACA;EACI,MAAMuB,iBAAiB,GAAG,IAAAjB,kBAAW,EAChCU,KAAoC,IAAK;IACtC,KAAK,IAAAP,kCAAuB,EAAC,KAAK,CAAC;IAEnC,MAAMe,QAAQ,GAAGb,MAAM,CAACK,KAAK,CAACC,MAAM,CAAC3C,KAAK,CAAC;IAE3C,IAAIG,QAAQ,EAAE;MACVsC,uBAAuB,CAACC,KAAK,CAAC;MAE9B;IACJ;IAEAlC,YAAY,CAAC0C,QAAQ,CAAC;IAEtB,IAAIhD,QAAQ,EAAE;MACVA,QAAQ,CAACgD,QAAQ,CAAC;IACtB;EACJ,CAAC,EACD,CAACT,uBAAuB,EAAEtC,QAAQ,EAAED,QAAQ,CAChD,CAAC;EAED,MAAMiD,uBAAuB,GAAG,IAAAC,cAAO,EAAC,MAAM;IAC1C,IAAIpC,aAAa,CAACsB,OAAO,IAAInB,kBAAkB,CAACmB,OAAO,IAAId,iBAAiB,EAAE;MAC1E,OAAO,IAAA6B,+BAAuB,EAAC;QAC3BC,GAAG,EAAExD,QAAQ;QACbyD,GAAG,EAAExD,QAAQ;QACbC,KAAK,EAAEO,SAAS;QAChBK,UAAU,EAAE,EAAE;QACd4C,cAAc,EAAExC,aAAa,CAACsB,OAAO,CAACmB;MAC1C,CAAC,CAAC;IACN;IAEA,OAAO,CAAC;EACZ,CAAC,EAAE,CAAClD,SAAS,EAAET,QAAQ,EAAEC,QAAQ,EAAEyB,iBAAiB,CAAC,CAAC;EAEtD,MAAMkC,qBAAqB,GAAG,IAAAN,cAAO,EAAC,MAAM;IACxC,IAAIlC,WAAW,CAACoB,OAAO,IAAIlB,gBAAgB,CAACkB,OAAO,IAAId,iBAAiB,EAAE;MACtE,OAAO,IAAA6B,+BAAuB,EAAC;QAC3BC,GAAG,EAAExD,QAAQ;QACbyD,GAAG,EAAExD,QAAQ;QACbC,KAAK,EAAEU,OAAO;QACdE,UAAU,EAAE,EAAE;QACd4C,cAAc,EAAEtC,WAAW,CAACoB,OAAO,CAACmB;MACxC,CAAC,CAAC;IACN;IACA,OAAO,CAAC;EACZ,CAAC,EAAE,CAAC/C,OAAO,EAAEX,QAAQ,EAAED,QAAQ,EAAE0B,iBAAiB,CAAC,CAAC;EAEpD,MAAMmC,4BAA4B,GAAG,IAAAP,cAAO,EACxC,MACI,IAAAQ,8BAAsB,EAAC;IACnBL,GAAG,EAAExD,QAAQ;IACbuD,GAAG,EAAExD,QAAQ;IACb+D,WAAW,EAAEnD,OAAO;IACpBoD,UAAU,EAAElD;EAChB,CAAC,CAAC,EACN,CAACd,QAAQ,EAAEC,QAAQ,EAAEa,UAAU,EAAEF,OAAO,CAC5C,CAAC;EAED,MAAMqD,8BAA8B,GAAG,IAAAX,cAAO,EAC1C,MACI,IAAAQ,8BAAsB,EAAC;IACnBL,GAAG,EAAExD,QAAQ;IACbuD,GAAG,EAAExD,QAAQ;IACb+D,WAAW,EAAEtD,SAAS;IACtBuD,UAAU,EAAElD;EAChB,CAAC,CAAC,EACN,CAACL,SAAS,EAAET,QAAQ,EAAEC,QAAQ,EAAEa,UAAU,CAC9C,CAAC;EAED,MAAMoD,gBAAgB,GAAG,IAAAhC,kBAAW,EAAC,MAAM;IACvC,IAAI3B,oBAAoB,EAAE;MACtBU,cAAc,CAAC,IAAI,CAAC;IACxB;EACJ,CAAC,EAAE,CAACV,oBAAoB,CAAC,CAAC;EAE1B,MAAM4D,cAAc,GAAG,IAAAjC,kBAAW,EAAC,MAAM;IAAA,IAAAkC,sBAAA,EAAAC,qBAAA;IACrC,MAAM/B,IAAI,GAAGC,MAAM,EAAA6B,sBAAA,GAAClD,aAAa,CAACsB,OAAO,cAAA4B,sBAAA,uBAArBA,sBAAA,CAAuBlE,KAAK,CAAC;IACjD,MAAMuC,EAAE,GAAGF,MAAM,EAAA8B,qBAAA,GAACjD,WAAW,CAACoB,OAAO,cAAA6B,qBAAA,uBAAnBA,qBAAA,CAAqBnE,KAAK,CAAC;IAE7C,IAAI,OAAOC,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CACJE,QAAQ,GAAGqC,SAAS,GAAGJ,IAAI,EAC3BjC,QAAQ,GAAG;QAAEL,QAAQ,EAAEyC,EAAE;QAAExC,QAAQ,EAAEqC;MAAK,CAAC,GAAGI,SAClD,CAAC;IACL;IAEA,IAAInC,oBAAoB,EAAE;MACtBU,cAAc,CAAC,KAAK,CAAC;IACzB;EACJ,CAAC,EAAE,CAACZ,QAAQ,EAAEF,QAAQ,EAAEI,oBAAoB,CAAC,CAAC;EAE9C,OAAO,IAAA+C,cAAO,EACV,mBACIjF,MAAA,CAAAY,OAAA,CAAAqF,aAAA,CAAC5F,OAAA,CAAA6F,YAAY;IAACC,GAAG,EAAE/C;EAAiB,gBAChCpD,MAAA,CAAAY,OAAA,CAAAqF,aAAA,CAAC5F,OAAA,CAAA+F,iBAAiB;IACdC,OAAO,EAAE;MAAEC,MAAM,EAAE3D,WAAW,GAAG,EAAE,GAAG;IAAG,CAAE;IAC3C4D,OAAO,EAAE;MAAED,MAAM,EAAE;IAAG,CAAE;IACxBE,IAAI,EAAE;MAAEF,MAAM,EAAE;IAAG,CAAE;IACrBG,WAAW,EAAE,EAAG;IAChBN,GAAG,EAAEtD,aAAc;IACnB6D,WAAW,EAAE,CAAC,CAAC1E,QAAS;IACxB2E,IAAI,EAAC,OAAO;IACZ9E,KAAK,EAAEO,SAAU;IACjBwE,IAAI,EAAEzE,KAAM;IACZgD,GAAG,EAAExD,QAAS;IACdyD,GAAG,EAAExD,QAAS;IACdiF,YAAY,EAAEhB,gBAAiB;IAC/BiB,UAAU,EAAEhB,cAAe;IAC3B/D,QAAQ,EAAE+C,iBAAkB;IAC5BiC,SAAS,EAAEnD,aAAc;IACzBoD,IAAI,EAAErF,QAAS;IACfsF,IAAI,EAAErF,QAAS;IACfsF,MAAM,EAAE9E;EAAU,CACrB,CAAC,eACFpC,MAAA,CAAAY,OAAA,CAAAqF,aAAA,CAAC5F,OAAA,CAAA8G,iBAAiB;IACdhB,GAAG,EAAEnD,kBAAmB;IACxBoE,SAAS,EAAEpC,uBAAwB;IACnCqC,YAAY,EAAE1E;EAAY,GAEzBT,oBAAoB,iBACjBlC,MAAA,CAAAY,OAAA,CAAAqF,aAAA,CAAC5F,OAAA,CAAAiH,sBAAsB;IACnBC,MAAM,EAAE9E,UAAW;IACnB4E,YAAY,EAAE1E,WAAY;IAC1ByE,SAAS,EAAExB,8BAA+B;IAC1CO,GAAG,EAAEjD;EAA0B,GAE9B,OAAOjB,mBAAmB,KAAK,UAAU,GACpCA,mBAAmB,CAACG,SAAS,CAAC,GAC9BA,SACc,CAEb,CAAC,EACnBJ,QAAQ,iBACLhC,MAAA,CAAAY,OAAA,CAAAqF,aAAA,CAAC5F,OAAA,CAAA8G,iBAAiB;IACdhB,GAAG,EAAElD,gBAAiB;IACtBmE,SAAS,EAAE7B,qBAAsB;IACjC8B,YAAY,EAAE1E;EAAY,GAEzBT,oBAAoB,iBACjBlC,MAAA,CAAAY,OAAA,CAAAqF,aAAA,CAAC5F,OAAA,CAAAiH,sBAAsB;IACnBC,MAAM,EAAE9E,UAAW;IACnB4E,YAAY,EAAE1E,WAAY;IAC1ByE,SAAS,EAAE5B,4BAA6B;IACxCW,GAAG,EAAEhD;EAAwB,GAE5B,OAAOlB,mBAAmB,KAAK,UAAU,GACpCA,mBAAmB,CAACM,OAAO,CAAC,GAC5BA,OACc,CAEb,CACtB,EACAP,QAAQ,iBACLhC,MAAA,CAAAY,OAAA,CAAAqF,aAAA,CAAC5F,OAAA,CAAA+F,iBAAiB;IACdC,OAAO,EAAE;MAAEC,MAAM,EAAE3D,WAAW,GAAG,EAAE,GAAG;IAAG,CAAE;IAC3C4D,OAAO,EAAE;MAAED,MAAM,EAAE;IAAG,CAAE;IACxBE,IAAI,EAAE;MAAEF,MAAM,EAAE;IAAG,CAAE;IACrBG,WAAW,EAAE,EAAG;IAChBO,IAAI,EAAErF,QAAS;IACfsF,IAAI,EAAErF,QAAS;IACfsF,MAAM,EAAE3E,OAAQ;IAChB4D,GAAG,EAAEpD,WAAY;IACjB2D,WAAW,EAAE,CAAC,CAAC1E,QAAS;IACxB2E,IAAI,EAAC,OAAO;IACZ9E,KAAK,EAAEU,OAAQ;IACfqE,IAAI,EAAEzE,KAAM;IACZgD,GAAG,EAAExD,QAAS;IACdyD,GAAG,EAAExD,QAAS;IACdiF,YAAY,EAAEhB,gBAAiB;IAC/BiB,UAAU,EAAEhB,cAAe;IAC3B/D,QAAQ,EAAE8C,qBAAsB;IAChCkC,SAAS,EAAEnD;EAAc,CAC5B,CAEK,CACjB,EACD,CACIjB,WAAW,EACXX,QAAQ,EACRI,SAAS,EACTD,KAAK,EACLR,QAAQ,EACRC,QAAQ,EACRiE,gBAAgB,EAChBC,cAAc,EACdhB,iBAAiB,EACjBlB,aAAa,EACboB,uBAAuB,EACvB9C,oBAAoB,EACpBO,UAAU,EACVmD,8BAA8B,EAC9B3D,mBAAmB,EACnBsD,qBAAqB,EACrBC,4BAA4B,EAC5BjD,OAAO,EACPsC,qBAAqB,CAE7B,CAAC;AACL,CAAC;AAEDnD,MAAM,CAAC8F,WAAW,GAAG,QAAQ;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA9G,OAAA,GAEfc,MAAM","ignoreList":[]}
1
+ {"version":3,"file":"Slider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_useElementSize","_slider","_Slider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Slider","maxValue","minValue","value","onSelect","onChange","interval","thumbLabelFormatter","shouldShowThumbLabel","steps","fromValue","setFromValue","useState","toValue","setToValue","thumbWidth","setThumbWidth","isBigSlider","setIsBigSlider","fromSliderRef","useRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","fromSliderThumbContentRef","toSliderThumbContentRef","sliderWrapperRef","sliderWrapperSize","useElementSize","theme","useTheme","useEffect","getThumbMaxWidth","maxNumber","handleMouseUp","useCallback","_fromSliderRef$curren","_toSliderRef$current","setRefreshScrollEnabled","from","Number","current","to","undefined","handleControlFromSlider","event","target","fillSlider","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","newValue","fromSliderThumbPosition","useMemo","calculateGradientOffset","max","min","containerWidth","offsetWidth","toSliderThumbPosition","toSliderThumbContentPosition","calculatePopupPosition","sliderValue","popupWidth","fromSliderThumbContentPosition","handleTouchStart","handleTouchEnd","_fromSliderRef$curren2","_toSliderRef$current2","createElement","StyledSlider","ref","StyledSliderInput","animate","height","initial","exit","$thumbWidth","$isInterval","type","step","onTouchStart","onTouchEnd","onMouseUp","$max","$min","$value","StyledSliderThumb","$position","$isBigSlider","StyledSliderThumbLabel","$width","displayName","_default","exports"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport {\n calculateGradientOffset,\n calculatePopupPosition,\n fillSlider,\n getThumbMaxWidth,\n} from '../../utils/slider';\nimport {\n StyledSlider,\n StyledSliderInput,\n StyledSliderThumb,\n StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n maxValue: number;\n minValue: number;\n}\n\nexport type SliderProps = {\n /**\n * The range that can be selected with two thumbs..\n */\n interval?: SliderInterval;\n /**\n * The maximum value of the slider.\n */\n maxValue: number;\n /**\n * The minimum value of the slider.\n */\n minValue: number;\n /**\n * Function that will be executed when the value is selected.\n */\n onSelect?: (value?: number, interval?: SliderInterval) => void;\n /**\n * Function that will be executed when the value is changed.\n */\n onChange?: (value?: number, interval?: SliderInterval) => void;\n /**\n * Whether the current value should be displayed inside the slider thumb.\n */\n shouldShowThumbLabel?: boolean;\n /**\n * The steps of the slider.\n */\n steps?: number;\n /**\n * A function to format the thumb label.\n */\n thumbLabelFormatter?: (value: number) => string;\n /**\n * the Value that the slider should have.\n */\n value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n maxValue,\n minValue,\n value,\n onSelect,\n onChange,\n interval,\n thumbLabelFormatter,\n shouldShowThumbLabel = false,\n steps = 1,\n}) => {\n const [fromValue, setFromValue] = useState(0);\n const [toValue, setToValue] = useState(maxValue);\n const [thumbWidth, setThumbWidth] = useState(20);\n const [isBigSlider, setIsBigSlider] = useState(false);\n\n const fromSliderRef = useRef<HTMLInputElement>(null);\n const toSliderRef = useRef<HTMLInputElement>(null);\n const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n const toSliderThumbRef = useRef<HTMLDivElement>(null);\n const fromSliderThumbContentRef = useRef<HTMLDivElement>(null);\n const toSliderThumbContentRef = useRef<HTMLDivElement>(null);\n const sliderWrapperRef = useRef<HTMLDivElement>(null);\n\n const sliderWrapperSize = useElementSize(sliderWrapperRef);\n\n const theme = useTheme();\n\n useEffect(() => {\n if (shouldShowThumbLabel) {\n setThumbWidth(getThumbMaxWidth({ maxNumber: maxValue, thumbLabelFormatter }));\n }\n }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);\n\n /**\n * This function sets the value\n */\n useEffect(() => {\n if (typeof value !== 'number') {\n return;\n }\n\n if (value >= minValue && value <= maxValue) {\n setFromValue(value);\n }\n }, [maxValue, minValue, value]);\n\n useEffect(() => {\n if (fromValue > toValue) {\n setFromValue(toValue);\n }\n\n if (toValue < fromValue) {\n setToValue(fromValue);\n }\n }, [fromValue, toValue]);\n\n const handleMouseUp = useCallback(() => {\n void setRefreshScrollEnabled(true);\n\n const from = Number(fromSliderRef.current?.value);\n const to = Number(toSliderRef.current?.value);\n\n if (typeof onSelect === 'function') {\n onSelect(\n interval ? undefined : from,\n interval ? { maxValue: to, minValue: from } : undefined,\n );\n }\n }, [interval, onSelect]);\n\n const handleControlFromSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n if (!fromSliderRef.current || !toSliderRef.current) {\n return;\n }\n\n setFromValue(Number(event.target.value));\n\n const from = Number(fromSliderRef.current.value);\n const to = Number(toSliderRef.current.value);\n\n if (typeof onChange === 'function') {\n onChange(undefined, { maxValue: to, minValue: from });\n }\n\n fillSlider({\n toSlider: toSliderRef.current,\n fromSlider: fromSliderRef.current,\n theme,\n });\n\n if (from > to) {\n fromSliderRef.current.value = String(to);\n } else {\n fromSliderRef.current.value = String(from);\n }\n },\n [onChange, theme],\n );\n\n const handleControlToSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n void setRefreshScrollEnabled(false);\n\n if (!fromSliderRef.current || !toSliderRef.current) {\n return;\n }\n\n setToValue(Number(event.target.value));\n\n const from = Number(fromSliderRef.current.value);\n const to = Number(toSliderRef.current.value);\n\n if (typeof onChange === 'function') {\n onChange(undefined, { maxValue: to, minValue: from });\n }\n\n fillSlider({\n toSlider: toSliderRef.current,\n fromSlider: fromSliderRef.current,\n theme,\n });\n\n if (from <= to) {\n toSliderRef.current.value = String(to);\n } else {\n toSliderRef.current.value = String(from);\n }\n },\n [onChange, theme],\n );\n\n useEffect(() => {\n if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n return;\n }\n\n setFromValue(interval.minValue);\n setToValue(interval.maxValue);\n\n fromSliderRef.current.value = String(interval.minValue);\n toSliderRef.current.value = String(interval.maxValue);\n\n fillSlider({\n fromSlider: fromSliderRef.current,\n toSlider: toSliderRef.current,\n theme,\n });\n // Note: interval can´t be in the deps because of rerender\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [theme]);\n\n /**\n * This function updates the value\n */\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n void setRefreshScrollEnabled(false);\n\n let newValue = Number(event.target.value);\n\n if (newValue > maxValue) {\n newValue = maxValue;\n } else if (newValue < minValue) {\n newValue = minValue;\n }\n\n if (interval) {\n handleControlFromSlider(event);\n\n return;\n }\n\n setFromValue(newValue);\n\n if (onChange) {\n onChange(newValue);\n }\n },\n [handleControlFromSlider, interval, maxValue, minValue, onChange],\n );\n\n const fromSliderThumbPosition = useMemo(() => {\n if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {\n return calculateGradientOffset({\n max: maxValue,\n min: minValue,\n value: fromValue,\n thumbWidth: 40,\n containerWidth: fromSliderRef.current.offsetWidth,\n });\n }\n\n return 0;\n }, [fromValue, maxValue, minValue, sliderWrapperSize]);\n\n const toSliderThumbPosition = useMemo(() => {\n if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {\n return calculateGradientOffset({\n max: maxValue,\n min: minValue,\n value: toValue,\n thumbWidth: 40,\n containerWidth: toSliderRef.current.offsetWidth,\n });\n }\n return 0;\n }, [toValue, minValue, maxValue, sliderWrapperSize]);\n\n const toSliderThumbContentPosition = useMemo(\n () =>\n calculatePopupPosition({\n min: minValue,\n max: maxValue,\n sliderValue: toValue,\n popupWidth: thumbWidth,\n }),\n [maxValue, minValue, thumbWidth, toValue],\n );\n\n const fromSliderThumbContentPosition = useMemo(\n () =>\n calculatePopupPosition({\n min: minValue,\n max: maxValue,\n sliderValue: fromValue,\n popupWidth: thumbWidth,\n }),\n [fromValue, maxValue, minValue, thumbWidth],\n );\n\n const handleTouchStart = useCallback(() => {\n if (shouldShowThumbLabel) {\n setIsBigSlider(true);\n }\n }, [shouldShowThumbLabel]);\n\n const handleTouchEnd = useCallback(() => {\n const from = Number(fromSliderRef.current?.value);\n const to = Number(toSliderRef.current?.value);\n\n if (typeof onSelect === 'function') {\n onSelect(\n interval ? undefined : from,\n interval ? { maxValue: to, minValue: from } : undefined,\n );\n }\n\n if (shouldShowThumbLabel) {\n setIsBigSlider(false);\n }\n }, [interval, onSelect, shouldShowThumbLabel]);\n\n return useMemo(\n () => (\n <StyledSlider ref={sliderWrapperRef}>\n <StyledSliderInput\n animate={{ height: isBigSlider ? 30 : 10 }}\n initial={{ height: 10 }}\n exit={{ height: 10 }}\n $thumbWidth={40}\n ref={fromSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={fromValue}\n step={steps}\n max={maxValue % steps === 0 ? maxValue : maxValue + steps - (maxValue % steps)}\n min={minValue % steps === 0 ? minValue : minValue - (minValue % steps)}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onChange={handleInputChange}\n onMouseUp={handleMouseUp}\n $max={maxValue}\n $min={minValue}\n $value={fromValue}\n />\n <StyledSliderThumb\n ref={fromSliderThumbRef}\n $position={fromSliderThumbPosition}\n $isBigSlider={isBigSlider}\n >\n {shouldShowThumbLabel && (\n <StyledSliderThumbLabel\n $width={thumbWidth}\n $isBigSlider={isBigSlider}\n $position={fromSliderThumbContentPosition}\n ref={fromSliderThumbContentRef}\n >\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(fromValue)\n : fromValue}\n </StyledSliderThumbLabel>\n )}\n </StyledSliderThumb>\n {interval && (\n <StyledSliderThumb\n ref={toSliderThumbRef}\n $position={toSliderThumbPosition}\n $isBigSlider={isBigSlider}\n >\n {shouldShowThumbLabel && (\n <StyledSliderThumbLabel\n $width={thumbWidth}\n $isBigSlider={isBigSlider}\n $position={toSliderThumbContentPosition}\n ref={toSliderThumbContentRef}\n >\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(toValue)\n : toValue}\n </StyledSliderThumbLabel>\n )}\n </StyledSliderThumb>\n )}\n {interval && (\n <StyledSliderInput\n animate={{ height: isBigSlider ? 30 : 10 }}\n initial={{ height: 10 }}\n exit={{ height: 10 }}\n $thumbWidth={40}\n $max={maxValue}\n $min={minValue}\n $value={toValue}\n ref={toSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={toValue}\n step={steps}\n max={maxValue}\n min={minValue}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onChange={handleControlToSlider}\n onMouseUp={handleMouseUp}\n />\n )}\n </StyledSlider>\n ),\n [\n isBigSlider,\n interval,\n fromValue,\n steps,\n maxValue,\n minValue,\n handleTouchStart,\n handleTouchEnd,\n handleInputChange,\n handleMouseUp,\n fromSliderThumbPosition,\n shouldShowThumbLabel,\n thumbWidth,\n fromSliderThumbContentPosition,\n thumbLabelFormatter,\n toSliderThumbPosition,\n toSliderThumbContentPosition,\n toValue,\n handleControlToSlider,\n ],\n );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}
@@ -106,7 +106,7 @@ const StyledSliderThumbLabel = exports.StyledSliderThumbLabel = _styledComponent
106
106
  }) => ({
107
107
  style: {
108
108
  minWidth: `${$width}px`,
109
- top: `-${$isBigSlider ? 45 : 35}px`,
109
+ top: `-${$isBigSlider ? 56 : 48}px`,
110
110
  left: `${$position}px`
111
111
  }
112
112
  }))`
@@ -123,7 +123,7 @@ const StyledSliderThumbLabel = exports.StyledSliderThumbLabel = _styledComponent
123
123
  display: flex;
124
124
  align-items: center;
125
125
  justify-content: center;
126
- padding: 0 8px;
126
+ padding: 16px;
127
127
  white-space: nowrap;
128
128
 
129
129
  transition: top 0.2s ease 0s;
@@ -132,7 +132,7 @@ const StyledSliderThumbLabel = exports.StyledSliderThumbLabel = _styledComponent
132
132
  background-color: inherit;
133
133
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
134
134
  border-right: 1px solid rgba(0, 0, 0, 0.1);
135
- box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.4);
135
+ box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4);
136
136
  content: '';
137
137
  height: 14px;
138
138
  position: absolute;
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSlider","exports","styled","div","StyledSliderInput","motion","input","attrs","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","$position","$isBigSlider","left","height","StyledSliderThumbLabel","span","$width","minWidth","top"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n width: 100%;\n height: 30px;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n touch-action: none;\n user-select: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n $min: number;\n $max: number;\n $value: number;\n $isInterval: boolean;\n $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n style: {\n pointerEvents: $isInterval ? 'none' : 'all',\n width: `calc(100% - ${$thumbWidth}px)`,\n background: !$isInterval\n ? `linear-gradient(\n to right,\n ${(theme as Theme)['409'] ?? ''} 0%,\n ${(theme as Theme)['409'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n )`\n : undefined,\n },\n }),\n)`\n position: absolute;\n border-radius: 100px;\n -webkit-appearance: none;\n\n outline: none;\n cursor: pointer !important;\n z-index: 2;\n appearance: none;\n\n // Slider thumb for chrome\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 50px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n\n // slider thumb for firefox\n\n &::-moz-range-thumb {\n width: 50px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{\n $position: number;\n $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(\n ({ $position, $isBigSlider }) => ({\n style: {\n left: `${$position}px`,\n height: `${$isBigSlider ? 0 : 20}px`,\n },\n }),\n)`\n width: 20px;\n height: 20px;\n cursor: pointer;\n border-radius: 100px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n pointer-events: none;\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n white-space: nowrap;\n top: 5px;\n\n transition: top 0.2s ease 0s;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<{\n $position: number;\n $width: number;\n $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumbLabel = styled.span.attrs<StyledSliderThumbLabelProps>(\n ({ $position, $isBigSlider, $width }) => ({\n style: {\n minWidth: `${$width}px`,\n top: `-${$isBigSlider ? 45 : 35}px`,\n left: `${$position}px`,\n },\n }),\n)`\n pointer-events: none;\n color: #222;\n\n height: 20px;\n cursor: pointer;\n border-radius: 3px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n white-space: nowrap;\n\n transition: top 0.2s ease 0s;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.4);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n left: ${({ $position }) => $position * -1}px;\n transform: rotate(225deg);\n bottom: -7px;\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n border-radius: 3px;\n top: 0;\n z-index: -1;\n }\n`;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Slider.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSlider","exports","styled","div","StyledSliderInput","motion","input","attrs","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","$position","$isBigSlider","left","height","StyledSliderThumbLabel","span","$width","minWidth","top"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n width: 100%;\n height: 30px;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n touch-action: none;\n user-select: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n $min: number;\n $max: number;\n $value: number;\n $isInterval: boolean;\n $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n style: {\n pointerEvents: $isInterval ? 'none' : 'all',\n width: `calc(100% - ${$thumbWidth}px)`,\n background: !$isInterval\n ? `linear-gradient(\n to right,\n ${(theme as Theme)['409'] ?? ''} 0%,\n ${(theme as Theme)['409'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n )`\n : undefined,\n },\n }),\n)`\n position: absolute;\n border-radius: 100px;\n -webkit-appearance: none;\n\n outline: none;\n cursor: pointer !important;\n z-index: 2;\n appearance: none;\n\n // Slider thumb for chrome\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 50px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n\n // slider thumb for firefox\n\n &::-moz-range-thumb {\n width: 50px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{\n $position: number;\n $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(\n ({ $position, $isBigSlider }) => ({\n style: {\n left: `${$position}px`,\n height: `${$isBigSlider ? 0 : 20}px`,\n },\n }),\n)`\n width: 20px;\n height: 20px;\n cursor: pointer;\n border-radius: 100px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n pointer-events: none;\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n white-space: nowrap;\n top: 5px;\n\n transition: top 0.2s ease 0s;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<{\n $position: number;\n $width: number;\n $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumbLabel = styled.span.attrs<StyledSliderThumbLabelProps>(\n ({ $position, $isBigSlider, $width }) => ({\n style: {\n minWidth: `${$width}px`,\n top: `-${$isBigSlider ? 56 : 48}px`,\n left: `${$position}px`,\n },\n }),\n)`\n pointer-events: none;\n color: #222;\n\n height: 20px;\n cursor: pointer;\n border-radius: 3px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n white-space: nowrap;\n\n transition: top 0.2s ease 0s;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n left: ${({ $position }) => $position * -1}px;\n transform: rotate(225deg);\n bottom: -7px;\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n border-radius: 3px;\n top: 0;\n z-index: -1;\n }\n`;\n"],"mappings":"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","ignoreList":[]}
@@ -17,6 +17,7 @@ export const StyledMotionContextMenuContent = styled(motion.div)`
17
17
  } = _ref2;
18
18
  return theme.text;
19
19
  }};
20
+ pointer-events: all;
20
21
  position: absolute;
21
22
  z-index: 10;
22
23
 
@@ -1 +1 @@
1
- {"version":3,"file":"ContextMenuContent.styles.js","names":["motion","styled","css","ContextMenuAlignment","StyledMotionContextMenuContent","div","_ref","theme","_ref2","text","_ref3","$position","TopLeft","BottomLeft","TopRight","BottomRight","TopCenter","BottomCenter","undefined","StyledContextMenuContentItem","_ref4","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { ContextMenuAlignment } from '../../../types/contextMenu';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n $position: ContextMenuAlignment;\n}>;\n\nexport const StyledMotionContextMenuContent = styled(\n motion.div,\n)<StyledMotionContextMenuContentProps>`\n background-color: ${({ theme }: StyledMotionContextMenuContentProps) => theme['001']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n position: absolute;\n z-index: 10;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ $position }) => {\n switch ($position) {\n case ContextMenuAlignment.TopLeft:\n return css`\n bottom: -7px;\n right: 7px;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomLeft:\n return css`\n top: -7px;\n right: 7px;\n transform: rotate(225deg);\n `;\n case ContextMenuAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: 7px;\n `;\n case ContextMenuAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 7px;\n `;\n case ContextMenuAlignment.TopCenter:\n return css`\n bottom: -7px;\n right: 45%;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomCenter:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 45%;\n `;\n\n default:\n return undefined;\n }\n }}\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n }\n`;\n\ntype StyledContextMenuContentItemProps = WithTheme<unknown>;\n\nexport const StyledContextMenuContentItem = styled.div<StyledContextMenuContentItemProps>`\n cursor: pointer;\n display: flex;\n padding: 5px 8px 5px 5px;\n transition: background-color 0.3s ease;\n\n &:hover {\n background-color: ${({ theme }: StyledContextMenuContentItemProps) =>\n theme['secondary-103']};\n }\n`;\n\nexport const StyledContextMenuContentItemIconWrapper = styled.div`\n flex: 0 0 auto;\n margin: 0 8px 0 3px;\n width: 20px;\n`;\n\nexport const StyledContextMenuContentItemText = styled.div`\n flex: 0 0 auto;\n white-space: nowrap;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,oBAAoB,QAAQ,4BAA4B;AAOjE,OAAO,MAAMC,8BAA8B,GAAGH,MAAM,CAChDD,MAAM,CAACK,GACX,CAAsC;AACtC,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAA2C,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AACxF;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAA2C,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAACE,IAAI;AAAA;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUC,KAAA,IAAmB;EAAA,IAAlB;IAAEC;EAAU,CAAC,GAAAD,KAAA;EACZ,QAAQC,SAAS;IACb,KAAKR,oBAAoB,CAACS,OAAO;MAC7B,OAAOV,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACU,UAAU;MAChC,OAAOX,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACW,QAAQ;MAC9B,OAAOZ,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACY,WAAW;MACjC,OAAOb,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACa,SAAS;MAC/B,OAAOd,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACc,YAAY;MAClC,OAAOf,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IAEL;MACI,OAAOgB,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,4BAA4B,GAAGlB,MAAM,CAACI,GAAsC;AACzF;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4Be,KAAA;EAAA,IAAC;IAAEb;EAAyC,CAAC,GAAAa,KAAA;EAAA,OAC7Db,KAAK,CAAC,eAAe,CAAC;AAAA;AAClC;AACA,CAAC;AAED,OAAO,MAAMc,uCAAuC,GAAGpB,MAAM,CAACI,GAAG;AACjE;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMiB,gCAAgC,GAAGrB,MAAM,CAACI,GAAG;AAC1D;AACA;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"ContextMenuContent.styles.js","names":["motion","styled","css","ContextMenuAlignment","StyledMotionContextMenuContent","div","_ref","theme","_ref2","text","_ref3","$position","TopLeft","BottomLeft","TopRight","BottomRight","TopCenter","BottomCenter","undefined","StyledContextMenuContentItem","_ref4","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { ContextMenuAlignment } from '../../../types/contextMenu';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n $position: ContextMenuAlignment;\n}>;\n\nexport const StyledMotionContextMenuContent = styled(\n motion.div,\n)<StyledMotionContextMenuContentProps>`\n background-color: ${({ theme }: StyledMotionContextMenuContentProps) => theme['001']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n pointer-events: all;\n position: absolute;\n z-index: 10;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ $position }) => {\n switch ($position) {\n case ContextMenuAlignment.TopLeft:\n return css`\n bottom: -7px;\n right: 7px;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomLeft:\n return css`\n top: -7px;\n right: 7px;\n transform: rotate(225deg);\n `;\n case ContextMenuAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: 7px;\n `;\n case ContextMenuAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 7px;\n `;\n case ContextMenuAlignment.TopCenter:\n return css`\n bottom: -7px;\n right: 45%;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomCenter:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 45%;\n `;\n\n default:\n return undefined;\n }\n }}\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n }\n`;\n\ntype StyledContextMenuContentItemProps = WithTheme<unknown>;\n\nexport const StyledContextMenuContentItem = styled.div<StyledContextMenuContentItemProps>`\n cursor: pointer;\n display: flex;\n padding: 5px 8px 5px 5px;\n transition: background-color 0.3s ease;\n\n &:hover {\n background-color: ${({ theme }: StyledContextMenuContentItemProps) =>\n theme['secondary-103']};\n }\n`;\n\nexport const StyledContextMenuContentItemIconWrapper = styled.div`\n flex: 0 0 auto;\n margin: 0 8px 0 3px;\n width: 20px;\n`;\n\nexport const StyledContextMenuContentItemText = styled.div`\n flex: 0 0 auto;\n white-space: nowrap;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,oBAAoB,QAAQ,4BAA4B;AAOjE,OAAO,MAAMC,8BAA8B,GAAGH,MAAM,CAChDD,MAAM,CAACK,GACX,CAAsC;AACtC,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAA2C,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AACxF;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAA2C,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAACE,IAAI;AAAA;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUC,KAAA,IAAmB;EAAA,IAAlB;IAAEC;EAAU,CAAC,GAAAD,KAAA;EACZ,QAAQC,SAAS;IACb,KAAKR,oBAAoB,CAACS,OAAO;MAC7B,OAAOV,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACU,UAAU;MAChC,OAAOX,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACW,QAAQ;MAC9B,OAAOZ,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACY,WAAW;MACjC,OAAOb,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACa,SAAS;MAC/B,OAAOd,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACc,YAAY;MAClC,OAAOf,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IAEL;MACI,OAAOgB,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,4BAA4B,GAAGlB,MAAM,CAACI,GAAsC;AACzF;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4Be,KAAA;EAAA,IAAC;IAAEb;EAAyC,CAAC,GAAAa,KAAA;EAAA,OAC7Db,KAAK,CAAC,eAAe,CAAC;AAAA;AAClC;AACA,CAAC;AAED,OAAO,MAAMc,uCAAuC,GAAGpB,MAAM,CAACI,GAAG;AACjE;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMiB,gCAAgC,GAAGrB,MAAM,CAACI,GAAG;AAC1D;AACA;AACA,CAAC","ignoreList":[]}
@@ -1,6 +1,7 @@
1
1
  import { AnimatePresence } from 'framer-motion';
2
2
  import React, { useCallback, useContext, useEffect } from 'react';
3
3
  import { useUuid } from '../../../hooks/uuid';
4
+ import { AccordionContext } from '../../accordion/Accordion';
4
5
  import AreaContextProvider from '../../area-provider/AreaContextProvider';
5
6
  import { ListContext } from '../List';
6
7
  import ListItemBody from './list-item-body/ListItemBody';
@@ -33,6 +34,9 @@ const ListItem = _ref => {
33
34
  openItemUuid,
34
35
  updateOpenItemUuid
35
36
  } = useContext(ListContext);
37
+ const {
38
+ isWrapped: isParentAccordionWrapped
39
+ } = useContext(AccordionContext);
36
40
  const uuid = useUuid();
37
41
  const isExpandable = children !== undefined;
38
42
  const isItemOpen = isOpen ?? openItemUuid === uuid;
@@ -77,6 +81,7 @@ const ListItem = _ref => {
77
81
  key: `list-item-${uuid}`,
78
82
  $isClickable: isClickable,
79
83
  $isOpen: isItemOpen,
84
+ $isParentAccordionWrapped: isParentAccordionWrapped,
80
85
  $isWrapped: isWrapped,
81
86
  $shouldShowSeparatorBelow: shouldShowSeparatorBelow
82
87
  }, /*#__PURE__*/React.createElement(ListItemHead, {
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useUuid","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","subtitle","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","uuid","isExpandable","undefined","isItemOpen","handleHeadClick","event","shouldOnlyOpen","isClickable","createElement","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isWrapped","$shouldShowSeparatorBelow","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 type { IListItemRightElements } from '../../../types/list';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\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 ListItemElements = [ReactNode, ...ReactNode[]];\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?: ListItemElements;\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?: IListItemRightElements;\n /**\n * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n * hidden.\n */\n shouldHideImageOrIconBackground?: boolean;\n /**\n * If the `ListItem` is expandable, the indicator is displayed on the left\n * side of the header. If this property is set to true, the indicator is\n * hidden.\n */\n shouldHideIndicator?: boolean;\n /**\n * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.\n */\n shouldShowRoundImageOrIcon?: boolean;\n /**\n * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n */\n shouldShowSeparatorBelow?: 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 * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: 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 shouldHideImageOrIconBackground,\n shouldHideIndicator,\n subtitle,\n shouldShowRoundImageOrIcon,\n shouldShowSeparatorBelow = false,\n title,\n titleElement,\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 $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n >\n <ListItemHead\n hoverItem={hoverItem}\n icons={icons}\n images={images}\n isAnyItemExpandable={isAnyItemExpandable}\n isExpandable={isExpandable}\n isOpen={isItemOpen}\n leftElements={leftElements}\n onClick={isClickable ? handleHeadClick : undefined}\n onLongPress={onLongPress}\n rightElements={rightElements}\n shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n shouldHideIndicator={shouldHideIndicator}\n subtitle={subtitle}\n shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n title={title}\n titleElement={titleElement}\n />\n <AnimatePresence initial={false}>\n {isExpandable && isItemOpen && (\n <ListItemBody id={uuid}>\n <AreaContextProvider>{children}</AreaContextProvider>\n </ListItemBody>\n )}\n </AnimatePresence>\n </StyledMotionListItem>\n );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useUuid","AccordionContext","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","subtitle","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","isParentAccordionWrapped","uuid","isExpandable","undefined","isItemOpen","handleHeadClick","event","shouldOnlyOpen","isClickable","createElement","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isParentAccordionWrapped","$isWrapped","$shouldShowSeparatorBelow","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 type { IListItemRightElements } from '../../../types/list';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\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 ListItemElements = [ReactNode, ...ReactNode[]];\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?: ListItemElements;\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?: IListItemRightElements;\n /**\n * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n * hidden.\n */\n shouldHideImageOrIconBackground?: boolean;\n /**\n * If the `ListItem` is expandable, the indicator is displayed on the left\n * side of the header. If this property is set to true, the indicator is\n * hidden.\n */\n shouldHideIndicator?: boolean;\n /**\n * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.\n */\n shouldShowRoundImageOrIcon?: boolean;\n /**\n * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n */\n shouldShowSeparatorBelow?: 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 * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: 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 shouldHideImageOrIconBackground,\n shouldHideIndicator,\n subtitle,\n shouldShowRoundImageOrIcon,\n shouldShowSeparatorBelow = false,\n title,\n titleElement,\n}) => {\n const {\n incrementExpandableItemCount,\n isAnyItemExpandable,\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n } = useContext(ListContext);\n\n const { isWrapped: isParentAccordionWrapped } = useContext(AccordionContext);\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 $isParentAccordionWrapped={isParentAccordionWrapped}\n $isWrapped={isWrapped}\n $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n >\n <ListItemHead\n hoverItem={hoverItem}\n icons={icons}\n images={images}\n isAnyItemExpandable={isAnyItemExpandable}\n isExpandable={isExpandable}\n isOpen={isItemOpen}\n leftElements={leftElements}\n onClick={isClickable ? handleHeadClick : undefined}\n onLongPress={onLongPress}\n rightElements={rightElements}\n shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n shouldHideIndicator={shouldHideIndicator}\n subtitle={subtitle}\n shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n title={title}\n titleElement={titleElement}\n />\n <AnimatePresence initial={false}>\n {isExpandable && isItemOpen && (\n <ListItemBody id={uuid}>\n <AreaContextProvider>{children}</AreaContextProvider>\n </ListItemBody>\n )}\n </AnimatePresence>\n </StyledMotionListItem>\n );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
@@ -15,10 +15,19 @@ export const StyledMotionListItem = styled(motion.div)`
15
15
  transition: background-color 0.3s ease;
16
16
 
17
17
  ${_ref2 => {
18
+ let {
19
+ $isParentAccordionWrapped
20
+ } = _ref2;
21
+ return $isParentAccordionWrapped && css`
22
+ padding-left: 8px;
23
+ `;
24
+ }}
25
+
26
+ ${_ref3 => {
18
27
  let {
19
28
  $isClickable,
20
29
  theme
21
- } = _ref2;
30
+ } = _ref3;
22
31
  return $isClickable && css`
23
32
  &&:hover {
24
33
  background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
@@ -26,12 +35,14 @@ export const StyledMotionListItem = styled(motion.div)`
26
35
  `;
27
36
  }}
28
37
 
29
- ${_ref3 => {
38
+ ${_ref4 => {
30
39
  let {
40
+ $isOpen,
41
+ $isWrapped,
31
42
  $shouldShowSeparatorBelow,
32
43
  theme
33
- } = _ref3;
34
- return ($shouldShowSeparatorBelow || theme.accordionLines) && css`
44
+ } = _ref4;
45
+ return ($shouldShowSeparatorBelow || (!$isOpen || $isWrapped) && theme.accordionLines) && css`
35
46
  &&:not(:last-child) {
36
47
  border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
37
48
  rgba(${theme['headline-rgb']}, 0.5);
@@ -39,10 +50,10 @@ export const StyledMotionListItem = styled(motion.div)`
39
50
  `;
40
51
  }}}
41
52
 
42
- ${_ref4 => {
53
+ ${_ref5 => {
43
54
  let {
44
55
  $isWrapped
45
- } = _ref4;
56
+ } = _ref5;
46
57
  return $isWrapped && css`
47
58
  padding-left: 26px;
48
59
  `;
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.styles.js","names":["motion","styled","css","StyledMotionListItem","div","_ref","$isOpen","theme","cardBackgroundOpacity","_ref2","$isClickable","_ref3","$shouldShowSeparatorBelow","accordionLines","_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 $shouldShowSeparatorBelow: 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 ${({ $shouldShowSeparatorBelow, theme }: StyledListItemProps) =>\n ($shouldShowSeparatorBelow || theme.accordionLines) &&\n css`\n &&:not(:last-child) {\n border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n rgba(${theme['headline-rgb']}, 0.5);\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;AAU/C,OAAO,MAAMC,oBAAoB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AAC3E,MAAMC,IAAA;EAAA,IAAC;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAAF,IAAA;EAAA,OACjBC,OAAO,IACPJ,GAAG;AACX,qCAAqCK,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,SAAS;AAAA;AACT;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,YAAY;IAAEH;EAAM,CAAC,GAAAE,KAAA;EAAA,OACtBC,YAAY,IACZR,GAAG;AACX;AACA,yCAAyCK,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AAAA;AACT;AACA,MAAMG,KAAA;EAAA,IAAC;IAAEC,yBAAyB;IAAEL;EAA2B,CAAC,GAAAI,KAAA;EAAA,OACxD,CAACC,yBAAyB,IAAIL,KAAK,CAACM,cAAc,KAClDX,GAAG;AACX;AACA,iCAAiCU,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC1E,2BAA2BL,KAAK,CAAC,cAAc,CAAC;AAChD;AACA,SAAS;AAAA;AACT;AACA,MAAMO,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OACbC,UAAU,IACVb,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"ListItem.styles.js","names":["motion","styled","css","StyledMotionListItem","div","_ref","$isOpen","theme","cardBackgroundOpacity","_ref2","$isParentAccordionWrapped","_ref3","$isClickable","_ref4","$isWrapped","$shouldShowSeparatorBelow","accordionLines","_ref5"],"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 $isParentAccordionWrapped: boolean;\n $isWrapped: boolean;\n $shouldShowSeparatorBelow: 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 ${({ $isParentAccordionWrapped }: StyledListItemProps) =>\n $isParentAccordionWrapped &&\n css`\n padding-left: 8px;\n `}\n\n ${({ $isClickable, theme }) =>\n $isClickable &&\n css`\n &&:hover {\n background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n }\n `}\n \n ${({ $isOpen, $isWrapped, $shouldShowSeparatorBelow, theme }: StyledListItemProps) =>\n ($shouldShowSeparatorBelow || ((!$isOpen || $isWrapped) && theme.accordionLines)) &&\n css`\n &&:not(:last-child) {\n border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n rgba(${theme['headline-rgb']}, 0.5);\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;AAW/C,OAAO,MAAMC,oBAAoB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AAC3E,MAAMC,IAAA;EAAA,IAAC;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAAF,IAAA;EAAA,OACjBC,OAAO,IACPJ,GAAG;AACX,qCAAqCK,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,SAAS;AAAA;AACT;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAA+C,CAAC,GAAAD,KAAA;EAAA,OACjDC,yBAAyB,IACzBR,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA,MAAMS,KAAA;EAAA,IAAC;IAAEC,YAAY;IAAEL;EAAM,CAAC,GAAAI,KAAA;EAAA,OACtBC,YAAY,IACZV,GAAG;AACX;AACA,yCAAyCK,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AAAA;AACT;AACA,MAAMK,KAAA;EAAA,IAAC;IAAEP,OAAO;IAAEQ,UAAU;IAAEC,yBAAyB;IAAER;EAA2B,CAAC,GAAAM,KAAA;EAAA,OAC7E,CAACE,yBAAyB,IAAK,CAAC,CAACT,OAAO,IAAIQ,UAAU,KAAKP,KAAK,CAACS,cAAe,KAChFd,GAAG;AACX;AACA,iCAAiCa,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC1E,2BAA2BR,KAAK,CAAC,cAAc,CAAC;AAChD;AACA,SAAS;AAAA;AACT;AACA,MAAMU,KAAA;EAAA,IAAC;IAAEH;EAAW,CAAC,GAAAG,KAAA;EAAA,OACbH,UAAU,IACVZ,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
@@ -139,7 +139,12 @@ const Slider = _ref => {
139
139
  */
140
140
  const handleInputChange = useCallback(event => {
141
141
  void setRefreshScrollEnabled(false);
142
- const newValue = Number(event.target.value);
142
+ let newValue = Number(event.target.value);
143
+ if (newValue > maxValue) {
144
+ newValue = maxValue;
145
+ } else if (newValue < minValue) {
146
+ newValue = minValue;
147
+ }
143
148
  if (interval) {
144
149
  handleControlFromSlider(event);
145
150
  return;
@@ -148,7 +153,7 @@ const Slider = _ref => {
148
153
  if (onChange) {
149
154
  onChange(newValue);
150
155
  }
151
- }, [handleControlFromSlider, interval, onChange]);
156
+ }, [handleControlFromSlider, interval, maxValue, minValue, onChange]);
152
157
  const fromSliderThumbPosition = useMemo(() => {
153
158
  if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {
154
159
  return calculateGradientOffset({
@@ -221,8 +226,8 @@ const Slider = _ref => {
221
226
  type: "range",
222
227
  value: fromValue,
223
228
  step: steps,
224
- max: maxValue,
225
- min: minValue,
229
+ max: maxValue % steps === 0 ? maxValue : maxValue + steps - maxValue % steps,
230
+ min: minValue % steps === 0 ? minValue : minValue - minValue % steps,
226
231
  onTouchStart: handleTouchStart,
227
232
  onTouchEnd: handleTouchEnd,
228
233
  onChange: handleInputChange,
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.js","names":["setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","useTheme","useElementSize","calculateGradientOffset","calculatePopupPosition","fillSlider","getThumbMaxWidth","StyledSlider","StyledSliderInput","StyledSliderThumb","StyledSliderThumbLabel","Slider","_ref","maxValue","minValue","value","onSelect","onChange","interval","thumbLabelFormatter","shouldShowThumbLabel","steps","fromValue","setFromValue","toValue","setToValue","thumbWidth","setThumbWidth","isBigSlider","setIsBigSlider","fromSliderRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","fromSliderThumbContentRef","toSliderThumbContentRef","sliderWrapperRef","sliderWrapperSize","theme","maxNumber","handleMouseUp","from","Number","current","to","undefined","handleControlFromSlider","event","target","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","newValue","fromSliderThumbPosition","max","min","containerWidth","offsetWidth","toSliderThumbPosition","toSliderThumbContentPosition","sliderValue","popupWidth","fromSliderThumbContentPosition","handleTouchStart","handleTouchEnd","createElement","ref","animate","height","initial","exit","$thumbWidth","$isInterval","type","step","onTouchStart","onTouchEnd","onMouseUp","$max","$min","$value","$position","$isBigSlider","$width","displayName"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport {\n calculateGradientOffset,\n calculatePopupPosition,\n fillSlider,\n getThumbMaxWidth,\n} from '../../utils/slider';\nimport {\n StyledSlider,\n StyledSliderInput,\n StyledSliderThumb,\n StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n maxValue: number;\n minValue: number;\n}\n\nexport type SliderProps = {\n /**\n * The range that can be selected with two thumbs..\n */\n interval?: SliderInterval;\n /**\n * The maximum value of the slider.\n */\n maxValue: number;\n /**\n * The minimum value of the slider.\n */\n minValue: number;\n /**\n * Function that will be executed when the value is selected.\n */\n onSelect?: (value?: number, interval?: SliderInterval) => void;\n /**\n * Function that will be executed when the value is changed.\n */\n onChange?: (value?: number, interval?: SliderInterval) => void;\n /**\n * Whether the current value should be displayed inside the slider thumb.\n */\n shouldShowThumbLabel?: boolean;\n /**\n * The steps of the slider.\n */\n steps?: number;\n /**\n * A function to format the thumb label.\n */\n thumbLabelFormatter?: (value: number) => string;\n /**\n * the Value that the slider should have.\n */\n value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n maxValue,\n minValue,\n value,\n onSelect,\n onChange,\n interval,\n thumbLabelFormatter,\n shouldShowThumbLabel = false,\n steps = 1,\n}) => {\n const [fromValue, setFromValue] = useState(0);\n const [toValue, setToValue] = useState(maxValue);\n const [thumbWidth, setThumbWidth] = useState(20);\n const [isBigSlider, setIsBigSlider] = useState(false);\n\n const fromSliderRef = useRef<HTMLInputElement>(null);\n const toSliderRef = useRef<HTMLInputElement>(null);\n const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n const toSliderThumbRef = useRef<HTMLDivElement>(null);\n const fromSliderThumbContentRef = useRef<HTMLDivElement>(null);\n const toSliderThumbContentRef = useRef<HTMLDivElement>(null);\n const sliderWrapperRef = useRef<HTMLDivElement>(null);\n\n const sliderWrapperSize = useElementSize(sliderWrapperRef);\n\n const theme = useTheme();\n\n useEffect(() => {\n if (shouldShowThumbLabel) {\n setThumbWidth(getThumbMaxWidth({ maxNumber: maxValue, thumbLabelFormatter }));\n }\n }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);\n\n /**\n * This function sets the value\n */\n useEffect(() => {\n if (typeof value !== 'number') {\n return;\n }\n\n if (value >= minValue && value <= maxValue) {\n setFromValue(value);\n }\n }, [maxValue, minValue, value]);\n\n useEffect(() => {\n if (fromValue > toValue) {\n setFromValue(toValue);\n }\n\n if (toValue < fromValue) {\n setToValue(fromValue);\n }\n }, [fromValue, toValue]);\n\n const handleMouseUp = useCallback(() => {\n void setRefreshScrollEnabled(true);\n\n const from = Number(fromSliderRef.current?.value);\n const to = Number(toSliderRef.current?.value);\n\n if (typeof onSelect === 'function') {\n onSelect(\n interval ? undefined : from,\n interval ? { maxValue: to, minValue: from } : undefined,\n );\n }\n }, [interval, onSelect]);\n\n const handleControlFromSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n if (!fromSliderRef.current || !toSliderRef.current) {\n return;\n }\n\n setFromValue(Number(event.target.value));\n\n const from = Number(fromSliderRef.current.value);\n const to = Number(toSliderRef.current.value);\n\n if (typeof onChange === 'function') {\n onChange(undefined, { maxValue: to, minValue: from });\n }\n\n fillSlider({\n toSlider: toSliderRef.current,\n fromSlider: fromSliderRef.current,\n theme,\n });\n\n if (from > to) {\n fromSliderRef.current.value = String(to);\n } else {\n fromSliderRef.current.value = String(from);\n }\n },\n [onChange, theme],\n );\n\n const handleControlToSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n void setRefreshScrollEnabled(false);\n\n if (!fromSliderRef.current || !toSliderRef.current) {\n return;\n }\n\n setToValue(Number(event.target.value));\n\n const from = Number(fromSliderRef.current.value);\n const to = Number(toSliderRef.current.value);\n\n if (typeof onChange === 'function') {\n onChange(undefined, { maxValue: to, minValue: from });\n }\n\n fillSlider({\n toSlider: toSliderRef.current,\n fromSlider: fromSliderRef.current,\n theme,\n });\n\n if (from <= to) {\n toSliderRef.current.value = String(to);\n } else {\n toSliderRef.current.value = String(from);\n }\n },\n [onChange, theme],\n );\n\n useEffect(() => {\n if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n return;\n }\n\n setFromValue(interval.minValue);\n setToValue(interval.maxValue);\n\n fromSliderRef.current.value = String(interval.minValue);\n toSliderRef.current.value = String(interval.maxValue);\n\n fillSlider({\n fromSlider: fromSliderRef.current,\n toSlider: toSliderRef.current,\n theme,\n });\n // Note: interval can´t be in the deps because of rerender\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [theme]);\n\n /**\n * This function updates the value\n */\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n void setRefreshScrollEnabled(false);\n\n const newValue = Number(event.target.value);\n\n if (interval) {\n handleControlFromSlider(event);\n\n return;\n }\n\n setFromValue(newValue);\n\n if (onChange) {\n onChange(newValue);\n }\n },\n [handleControlFromSlider, interval, onChange],\n );\n\n const fromSliderThumbPosition = useMemo(() => {\n if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {\n return calculateGradientOffset({\n max: maxValue,\n min: minValue,\n value: fromValue,\n thumbWidth: 40,\n containerWidth: fromSliderRef.current.offsetWidth,\n });\n }\n\n return 0;\n }, [fromValue, maxValue, minValue, sliderWrapperSize]);\n\n const toSliderThumbPosition = useMemo(() => {\n if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {\n return calculateGradientOffset({\n max: maxValue,\n min: minValue,\n value: toValue,\n thumbWidth: 40,\n containerWidth: toSliderRef.current.offsetWidth,\n });\n }\n return 0;\n }, [toValue, minValue, maxValue, sliderWrapperSize]);\n\n const toSliderThumbContentPosition = useMemo(\n () =>\n calculatePopupPosition({\n min: minValue,\n max: maxValue,\n sliderValue: toValue,\n popupWidth: thumbWidth,\n }),\n [maxValue, minValue, thumbWidth, toValue],\n );\n\n const fromSliderThumbContentPosition = useMemo(\n () =>\n calculatePopupPosition({\n min: minValue,\n max: maxValue,\n sliderValue: fromValue,\n popupWidth: thumbWidth,\n }),\n [fromValue, maxValue, minValue, thumbWidth],\n );\n\n const handleTouchStart = useCallback(() => {\n if (shouldShowThumbLabel) {\n setIsBigSlider(true);\n }\n }, [shouldShowThumbLabel]);\n\n const handleTouchEnd = useCallback(() => {\n const from = Number(fromSliderRef.current?.value);\n const to = Number(toSliderRef.current?.value);\n\n if (typeof onSelect === 'function') {\n onSelect(\n interval ? undefined : from,\n interval ? { maxValue: to, minValue: from } : undefined,\n );\n }\n\n if (shouldShowThumbLabel) {\n setIsBigSlider(false);\n }\n }, [interval, onSelect, shouldShowThumbLabel]);\n\n return useMemo(\n () => (\n <StyledSlider ref={sliderWrapperRef}>\n <StyledSliderInput\n animate={{ height: isBigSlider ? 30 : 10 }}\n initial={{ height: 10 }}\n exit={{ height: 10 }}\n $thumbWidth={40}\n ref={fromSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={fromValue}\n step={steps}\n max={maxValue}\n min={minValue}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onChange={handleInputChange}\n onMouseUp={handleMouseUp}\n $max={maxValue}\n $min={minValue}\n $value={fromValue}\n />\n <StyledSliderThumb\n ref={fromSliderThumbRef}\n $position={fromSliderThumbPosition}\n $isBigSlider={isBigSlider}\n >\n {shouldShowThumbLabel && (\n <StyledSliderThumbLabel\n $width={thumbWidth}\n $isBigSlider={isBigSlider}\n $position={fromSliderThumbContentPosition}\n ref={fromSliderThumbContentRef}\n >\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(fromValue)\n : fromValue}\n </StyledSliderThumbLabel>\n )}\n </StyledSliderThumb>\n {interval && (\n <StyledSliderThumb\n ref={toSliderThumbRef}\n $position={toSliderThumbPosition}\n $isBigSlider={isBigSlider}\n >\n {shouldShowThumbLabel && (\n <StyledSliderThumbLabel\n $width={thumbWidth}\n $isBigSlider={isBigSlider}\n $position={toSliderThumbContentPosition}\n ref={toSliderThumbContentRef}\n >\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(toValue)\n : toValue}\n </StyledSliderThumbLabel>\n )}\n </StyledSliderThumb>\n )}\n {interval && (\n <StyledSliderInput\n animate={{ height: isBigSlider ? 30 : 10 }}\n initial={{ height: 10 }}\n exit={{ height: 10 }}\n $thumbWidth={40}\n $max={maxValue}\n $min={minValue}\n $value={toValue}\n ref={toSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={toValue}\n step={steps}\n max={maxValue}\n min={minValue}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onChange={handleControlToSlider}\n onMouseUp={handleMouseUp}\n />\n )}\n </StyledSlider>\n ),\n [\n isBigSlider,\n interval,\n fromValue,\n steps,\n maxValue,\n minValue,\n handleTouchStart,\n handleTouchEnd,\n handleInputChange,\n handleMouseUp,\n fromSliderThumbPosition,\n shouldShowThumbLabel,\n thumbWidth,\n fromSliderThumbContentPosition,\n thumbLabelFormatter,\n toSliderThumbPosition,\n toSliderThumbContentPosition,\n toValue,\n handleControlToSlider,\n ],\n );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Slider.js","names":["setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","useTheme","useElementSize","calculateGradientOffset","calculatePopupPosition","fillSlider","getThumbMaxWidth","StyledSlider","StyledSliderInput","StyledSliderThumb","StyledSliderThumbLabel","Slider","_ref","maxValue","minValue","value","onSelect","onChange","interval","thumbLabelFormatter","shouldShowThumbLabel","steps","fromValue","setFromValue","toValue","setToValue","thumbWidth","setThumbWidth","isBigSlider","setIsBigSlider","fromSliderRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","fromSliderThumbContentRef","toSliderThumbContentRef","sliderWrapperRef","sliderWrapperSize","theme","maxNumber","handleMouseUp","from","Number","current","to","undefined","handleControlFromSlider","event","target","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","newValue","fromSliderThumbPosition","max","min","containerWidth","offsetWidth","toSliderThumbPosition","toSliderThumbContentPosition","sliderValue","popupWidth","fromSliderThumbContentPosition","handleTouchStart","handleTouchEnd","createElement","ref","animate","height","initial","exit","$thumbWidth","$isInterval","type","step","onTouchStart","onTouchEnd","onMouseUp","$max","$min","$value","$position","$isBigSlider","$width","displayName"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport {\n calculateGradientOffset,\n calculatePopupPosition,\n fillSlider,\n getThumbMaxWidth,\n} from '../../utils/slider';\nimport {\n StyledSlider,\n StyledSliderInput,\n StyledSliderThumb,\n StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n maxValue: number;\n minValue: number;\n}\n\nexport type SliderProps = {\n /**\n * The range that can be selected with two thumbs..\n */\n interval?: SliderInterval;\n /**\n * The maximum value of the slider.\n */\n maxValue: number;\n /**\n * The minimum value of the slider.\n */\n minValue: number;\n /**\n * Function that will be executed when the value is selected.\n */\n onSelect?: (value?: number, interval?: SliderInterval) => void;\n /**\n * Function that will be executed when the value is changed.\n */\n onChange?: (value?: number, interval?: SliderInterval) => void;\n /**\n * Whether the current value should be displayed inside the slider thumb.\n */\n shouldShowThumbLabel?: boolean;\n /**\n * The steps of the slider.\n */\n steps?: number;\n /**\n * A function to format the thumb label.\n */\n thumbLabelFormatter?: (value: number) => string;\n /**\n * the Value that the slider should have.\n */\n value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n maxValue,\n minValue,\n value,\n onSelect,\n onChange,\n interval,\n thumbLabelFormatter,\n shouldShowThumbLabel = false,\n steps = 1,\n}) => {\n const [fromValue, setFromValue] = useState(0);\n const [toValue, setToValue] = useState(maxValue);\n const [thumbWidth, setThumbWidth] = useState(20);\n const [isBigSlider, setIsBigSlider] = useState(false);\n\n const fromSliderRef = useRef<HTMLInputElement>(null);\n const toSliderRef = useRef<HTMLInputElement>(null);\n const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n const toSliderThumbRef = useRef<HTMLDivElement>(null);\n const fromSliderThumbContentRef = useRef<HTMLDivElement>(null);\n const toSliderThumbContentRef = useRef<HTMLDivElement>(null);\n const sliderWrapperRef = useRef<HTMLDivElement>(null);\n\n const sliderWrapperSize = useElementSize(sliderWrapperRef);\n\n const theme = useTheme();\n\n useEffect(() => {\n if (shouldShowThumbLabel) {\n setThumbWidth(getThumbMaxWidth({ maxNumber: maxValue, thumbLabelFormatter }));\n }\n }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);\n\n /**\n * This function sets the value\n */\n useEffect(() => {\n if (typeof value !== 'number') {\n return;\n }\n\n if (value >= minValue && value <= maxValue) {\n setFromValue(value);\n }\n }, [maxValue, minValue, value]);\n\n useEffect(() => {\n if (fromValue > toValue) {\n setFromValue(toValue);\n }\n\n if (toValue < fromValue) {\n setToValue(fromValue);\n }\n }, [fromValue, toValue]);\n\n const handleMouseUp = useCallback(() => {\n void setRefreshScrollEnabled(true);\n\n const from = Number(fromSliderRef.current?.value);\n const to = Number(toSliderRef.current?.value);\n\n if (typeof onSelect === 'function') {\n onSelect(\n interval ? undefined : from,\n interval ? { maxValue: to, minValue: from } : undefined,\n );\n }\n }, [interval, onSelect]);\n\n const handleControlFromSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n if (!fromSliderRef.current || !toSliderRef.current) {\n return;\n }\n\n setFromValue(Number(event.target.value));\n\n const from = Number(fromSliderRef.current.value);\n const to = Number(toSliderRef.current.value);\n\n if (typeof onChange === 'function') {\n onChange(undefined, { maxValue: to, minValue: from });\n }\n\n fillSlider({\n toSlider: toSliderRef.current,\n fromSlider: fromSliderRef.current,\n theme,\n });\n\n if (from > to) {\n fromSliderRef.current.value = String(to);\n } else {\n fromSliderRef.current.value = String(from);\n }\n },\n [onChange, theme],\n );\n\n const handleControlToSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n void setRefreshScrollEnabled(false);\n\n if (!fromSliderRef.current || !toSliderRef.current) {\n return;\n }\n\n setToValue(Number(event.target.value));\n\n const from = Number(fromSliderRef.current.value);\n const to = Number(toSliderRef.current.value);\n\n if (typeof onChange === 'function') {\n onChange(undefined, { maxValue: to, minValue: from });\n }\n\n fillSlider({\n toSlider: toSliderRef.current,\n fromSlider: fromSliderRef.current,\n theme,\n });\n\n if (from <= to) {\n toSliderRef.current.value = String(to);\n } else {\n toSliderRef.current.value = String(from);\n }\n },\n [onChange, theme],\n );\n\n useEffect(() => {\n if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n return;\n }\n\n setFromValue(interval.minValue);\n setToValue(interval.maxValue);\n\n fromSliderRef.current.value = String(interval.minValue);\n toSliderRef.current.value = String(interval.maxValue);\n\n fillSlider({\n fromSlider: fromSliderRef.current,\n toSlider: toSliderRef.current,\n theme,\n });\n // Note: interval can´t be in the deps because of rerender\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [theme]);\n\n /**\n * This function updates the value\n */\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n void setRefreshScrollEnabled(false);\n\n let newValue = Number(event.target.value);\n\n if (newValue > maxValue) {\n newValue = maxValue;\n } else if (newValue < minValue) {\n newValue = minValue;\n }\n\n if (interval) {\n handleControlFromSlider(event);\n\n return;\n }\n\n setFromValue(newValue);\n\n if (onChange) {\n onChange(newValue);\n }\n },\n [handleControlFromSlider, interval, maxValue, minValue, onChange],\n );\n\n const fromSliderThumbPosition = useMemo(() => {\n if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {\n return calculateGradientOffset({\n max: maxValue,\n min: minValue,\n value: fromValue,\n thumbWidth: 40,\n containerWidth: fromSliderRef.current.offsetWidth,\n });\n }\n\n return 0;\n }, [fromValue, maxValue, minValue, sliderWrapperSize]);\n\n const toSliderThumbPosition = useMemo(() => {\n if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {\n return calculateGradientOffset({\n max: maxValue,\n min: minValue,\n value: toValue,\n thumbWidth: 40,\n containerWidth: toSliderRef.current.offsetWidth,\n });\n }\n return 0;\n }, [toValue, minValue, maxValue, sliderWrapperSize]);\n\n const toSliderThumbContentPosition = useMemo(\n () =>\n calculatePopupPosition({\n min: minValue,\n max: maxValue,\n sliderValue: toValue,\n popupWidth: thumbWidth,\n }),\n [maxValue, minValue, thumbWidth, toValue],\n );\n\n const fromSliderThumbContentPosition = useMemo(\n () =>\n calculatePopupPosition({\n min: minValue,\n max: maxValue,\n sliderValue: fromValue,\n popupWidth: thumbWidth,\n }),\n [fromValue, maxValue, minValue, thumbWidth],\n );\n\n const handleTouchStart = useCallback(() => {\n if (shouldShowThumbLabel) {\n setIsBigSlider(true);\n }\n }, [shouldShowThumbLabel]);\n\n const handleTouchEnd = useCallback(() => {\n const from = Number(fromSliderRef.current?.value);\n const to = Number(toSliderRef.current?.value);\n\n if (typeof onSelect === 'function') {\n onSelect(\n interval ? undefined : from,\n interval ? { maxValue: to, minValue: from } : undefined,\n );\n }\n\n if (shouldShowThumbLabel) {\n setIsBigSlider(false);\n }\n }, [interval, onSelect, shouldShowThumbLabel]);\n\n return useMemo(\n () => (\n <StyledSlider ref={sliderWrapperRef}>\n <StyledSliderInput\n animate={{ height: isBigSlider ? 30 : 10 }}\n initial={{ height: 10 }}\n exit={{ height: 10 }}\n $thumbWidth={40}\n ref={fromSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={fromValue}\n step={steps}\n max={maxValue % steps === 0 ? maxValue : maxValue + steps - (maxValue % steps)}\n min={minValue % steps === 0 ? minValue : minValue - (minValue % steps)}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onChange={handleInputChange}\n onMouseUp={handleMouseUp}\n $max={maxValue}\n $min={minValue}\n $value={fromValue}\n />\n <StyledSliderThumb\n ref={fromSliderThumbRef}\n $position={fromSliderThumbPosition}\n $isBigSlider={isBigSlider}\n >\n {shouldShowThumbLabel && (\n <StyledSliderThumbLabel\n $width={thumbWidth}\n $isBigSlider={isBigSlider}\n $position={fromSliderThumbContentPosition}\n ref={fromSliderThumbContentRef}\n >\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(fromValue)\n : fromValue}\n </StyledSliderThumbLabel>\n )}\n </StyledSliderThumb>\n {interval && (\n <StyledSliderThumb\n ref={toSliderThumbRef}\n $position={toSliderThumbPosition}\n $isBigSlider={isBigSlider}\n >\n {shouldShowThumbLabel && (\n <StyledSliderThumbLabel\n $width={thumbWidth}\n $isBigSlider={isBigSlider}\n $position={toSliderThumbContentPosition}\n ref={toSliderThumbContentRef}\n >\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(toValue)\n : toValue}\n </StyledSliderThumbLabel>\n )}\n </StyledSliderThumb>\n )}\n {interval && (\n <StyledSliderInput\n animate={{ height: isBigSlider ? 30 : 10 }}\n initial={{ height: 10 }}\n exit={{ height: 10 }}\n $thumbWidth={40}\n $max={maxValue}\n $min={minValue}\n $value={toValue}\n ref={toSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={toValue}\n step={steps}\n max={maxValue}\n min={minValue}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onChange={handleControlToSlider}\n onMouseUp={handleMouseUp}\n />\n )}\n </StyledSlider>\n ),\n [\n isBigSlider,\n interval,\n fromValue,\n steps,\n maxValue,\n minValue,\n handleTouchStart,\n handleTouchEnd,\n handleInputChange,\n handleMouseUp,\n fromSliderThumbPosition,\n shouldShowThumbLabel,\n thumbWidth,\n fromSliderThumbContentPosition,\n thumbLabelFormatter,\n toSliderThumbPosition,\n toSliderThumbContentPosition,\n toValue,\n handleControlToSlider,\n ],\n );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}
@@ -107,7 +107,7 @@ export const StyledSliderThumbLabel = styled.span.attrs(_ref3 => {
107
107
  return {
108
108
  style: {
109
109
  minWidth: `${$width}px`,
110
- top: `-${$isBigSlider ? 45 : 35}px`,
110
+ top: `-${$isBigSlider ? 56 : 48}px`,
111
111
  left: `${$position}px`
112
112
  }
113
113
  };
@@ -125,7 +125,7 @@ export const StyledSliderThumbLabel = styled.span.attrs(_ref3 => {
125
125
  display: flex;
126
126
  align-items: center;
127
127
  justify-content: center;
128
- padding: 0 8px;
128
+ padding: 16px;
129
129
  white-space: nowrap;
130
130
 
131
131
  transition: top 0.2s ease 0s;
@@ -134,7 +134,7 @@ export const StyledSliderThumbLabel = styled.span.attrs(_ref3 => {
134
134
  background-color: inherit;
135
135
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
136
136
  border-right: 1px solid rgba(0, 0, 0, 0.1);
137
- box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.4);
137
+ box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4);
138
138
  content: '';
139
139
  height: 14px;
140
140
  position: absolute;
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.styles.js","names":["motion","styled","StyledSlider","div","StyledSliderInput","input","attrs","_ref","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","_ref2","$position","$isBigSlider","left","height","StyledSliderThumbLabel","span","_ref3","$width","minWidth","top","_ref4"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n width: 100%;\n height: 30px;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n touch-action: none;\n user-select: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n $min: number;\n $max: number;\n $value: number;\n $isInterval: boolean;\n $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n style: {\n pointerEvents: $isInterval ? 'none' : 'all',\n width: `calc(100% - ${$thumbWidth}px)`,\n background: !$isInterval\n ? `linear-gradient(\n to right,\n ${(theme as Theme)['409'] ?? ''} 0%,\n ${(theme as Theme)['409'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n )`\n : undefined,\n },\n }),\n)`\n position: absolute;\n border-radius: 100px;\n -webkit-appearance: none;\n\n outline: none;\n cursor: pointer !important;\n z-index: 2;\n appearance: none;\n\n // Slider thumb for chrome\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 50px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n\n // slider thumb for firefox\n\n &::-moz-range-thumb {\n width: 50px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{\n $position: number;\n $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(\n ({ $position, $isBigSlider }) => ({\n style: {\n left: `${$position}px`,\n height: `${$isBigSlider ? 0 : 20}px`,\n },\n }),\n)`\n width: 20px;\n height: 20px;\n cursor: pointer;\n border-radius: 100px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n pointer-events: none;\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n white-space: nowrap;\n top: 5px;\n\n transition: top 0.2s ease 0s;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<{\n $position: number;\n $width: number;\n $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumbLabel = styled.span.attrs<StyledSliderThumbLabelProps>(\n ({ $position, $isBigSlider, $width }) => ({\n style: {\n minWidth: `${$width}px`,\n top: `-${$isBigSlider ? 45 : 35}px`,\n left: `${$position}px`,\n },\n }),\n)`\n pointer-events: none;\n color: #222;\n\n height: 20px;\n cursor: pointer;\n border-radius: 3px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n white-space: nowrap;\n\n transition: top 0.2s ease 0s;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.4);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n left: ${({ $position }) => $position * -1}px;\n transform: rotate(225deg);\n bottom: -7px;\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n border-radius: 3px;\n top: 0;\n z-index: -1;\n }\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,YAAY,GAAGD,MAAM,CAACE,GAAG;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAUD,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACD,MAAM,CAACK,KAAK,CAAC,CAACC,KAAK,CACvDC,IAAA;EAAA,IAAC;IAAEC,WAAW;IAAEC,MAAM;IAAEC,WAAW;IAAEC,IAAI;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAAN,IAAA;EAAA,OAAM;IAC1DO,KAAK,EAAE;MACHC,aAAa,EAAEP,WAAW,GAAG,MAAM,GAAG,KAAK;MAC3CQ,KAAK,EAAE,eAAeN,WAAW,KAAK;MACtCO,UAAU,EAAE,CAACT,WAAW,GAClB;AAClB;AACA,cAAeK,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAeA,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,UAAU,GACQK;IACV;EACJ,CAAC;AAAA,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,iBAAiB,GAAGlB,MAAM,CAACE,GAAG,CAACG,KAAK,CAC7Cc,KAAA;EAAA,IAAC;IAAEC,SAAS;IAAEC;EAAa,CAAC,GAAAF,KAAA;EAAA,OAAM;IAC9BN,KAAK,EAAE;MACHS,IAAI,EAAE,GAAGF,SAAS,IAAI;MACtBG,MAAM,EAAE,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;IACpC;EACJ,CAAC;AAAA,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMG,sBAAsB,GAAGxB,MAAM,CAACyB,IAAI,CAACpB,KAAK,CACnDqB,KAAA;EAAA,IAAC;IAAEN,SAAS;IAAEC,YAAY;IAAEM;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAM;IACtCb,KAAK,EAAE;MACHe,QAAQ,EAAE,GAAGD,MAAM,IAAI;MACvBE,GAAG,EAAE,IAAIR,YAAY,GAAG,EAAE,GAAG,EAAE,IAAI;MACnCC,IAAI,EAAE,GAAGF,SAAS;IACtB;EACJ,CAAC;AAAA,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgBU,KAAA;EAAA,IAAC;IAAEV;EAAU,CAAC,GAAAU,KAAA;EAAA,OAAKV,SAAS,GAAG,CAAC,CAAC;AAAA;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"Slider.styles.js","names":["motion","styled","StyledSlider","div","StyledSliderInput","input","attrs","_ref","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","_ref2","$position","$isBigSlider","left","height","StyledSliderThumbLabel","span","_ref3","$width","minWidth","top","_ref4"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n width: 100%;\n height: 30px;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n touch-action: none;\n user-select: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n $min: number;\n $max: number;\n $value: number;\n $isInterval: boolean;\n $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n style: {\n pointerEvents: $isInterval ? 'none' : 'all',\n width: `calc(100% - ${$thumbWidth}px)`,\n background: !$isInterval\n ? `linear-gradient(\n to right,\n ${(theme as Theme)['409'] ?? ''} 0%,\n ${(theme as Theme)['409'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${(theme as Theme)['403'] ?? ''}\n )`\n : undefined,\n },\n }),\n)`\n position: absolute;\n border-radius: 100px;\n -webkit-appearance: none;\n\n outline: none;\n cursor: pointer !important;\n z-index: 2;\n appearance: none;\n\n // Slider thumb for chrome\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 50px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n\n // slider thumb for firefox\n\n &::-moz-range-thumb {\n width: 50px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{\n $position: number;\n $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(\n ({ $position, $isBigSlider }) => ({\n style: {\n left: `${$position}px`,\n height: `${$isBigSlider ? 0 : 20}px`,\n },\n }),\n)`\n width: 20px;\n height: 20px;\n cursor: pointer;\n border-radius: 100px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n pointer-events: none;\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n white-space: nowrap;\n top: 5px;\n\n transition: top 0.2s ease 0s;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<{\n $position: number;\n $width: number;\n $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumbLabel = styled.span.attrs<StyledSliderThumbLabelProps>(\n ({ $position, $isBigSlider, $width }) => ({\n style: {\n minWidth: `${$width}px`,\n top: `-${$isBigSlider ? 56 : 48}px`,\n left: `${$position}px`,\n },\n }),\n)`\n pointer-events: none;\n color: #222;\n\n height: 20px;\n cursor: pointer;\n border-radius: 3px;\n background-color: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n z-index: 3;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n white-space: nowrap;\n\n transition: top 0.2s ease 0s;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n left: ${({ $position }) => $position * -1}px;\n transform: rotate(225deg);\n bottom: -7px;\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n border-radius: 3px;\n top: 0;\n z-index: -1;\n }\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,YAAY,GAAGD,MAAM,CAACE,GAAG;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAUD,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACD,MAAM,CAACK,KAAK,CAAC,CAACC,KAAK,CACvDC,IAAA;EAAA,IAAC;IAAEC,WAAW;IAAEC,MAAM;IAAEC,WAAW;IAAEC,IAAI;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAAN,IAAA;EAAA,OAAM;IAC1DO,KAAK,EAAE;MACHC,aAAa,EAAEP,WAAW,GAAG,MAAM,GAAG,KAAK;MAC3CQ,KAAK,EAAE,eAAeN,WAAW,KAAK;MACtCO,UAAU,EAAE,CAACT,WAAW,GAClB;AAClB;AACA,cAAeK,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAeA,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,UAAU,GACQK;IACV;EACJ,CAAC;AAAA,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,iBAAiB,GAAGlB,MAAM,CAACE,GAAG,CAACG,KAAK,CAC7Cc,KAAA;EAAA,IAAC;IAAEC,SAAS;IAAEC;EAAa,CAAC,GAAAF,KAAA;EAAA,OAAM;IAC9BN,KAAK,EAAE;MACHS,IAAI,EAAE,GAAGF,SAAS,IAAI;MACtBG,MAAM,EAAE,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;IACpC;EACJ,CAAC;AAAA,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMG,sBAAsB,GAAGxB,MAAM,CAACyB,IAAI,CAACpB,KAAK,CACnDqB,KAAA;EAAA,IAAC;IAAEN,SAAS;IAAEC,YAAY;IAAEM;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAM;IACtCb,KAAK,EAAE;MACHe,QAAQ,EAAE,GAAGD,MAAM,IAAI;MACvBE,GAAG,EAAE,IAAIR,YAAY,GAAG,EAAE,GAAG,EAAE,IAAI;MACnCC,IAAI,EAAE,GAAGF,SAAS;IACtB;EACJ,CAAC;AAAA,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgBU,KAAA;EAAA,IAAC;IAAEV;EAAU,CAAC,GAAAU,KAAA;EAAA,OAAKV,SAAS,GAAG,CAAC,CAAC;AAAA;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
@@ -2,6 +2,7 @@ import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider'
2
2
  type StyledListItemProps = WithTheme<{
3
3
  $isClickable: boolean;
4
4
  $isOpen: boolean;
5
+ $isParentAccordionWrapped: boolean;
5
6
  $isWrapped: boolean;
6
7
  $shouldShowSeparatorBelow: boolean;
7
8
  }>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.0-beta.816",
3
+ "version": "5.0.0-beta.822",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -85,5 +85,5 @@
85
85
  "publishConfig": {
86
86
  "access": "public"
87
87
  },
88
- "gitHead": "80d343e2ad66523142501222c9d012d0dd772de3"
88
+ "gitHead": "e8b649a5bfb3f40535d95cbe0ac4b502b2c0fa85"
89
89
  }