@chayns-components/core 5.0.0-beta.793 → 5.0.0-beta.795

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/lib/cjs/components/combobox/ComboBox.js +31 -35
  2. package/lib/cjs/components/combobox/ComboBox.js.map +1 -1
  3. package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.js +14 -10
  4. package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.js.map +1 -1
  5. package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.styles.js +13 -2
  6. package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.styles.js.map +1 -1
  7. package/lib/cjs/components/slider/Slider.js +4 -4
  8. package/lib/cjs/components/slider/Slider.js.map +1 -1
  9. package/lib/cjs/components/slider/Slider.styles.js +12 -13
  10. package/lib/cjs/components/slider/Slider.styles.js.map +1 -1
  11. package/lib/esm/components/combobox/ComboBox.js +35 -42
  12. package/lib/esm/components/combobox/ComboBox.js.map +1 -1
  13. package/lib/esm/components/combobox/combobox-item/ComboBoxItem.js +14 -10
  14. package/lib/esm/components/combobox/combobox-item/ComboBoxItem.js.map +1 -1
  15. package/lib/esm/components/combobox/combobox-item/ComboBoxItem.styles.js +25 -11
  16. package/lib/esm/components/combobox/combobox-item/ComboBoxItem.styles.js.map +1 -1
  17. package/lib/esm/components/slider/Slider.js +4 -4
  18. package/lib/esm/components/slider/Slider.js.map +1 -1
  19. package/lib/esm/components/slider/Slider.styles.js +17 -24
  20. package/lib/esm/components/slider/Slider.styles.js.map +1 -1
  21. package/lib/types/components/combobox/ComboBox.d.ts +1 -0
  22. package/lib/types/components/combobox/combobox-item/ComboBoxItem.d.ts +1 -0
  23. package/lib/types/components/combobox/combobox-item/ComboBoxItem.styles.d.ts +2 -1
  24. package/lib/types/components/slider/Slider.styles.d.ts +3 -1
  25. package/package.json +2 -2
package/lib/esm/components/combobox/combobox-item/ComboBoxItem.styles.js CHANGED
@@ -21,10 +21,21 @@ export const StyledComboBoxItem = styled.div`
21
21
 
22
22
  ${_ref3 => {
23
23
  let {
24
+ $isDisabled
25
+ } = _ref3;
26
+ return $isDisabled && css`
27
+ opacity: 0.5;
28
+ pointer-events: none;
29
+ `;
30
+ }}
31
+
32
+ ${_ref4 => {
33
+ let {
34
+ $isDisabled,
24
35
  $isTouch,
25
36
  theme
26
- } = _ref3;
27
- return !$isTouch && css`
37
+ } = _ref4;
38
+ return !$isDisabled && !$isTouch && css`
28
39
  &:hover {
29
40
  background-color: ${theme['secondary-102']};
30
41
  }
@@ -36,33 +47,33 @@ export const StyledComboBoxItem = styled.div`
36
47
  }}
37
48
  `;
38
49
  export const StyledComboBoxItemImage = styled.img`
39
- ${_ref4 => {
50
+ ${_ref5 => {
40
51
  let {
41
52
  $shouldShowRoundImage
42
- } = _ref4;
53
+ } = _ref5;
43
54
  return $shouldShowRoundImage && css`
44
55
  border-radius: 50%;
45
56
  `;
46
57
  }}
47
58
 
48
59
  box-shadow: 0 0 0 1px
49
- rgba(${_ref5 => {
60
+ rgba(${_ref6 => {
50
61
  let {
51
62
  theme
52
- } = _ref5;
63
+ } = _ref6;
53
64
  return theme['009-rgb'];
54
65
  }}, 0.15);
55
66
  flex: 0 0 auto;
56
- height: ${_ref6 => {
67
+ height: ${_ref7 => {
57
68
  let {
58
69
  $shouldShowBigImage
59
- } = _ref6;
70
+ } = _ref7;
60
71
  return $shouldShowBigImage ? '40px' : '22px';
61
72
  }};
62
- width: ${_ref7 => {
73
+ width: ${_ref8 => {
63
74
  let {
64
75
  $shouldShowBigImage
65
- } = _ref7;
76
+ } = _ref8;
66
77
  return $shouldShowBigImage ? '40px' : '22px';
67
78
  }};
68
79
  `;
@@ -81,7 +92,10 @@ export const StyledComboBoxItemContentHeaderText = styled.div`
81
92
  display: flex;
82
93
  gap: 4px;
83
94
  `;
84
- export const StyledComboBoxItemContentHeaderRightElement = styled.div``;
95
+ export const StyledComboBoxItemContentHeaderRightElement = styled.div`
96
+ align-items: center;
97
+ display: flex;
98
+ `;
85
99
  export const StyledComboBoxItemContentSubtext = styled.div`
86
100
  font-size: 90%;
87
101
  margin-top: 2px;
package/lib/esm/components/combobox/combobox-item/ComboBoxItem.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ComboBoxItem.styles.js","names":["styled","css","StyledComboBoxItem","div","_ref","theme","$isSelected","_ref2","text","_ref3","$isTouch","StyledComboBoxItemImage","img","_ref4","$shouldShowRoundImage","_ref5","_ref6","$shouldShowBigImage","_ref7","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderText","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentSubtext"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n $isTouch: boolean;\n $isSelected: boolean;\n}>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n align-items: center;\n background-color: ${({ theme, $isSelected }: StyledComboBoxItemProps) =>\n $isSelected && theme['secondary-103']};\n color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n display: flex;\n gap: 10px;\n padding: 4px 10px;\n transition: background-color 0.2s ease-in-out;\n\n ${({ $isTouch, theme }: StyledComboBoxItemProps) =>\n !$isTouch &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n\n &:focus {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{\n $shouldShowBigImage?: boolean;\n $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledComboBoxItemImage = styled.img<StyledComboBoxItemImageProps>`\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxItemImageProps) => theme['009-rgb']}, 0.15);\n flex: 0 0 auto;\n height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '40px' : '22px')};\n width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '40px' : '22px')};\n`;\n\nexport const StyledComboBoxItemContent = styled.div`\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n line-height: normal;\n`;\n\nexport const StyledComboBoxItemContentHeader = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n`;\n\nexport const StyledComboBoxItemContentHeaderText = styled.div`\n display: flex;\n gap: 4px;\n`;\n\nexport const StyledComboBoxItemContentHeaderRightElement = styled.div``;\n\nexport const StyledComboBoxItemContentSubtext = styled.div`\n font-size: 90%;\n margin-top: 2px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAqC,CAAC,GAAAF,IAAA;EAAA,OAChEE,WAAW,IAAID,KAAK,CAAC,eAAe,CAAC;AAAA;AAC7C,aAAaE,KAAA;EAAA,IAAC;IAAEF;EAA+B,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAACG,IAAI;AAAA;AAC/D;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEL;EAA+B,CAAC,GAAAI,KAAA;EAAA,OAC3C,CAACC,QAAQ,IACTT,GAAG;AACX;AACA,oCAAoCI,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA;AACA;AACA,oCAAoCA,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;AAAA;AACT,CAAC;AAOD,OAAO,MAAMM,uBAAuB,GAAGX,MAAM,CAACY,GAAiC;AAC/E,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OACxBC,qBAAqB,IACrBb,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA;AACA,eAAec,KAAA;EAAA,IAAC;IAAEV;EAAoC,CAAC,GAAAU,KAAA;EAAA,OAAKV,KAAK,CAAC,SAAS,CAAC;AAAA;AAC5E;AACA,cAAcW,KAAA;EAAA,IAAC;IAAEC;EAAoB,CAAC,GAAAD,KAAA;EAAA,OAAMC,mBAAmB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AAClF,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAoB,CAAC,GAAAC,KAAA;EAAA,OAAMD,mBAAmB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AACjF,CAAC;AAED,OAAO,MAAME,yBAAyB,GAAGnB,MAAM,CAACG,GAAG;AACnD;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMiB,+BAA+B,GAAGpB,MAAM,CAACG,GAAG;AACzD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMkB,mCAAmC,GAAGrB,MAAM,CAACG,GAAG;AAC7D;AACA;AACA,CAAC;AAED,OAAO,MAAMmB,2CAA2C,GAAGtB,MAAM,CAACG,GAAG,EAAE;AAEvE,OAAO,MAAMoB,gCAAgC,GAAGvB,MAAM,CAACG,GAAG;AAC1D;AACA;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"ComboBoxItem.styles.js","names":["styled","css","StyledComboBoxItem","div","_ref","theme","$isSelected","_ref2","text","_ref3","$isDisabled","_ref4","$isTouch","StyledComboBoxItemImage","img","_ref5","$shouldShowRoundImage","_ref6","_ref7","$shouldShowBigImage","_ref8","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderText","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentSubtext"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n $isDisabled?: boolean;\n $isSelected: boolean;\n $isTouch: boolean;\n}>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n align-items: center;\n background-color: ${({ theme, $isSelected }: StyledComboBoxItemProps) =>\n $isSelected && theme['secondary-103']};\n color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n display: flex;\n gap: 10px;\n padding: 4px 10px;\n transition: background-color 0.2s ease-in-out;\n\n ${({ $isDisabled }) =>\n $isDisabled &&\n css`\n opacity: 0.5;\n pointer-events: none;\n `}\n\n ${({ $isDisabled, $isTouch, theme }: StyledComboBoxItemProps) =>\n !$isDisabled &&\n !$isTouch &&\n css`\n &:hover {\n background-color: ${theme['secondary-102']};\n }\n\n &:focus {\n background-color: ${theme['secondary-102']};\n }\n `}\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{\n $shouldShowBigImage?: boolean;\n $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledComboBoxItemImage = styled.img<StyledComboBoxItemImageProps>`\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxItemImageProps) => theme['009-rgb']}, 0.15);\n flex: 0 0 auto;\n height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '40px' : '22px')};\n width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '40px' : '22px')};\n`;\n\nexport const StyledComboBoxItemContent = styled.div`\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n line-height: normal;\n`;\n\nexport const StyledComboBoxItemContentHeader = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n`;\n\nexport const StyledComboBoxItemContentHeaderText = styled.div`\n display: flex;\n gap: 4px;\n`;\n\nexport const StyledComboBoxItemContentHeaderRightElement = styled.div`\n align-items: center;\n display: flex;\n`;\n\nexport const StyledComboBoxItemContentSubtext = styled.div`\n font-size: 90%;\n margin-top: 2px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAqC,CAAC,GAAAF,IAAA;EAAA,OAChEE,WAAW,IAAID,KAAK,CAAC,eAAe,CAAC;AAAA;AAC7C,aAAaE,KAAA;EAAA,IAAC;IAAEF;EAA+B,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAACG,IAAI;AAAA;AAC/D;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OACdC,WAAW,IACXT,GAAG;AACX;AACA;AACA,SAAS;AAAA;AACT;AACA,MAAMU,KAAA;EAAA,IAAC;IAAED,WAAW;IAAEE,QAAQ;IAAEP;EAA+B,CAAC,GAAAM,KAAA;EAAA,OACxD,CAACD,WAAW,IACZ,CAACE,QAAQ,IACTX,GAAG;AACX;AACA,oCAAoCI,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA;AACA;AACA,oCAAoCA,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;AAAA;AACT,CAAC;AAOD,OAAO,MAAMQ,uBAAuB,GAAGb,MAAM,CAACc,GAAiC;AAC/E,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OACxBC,qBAAqB,IACrBf,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA;AACA,eAAegB,KAAA;EAAA,IAAC;IAAEZ;EAAoC,CAAC,GAAAY,KAAA;EAAA,OAAKZ,KAAK,CAAC,SAAS,CAAC;AAAA;AAC5E;AACA,cAAca,KAAA;EAAA,IAAC;IAAEC;EAAoB,CAAC,GAAAD,KAAA;EAAA,OAAMC,mBAAmB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AAClF,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAoB,CAAC,GAAAC,KAAA;EAAA,OAAMD,mBAAmB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AACjF,CAAC;AAED,OAAO,MAAME,yBAAyB,GAAGrB,MAAM,CAACG,GAAG;AACnD;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMmB,+BAA+B,GAAGtB,MAAM,CAACG,GAAG;AACzD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMoB,mCAAmC,GAAGvB,MAAM,CAACG,GAAG;AAC7D;AACA;AACA,CAAC;AAED,OAAO,MAAMqB,2CAA2C,GAAGxB,MAAM,CAACG,GAAG;AACrE;AACA;AACA,CAAC;AAED,OAAO,MAAMsB,gCAAgC,GAAGzB,MAAM,CAACG,GAAG;AAC1D;AACA;AACA,CAAC","ignoreList":[]}
package/lib/esm/components/slider/Slider.js CHANGED
@@ -155,7 +155,7 @@ const Slider = _ref => {
155
155
  max: maxValue,
156
156
  min: minValue,
157
157
  value: fromValue,
158
- thumbWidth: 35,
158
+ thumbWidth: 40,
159
159
  containerWidth: fromSliderRef.current.offsetWidth
160
160
  });
161
161
  }
@@ -167,7 +167,7 @@ const Slider = _ref => {
167
167
  max: maxValue,
168
168
  min: minValue,
169
169
  value: toValue,
170
- thumbWidth: toSliderThumbRef.current.offsetWidth,
170
+ thumbWidth: 40,
171
171
  containerWidth: toSliderRef.current.offsetWidth
172
172
  });
173
173
  }
@@ -215,7 +215,7 @@ const Slider = _ref => {
215
215
  exit: {
216
216
  height: 10
217
217
  },
218
- $thumbWidth: 35,
218
+ $thumbWidth: 40,
219
219
  ref: fromSliderRef,
220
220
  $isInterval: !!interval,
221
221
  type: "range",
@@ -258,7 +258,7 @@ const Slider = _ref => {
258
258
  exit: {
259
259
  height: 10
260
260
  },
261
- $thumbWidth: 35,
261
+ $thumbWidth: 40,
262
262
  $max: maxValue,
263
263
  $min: minValue,
264
264
  $value: toValue,
package/lib/esm/components/slider/Slider.js.map CHANGED
@@ -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: 35,\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: toSliderThumbRef.current.offsetWidth,\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={35}\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={35}\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 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":[]}
package/lib/esm/components/slider/Slider.styles.js CHANGED
@@ -80,7 +80,7 @@ export const StyledSliderThumb = styled.div.attrs(_ref2 => {
80
80
  }
81
81
  };
82
82
  })`
83
- min-width: 20px;
83
+ width: 20px;
84
84
  height: 20px;
85
85
  cursor: pointer;
86
86
  border-radius: 100px;
@@ -98,16 +98,23 @@ export const StyledSliderThumb = styled.div.attrs(_ref2 => {
98
98
 
99
99
  transition: top 0.2s ease 0s;
100
100
  `;
101
- export const StyledSliderThumbLabel = styled.span`
102
- pointer-events: none;
103
- color: #222;
104
-
105
- min-width: ${_ref3 => {
101
+ export const StyledSliderThumbLabel = styled.span.attrs(_ref3 => {
106
102
  let {
103
+ $position,
104
+ $isBigSlider,
107
105
  $width
108
106
  } = _ref3;
109
- return $width;
110
- }}px;
107
+ return {
108
+ style: {
109
+ minWidth: `${$width}px`,
110
+ top: `-${$isBigSlider ? 45 : 35}px`,
111
+ left: `${$position}px`
112
+ }
113
+ };
114
+ })`
115
+ pointer-events: none;
116
+ color: #222;
117
+
111
118
  height: 20px;
112
119
  cursor: pointer;
113
120
  border-radius: 3px;
@@ -123,20 +130,6 @@ export const StyledSliderThumbLabel = styled.span`
123
130
 
124
131
  transition: top 0.2s ease 0s;
125
132
 
126
- left: ${_ref4 => {
127
- let {
128
- $position
129
- } = _ref4;
130
- return $position;
131
- }}px;
132
-
133
- top: ${_ref5 => {
134
- let {
135
- $isBigSlider
136
- } = _ref5;
137
- return `-${$isBigSlider ? 45 : 35}px`;
138
- }};
139
-
140
133
  &::after {
141
134
  background-color: inherit;
142
135
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
@@ -147,10 +140,10 @@ export const StyledSliderThumbLabel = styled.span`
147
140
  position: absolute;
148
141
  width: 14px;
149
142
  z-index: -2;
150
- left: ${_ref6 => {
143
+ left: ${_ref4 => {
151
144
  let {
152
145
  $position
153
- } = _ref6;
146
+ } = _ref4;
154
147
  return $position * -1;
155
148
  }}px;
156
149
  transform: rotate(225deg);
package/lib/esm/components/slider/Slider.styles.js.map CHANGED
@@ -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","_ref4","_ref5","_ref6"],"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 min-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<StyledSliderThumbLabelProps>`\n pointer-events: none;\n color: #222;\n\n min-width: ${({ $width }) => $width}px;\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 left: ${({ $position }) => $position}px;\n\n top: ${({ $isBigSlider }) => `-${$isBigSlider ? 45 : 35}px`};\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,IAAiC;AAC9E;AACA;AACA;AACA,iBAAiBC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAYC,KAAA;EAAA,IAAC;IAAER;EAAU,CAAC,GAAAQ,KAAA;EAAA,OAAKR,SAAS;AAAA;AACxC;AACA,WAAWS,KAAA;EAAA,IAAC;IAAER;EAAa,CAAC,GAAAQ,KAAA;EAAA,OAAK,IAAIR,YAAY,GAAG,EAAE,GAAG,EAAE,IAAI;AAAA;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgBS,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 ? 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":[]}
package/lib/types/components/combobox/ComboBox.d.ts CHANGED
@@ -7,6 +7,7 @@ export interface IComboBoxItems {
7
7
  export interface IComboBoxItem {
8
8
  icons?: string[];
9
9
  imageUrl?: string;
10
+ isDisabled?: boolean;
10
11
  rightElement?: ReactNode;
11
12
  subtext?: string;
12
13
  suffixElement?: ReactNode;
package/lib/types/components/combobox/combobox-item/ComboBoxItem.d.ts CHANGED
@@ -4,6 +4,7 @@ export type ComboBoxItemProps = {
4
4
  icons?: IComboBoxItem['icons'];
5
5
  id: IComboBoxItem['value'];
6
6
  imageUrl: IComboBoxItem['imageUrl'];
7
+ isDisabled?: IComboBoxItem['isDisabled'];
7
8
  isSelected: boolean;
8
9
  onSelect: (itemToSelect: IComboBoxItem) => void;
9
10
  rightElement: IComboBoxItem['rightElement'];
package/lib/types/components/combobox/combobox-item/ComboBoxItem.styles.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';
2
2
  type StyledComboBoxItemProps = WithTheme<{
3
- $isTouch: boolean;
3
+ $isDisabled?: boolean;
4
4
  $isSelected: boolean;
5
+ $isTouch: boolean;
5
6
  }>;
6
7
  export declare const StyledComboBoxItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledComboBoxItemProps>> & string;
7
8
  type StyledComboBoxItemImageProps = WithTheme<{
package/lib/types/components/slider/Slider.styles.d.ts CHANGED
@@ -606,5 +606,7 @@ type StyledSliderThumbLabelProps = WithTheme<{
606
606
  $width: number;
607
607
  $isBigSlider: boolean;
608
608
  }>;
609
- export declare const StyledSliderThumbLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledSliderThumbLabelProps>> & string;
609
+ export declare const StyledSliderThumbLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
610
+ ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
611
+ }>, StyledSliderThumbLabelProps>, never>> & string;
610
612
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.0-beta.793",
3
+ "version": "5.0.0-beta.795",
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": "632c1282ec97461c4beb16d220c27781a2515f50"
88
+ "gitHead": "26c327ad30a8bc4c5d464ced32e7987e8780df01"
89
89
  }