npm - @mantine/core - Versions diffs - 3.6.0-alpha.1 → 3.6.3 - Mend

@mantine/core 3.6.0-alpha.1 → 3.6.3

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 (138) hide show

package/cjs/components/Progress/Progress.js CHANGED Viewed

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var Progress_styles = require('./Progress.styles.js');
-var Text = require('../Text/Text.js');
 var Box = require('../Box/Box.js');
+var Text = require('../Text/Text.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
@@ -78,10 +78,10 @@ const Progress = React.forwardRef((_a, ref) => {
     "sections"
   ]);
   const { classes, cx, theme } = Progress_styles['default']({ color, size, radius, striped: striped || animate, animate }, { classNames, styles, name: "Progress" });
-  const segments = Array.isArray(sections) ? getCumulativeSections(sections).map((section, index) => /* @__PURE__ */ React__default.createElement("div", {
+  const segments = Array.isArray(sections) ? getCumulativeSections(sections).map((section, index) => /* @__PURE__ */ React__default.createElement(Box.Box, {
     key: index,
     className: classes.bar,
-    style: {
+    sx: {
       width: `${section.value}%`,
       left: `${section.accumulated}%`,
       backgroundColor: theme.fn.themeColor(section.color, 6, false)

package/cjs/components/Progress/Progress.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Progress.js","sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, MantineNumberSize, MantineColor, ClassNames } from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles from './Progress.styles';\nimport { Text } from '../Text';\n\nexport type ProgressStylesNames = ClassNames<typeof useStyles>;\n\nexport interface ProgressProps\n extends DefaultProps<ProgressStylesNames>,\n React.ComponentPropsWithoutRef<'div'> {\n /** Percent of filled bar (0-100) /\n value?: number;\n\n /* Progress color from theme /\n color?: MantineColor;\n\n /* Predefined progress height or number for height in px /\n size?: MantineNumberSize;\n\n /* Predefined progress radius from theme.radius or number for height in px /\n radius?: MantineNumberSize;\n\n /* Adds stripes /\n striped?: boolean;\n\n /* Whether to animate striped progress bars /\n animate?: boolean;\n\n /* Text to be placed inside the progress bar /\n label?: string;\n\n /* Replaces value if present, renders multiple sections instead of single one */\n sections?: { value: number; color: MantineColor; label?: string }[];\n}\n\nfunction getCumulativeSections(\n sections: { value: number; color: MantineColor; label?: string }[]\n): { value: number; color: MantineColor; accumulated: number; label?: string }[] {\n return sections.reduce(\n (acc, section) => {\n acc.sections.push({ ...section, accumulated: acc.accumulated });\n acc.accumulated += section.value;\n return acc;\n },\n { accumulated: 0, sections: [] }\n ).sections;\n}\n\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(\n (\n {\n className,\n value,\n color,\n size = 'md',\n radius = 'sm',\n striped = false,\n animate = false,\n label = '',\n 'aria-label': ariaLabel,\n classNames,\n styles,\n sections,\n ...others\n }: ProgressProps,\n ref\n ) => {\n const { classes, cx, theme } = useStyles(\n { color, size, radius, striped: striped \|\| animate, animate },\n { classNames, styles, name: 'Progress' }\n );\n\n const segments = Array.isArray(sections)\n ? getCumulativeSections(sections).map((section, index) => (\n <~~div~~\n key={index}\n className={classes.bar}\n ~~style~~={{\n width: `${section.value}%`,\n left: `${section.accumulated}%`,\n backgroundColor: theme.fn.themeColor(section.color, 6, false),\n }}\n >\n {section.label && <Text className={classes.label}>{section.label}</Text>}\n </~~div~~>\n ))\n : null;\n\n return (\n <Box className={cx(classes.root, className)} ref={ref} {...others}>\n {segments \|\| (\n <div\n role=\"progressbar\"\n aria-valuemax={100}\n aria-valuemin={0}\n aria-valuenow={value}\n aria-label={ariaLabel}\n className={classes.bar}\n style={{ width: `${value}%` }}\n >\n {label ? <Text className={classes.label}>{label}</Text> : ''}\n </div>\n )}\n </Box>\n );\n }\n);\n\nProgress.displayName = '@mantine/core/Progress';\n"],"names":["forwardRef","useStyles","React","~~Text~~","~~Box~~"],"mappings":"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~~CAAC~~,~~KAAK~~,EAAE;~~AAChJ~~,IAAI,GAAG,EAAE,KAAK;AACd,IAAI,SAAS,EAAE,OAAO,CAAC,GAAG;AAC1B,IAAI,~~KAAK~~,EAAE;~~AACX~~,MAAM,KAAK,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;AAChC,MAAM,IAAI,EAAE,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC;AACrC,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC;AACnE,KAAK;AACL,GAAG,EAAE,OAAO,CAAC,KAAK,~~oBAAoBA~~,cAAK,CAAC,aAAa,~~CAACC~~,SAAI,EAAE;AAChE,IAAI,SAAS,EAAE,OAAO,CAAC,KAAK;AAC5B,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;AAC7B,EAAE,~~uBAAuBD~~,cAAK,CAAC,aAAa,~~CAACE~~,OAAG,EAAE,cAAc,CAAC;AACjE,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC;AAC1C,IAAI,GAAG;AACP,GAAG,EAAE,MAAM,CAAC,EAAE,QAAQ,~~oBAAoBF~~,cAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACrE,IAAI,IAAI,EAAE,aAAa;AACvB,IAAI,eAAe,EAAE,GAAG;AACxB,IAAI,eAAe,EAAE,CAAC;AACtB,IAAI,eAAe,EAAE,KAAK;AAC1B,IAAI,YAAY,EAAE,SAAS;AAC3B,IAAI,SAAS,EAAE,OAAO,CAAC,GAAG;AAC1B,IAAI,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE;AACjC,GAAG,EAAE,KAAK,mBAAmBA,cAAK,CAAC,aAAa,~~CAACC~~,SAAI,EAAE;AACvD,IAAI,SAAS,EAAE,OAAO,CAAC,KAAK;AAC5B,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;AACnB,CAAC,EAAE;AACH,QAAQ,CAAC,WAAW,GAAG,wBAAwB;;;;"}
1	+ {"version":3,"file":"Progress.js","sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, MantineNumberSize, MantineColor, ClassNames } from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles from './Progress.styles';\nimport { Text } from '../Text';\n\nexport type ProgressStylesNames = ClassNames<typeof useStyles>;\n\nexport interface ProgressProps\n extends DefaultProps<ProgressStylesNames>,\n React.ComponentPropsWithoutRef<'div'> {\n /** Percent of filled bar (0-100) /\n value?: number;\n\n /* Progress color from theme /\n color?: MantineColor;\n\n /* Predefined progress height or number for height in px /\n size?: MantineNumberSize;\n\n /* Predefined progress radius from theme.radius or number for height in px /\n radius?: MantineNumberSize;\n\n /* Adds stripes /\n striped?: boolean;\n\n /* Whether to animate striped progress bars /\n animate?: boolean;\n\n /* Text to be placed inside the progress bar /\n label?: string;\n\n /* Replaces value if present, renders multiple sections instead of single one */\n sections?: { value: number; color: MantineColor; label?: string }[];\n}\n\nfunction getCumulativeSections(\n sections: { value: number; color: MantineColor; label?: string }[]\n): { value: number; color: MantineColor; accumulated: number; label?: string }[] {\n return sections.reduce(\n (acc, section) => {\n acc.sections.push({ ...section, accumulated: acc.accumulated });\n acc.accumulated += section.value;\n return acc;\n },\n { accumulated: 0, sections: [] }\n ).sections;\n}\n\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(\n (\n {\n className,\n value,\n color,\n size = 'md',\n radius = 'sm',\n striped = false,\n animate = false,\n label = '',\n 'aria-label': ariaLabel,\n classNames,\n styles,\n sections,\n ...others\n }: ProgressProps,\n ref\n ) => {\n const { classes, cx, theme } = useStyles(\n { color, size, radius, striped: striped \|\| animate, animate },\n { classNames, styles, name: 'Progress' }\n );\n\n const segments = Array.isArray(sections)\n ? getCumulativeSections(sections).map((section, index) => (\n <Box\n key={index}\n className={classes.bar}\n sx={{\n width: `${section.value}%`,\n left: `${section.accumulated}%`,\n backgroundColor: theme.fn.themeColor(section.color, 6, false),\n }}\n >\n {section.label && <Text className={classes.label}>{section.label}</Text>}\n </Box>\n ))\n : null;\n\n return (\n <Box className={cx(classes.root, className)} ref={ref} {...others}>\n {segments \|\| (\n <div\n role=\"progressbar\"\n aria-valuemax={100}\n aria-valuemin={0}\n aria-valuenow={value}\n aria-label={ariaLabel}\n className={classes.bar}\n style={{ width: `${value}%` }}\n >\n {label ? <Text className={classes.label}>{label}</Text> : ''}\n </div>\n )}\n </Box>\n );\n }\n);\n\nProgress.displayName = '@mantine/core/Progress';\n"],"names":["forwardRef","useStyles","React","Box","Text"],"mappings":"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"}

package/cjs/components/ScrollArea/ScrollArea.js CHANGED Viewed

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var RadixScrollArea = require('@radix-ui/react-scroll-area');
+var styles = require('@mantine/styles');
 var ScrollArea_styles = require('./ScrollArea.styles.js');
 var Box = require('../Box/Box.js');
@@ -57,11 +58,11 @@ const ScrollArea = React.forwardRef((_a, ref) => {
     children,
     className,
     classNames,
-    styles,
+    styles: styles$1,
     scrollbarSize = 12,
     scrollHideDelay = 1e3,
     type = "hover",
-    dir = "ltr",
+    dir,
     offsetScrollbars = false,
     viewportRef,
     onScrollPositionChange
@@ -79,11 +80,12 @@ const ScrollArea = React.forwardRef((_a, ref) => {
     "onScrollPositionChange"
   ]);
   const [scrollbarHovered, setScrollbarHovered] = React.useState(false);
-  const { classes, cx } = ScrollArea_styles['default']({ scrollbarSize, offsetScrollbars, dir, scrollbarHovered }, { name: "ScrollArea", classNames, styles });
+  const theme = styles.useMantineTheme();
+  const { classes, cx } = ScrollArea_styles['default']({ scrollbarSize, offsetScrollbars, scrollbarHovered }, { name: "ScrollArea", classNames, styles: styles$1 });
   return /* @__PURE__ */ React__default.createElement(RadixScrollArea__namespace.Root, {
     type,
     scrollHideDelay,
-    dir,
+    dir: dir || theme.dir,
     ref,
     asChild: true
   }, /* @__PURE__ */ React__default.createElement(Box.Box, __spreadValues({

package/cjs/components/ScrollArea/ScrollArea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScrollArea.js","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import React, { useState, forwardRef } from 'react';\nimport * as RadixScrollArea from '@radix-ui/react-scroll-area';\nimport { DefaultProps, ClassNames } from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles from './ScrollArea.styles';\n\nexport type ScrollAreaStylesNames = ClassNames<typeof useStyles>;\n\nexport interface ScrollAreaProps\n extends DefaultProps<ScrollAreaStylesNames>,\n React.ComponentPropsWithoutRef<'div'> {\n /** Scrollbar size in px /\n scrollbarSize?: number;\n\n /* Scrollbars type /\n type?: 'auto' \| 'always' \| 'scroll' \| 'hover';\n\n /* Scroll hide delay in ms, for scroll and hover types only /\n scrollHideDelay?: number;\n\n /* Reading direction of the scroll area /\n dir?: 'ltr' \| 'rtl';\n\n /* Should scrollbars be offset with padding /\n offsetScrollbars?: boolean;\n\n /* Get viewport ref /\n viewportRef?: React.ForwardedRef<HTMLDivElement>;\n\n /* Subscribe to scroll position changes */\n onScrollPositionChange?(position: { x: number; y: number }): void;\n}\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(\n (\n {\n children,\n className,\n classNames,\n styles,\n scrollbarSize = 12,\n scrollHideDelay = 1000,\n type = 'hover',\n dir ~~= 'ltr'~~,\n offsetScrollbars = false,\n viewportRef,\n onScrollPositionChange,\n ...others\n }: ScrollAreaProps,\n ref\n ) => {\n const [scrollbarHovered, setScrollbarHovered] = useState(false);\n const { classes, cx } = useStyles(\n { scrollbarSize, offsetScrollbars, ~~dir,~~ scrollbarHovered },\n { name: 'ScrollArea', classNames, styles }\n );\n\n return (\n <RadixScrollArea.Root\n type={type}\n scrollHideDelay={scrollHideDelay}\n dir={dir}\n ref={ref}\n asChild\n >\n <Box className={cx(classes.root, className)} {...others}>\n <RadixScrollArea.Viewport\n className={classes.viewport}\n ref={viewportRef}\n onScroll={\n typeof onScrollPositionChange === 'function'\n ? ({ currentTarget }) =>\n onScrollPositionChange({\n x: currentTarget.scrollLeft,\n y: currentTarget.scrollTop,\n })\n : undefined\n }\n >\n {children}\n </RadixScrollArea.Viewport>\n <RadixScrollArea.Scrollbar\n orientation=\"horizontal\"\n className={classes.scrollbar}\n forceMount\n onMouseEnter={() => setScrollbarHovered(true)}\n onMouseLeave={() => setScrollbarHovered(false)}\n >\n <RadixScrollArea.Thumb className={classes.thumb} />\n </RadixScrollArea.Scrollbar>\n <RadixScrollArea.Scrollbar\n orientation=\"vertical\"\n className={classes.scrollbar}\n forceMount\n onMouseEnter={() => setScrollbarHovered(true)}\n onMouseLeave={() => setScrollbarHovered(false)}\n >\n <RadixScrollArea.Thumb className={classes.thumb} />\n </RadixScrollArea.Scrollbar>\n <RadixScrollArea.Corner className={classes.corner} />\n </Box>\n </RadixScrollArea.Root>\n );\n }\n);\n\nScrollArea.displayName = '@mantine/core/ScrollArea';\n"],"names":["forwardRef","useState","useStyles","React","RadixScrollArea","Box"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AACF,IAAI,SAAS,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK;AACrC,EAAE,IAAI,MAAM,GAAG,EAAE,CAAC;AAClB,EAAE,KAAK,IAAI,IAAI,IAAI,MAAM;AACzB,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACpE,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAClC,EAAE,IAAI,MAAM,IAAI,IAAI,IAAI,mBAAmB;AAC3C,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE;AAClD,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACtE,QAAQ,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,KAAK;AACL,EAAE,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;~~AAKU~~,MAAC,UAAU,GAAGA,gBAAU,CAAC,CAAC,EAAE,EAAE,GAAG,KAAK;AAClD,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE;AACf,IAAI,QAAQ;AACZ,IAAI,SAAS;AACb,IAAI,UAAU;AACd,~~IAAI~~,~~MAAM~~;AACV,IAAI,aAAa,GAAG,EAAE;AACtB,IAAI,eAAe,GAAG,GAAG;AACzB,IAAI,IAAI,GAAG,OAAO;AAClB,IAAI,GAAG~~,GAAG,KAAK~~;~~AACf~~,IAAI,gBAAgB,GAAG,KAAK;AAC5B,IAAI,WAAW;AACf,IAAI,sBAAsB;AAC1B,GAAG,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE;AACjC,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,YAAY;AAChB,IAAI,QAAQ;AACZ,IAAI,eAAe;AACnB,IAAI,iBAAiB;AACrB,IAAI,MAAM;AACV,IAAI,KAAK;AACT,IAAI,kBAAkB;AACtB,IAAI,aAAa;AACjB,IAAI,wBAAwB;AAC5B,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAC;AAClE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,GAAGC,4BAAS,CAAC,EAAE,aAAa,EAAE,gBAAgB,EAAE,~~GAAG,EAAE,~~gBAAgB,EAAE,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,~~EAAE~~,~~MAAM~~,EAAE,CAAC,CAAC;~~AAC5I~~,EAAE,~~uBAAuBC~~,cAAK,CAAC,aAAa,CAACC,0BAAe,CAAC,IAAI,EAAE;AACnE,IAAI,IAAI;AACR,IAAI,eAAe;AACnB,IAAI,GAAG;~~AACP~~,IAAI,GAAG;AACP,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG,kBAAkBD,cAAK,CAAC,aAAa,CAACE,OAAG,EAAE,cAAc,CAAC;AAC7D,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC;AAC1C,GAAG,EAAE,MAAM,CAAC,kBAAkBF,cAAK,CAAC,aAAa,CAACC,0BAAe,CAAC,QAAQ,EAAE;AAC5E,IAAI,SAAS,EAAE,OAAO,CAAC,QAAQ;AAC/B,IAAI,GAAG,EAAE,WAAW;AACpB,IAAI,QAAQ,EAAE,OAAO,sBAAsB,KAAK,UAAU,GAAG,CAAC,EAAE,aAAa,EAAE,KAAK,sBAAsB,CAAC;AAC3G,MAAM,CAAC,EAAE,aAAa,CAAC,UAAU;AACjC,MAAM,CAAC,EAAE,aAAa,CAAC,SAAS;AAChC,KAAK,CAAC,GAAG,KAAK,CAAC;AACf,GAAG,EAAE,QAAQ,CAAC,kBAAkBD,cAAK,CAAC,aAAa,CAACC,0BAAe,CAAC,SAAS,EAAE;AAC/E,IAAI,WAAW,EAAE,YAAY;AAC7B,IAAI,SAAS,EAAE,OAAO,CAAC,SAAS;AAChC,IAAI,UAAU,EAAE,IAAI;AACpB,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC,IAAI,CAAC;AACjD,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC,KAAK,CAAC;AAClD,GAAG,kBAAkBD,cAAK,CAAC,aAAa,CAACC,0BAAe,CAAC,KAAK,EAAE;AAChE,IAAI,SAAS,EAAE,OAAO,CAAC,KAAK;AAC5B,GAAG,CAAC,CAAC,kBAAkBD,cAAK,CAAC,aAAa,CAACC,0BAAe,CAAC,SAAS,EAAE;AACtE,IAAI,WAAW,EAAE,UAAU;AAC3B,IAAI,SAAS,EAAE,OAAO,CAAC,SAAS;AAChC,IAAI,UAAU,EAAE,IAAI;AACpB,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC,IAAI,CAAC;AACjD,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC,KAAK,CAAC;AAClD,GAAG,kBAAkBD,cAAK,CAAC,aAAa,CAACC,0BAAe,CAAC,KAAK,EAAE;AAChE,IAAI,SAAS,EAAE,OAAO,CAAC,KAAK;AAC5B,GAAG,CAAC,CAAC,kBAAkBD,cAAK,CAAC,aAAa,CAACC,0BAAe,CAAC,MAAM,EAAE;AACnE,IAAI,SAAS,EAAE,OAAO,CAAC,MAAM;AAC7B,GAAG,CAAC,CAAC,CAAC,CAAC;AACP,CAAC,EAAE;AACH,UAAU,CAAC,WAAW,GAAG,0BAA0B;;;;"}
1	+ {"version":3,"file":"ScrollArea.js","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import React, { useState, forwardRef } from 'react';\nimport * as RadixScrollArea from '@radix-ui/react-scroll-area';\nimport { DefaultProps, ClassNames, useMantineTheme } from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles from './ScrollArea.styles';\n\nexport type ScrollAreaStylesNames = ClassNames<typeof useStyles>;\n\nexport interface ScrollAreaProps\n extends DefaultProps<ScrollAreaStylesNames>,\n React.ComponentPropsWithoutRef<'div'> {\n /** Scrollbar size in px /\n scrollbarSize?: number;\n\n /* Scrollbars type /\n type?: 'auto' \| 'always' \| 'scroll' \| 'hover';\n\n /* Scroll hide delay in ms, for scroll and hover types only /\n scrollHideDelay?: number;\n\n /* Reading direction of the scroll area /\n dir?: 'ltr' \| 'rtl';\n\n /* Should scrollbars be offset with padding /\n offsetScrollbars?: boolean;\n\n /* Get viewport ref /\n viewportRef?: React.ForwardedRef<HTMLDivElement>;\n\n /* Subscribe to scroll position changes */\n onScrollPositionChange?(position: { x: number; y: number }): void;\n}\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(\n (\n {\n children,\n className,\n classNames,\n styles,\n scrollbarSize = 12,\n scrollHideDelay = 1000,\n type = 'hover',\n dir,\n offsetScrollbars = false,\n viewportRef,\n onScrollPositionChange,\n ...others\n }: ScrollAreaProps,\n ref\n ) => {\n const [scrollbarHovered, setScrollbarHovered] = useState(false);\n const theme = useMantineTheme();\n const { classes, cx } = useStyles(\n { scrollbarSize, offsetScrollbars, scrollbarHovered },\n { name: 'ScrollArea', classNames, styles }\n );\n\n return (\n <RadixScrollArea.Root\n type={type}\n scrollHideDelay={scrollHideDelay}\n dir={dir \|\| theme.dir}\n ref={ref}\n asChild\n >\n <Box className={cx(classes.root, className)} {...others}>\n <RadixScrollArea.Viewport\n className={classes.viewport}\n ref={viewportRef}\n onScroll={\n typeof onScrollPositionChange === 'function'\n ? ({ currentTarget }) =>\n onScrollPositionChange({\n x: currentTarget.scrollLeft,\n y: currentTarget.scrollTop,\n })\n : undefined\n }\n >\n {children}\n </RadixScrollArea.Viewport>\n <RadixScrollArea.Scrollbar\n orientation=\"horizontal\"\n className={classes.scrollbar}\n forceMount\n onMouseEnter={() => setScrollbarHovered(true)}\n onMouseLeave={() => setScrollbarHovered(false)}\n >\n <RadixScrollArea.Thumb className={classes.thumb} />\n </RadixScrollArea.Scrollbar>\n <RadixScrollArea.Scrollbar\n orientation=\"vertical\"\n className={classes.scrollbar}\n forceMount\n onMouseEnter={() => setScrollbarHovered(true)}\n onMouseLeave={() => setScrollbarHovered(false)}\n >\n <RadixScrollArea.Thumb className={classes.thumb} />\n </RadixScrollArea.Scrollbar>\n <RadixScrollArea.Corner className={classes.corner} />\n </Box>\n </RadixScrollArea.Root>\n );\n }\n);\n\nScrollArea.displayName = '@mantine/core/ScrollArea';\n"],"names":["forwardRef","styles","useState","useMantineTheme","useStyles","React","RadixScrollArea","Box"],"mappings":"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"}

package/cjs/components/ScrollArea/ScrollArea.styles.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var styles = require('@mantine/styles');
-var useStyles = styles.createStyles((theme, { scrollbarSize, dir, offsetScrollbars, scrollbarHovered }, getRef) => {
+var useStyles = styles.createStyles((theme, { scrollbarSize, offsetScrollbars, scrollbarHovered }, getRef) => {
   const thumb = getRef("thumb");
   return {
     root: {
@@ -13,8 +13,7 @@ var useStyles = styles.createStyles((theme, { scrollbarSize, dir, offsetScrollba
     viewport: {
       width: "100%",
       height: "100%",
-      paddingRight: dir === "ltr" && offsetScrollbars ? scrollbarSize : void 0,
-      paddingLeft: dir === "rtl" && offsetScrollbars ? scrollbarSize : void 0
+      paddingRight: offsetScrollbars ? scrollbarSize : void 0
     },
     scrollbar: {
       display: "flex",

package/cjs/components/ScrollArea/ScrollArea.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScrollArea.styles.js","sources":["../../../src/components/ScrollArea/ScrollArea.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/styles';\n\ninterface ScrollAreaStyles {\n scrollbarSize: number;\n ~~dir: 'ltr' \| 'rtl';\n~~ offsetScrollbars: boolean;\n scrollbarHovered: boolean;\n}\n\nexport default createStyles(\n (theme, { scrollbarSize, ~~dir,~~ offsetScrollbars, scrollbarHovered }: ScrollAreaStyles, getRef) => {\n const thumb = getRef('thumb');\n return {\n root: {\n overflow: 'hidden',\n },\n\n viewport: {\n width: '100%',\n height: '100%',\n paddingRight: ~~dir === 'ltr' &&~~ offsetScrollbars ? scrollbarSize : undefined,\n ~~paddingLeft: dir === 'rtl' && offsetScrollbars ? scrollbarSize : undefined,\n~~ },\n\n scrollbar: {\n display: 'flex',\n userSelect: 'none',\n touchAction: 'none',\n boxSizing: 'border-box',\n padding: scrollbarSize / 5,\n transition: 'background-color 150ms ease, opacity 150ms ease',\n\n '&:hover': {\n backgroundColor:\n theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],\n [`& .${thumb}`]: {\n backgroundColor:\n theme.colorScheme === 'dark'\n ? theme.fn.rgba('#ffffff', 0.5)\n : theme.fn.rgba(theme.black, 0.5),\n },\n },\n\n '&[data-orientation=\"vertical\"]': {\n width: scrollbarSize,\n },\n\n '&[data-orientation=\"horizontal\"]': {\n flexDirection: 'column',\n height: scrollbarSize,\n },\n\n '&[data-state=\"hidden\"]': {\n opacity: 0,\n },\n },\n\n thumb: {\n ref: thumb,\n flex: 1,\n backgroundColor:\n theme.colorScheme === 'dark'\n ? theme.fn.rgba('#ffffff', 0.4)\n : theme.fn.rgba(theme.black, 0.4),\n borderRadius: scrollbarSize,\n position: 'relative',\n transition: 'background-color 150ms ease',\n\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n width: '100%',\n height: '100%',\n minWidth: 44,\n minHeight: 44,\n },\n },\n\n corner: {\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],\n transition: 'opacity 150ms ease',\n opacity: scrollbarHovered ? 1 : 0,\n },\n };\n }\n);\n"],"names":["createStyles"],"mappings":";;;;;;AACA,gBAAeA,mBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,aAAa,EAAE,~~GAAG,EAAE,~~gBAAgB,EAAE,gBAAgB,EAAE,EAAE,MAAM,KAAK;~~AAC3G~~,EAAE,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;AAChC,EAAE,OAAO;AACT,IAAI,IAAI,EAAE;AACV,MAAM,QAAQ,EAAE,QAAQ;AACxB,KAAK;AACL,IAAI,QAAQ,EAAE;AACd,MAAM,KAAK,EAAE,MAAM;AACnB,MAAM,MAAM,EAAE,MAAM;AACpB,MAAM,YAAY,EAAE,~~GAAG,KAAK,KAAK,IAAI,~~gBAAgB,GAAG,aAAa,GAAG,KAAK,CAAC;~~AAC9E~~,~~MAAM,WAAW,EAAE,GAAG,~~KAAK~~,KAAK,IAAI,gBAAgB,GAAG,aAAa,GAAG,KAAK,CAAC~~;~~AAC7E,KAAK;~~AACL,IAAI,SAAS,EAAE;AACf,MAAM,OAAO,EAAE,MAAM;AACrB,MAAM,UAAU,EAAE,MAAM;AACxB,MAAM,WAAW,EAAE,MAAM;AACzB,MAAM,SAAS,EAAE,YAAY;AAC7B,MAAM,OAAO,EAAE,aAAa,GAAG,CAAC;AAChC,MAAM,UAAU,EAAE,iDAAiD;AACnE,MAAM,SAAS,EAAE;AACjB,QAAQ,eAAe,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;AACnG,QAAQ,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,GAAG;AACzB,UAAU,eAAe,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC;AACzH,SAAS;AACT,OAAO;AACP,MAAM,gCAAgC,EAAE;AACxC,QAAQ,KAAK,EAAE,aAAa;AAC5B,OAAO;AACP,MAAM,kCAAkC,EAAE;AAC1C,QAAQ,aAAa,EAAE,QAAQ;AAC/B,QAAQ,MAAM,EAAE,aAAa;AAC7B,OAAO;AACP,MAAM,wBAAwB,EAAE;AAChC,QAAQ,OAAO,EAAE,CAAC;AAClB,OAAO;AACP,KAAK;AACL,IAAI,KAAK,EAAE;AACX,MAAM,GAAG,EAAE,KAAK;AAChB,MAAM,IAAI,EAAE,CAAC;AACb,MAAM,eAAe,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC;AACrH,MAAM,YAAY,EAAE,aAAa;AACjC,MAAM,QAAQ,EAAE,UAAU;AAC1B,MAAM,UAAU,EAAE,6BAA6B;AAC/C,MAAM,WAAW,EAAE;AACnB,QAAQ,OAAO,EAAE,IAAI;AACrB,QAAQ,QAAQ,EAAE,UAAU;AAC5B,QAAQ,GAAG,EAAE,KAAK;AAClB,QAAQ,IAAI,EAAE,KAAK;AACnB,QAAQ,SAAS,EAAE,uBAAuB;AAC1C,QAAQ,KAAK,EAAE,MAAM;AACrB,QAAQ,MAAM,EAAE,MAAM;AACtB,QAAQ,QAAQ,EAAE,EAAE;AACpB,QAAQ,SAAS,EAAE,EAAE;AACrB,OAAO;AACP,KAAK;AACL,IAAI,MAAM,EAAE;AACZ,MAAM,eAAe,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;AACjG,MAAM,UAAU,EAAE,oBAAoB;AACtC,MAAM,OAAO,EAAE,gBAAgB,GAAG,CAAC,GAAG,CAAC;AACvC,KAAK;AACL,GAAG,CAAC;AACJ,CAAC,CAAC;;;;"}
1	+ {"version":3,"file":"ScrollArea.styles.js","sources":["../../../src/components/ScrollArea/ScrollArea.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/styles';\n\ninterface ScrollAreaStyles {\n scrollbarSize: number;\n offsetScrollbars: boolean;\n scrollbarHovered: boolean;\n}\n\nexport default createStyles(\n (theme, { scrollbarSize, offsetScrollbars, scrollbarHovered }: ScrollAreaStyles, getRef) => {\n const thumb = getRef('thumb');\n return {\n root: {\n overflow: 'hidden',\n },\n\n viewport: {\n width: '100%',\n height: '100%',\n paddingRight: offsetScrollbars ? scrollbarSize : undefined,\n },\n\n scrollbar: {\n display: 'flex',\n userSelect: 'none',\n touchAction: 'none',\n boxSizing: 'border-box',\n padding: scrollbarSize / 5,\n transition: 'background-color 150ms ease, opacity 150ms ease',\n\n '&:hover': {\n backgroundColor:\n theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],\n [`& .${thumb}`]: {\n backgroundColor:\n theme.colorScheme === 'dark'\n ? theme.fn.rgba('#ffffff', 0.5)\n : theme.fn.rgba(theme.black, 0.5),\n },\n },\n\n '&[data-orientation=\"vertical\"]': {\n width: scrollbarSize,\n },\n\n '&[data-orientation=\"horizontal\"]': {\n flexDirection: 'column',\n height: scrollbarSize,\n },\n\n '&[data-state=\"hidden\"]': {\n opacity: 0,\n },\n },\n\n thumb: {\n ref: thumb,\n flex: 1,\n backgroundColor:\n theme.colorScheme === 'dark'\n ? theme.fn.rgba('#ffffff', 0.4)\n : theme.fn.rgba(theme.black, 0.4),\n borderRadius: scrollbarSize,\n position: 'relative',\n transition: 'background-color 150ms ease',\n\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n width: '100%',\n height: '100%',\n minWidth: 44,\n minHeight: 44,\n },\n },\n\n corner: {\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],\n transition: 'opacity 150ms ease',\n opacity: scrollbarHovered ? 1 : 0,\n },\n };\n }\n);\n"],"names":["createStyles"],"mappings":"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"}

package/cjs/components/SegmentedControl/SegmentedControl.js CHANGED Viewed

@@ -42,6 +42,7 @@ var __objRest = (source, exclude) => {
 const SegmentedControl = React.forwardRef((_a, ref) => {
   var _b = _a, {
     className,
+    disabled = false,
     data: _data,
     name,
     value,
@@ -54,9 +55,11 @@ const SegmentedControl = React.forwardRef((_a, ref) => {
     transitionTimingFunction,
     classNames,
     styles,
-    defaultValue
+    defaultValue,
+    orientation
   } = _b, others = __objRest(_b, [
     "className",
+    "disabled",
     "data",
     "name",
     "value",
@@ -69,7 +72,8 @@ const SegmentedControl = React.forwardRef((_a, ref) => {
     "transitionTimingFunction",
     "classNames",
     "styles",
-    "defaultValue"
+    "defaultValue",
+    "orientation"
   ]);
   const reduceMotion = hooks.useReducedMotion();
   const data = _data.map((item) => typeof item === "string" ? { label: item, value: item } : item);
@@ -81,16 +85,21 @@ const SegmentedControl = React.forwardRef((_a, ref) => {
     onChange,
     rule: (val) => !!val
   });
-  const { classes, cx } = SegmentedControl_styles['default']({
+  const { classes, cx, theme } = SegmentedControl_styles['default']({
     size,
     fullWidth,
     color,
     radius,
     shouldAnimate: reduceMotion || !shouldAnimate,
     transitionDuration,
-    transitionTimingFunction
+    transitionTimingFunction,
+    orientation
   }, { classNames, styles, name: "SegmentedControl" });
-  const [activePosition, setActivePosition] = React.useState({ width: 0, translate: 0 });
+  const [activePosition, setActivePosition] = React.useState({
+    width: 0,
+    height: 0,
+    translate: [0, 0]
+  });
   const uuid = hooks.useUuid(name);
   const refs = React.useRef({});
   const [observerRef, containerRect] = hooks.useResizeObserver();
@@ -99,9 +108,17 @@ const SegmentedControl = React.forwardRef((_a, ref) => {
       const element = refs.current[_value];
       const elementRect = element.getBoundingClientRect();
       const scaledValue = element.offsetWidth / elementRect.width;
+      const width = elementRect.width * scaledValue || 0;
+      const height = elementRect.height * scaledValue || 0;
+      const offsetRight = containerRect.width - element.parentElement.offsetLeft + SegmentedControl_styles.WRAPPER_PADDING - width;
+      const offsetLeft = element.parentElement.offsetLeft - SegmentedControl_styles.WRAPPER_PADDING;
       setActivePosition({
-        width: elementRect.width * scaledValue || 0,
-        translate: element.parentElement.offsetLeft - SegmentedControl_styles.WRAPPER_PADDING
+        width,
+        height,
+        translate: [
+          theme.dir === "rtl" ? offsetRight : offsetLeft,
+          element.parentElement.offsetTop - SegmentedControl_styles.WRAPPER_PADDING
+        ]
       });
     }
   }, [_value, containerRect]);
@@ -113,6 +130,7 @@ const SegmentedControl = React.forwardRef((_a, ref) => {
     key: item.value
   }, /* @__PURE__ */ React__default.createElement("input", {
     className: classes.input,
+    disabled,
     type: "radio",
     name: uuid,
     value: item.value,
@@ -120,7 +138,10 @@ const SegmentedControl = React.forwardRef((_a, ref) => {
     checked: _value === item.value,
     onChange: () => handleValueChange(item.value)
   }), /* @__PURE__ */ React__default.createElement("label", {
-    className: cx(classes.label, { [classes.labelActive]: _value === item.value }),
+    className: cx(classes.label, {
+      [classes.labelActive]: _value === item.value,
+      [classes.disabled]: disabled
+    }),
     htmlFor: `${uuid}-${item.value}`,
     ref: (node) => {
       refs.current[item.value] = node;
@@ -129,11 +150,13 @@ const SegmentedControl = React.forwardRef((_a, ref) => {
   return /* @__PURE__ */ React__default.createElement(Box.Box, __spreadValues({
     className: cx(classes.root, className),
     ref: hooks.useMergedRef(observerRef, ref)
-  }, others), !!_value && /* @__PURE__ */ React__default.createElement("span", {
+  }, others), !!_value && /* @__PURE__ */ React__default.createElement(Box.Box, {
+    component: "span",
     className: classes.active,
-    style: {
+    sx: {
       width: activePosition.width,
-      transform: `translateX(${activePosition.translate}px)`
+      height: activePosition.height,
+      transform: `translate(${activePosition.translate[0]}px, ${activePosition.translate[1]}px )`
     }
   }), controls);
 });

package/cjs/components/SegmentedControl/SegmentedControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, forwardRef } from 'react';\nimport {\n useReducedMotion,\n useResizeObserver,\n useUncontrolled,\n useUuid,\n useMergedRef,\n} from '@mantine/hooks';\nimport {\n DefaultProps,\n MantineNumberSize,\n MantineSize,\n MantineColor,\n ClassNames,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles, { WRAPPER_PADDING } from './SegmentedControl.styles';\n\nexport interface SegmentedControlItem {\n value: string;\n label: React.ReactNode;\n}\n\nexport type SegmentedControlStylesNames = ClassNames<typeof useStyles>;\n\nexport interface SegmentedControlProps\n extends DefaultProps<SegmentedControlStylesNames>,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'value' \| 'onChange'> {\n /** Data based on which controls are rendered /\n data: string[] \| SegmentedControlItem[];\n\n /* Current selected value /\n value?: string;\n\n /* Called when value changes /\n onChange?(value: string): void;\n\n /* Name of the radio group, default to random id /\n name?: string;\n\n /* True if component should have 100% width /\n fullWidth?: boolean;\n\n /* Active control color from theme.colors, defaults to white in light color scheme and theme.colors.dark[9] in dark /\n color?: MantineColor;\n\n /* Controls font-size, paddings and height /\n size?: MantineSize;\n\n /* Border-radius from theme or number to set border-radius in px /\n radius?: MantineNumberSize;\n\n /* Transition duration in ms, set to 0 to turn off transitions /\n transitionDuration?: number;\n\n /* Transition timing function for all transitions, defaults to theme.transitionTimingFunction /\n transitionTimingFunction?: string;\n\n /* Default value for uncontrolled component /\n defaultValue?: string;\n}\n\nexport const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(\n (\n {\n className,\n data: _data,\n name,\n value,\n onChange,\n color,\n fullWidth,\n radius = 'sm',\n size = 'sm',\n transitionDuration = 200,\n transitionTimingFunction,\n classNames,\n styles,\n defaultValue,\n ...others\n },\n ref\n ) => {\n const reduceMotion = useReducedMotion();\n const data = _data.map((item: any) =>\n typeof item === 'string' ? { label: item, value: item } : item\n );\n\n const [shouldAnimate, setShouldAnimate] = useState(false);\n const [_value, handleValueChange] = useUncontrolled({\n value,\n defaultValue,\n finalValue: Array.isArray(data) ? data[0].value : null,\n onChange,\n rule: (val) => !!val,\n });\n\n const { classes, cx } = useStyles(\n {\n size,\n fullWidth,\n color,\n radius,\n shouldAnimate: reduceMotion \|\| !shouldAnimate,\n transitionDuration,\n transitionTimingFunction,\n },\n { classNames, styles, name: 'SegmentedControl' }\n );\n\n const [activePosition, setActivePosition] = useState({ width: 0, translate: 0 });\n const uuid = useUuid(name);\n const refs = useRef<Record<string, HTMLLabelElement>>({});\n const [observerRef, containerRect] = useResizeObserver();\n\n useEffect(() => {\n if (_value in refs.current && observerRef.current) {\n const element = refs.current[_value];\n const elementRect = element.getBoundingClientRect();\n const scaledValue = element.offsetWidth / elementRect.width;\n\n setActivePosition({\n width: elementRect.width scaledValue \|\| 0,\n translate: element.parentElement.offsetLeft - WRAPPER_PADDING,\n });\n }\n }, [_value, containerRect]);\n\n useEffect(() => {\n setShouldAnimate(true);\n }, []);\n\n const controls = data.map((item) => (\n <div\n className={cx(classes.control, { [classes.controlActive]: _value === item.value })}\n key={item.value}\n >\n <input\n className={classes.input}\n type=\"radio\"\n name={uuid}\n value={item.value}\n id={`${uuid}-${item.value}`}\n checked={_value === item.value}\n onChange={() => handleValueChange(item.value)}\n />\n\n <label\n className={cx(classes.label, { [classes.labelActive]: _value === item.value })}\n htmlFor={`${uuid}-${item.value}`}\n ref={(node) => {\n refs.current[item.value] = node;\n }}\n >\n {item.label}\n </label>\n </div>\n ));\n\n return (\n <Box className={cx(classes.root, className)} ref={useMergedRef(observerRef, ref)} {...others}>\n {!!_value && (\n <span\n className={classes.active}\n style={{\n width: activePosition.width,\n transform: `translateX(${activePosition.translate}px)`,\n }}\n />\n )}\n\n {controls}\n </Box>\n );\n }\n);\n\nSegmentedControl.displayName = '@mantine/core/SegmentedControl';\n"],"names":["forwardRef","useReducedMotion","useState","useUncontrolled","useStyles","useUuid","useRef","useResizeObserver","useEffect","WRAPPER_PADDING","React","Box","useMergedRef"],"mappings":"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"}
1	+ {"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, forwardRef } from 'react';\nimport {\n useReducedMotion,\n useResizeObserver,\n useUncontrolled,\n useUuid,\n useMergedRef,\n} from '@mantine/hooks';\nimport {\n DefaultProps,\n MantineNumberSize,\n MantineSize,\n MantineColor,\n ClassNames,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles, { WRAPPER_PADDING } from './SegmentedControl.styles';\n\nexport interface SegmentedControlItem {\n value: string;\n label: React.ReactNode;\n}\n\nexport type SegmentedControlStylesNames = ClassNames<typeof useStyles>;\n\nexport interface SegmentedControlProps\n extends DefaultProps<SegmentedControlStylesNames>,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'value' \| 'onChange'> {\n /** Data based on which controls are rendered /\n data: string[] \| SegmentedControlItem[];\n\n /* Current selected value /\n value?: string;\n\n /* Disabled input state /\n disabled?: boolean;\n\n /* Called when value changes /\n onChange?(value: string): void;\n\n /* Name of the radio group, default to random id /\n name?: string;\n\n /* True if component should have 100% width /\n fullWidth?: boolean;\n\n /* Active control color from theme.colors, defaults to white in light color scheme and theme.colors.dark[9] in dark /\n color?: MantineColor;\n\n /* Controls font-size, paddings and height /\n size?: MantineSize;\n\n /* Border-radius from theme or number to set border-radius in px /\n radius?: MantineNumberSize;\n\n /* Transition duration in ms, set to 0 to turn off transitions /\n transitionDuration?: number;\n\n /* Transition timing function for all transitions, defaults to theme.transitionTimingFunction /\n transitionTimingFunction?: string;\n\n /* Default value for uncontrolled component /\n defaultValue?: string;\n\n /* Display Vertically /\n orientation?: 'vertical' \| 'horizontal';\n}\n\nexport const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(\n (\n {\n className,\n disabled = false,\n data: _data,\n name,\n value,\n onChange,\n color,\n fullWidth,\n radius = 'sm',\n size = 'sm',\n transitionDuration = 200,\n transitionTimingFunction,\n classNames,\n styles,\n defaultValue,\n orientation,\n ...others\n },\n ref\n ) => {\n const reduceMotion = useReducedMotion();\n const data = _data.map((item: any) =>\n typeof item === 'string' ? { label: item, value: item } : item\n );\n\n const [shouldAnimate, setShouldAnimate] = useState(false);\n const [_value, handleValueChange] = useUncontrolled({\n value,\n defaultValue,\n finalValue: Array.isArray(data) ? data[0].value : null,\n onChange,\n rule: (val) => !!val,\n });\n\n const { classes, cx, theme } = useStyles(\n {\n size,\n fullWidth,\n color,\n radius,\n shouldAnimate: reduceMotion \|\| !shouldAnimate,\n transitionDuration,\n transitionTimingFunction,\n orientation,\n },\n { classNames, styles, name: 'SegmentedControl' }\n );\n\n const [activePosition, setActivePosition] = useState({\n width: 0,\n height: 0,\n translate: [0, 0],\n });\n const uuid = useUuid(name);\n const refs = useRef<Record<string, HTMLLabelElement>>({});\n const [observerRef, containerRect] = useResizeObserver();\n\n useEffect(() => {\n if (_value in refs.current && observerRef.current) {\n const element = refs.current[_value];\n const elementRect = element.getBoundingClientRect();\n const scaledValue = element.offsetWidth / elementRect.width;\n const width = elementRect.width scaledValue \|\| 0;\n const height = elementRect.height * scaledValue \|\| 0;\n\n const offsetRight =\n containerRect.width - element.parentElement.offsetLeft + WRAPPER_PADDING - width;\n const offsetLeft = element.parentElement.offsetLeft - WRAPPER_PADDING;\n\n setActivePosition({\n width,\n height,\n translate: [\n theme.dir === 'rtl' ? offsetRight : offsetLeft,\n element.parentElement.offsetTop - WRAPPER_PADDING,\n ],\n });\n }\n }, [_value, containerRect]);\n\n useEffect(() => {\n setShouldAnimate(true);\n }, []);\n\n const controls = data.map((item) => (\n <div\n className={cx(classes.control, { [classes.controlActive]: _value === item.value })}\n key={item.value}\n >\n <input\n className={classes.input}\n disabled={disabled}\n type=\"radio\"\n name={uuid}\n value={item.value}\n id={`${uuid}-${item.value}`}\n checked={_value === item.value}\n onChange={() => handleValueChange(item.value)}\n />\n\n <label\n className={cx(classes.label, {\n [classes.labelActive]: _value === item.value,\n [classes.disabled]: disabled,\n })}\n htmlFor={`${uuid}-${item.value}`}\n ref={(node) => {\n refs.current[item.value] = node;\n }}\n >\n {item.label}\n </label>\n </div>\n ));\n\n return (\n <Box className={cx(classes.root, className)} ref={useMergedRef(observerRef, ref)} {...others}>\n {!!_value && (\n <Box\n component=\"span\"\n className={classes.active}\n sx={{\n width: activePosition.width,\n height: activePosition.height,\n transform: `translate(${activePosition.translate[0]}px, ${activePosition.translate[1]}px )`,\n }}\n />\n )}\n\n {controls}\n </Box>\n );\n }\n);\n\nSegmentedControl.displayName = '@mantine/core/SegmentedControl';\n"],"names":["forwardRef","useReducedMotion","useState","useUncontrolled","useStyles","useUuid","useRef","useResizeObserver","useEffect","WRAPPER_PADDING","React","Box","useMergedRef"],"mappings":"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"}

package/cjs/components/SegmentedControl/SegmentedControl.styles.js CHANGED Viewed

@@ -38,42 +38,47 @@ var useStyles = styles.createStyles((theme, {
   shouldAnimate,
   transitionDuration,
   transitionTimingFunction,
-  size
+  size,
+  orientation
 }, getRef) => {
-  const label = __spreadProps(__spreadValues(__spreadValues({
-    ref: getRef("label")
-  }, theme.fn.focusStyles()), theme.fn.fontStyles()), {
-    WebkitTapHighlightColor: "transparent",
-    borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),
-    fontWeight: 500,
-    fontSize: size in theme.fontSizes ? theme.fontSizes[size] : theme.fontSizes.sm,
-    cursor: "pointer",
-    display: "block",
-    textAlign: "center",
-    padding: sizes[size in sizes ? size : "sm"],
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    color: theme.colorScheme === "dark" ? theme.colors.dark[1] : theme.colors.gray[7],
-    transition: `color ${shouldAnimate ? 0 : transitionDuration}ms ${transitionTimingFunction || theme.transitionTimingFunction}`,
-    "&:hover": {
-      color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black
-    }
-  });
-  const control = {
-    ref: getRef("control"),
-    position: "relative",
-    boxSizing: "border-box",
-    flex: 1,
-    zIndex: 2,
-    transition: `border-left-color ${shouldAnimate ? 0 : transitionDuration}ms ${transitionTimingFunction || theme.transitionTimingFunction}`,
-    "&:not(:first-of-type)": {
-      borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`
-    }
-  };
+  const label = getRef("label");
+  const control = getRef("control");
+  const vertical = orientation === "vertical";
   return {
-    label,
-    control,
+    label: __spreadProps(__spreadValues(__spreadValues({
+      ref: label
+    }, theme.fn.focusStyles()), theme.fn.fontStyles()), {
+      WebkitTapHighlightColor: "transparent",
+      borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),
+      fontWeight: 500,
+      fontSize: size in theme.fontSizes ? theme.fontSizes[size] : theme.fontSizes.sm,
+      cursor: "pointer",
+      display: "block",
+      textAlign: "center",
+      padding: sizes[size in sizes ? size : "sm"],
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      userSelect: "none",
+      color: theme.colorScheme === "dark" ? theme.colors.dark[1] : theme.colors.gray[7],
+      transition: `color ${shouldAnimate ? 0 : transitionDuration}ms ${transitionTimingFunction || theme.transitionTimingFunction}`,
+      "&:hover": {
+        color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black
+      }
+    }),
+    control: {
+      ref: control,
+      position: "relative",
+      boxSizing: "border-box",
+      flex: 1,
+      zIndex: 2,
+      transition: `border-left-color ${shouldAnimate ? 0 : transitionDuration}ms ${transitionTimingFunction || theme.transitionTimingFunction}`,
+      "&:not(:first-of-type)": {
+        borderStyle: "solid",
+        borderWidth: orientation === "vertical" ? "1px 0 0 0" : "0 0 0 1px",
+        borderColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]
+      }
+    },
     input: {
       height: 0,
       width: 0,
@@ -83,12 +88,12 @@ var useStyles = styles.createStyles((theme, {
       opacity: 0,
       "&:focus": {
         outline: "none",
-        [`& + .${label.ref}`]: {
+        [`& + .${label}`]: {
           outline: "none",
           boxShadow: `0 0 0 2px ${theme.colorScheme === "dark" ? theme.colors.dark[9] : theme.white}, 0 0 0 4px ${theme.colors[theme.primaryColor][5]}`
         },
         "&:focus:not(:focus-visible)": {
-          [`& + .${label.ref}`]: {
+          [`& + .${label}`]: {
             boxShadow: "none"
           }
         }
@@ -96,7 +101,9 @@ var useStyles = styles.createStyles((theme, {
     },
     root: {
       position: "relative",
-      display: fullWidth ? "flex" : "inline-flex",
+      display: fullWidth || vertical ? "flex" : "inline-flex",
+      width: vertical && !fullWidth ? "max-content" : "inherit",
+      flexDirection: vertical ? "column" : "row",
       backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[1],
       borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),
       overflow: "hidden",
@@ -104,8 +111,10 @@ var useStyles = styles.createStyles((theme, {
     },
     controlActive: {
       borderLeftColor: "transparent !important",
-      [`& + .${control.ref}`]: {
-        borderLeftColor: "transparent !important"
+      borderTopColor: "transparent !important",
+      [`& + .${control}`]: {
+        borderLeftColor: "transparent !important",
+        borderTopColor: "transparent !important"
       }
     },
     labelActive: {
@@ -113,12 +122,15 @@ var useStyles = styles.createStyles((theme, {
         color: color in theme.colors || theme.colorScheme === "dark" ? theme.white : theme.black
       }
     },
+    disabled: {
+      "&, &:hover": {
+        color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[5]
+      }
+    },
     active: {
       boxSizing: "border-box",
       borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),
       position: "absolute",
-      top: 4,
-      bottom: 4,
       zIndex: 1,
       boxShadow: color || theme.colorScheme === "dark" ? "none" : theme.shadows.xs,
       transition: `transform ${shouldAnimate ? 0 : transitionDuration}ms ${theme.transitionTimingFunction}, width ${shouldAnimate ? 0 : transitionDuration / 2}ms ${transitionTimingFunction || theme.transitionTimingFunction}`,

package/cjs/components/SegmentedControl/SegmentedControl.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SegmentedControl.styles.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineSize, MantineColor } from '@mantine/styles';\n\nexport const WRAPPER_PADDING = 4;\n\ninterface SegmentedControlStyles {\n fullWidth: boolean;\n color: MantineColor;\n radius: MantineNumberSize;\n shouldAnimate: boolean;\n transitionDuration: number;\n transitionTimingFunction: string;\n size: MantineSize;\n}\n\nconst sizes = {\n xs: '3px 6px',\n sm: '5px 10px',\n md: '7px 14px',\n lg: '9px 16px',\n xl: '12px 20px',\n};\n\nexport default createStyles(\n (\n theme,\n {\n fullWidth,\n color,\n radius,\n shouldAnimate,\n transitionDuration,\n transitionTimingFunction,\n size,\n }: SegmentedControlStyles,\n getRef\n ) => {\n const label = {\n ref: getRef('label'),\n ...theme.fn.focusStyles(),\n ...theme.fn.fontStyles(),\n WebkitTapHighlightColor: 'transparent',\n borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n fontWeight: 500,\n fontSize: size in theme.fontSizes ? theme.fontSizes[size] : theme.fontSizes.sm,\n cursor: 'pointer',\n display: 'block',\n textAlign: 'center',\n padding: sizes[size in sizes ? size : 'sm'],\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[7],\n transition: `color ${shouldAnimate ? 0 : transitionDuration}ms ${\n transitionTimingFunction \|\| theme.transitionTimingFunction\n }`,\n\n '&:hover': {\n color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n },\n } as const;\n\n const control = {\n ref: getRef('control'),\n position: 'relative',\n boxSizing: 'border-box',\n flex: 1,\n zIndex: 2,\n transition: `border-left-color ${shouldAnimate ? 0 : transitionDuration}ms ${\n transitionTimingFunction \|\| theme.transitionTimingFunction\n }`,\n\n '&:not(:first-of-type)': {\n borderLeft: `1px solid ${\n theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]\n }`,\n },\n } as const;\n\n return {\n label,\n control,\n\n input: {\n height: 0,\n width: 0,\n position: 'absolute',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n opacity: 0,\n\n // input is hidden by default, these styles add focus to label when user navigates with keyboard\n '&:focus': {\n outline: 'none',\n\n [`& + .${label.ref}`]: {\n outline: 'none',\n boxShadow: `0 0 0 2px ${\n theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white\n }, 0 0 0 4px ${theme.colors[theme.primaryColor][5]}`,\n },\n\n '&:focus:not(:focus-visible)': {\n [`& + .${label.ref}`]: {\n boxShadow: 'none',\n },\n },\n },\n },\n\n root: {\n position: 'relative',\n display: fullWidth ? 'flex' : 'inline-flex',\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[1],\n borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n overflow: 'hidden',\n padding: WRAPPER_PADDING,\n },\n\n controlActive: {\n borderLeftColor: 'transparent !important',\n\n [`& + .${control.ref}`]: {\n borderLeftColor: 'transparent !important',\n },\n },\n\n labelActive: {\n '&, &:hover': {\n color: color in theme.colors \|\| theme.colorScheme === 'dark' ? theme.white : theme.black,\n },\n },\n\n active: {\n boxSizing: 'border-box',\n borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n position: 'absolute',\n top: 4,\n bottom: 4,\n zIndex: 1,\n boxShadow: color \|\| theme.colorScheme === 'dark' ? 'none' : theme.shadows.xs,\n transition: `transform ${shouldAnimate ? 0 : transitionDuration}ms ${\n theme.transitionTimingFunction\n }, width ${shouldAnimate ? 0 : transitionDuration / 2}ms ${\n transitionTimingFunction \|\| theme.transitionTimingFunction\n }`,\n backgroundColor:\n color in theme.colors\n ? theme.fn.themeColor(color, 6)\n : theme.colorScheme === 'dark'\n ? theme.colors.dark[5]\n : theme.white,\n },\n };\n }\n);\n"],"names":["createStyles"],"mappings":"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"}
1	+ {"version":3,"file":"SegmentedControl.styles.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineSize, MantineColor } from '@mantine/styles';\n\nexport const WRAPPER_PADDING = 4;\n\ninterface SegmentedControlStyles {\n fullWidth: boolean;\n color: MantineColor;\n radius: MantineNumberSize;\n shouldAnimate: boolean;\n transitionDuration: number;\n transitionTimingFunction: string;\n size: MantineSize;\n orientation: 'vertical' \| 'horizontal';\n}\n\nconst sizes = {\n xs: '3px 6px',\n sm: '5px 10px',\n md: '7px 14px',\n lg: '9px 16px',\n xl: '12px 20px',\n};\n\nexport default createStyles(\n (\n theme,\n {\n fullWidth,\n color,\n radius,\n shouldAnimate,\n transitionDuration,\n transitionTimingFunction,\n size,\n orientation,\n }: SegmentedControlStyles,\n getRef\n ) => {\n const label = getRef('label');\n const control = getRef('control');\n const vertical = orientation === 'vertical';\n\n return {\n label: {\n ref: label,\n ...theme.fn.focusStyles(),\n ...theme.fn.fontStyles(),\n WebkitTapHighlightColor: 'transparent',\n borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n fontWeight: 500,\n fontSize: size in theme.fontSizes ? theme.fontSizes[size] : theme.fontSizes.sm,\n cursor: 'pointer',\n display: 'block',\n textAlign: 'center',\n padding: sizes[size in sizes ? size : 'sm'],\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n userSelect: 'none',\n color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[7],\n transition: `color ${shouldAnimate ? 0 : transitionDuration}ms ${\n transitionTimingFunction \|\| theme.transitionTimingFunction\n }`,\n\n '&:hover': {\n color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n },\n },\n\n control: {\n ref: control,\n position: 'relative',\n boxSizing: 'border-box',\n flex: 1,\n zIndex: 2,\n transition: `border-left-color ${shouldAnimate ? 0 : transitionDuration}ms ${\n transitionTimingFunction \|\| theme.transitionTimingFunction\n }`,\n\n '&:not(:first-of-type)': {\n borderStyle: 'solid',\n borderWidth: orientation === 'vertical' ? '1px 0 0 0' : '0 0 0 1px',\n borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3],\n },\n },\n\n input: {\n height: 0,\n width: 0,\n position: 'absolute',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n opacity: 0,\n\n // input is hidden by default, these styles add focus to label when user navigates with keyboard\n '&:focus': {\n outline: 'none',\n\n [`& + .${label}`]: {\n outline: 'none',\n boxShadow: `0 0 0 2px ${\n theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white\n }, 0 0 0 4px ${theme.colors[theme.primaryColor][5]}`,\n },\n\n '&:focus:not(:focus-visible)': {\n [`& + .${label}`]: {\n boxShadow: 'none',\n },\n },\n },\n },\n\n root: {\n position: 'relative',\n display: fullWidth \|\| vertical ? 'flex' : 'inline-flex',\n width: vertical && !fullWidth ? 'max-content' : 'inherit',\n flexDirection: vertical ? 'column' : 'row',\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[1],\n borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n overflow: 'hidden',\n padding: WRAPPER_PADDING,\n },\n\n controlActive: {\n borderLeftColor: 'transparent !important',\n borderTopColor: 'transparent !important',\n\n [`& + .${control}`]: {\n borderLeftColor: 'transparent !important',\n borderTopColor: 'transparent !important',\n },\n },\n\n labelActive: {\n '&, &:hover': {\n color: color in theme.colors \|\| theme.colorScheme === 'dark' ? theme.white : theme.black,\n },\n },\n\n disabled: {\n '&, &:hover': {\n color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],\n },\n },\n\n active: {\n boxSizing: 'border-box',\n borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n position: 'absolute',\n zIndex: 1,\n boxShadow: color \|\| theme.colorScheme === 'dark' ? 'none' : theme.shadows.xs,\n transition: `transform ${shouldAnimate ? 0 : transitionDuration}ms ${\n theme.transitionTimingFunction\n }, width ${shouldAnimate ? 0 : transitionDuration / 2}ms ${\n transitionTimingFunction \|\| theme.transitionTimingFunction\n }`,\n backgroundColor:\n color in theme.colors\n ? theme.fn.themeColor(color, 6)\n : theme.colorScheme === 'dark'\n ? theme.colors.dark[5]\n : theme.white,\n },\n };\n }\n);\n"],"names":["createStyles"],"mappings":"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"}

package/cjs/components/Select/Select.js CHANGED Viewed

@@ -357,6 +357,7 @@ const Select = React.forwardRef((_a, ref) => {
     typeof onFocus === "function" && onFocus(event);
     if (searchable) {
       setDropdownOpened(true);
+      scrollSelectedItemIntoView();
     }
   };
   const handleInputChange = (event) => {
@@ -368,12 +369,12 @@ const Select = React.forwardRef((_a, ref) => {
     setDropdownOpened(true);
   };
   const handleInputClick = () => {
+    let dropdownOpen = true;
     if (!searchable) {
-      setDropdownOpened(!dropdownOpened);
-    } else {
-      setDropdownOpened(true);
+      dropdownOpen = !dropdownOpened;
     }
-    if (_value && !dropdownOpened) {
+    setDropdownOpened(dropdownOpen);
+    if (_value && dropdownOpen) {
       setHovered(selectedItemIndex);
       scrollSelectedItemIntoView();
     }