@mantine/core 3.2.2 → 3.3.2

package/cjs/components/Timeline/TimelineItem/TimelineItem.styles.js

@@ -5,34 +5,34 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var styles = require('@mantine/styles');
 
 var useStyles = styles.createStyles((theme, { bulletSize, color, align, lineVariant, lineWidth }, getRef) => {
-  const itemBulletWithChild = {
-    ref: getRef("itemBulletWithChild"),
-    borderWidth: 1,
-    backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3],
-    color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black
-  };
-  const itemBullet = {
-    ref: getRef("itemBullet"),
-    boxSizing: "border-box",
-    width: bulletSize,
-    height: bulletSize,
-    borderRadius: bulletSize,
-    border: `${lineWidth}px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`,
-    backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white,
-    position: "absolute",
-    top: 0,
-    left: align === "left" ? -bulletSize / 2 - lineWidth / 2 : "auto",
-    right: align === "right" ? -bulletSize / 2 - lineWidth / 2 : "auto",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    color: theme.white
-  };
+  const itemBulletWithChild = getRef("itemBulletWithChild");
+  const itemBullet = getRef("itemBullet");
   return {
-    itemBulletWithChild,
-    itemBullet,
     itemBody: {},
     itemContent: {},
+    itemBulletWithChild: {
+      ref: itemBulletWithChild,
+      borderWidth: 1,
+      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3],
+      color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black
+    },
+    itemBullet: {
+      ref: itemBullet,
+      boxSizing: "border-box",
+      width: bulletSize,
+      height: bulletSize,
+      borderRadius: bulletSize,
+      border: `${lineWidth}px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`,
+      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white,
+      position: "absolute",
+      top: 0,
+      left: align === "left" ? -bulletSize / 2 - lineWidth / 2 : "auto",
+      right: align === "right" ? -bulletSize / 2 - lineWidth / 2 : "auto",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: theme.white
+    },
     item: {
       position: "relative",
       boxSizing: "border-box",
@@ -64,11 +64,11 @@ var useStyles = styles.createStyles((theme, { bulletSize, color, align, lineVari
       }
     },
     itemActive: {
-      [`& .${itemBullet.ref}`]: {
+      [`& .${itemBullet}`]: {
         borderColor: theme.fn.themeColor(color, theme.colorScheme === "dark" ? 6 : 7),
         backgroundColor: theme.white
       },
-      [`& .${itemBulletWithChild.ref}`]: {
+      [`& .${itemBulletWithChild}`]: {
         backgroundColor: theme.fn.themeColor(color, theme.colorScheme === "dark" ? 6 : 7),
         color: theme.white
       }

package/cjs/components/Timeline/TimelineItem/TimelineItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineItem.styles.js","sources":["../../../../src/components/Timeline/TimelineItem/TimelineItem.styles.ts"],"sourcesContent":["import { createStyles, MantineColor } from '@mantine/styles';\n\ninterface TimelineItemStyles {\n  bulletSize: number;\n  color: MantineColor;\n  align: 'right' | 'left';\n  lineVariant: 'solid' | 'dashed' | 'dotted';\n  lineWidth: number;\n}\n\nexport default createStyles(\n  (theme, { bulletSize, color, align, lineVariant, lineWidth }: TimelineItemStyles, getRef) => {\n    const itemBulletWithChild = {\n      ref: getRef('itemBulletWithChild'),\n      borderWidth: 1,\n      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3],\n      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n    };\n\n    const itemBullet = {\n      ref: getRef('itemBullet'),\n      boxSizing: 'border-box',\n      width: bulletSize,\n      height: bulletSize,\n      borderRadius: bulletSize,\n      border: `${lineWidth}px solid ${\n        theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]\n      }`,\n      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,\n      position: 'absolute',\n      top: 0,\n      left: align === 'left' ? -bulletSize / 2 - lineWidth / 2 : 'auto',\n      right: align === 'right' ? -bulletSize / 2 - lineWidth / 2 : 'auto',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: theme.white,\n    } as const;\n\n    return {\n      itemBulletWithChild,\n      itemBullet,\n      itemBody: {},\n      itemContent: {},\n\n      item: {\n        position: 'relative',\n        boxSizing: 'border-box',\n        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n        paddingLeft: align === 'left' ? theme.spacing.xl : 0,\n        paddingRight: align === 'right' ? theme.spacing.xl : 0,\n        textAlign: align,\n\n        '&:not(:last-of-type)::before': {\n          display: 'block',\n        },\n\n        '&:not(:first-of-type)': {\n          marginTop: theme.spacing.xl,\n        },\n\n        '&::before': {\n          boxSizing: 'border-box',\n          position: 'absolute',\n          top: 0,\n          left: align === 'left' ? -lineWidth : 'auto',\n          right: align === 'right' ? -lineWidth : 'auto',\n          bottom: -theme.spacing.xl,\n          borderLeft: `${lineWidth}px ${lineVariant} ${\n            theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]\n          }`,\n          content: '\"\"',\n          display: 'none',\n        },\n      },\n\n      itemLineActive: {\n        '&::before': {\n          borderLeftColor: theme.fn.themeColor(color, theme.colorScheme === 'dark' ? 6 : 7),\n        },\n      },\n\n      itemActive: {\n        [`& .${itemBullet.ref}`]: {\n          borderColor: theme.fn.themeColor(color, theme.colorScheme === 'dark' ? 6 : 7),\n          backgroundColor: theme.white,\n        },\n\n        [`& .${itemBulletWithChild.ref}`]: {\n          backgroundColor: theme.fn.themeColor(color, theme.colorScheme === 'dark' ? 6 : 7),\n          color: theme.white,\n        },\n      },\n\n      itemTitle: {\n        fontWeight: 500,\n        lineHeight: 1,\n        marginBottom: theme.spacing.xs / 2,\n        textAlign: align,\n      },\n    };\n  }\n);\n"],"names":["createStyles"],"mappings":";;;;;;AACA,gBAAeA,mBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,MAAM,KAAK;AACrG,EAAE,MAAM,mBAAmB,GAAG;AAC9B,IAAI,GAAG,EAAE,MAAM,CAAC,qBAAqB,CAAC;AACtC,IAAI,WAAW,EAAE,CAAC;AAClB,IAAI,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;AAC/F,IAAI,KAAK,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK;AAC5E,GAAG,CAAC;AACJ,EAAE,MAAM,UAAU,GAAG;AACrB,IAAI,GAAG,EAAE,MAAM,CAAC,YAAY,CAAC;AAC7B,IAAI,SAAS,EAAE,YAAY;AAC3B,IAAI,KAAK,EAAE,UAAU;AACrB,IAAI,MAAM,EAAE,UAAU;AACtB,IAAI,YAAY,EAAE,UAAU;AAC5B,IAAI,MAAM,EAAE,CAAC,EAAE,SAAS,CAAC,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AAChH,IAAI,eAAe,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK;AACtF,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,GAAG,EAAE,CAAC;AACV,IAAI,IAAI,EAAE,KAAK,KAAK,MAAM,GAAG,CAAC,UAAU,GAAG,CAAC,GAAG,SAAS,GAAG,CAAC,GAAG,MAAM;AACrE,IAAI,KAAK,EAAE,KAAK,KAAK,OAAO,GAAG,CAAC,UAAU,GAAG,CAAC,GAAG,SAAS,GAAG,CAAC,GAAG,MAAM;AACvE,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,UAAU,EAAE,QAAQ;AACxB,IAAI,cAAc,EAAE,QAAQ;AAC5B,IAAI,KAAK,EAAE,KAAK,CAAC,KAAK;AACtB,GAAG,CAAC;AACJ,EAAE,OAAO;AACT,IAAI,mBAAmB;AACvB,IAAI,UAAU;AACd,IAAI,QAAQ,EAAE,EAAE;AAChB,IAAI,WAAW,EAAE,EAAE;AACnB,IAAI,IAAI,EAAE;AACV,MAAM,QAAQ,EAAE,UAAU;AAC1B,MAAM,SAAS,EAAE,YAAY;AAC7B,MAAM,KAAK,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK;AAC9E,MAAM,WAAW,EAAE,KAAK,KAAK,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC;AAC1D,MAAM,YAAY,EAAE,KAAK,KAAK,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC;AAC5D,MAAM,SAAS,EAAE,KAAK;AACtB,MAAM,8BAA8B,EAAE;AACtC,QAAQ,OAAO,EAAE,OAAO;AACxB,OAAO;AACP,MAAM,uBAAuB,EAAE;AAC/B,QAAQ,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;AACnC,OAAO;AACP,MAAM,WAAW,EAAE;AACnB,QAAQ,SAAS,EAAE,YAAY;AAC/B,QAAQ,QAAQ,EAAE,UAAU;AAC5B,QAAQ,GAAG,EAAE,CAAC;AACd,QAAQ,IAAI,EAAE,KAAK,KAAK,MAAM,GAAG,CAAC,SAAS,GAAG,MAAM;AACpD,QAAQ,KAAK,EAAE,KAAK,KAAK,OAAO,GAAG,CAAC,SAAS,GAAG,MAAM;AACtD,QAAQ,MAAM,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;AACjC,QAAQ,UAAU,EAAE,CAAC,EAAE,SAAS,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AACjI,QAAQ,OAAO,EAAE,IAAI;AACrB,QAAQ,OAAO,EAAE,MAAM;AACvB,OAAO;AACP,KAAK;AACL,IAAI,cAAc,EAAE;AACpB,MAAM,WAAW,EAAE;AACnB,QAAQ,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;AACzF,OAAO;AACP,KAAK;AACL,IAAI,UAAU,EAAE;AAChB,MAAM,CAAC,CAAC,GAAG,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG;AAChC,QAAQ,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;AACrF,QAAQ,eAAe,EAAE,KAAK,CAAC,KAAK;AACpC,OAAO;AACP,MAAM,CAAC,CAAC,GAAG,EAAE,mBAAmB,CAAC,GAAG,CAAC,CAAC,GAAG;AACzC,QAAQ,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;AACzF,QAAQ,KAAK,EAAE,KAAK,CAAC,KAAK;AAC1B,OAAO;AACP,KAAK;AACL,IAAI,SAAS,EAAE;AACf,MAAM,UAAU,EAAE,GAAG;AACrB,MAAM,UAAU,EAAE,CAAC;AACnB,MAAM,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC;AACxC,MAAM,SAAS,EAAE,KAAK;AACtB,KAAK;AACL,GAAG,CAAC;AACJ,CAAC,CAAC;;;;"}
+{"version":3,"file":"TimelineItem.styles.js","sources":["../../../../src/components/Timeline/TimelineItem/TimelineItem.styles.ts"],"sourcesContent":["import { createStyles, MantineColor } from '@mantine/styles';\n\ninterface TimelineItemStyles {\n  bulletSize: number;\n  color: MantineColor;\n  align: 'right' | 'left';\n  lineVariant: 'solid' | 'dashed' | 'dotted';\n  lineWidth: number;\n}\n\nexport default createStyles(\n  (theme, { bulletSize, color, align, lineVariant, lineWidth }: TimelineItemStyles, getRef) => {\n    const itemBulletWithChild = getRef('itemBulletWithChild');\n    const itemBullet = getRef('itemBullet');\n\n    return {\n      itemBody: {},\n      itemContent: {},\n\n      itemBulletWithChild: {\n        ref: itemBulletWithChild,\n        borderWidth: 1,\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3],\n        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n      },\n\n      itemBullet: {\n        ref: itemBullet,\n        boxSizing: 'border-box',\n        width: bulletSize,\n        height: bulletSize,\n        borderRadius: bulletSize,\n        border: `${lineWidth}px solid ${\n          theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]\n        }`,\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,\n        position: 'absolute',\n        top: 0,\n        left: align === 'left' ? -bulletSize / 2 - lineWidth / 2 : 'auto',\n        right: align === 'right' ? -bulletSize / 2 - lineWidth / 2 : 'auto',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        color: theme.white,\n      },\n\n      item: {\n        position: 'relative',\n        boxSizing: 'border-box',\n        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n        paddingLeft: align === 'left' ? theme.spacing.xl : 0,\n        paddingRight: align === 'right' ? theme.spacing.xl : 0,\n        textAlign: align,\n\n        '&:not(:last-of-type)::before': {\n          display: 'block',\n        },\n\n        '&:not(:first-of-type)': {\n          marginTop: theme.spacing.xl,\n        },\n\n        '&::before': {\n          boxSizing: 'border-box',\n          position: 'absolute',\n          top: 0,\n          left: align === 'left' ? -lineWidth : 'auto',\n          right: align === 'right' ? -lineWidth : 'auto',\n          bottom: -theme.spacing.xl,\n          borderLeft: `${lineWidth}px ${lineVariant} ${\n            theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]\n          }`,\n          content: '\"\"',\n          display: 'none',\n        },\n      },\n\n      itemLineActive: {\n        '&::before': {\n          borderLeftColor: theme.fn.themeColor(color, theme.colorScheme === 'dark' ? 6 : 7),\n        },\n      },\n\n      itemActive: {\n        [`& .${itemBullet}`]: {\n          borderColor: theme.fn.themeColor(color, theme.colorScheme === 'dark' ? 6 : 7),\n          backgroundColor: theme.white,\n        },\n\n        [`& .${itemBulletWithChild}`]: {\n          backgroundColor: theme.fn.themeColor(color, theme.colorScheme === 'dark' ? 6 : 7),\n          color: theme.white,\n        },\n      },\n\n      itemTitle: {\n        fontWeight: 500,\n        lineHeight: 1,\n        marginBottom: theme.spacing.xs / 2,\n        textAlign: align,\n      },\n    };\n  }\n);\n"],"names":["createStyles"],"mappings":"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"}

package/cjs/components/Tooltip/Tooltip.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var styles = require('@mantine/styles');
 var Popper = require('../Popper/Popper.js');
 var Tooltip_styles = require('./Tooltip.styles.js');
 
@@ -54,16 +55,17 @@ function Tooltip(_a) {
     placement = "center",
     transition = "pop-top-left",
     transitionDuration = 100,
-    zIndex = 1e3,
+    zIndex = styles.getDefaultZIndex("popover"),
     transitionTimingFunction,
     width = "auto",
     wrapLines = false,
     allowPointerEvents = false,
     positionDependencies = [],
+    withinPortal = true,
     tooltipRef,
     tooltipId,
     classNames,
-    styles,
+    styles: styles$1,
     sx
   } = _b, others = __objRest(_b, [
     "className",
@@ -86,13 +88,14 @@ function Tooltip(_a) {
     "wrapLines",
     "allowPointerEvents",
     "positionDependencies",
+    "withinPortal",
     "tooltipRef",
     "tooltipId",
     "classNames",
     "styles",
     "sx"
   ]);
-  const { classes, cx } = Tooltip_styles['default']({ color }, { sx, classNames, styles, name: "Tooltip" });
+  const { classes, cx } = Tooltip_styles['default']({ color }, { sx, classNames, styles: styles$1, name: "Tooltip" });
   const timeoutRef = React.useRef();
   const [_opened, setOpened] = React.useState(false);
   const visible = (typeof opened === "boolean" ? opened : _opened) && !disabled;
@@ -124,7 +127,8 @@ function Tooltip(_a) {
     arrowSize,
     zIndex,
     arrowClassName: classes.arrow,
-    forceUpdateDependencies: [color, ...positionDependencies]
+    forceUpdateDependencies: [color, ...positionDependencies],
+    withinPortal
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: classes.body,
     ref: tooltipRef,

package/cjs/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\nimport { DefaultProps, MantineColor, ClassNames, MantineMargin } from '@mantine/styles';\nimport { Popper, SharedPopperProps } from '../Popper/Popper';\nimport useStyles from './Tooltip.styles';\n\nexport type TooltipStylesNames = ClassNames<typeof useStyles>;\n\nexport interface TooltipProps\n  extends Omit<DefaultProps<TooltipStylesNames>, MantineMargin>,\n    SharedPopperProps,\n    React.ComponentPropsWithoutRef<'div'> {\n  /** Tooltip content */\n  label: React.ReactNode;\n\n  /** Any react node that should trigger tooltip */\n  children: React.ReactNode;\n\n  /** Tooltip opened state for controlled variant */\n  opened?: boolean;\n\n  /** Close delay in ms, 0 to disable delay */\n  delay?: number;\n\n  /** Any color from theme.colors, defaults to gray in light color scheme and dark in dark colors scheme */\n  color?: MantineColor;\n\n  /** True to disable tooltip */\n  disabled?: boolean;\n\n  /** Arrow size in px */\n  arrowSize?: number;\n\n  /** Tooltip width in px or auto */\n  width?: number | 'auto';\n\n  /** Allow multiline tooltip content */\n  wrapLines?: boolean;\n\n  /** Allow pointer events on tooltip, warning: this may break some animations */\n  allowPointerEvents?: boolean;\n\n  /** Get tooltip ref */\n  tooltipRef?: React.ForwardedRef<HTMLDivElement>;\n\n  /** Tooltip id to bind aria-describedby */\n  tooltipId?: string;\n\n  /** useEffect dependencies to force update tooltip position */\n  positionDependencies?: any[];\n}\n\nexport function Tooltip({\n  className,\n  label,\n  children,\n  opened,\n  delay = 0,\n  gutter = 5,\n  color = 'gray',\n  disabled = false,\n  withArrow = false,\n  arrowSize = 2,\n  position = 'top',\n  placement = 'center',\n  transition = 'pop-top-left',\n  transitionDuration = 100,\n  zIndex = 1000,\n  transitionTimingFunction,\n  width = 'auto',\n  wrapLines = false,\n  allowPointerEvents = false,\n  positionDependencies = [],\n  tooltipRef,\n  tooltipId,\n  classNames,\n  styles,\n  sx,\n  ...others\n}: TooltipProps) {\n  const { classes, cx } = useStyles({ color }, { sx, classNames, styles, name: 'Tooltip' });\n  const timeoutRef = useRef<number>();\n  const [_opened, setOpened] = useState(false);\n  const visible = (typeof opened === 'boolean' ? opened : _opened) && !disabled;\n  const [referenceElement, setReferenceElement] = useState(null);\n\n  const handleOpen = () => {\n    window.clearTimeout(timeoutRef.current);\n    setOpened(true);\n  };\n\n  const handleClose = () => {\n    if (delay !== 0) {\n      timeoutRef.current = window.setTimeout(() => {\n        setOpened(false);\n      }, delay);\n    } else {\n      setOpened(false);\n    }\n  };\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      <Popper\n        referenceElement={referenceElement}\n        transitionDuration={transitionDuration}\n        transition={transition}\n        mounted={visible}\n        position={position}\n        placement={placement}\n        gutter={gutter}\n        withArrow={withArrow}\n        arrowSize={arrowSize}\n        zIndex={zIndex}\n        arrowClassName={classes.arrow}\n        forceUpdateDependencies={[color, ...positionDependencies]}\n      >\n        <div\n          className={classes.body}\n          ref={tooltipRef}\n          style={{\n            pointerEvents: allowPointerEvents ? 'all' : 'none',\n            whiteSpace: wrapLines ? 'normal' : 'nowrap',\n            width,\n          }}\n        >\n          {label}\n        </div>\n      </Popper>\n\n      <div\n        onMouseEnter={handleOpen}\n        onMouseLeave={handleClose}\n        onFocusCapture={handleOpen}\n        onBlurCapture={handleClose}\n        ref={setReferenceElement}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nTooltip.displayName = '@mantine/core/Tooltip';\n"],"names":["useStyles","useRef","useState","React","Popper"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\nimport {\n  DefaultProps,\n  MantineColor,\n  ClassNames,\n  MantineMargin,\n  getDefaultZIndex,\n} from '@mantine/styles';\nimport { Popper, SharedPopperProps } from '../Popper/Popper';\nimport useStyles from './Tooltip.styles';\n\nexport type TooltipStylesNames = ClassNames<typeof useStyles>;\n\nexport interface TooltipProps\n  extends Omit<DefaultProps<TooltipStylesNames>, MantineMargin>,\n    SharedPopperProps,\n    React.ComponentPropsWithoutRef<'div'> {\n  /** Tooltip content */\n  label: React.ReactNode;\n\n  /** Any react node that should trigger tooltip */\n  children: React.ReactNode;\n\n  /** Tooltip opened state for controlled variant */\n  opened?: boolean;\n\n  /** Close delay in ms, 0 to disable delay */\n  delay?: number;\n\n  /** Any color from theme.colors, defaults to gray in light color scheme and dark in dark colors scheme */\n  color?: MantineColor;\n\n  /** True to disable tooltip */\n  disabled?: boolean;\n\n  /** Arrow size in px */\n  arrowSize?: number;\n\n  /** Tooltip width in px or auto */\n  width?: number | 'auto';\n\n  /** Allow multiline tooltip content */\n  wrapLines?: boolean;\n\n  /** Allow pointer events on tooltip, warning: this may break some animations */\n  allowPointerEvents?: boolean;\n\n  /** Get tooltip ref */\n  tooltipRef?: React.ForwardedRef<HTMLDivElement>;\n\n  /** Tooltip id to bind aria-describedby */\n  tooltipId?: string;\n\n  /** useEffect dependencies to force update tooltip position */\n  positionDependencies?: any[];\n\n  /** Whether to render the target element in a Portal */\n  withinPortal?: boolean;\n}\n\nexport function Tooltip({\n  className,\n  label,\n  children,\n  opened,\n  delay = 0,\n  gutter = 5,\n  color = 'gray',\n  disabled = false,\n  withArrow = false,\n  arrowSize = 2,\n  position = 'top',\n  placement = 'center',\n  transition = 'pop-top-left',\n  transitionDuration = 100,\n  zIndex = getDefaultZIndex('popover'),\n  transitionTimingFunction,\n  width = 'auto',\n  wrapLines = false,\n  allowPointerEvents = false,\n  positionDependencies = [],\n  withinPortal = true,\n  tooltipRef,\n  tooltipId,\n  classNames,\n  styles,\n  sx,\n  ...others\n}: TooltipProps) {\n  const { classes, cx } = useStyles({ color }, { sx, classNames, styles, name: 'Tooltip' });\n  const timeoutRef = useRef<number>();\n  const [_opened, setOpened] = useState(false);\n  const visible = (typeof opened === 'boolean' ? opened : _opened) && !disabled;\n  const [referenceElement, setReferenceElement] = useState(null);\n\n  const handleOpen = () => {\n    window.clearTimeout(timeoutRef.current);\n    setOpened(true);\n  };\n\n  const handleClose = () => {\n    if (delay !== 0) {\n      timeoutRef.current = window.setTimeout(() => {\n        setOpened(false);\n      }, delay);\n    } else {\n      setOpened(false);\n    }\n  };\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      <Popper\n        referenceElement={referenceElement}\n        transitionDuration={transitionDuration}\n        transition={transition}\n        mounted={visible}\n        position={position}\n        placement={placement}\n        gutter={gutter}\n        withArrow={withArrow}\n        arrowSize={arrowSize}\n        zIndex={zIndex}\n        arrowClassName={classes.arrow}\n        forceUpdateDependencies={[color, ...positionDependencies]}\n        withinPortal={withinPortal}\n      >\n        <div\n          className={classes.body}\n          ref={tooltipRef}\n          style={{\n            pointerEvents: allowPointerEvents ? 'all' : 'none',\n            whiteSpace: wrapLines ? 'normal' : 'nowrap',\n            width,\n          }}\n        >\n          {label}\n        </div>\n      </Popper>\n\n      <div\n        onMouseEnter={handleOpen}\n        onMouseLeave={handleClose}\n        onFocusCapture={handleOpen}\n        onBlurCapture={handleClose}\n        ref={setReferenceElement}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nTooltip.displayName = '@mantine/core/Tooltip';\n"],"names":["getDefaultZIndex","styles","useStyles","useRef","useState","React","Popper"],"mappings":"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"}

package/cjs/components/TransferList/RenderList/RenderList.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var hooks = require('@mantine/hooks');
 var RenderList_styles = require('./RenderList.styles.js');
 var UnstyledButton = require('../../Button/UnstyledButton/UnstyledButton.js');
 var Text = require('../../Text/Text.js');
@@ -35,11 +36,18 @@ function RenderList({
   classNames,
   styles
 }) {
-  const { classes, cx } = RenderList_styles['default']({ reversed, height }, { name: "TransferList", classNames, styles });
+  const { classes, cx } = RenderList_styles['default']({ reversed }, { name: "TransferList", classNames, styles });
   const [query, setQuery] = React.useState("");
   const [hovered, setHovered] = React.useState(-1);
   const filteredData = data.filter((item) => filter(query, item));
   const ListComponent = listComponent || "div";
+  const itemsRefs = React.useRef({});
+  const { scrollIntoView, targetRef, scrollableRef } = hooks.useScrollIntoView({
+    duration: 0,
+    offset: 5,
+    cancelable: false,
+    isList: true
+  });
   const items = filteredData.map((item, index) => /* @__PURE__ */ React__default.createElement(UnstyledButton.UnstyledButton, {
     tabIndex: -1,
     onClick: () => onSelect(item.value),
@@ -47,7 +55,12 @@ function RenderList({
     onMouseEnter: () => setHovered(index),
     className: cx(classes.transferListItem, {
       [classes.transferListItemHovered]: index === hovered
-    })
+    }),
+    ref: (node) => {
+      if (itemsRefs && itemsRefs.current) {
+        itemsRefs.current[item.value] = node;
+      }
+    }
   }, /* @__PURE__ */ React__default.createElement(ItemComponent, {
     data: item,
     selected: selection.includes(item.value)
@@ -55,20 +68,36 @@ function RenderList({
   const handleSearchKeydown = (event) => {
     switch (event.code) {
       case "Enter": {
+        event.preventDefault();
         if (filteredData[hovered]) {
-          event.preventDefault();
           onSelect(filteredData[hovered].value);
         }
         break;
       }
       case "ArrowDown": {
         event.preventDefault();
-        setHovered((current) => current < filteredData.length - 1 ? current + 1 : current);
+        setHovered((current) => {
+          var _a;
+          const nextIndex = current < filteredData.length - 1 ? current + 1 : current;
+          targetRef.current = itemsRefs.current[(_a = filteredData[nextIndex]) == null ? void 0 : _a.value];
+          scrollIntoView({
+            alignment: "end"
+          });
+          return nextIndex;
+        });
         break;
       }
       case "ArrowUp": {
         event.preventDefault();
-        setHovered((current) => current > 0 ? current - 1 : current);
+        setHovered((current) => {
+          var _a;
+          const nextIndex = current > 0 ? current - 1 : current;
+          targetRef.current = itemsRefs.current[(_a = filteredData[nextIndex]) == null ? void 0 : _a.value];
+          scrollIntoView({
+            alignment: "start"
+          });
+          return nextIndex;
+        });
       }
     }
   };
@@ -109,8 +138,10 @@ function RenderList({
     disabled: data.length === 0,
     onClick: onMoveAll
   }, reversed ? /* @__PURE__ */ React__default.createElement(FirstIcon.FirstIcon, null) : /* @__PURE__ */ React__default.createElement(LastIcon.LastIcon, null))), /* @__PURE__ */ React__default.createElement(ListComponent, {
+    ref: scrollableRef,
+    onMouseLeave: () => setHovered(-1),
     className: classes.transferListItems,
-    onMouseLeave: () => setHovered(-1)
+    style: { height, position: "relative", overflowX: "hidden" }
   }, items.length > 0 ? items : /* @__PURE__ */ React__default.createElement(Text.Text, {
     color: "dimmed",
     size: "sm",

package/cjs/components/TransferList/RenderList/RenderList.js.map

@@ -1 +1 @@
-{"version":3,"file":"RenderList.js","sources":["../../../../src/components/TransferList/RenderList/RenderList.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { DefaultProps, ClassNames } from '@mantine/styles';\nimport { UnstyledButton } from '../../Button';\nimport { ActionIcon } from '../../ActionIcon';\nimport { TextInput } from '../../TextInput';\nimport { Text } from '../../Text';\nimport { LastIcon, NextIcon, FirstIcon, PrevIcon } from '../../Pagination/icons';\nimport { TransferListItem, TransferListItemComponent } from '../types';\nimport useStyles from './RenderList.styles';\n\nexport type RenderListStylesNames = ClassNames<typeof useStyles>;\n\ninterface RenderListProps extends DefaultProps<RenderListStylesNames> {\n  data: TransferListItem[];\n  onSelect(value: string): void;\n  selection: string[];\n  itemComponent: TransferListItemComponent;\n  searchPlaceholder: string;\n  filter(query: string, item: TransferListItem): boolean;\n  nothingFound?: React.ReactNode;\n  title?: React.ReactNode;\n  reversed?: boolean;\n  onMoveAll(): void;\n  onMove(): void;\n  height: number;\n  listComponent?: React.FC<any>;\n}\n\nexport function RenderList({\n  className,\n  data,\n  onSelect,\n  selection,\n  itemComponent: ItemComponent,\n  listComponent,\n  searchPlaceholder,\n  filter,\n  nothingFound,\n  title,\n  reversed,\n  onMoveAll,\n  onMove,\n  height,\n  classNames,\n  styles,\n}: RenderListProps) {\n  const { classes, cx } = useStyles(\n    { reversed, height },\n    { name: 'TransferList', classNames, styles }\n  );\n  const [query, setQuery] = useState('');\n  const [hovered, setHovered] = useState(-1);\n  const filteredData = data.filter((item) => filter(query, item));\n  const ListComponent = listComponent || 'div';\n\n  const items = filteredData.map((item, index) => (\n    <UnstyledButton\n      tabIndex={-1}\n      onClick={() => onSelect(item.value)}\n      key={item.value}\n      onMouseEnter={() => setHovered(index)}\n      className={cx(classes.transferListItem, {\n        [classes.transferListItemHovered]: index === hovered,\n      })}\n    >\n      <ItemComponent data={item} selected={selection.includes(item.value)} />\n    </UnstyledButton>\n  ));\n\n  const handleSearchKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (event.code) {\n      case 'Enter': {\n        if (filteredData[hovered]) {\n          event.preventDefault();\n          onSelect(filteredData[hovered].value);\n        }\n        break;\n      }\n\n      case 'ArrowDown': {\n        event.preventDefault();\n        setHovered((current) => (current < filteredData.length - 1 ? current + 1 : current));\n        break;\n      }\n\n      case 'ArrowUp': {\n        event.preventDefault();\n        setHovered((current) => (current > 0 ? current - 1 : current));\n      }\n    }\n  };\n\n  return (\n    <div className={cx(classes.transferList, className)}>\n      {title && (\n        <Text weight={500} className={classes.transferListTitle}>\n          {title}\n        </Text>\n      )}\n\n      <div className={classes.transferListBody}>\n        <div className={classes.transferListHeader}>\n          <TextInput\n            value={query}\n            onChange={(event) => {\n              setQuery(event.currentTarget.value);\n              setHovered(0);\n            }}\n            onFocus={() => setHovered(0)}\n            onBlur={() => setHovered(-1)}\n            placeholder={searchPlaceholder}\n            radius={0}\n            onKeyDown={handleSearchKeydown}\n            sx={{ flex: 1 }}\n            classNames={{ input: classes.transferListSearch }}\n          />\n\n          <ActionIcon\n            variant=\"default\"\n            size={36}\n            radius={0}\n            className={classes.transferListControl}\n            disabled={selection.length === 0}\n            onClick={onMove}\n          >\n            {reversed ? <PrevIcon /> : <NextIcon />}\n          </ActionIcon>\n\n          <ActionIcon\n            variant=\"default\"\n            size={36}\n            radius={0}\n            className={classes.transferListControl}\n            disabled={data.length === 0}\n            onClick={onMoveAll}\n          >\n            {reversed ? <FirstIcon /> : <LastIcon />}\n          </ActionIcon>\n        </div>\n\n        <ListComponent className={classes.transferListItems} onMouseLeave={() => setHovered(-1)}>\n          {items.length > 0 ? (\n            items\n          ) : (\n            <Text color=\"dimmed\" size=\"sm\" align=\"center\" mt=\"sm\">\n              {nothingFound}\n            </Text>\n          )}\n        </ListComponent>\n      </div>\n    </div>\n  );\n}\n\nRenderList.displayName = '@mantine/core/RenderList';\n"],"names":["useStyles","useState","React","UnstyledButton","Text","TextInput","ActionIcon","PrevIcon","NextIcon","FirstIcon","LastIcon"],"mappings":"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"}
+{"version":3,"file":"RenderList.js","sources":["../../../../src/components/TransferList/RenderList/RenderList.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport { DefaultProps, ClassNames } from '@mantine/styles';\nimport { useScrollIntoView } from '@mantine/hooks';\nimport { UnstyledButton } from '../../Button';\nimport { ActionIcon } from '../../ActionIcon';\nimport { TextInput } from '../../TextInput';\nimport { Text } from '../../Text';\nimport { LastIcon, NextIcon, FirstIcon, PrevIcon } from '../../Pagination/icons';\nimport { TransferListItem, TransferListItemComponent } from '../types';\nimport useStyles from './RenderList.styles';\n\nexport type RenderListStylesNames = ClassNames<typeof useStyles>;\n\ninterface RenderListProps extends DefaultProps<RenderListStylesNames> {\n  data: TransferListItem[];\n  onSelect(value: string): void;\n  selection: string[];\n  itemComponent: TransferListItemComponent;\n  searchPlaceholder: string;\n  filter(query: string, item: TransferListItem): boolean;\n  nothingFound?: React.ReactNode;\n  title?: React.ReactNode;\n  reversed?: boolean;\n  onMoveAll(): void;\n  onMove(): void;\n  height: number;\n  listComponent?: React.FC<any>;\n}\n\nexport function RenderList({\n  className,\n  data,\n  onSelect,\n  selection,\n  itemComponent: ItemComponent,\n  listComponent,\n  searchPlaceholder,\n  filter,\n  nothingFound,\n  title,\n  reversed,\n  onMoveAll,\n  onMove,\n  height,\n  classNames,\n  styles,\n}: RenderListProps) {\n  const { classes, cx } = useStyles({ reversed }, { name: 'TransferList', classNames, styles });\n  const [query, setQuery] = useState('');\n  const [hovered, setHovered] = useState(-1);\n  const filteredData = data.filter((item) => filter(query, item));\n  const ListComponent = listComponent || 'div';\n\n  const itemsRefs = useRef<Record<string, HTMLButtonElement>>({});\n\n  const { scrollIntoView, targetRef, scrollableRef } = useScrollIntoView({\n    duration: 0,\n    offset: 5,\n    cancelable: false,\n    isList: true,\n  });\n\n  const items = filteredData.map((item, index) => (\n    <UnstyledButton\n      tabIndex={-1}\n      onClick={() => onSelect(item.value)}\n      key={item.value}\n      onMouseEnter={() => setHovered(index)}\n      className={cx(classes.transferListItem, {\n        [classes.transferListItemHovered]: index === hovered,\n      })}\n      ref={(node: HTMLButtonElement) => {\n        if (itemsRefs && itemsRefs.current) {\n          // eslint-disable-next-line no-param-reassign\n          itemsRefs.current[item.value] = node;\n        }\n      }}\n    >\n      <ItemComponent data={item} selected={selection.includes(item.value)} />\n    </UnstyledButton>\n  ));\n\n  const handleSearchKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (event.code) {\n      case 'Enter': {\n        event.preventDefault();\n        if (filteredData[hovered]) {\n          onSelect(filteredData[hovered].value);\n        }\n        break;\n      }\n\n      case 'ArrowDown': {\n        event.preventDefault();\n        setHovered((current) => {\n          const nextIndex = current < filteredData.length - 1 ? current + 1 : current;\n\n          targetRef.current = itemsRefs.current[filteredData[nextIndex]?.value];\n\n          scrollIntoView({\n            alignment: 'end',\n          });\n\n          return nextIndex;\n        });\n        break;\n      }\n\n      case 'ArrowUp': {\n        event.preventDefault();\n        setHovered((current) => {\n          const nextIndex = current > 0 ? current - 1 : current;\n\n          targetRef.current = itemsRefs.current[filteredData[nextIndex]?.value];\n\n          scrollIntoView({\n            alignment: 'start',\n          });\n\n          return nextIndex;\n        });\n      }\n    }\n  };\n\n  return (\n    <div className={cx(classes.transferList, className)}>\n      {title && (\n        <Text weight={500} className={classes.transferListTitle}>\n          {title}\n        </Text>\n      )}\n\n      <div className={classes.transferListBody}>\n        <div className={classes.transferListHeader}>\n          <TextInput\n            value={query}\n            onChange={(event) => {\n              setQuery(event.currentTarget.value);\n              setHovered(0);\n            }}\n            onFocus={() => setHovered(0)}\n            onBlur={() => setHovered(-1)}\n            placeholder={searchPlaceholder}\n            radius={0}\n            onKeyDown={handleSearchKeydown}\n            sx={{ flex: 1 }}\n            classNames={{ input: classes.transferListSearch }}\n          />\n\n          <ActionIcon\n            variant=\"default\"\n            size={36}\n            radius={0}\n            className={classes.transferListControl}\n            disabled={selection.length === 0}\n            onClick={onMove}\n          >\n            {reversed ? <PrevIcon /> : <NextIcon />}\n          </ActionIcon>\n\n          <ActionIcon\n            variant=\"default\"\n            size={36}\n            radius={0}\n            className={classes.transferListControl}\n            disabled={data.length === 0}\n            onClick={onMoveAll}\n          >\n            {reversed ? <FirstIcon /> : <LastIcon />}\n          </ActionIcon>\n        </div>\n\n        <ListComponent\n          ref={scrollableRef}\n          onMouseLeave={() => setHovered(-1)}\n          className={classes.transferListItems}\n          style={{ height, position: 'relative', overflowX: 'hidden' }}\n        >\n          {items.length > 0 ? (\n            items\n          ) : (\n            <Text color=\"dimmed\" size=\"sm\" align=\"center\" mt=\"sm\">\n              {nothingFound}\n            </Text>\n          )}\n        </ListComponent>\n      </div>\n    </div>\n  );\n}\n\nRenderList.displayName = '@mantine/core/RenderList';\n"],"names":["useStyles","useState","useRef","useScrollIntoView","React","UnstyledButton","Text","TextInput","ActionIcon","PrevIcon","NextIcon","FirstIcon","LastIcon"],"mappings":"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"}

package/cjs/components/TransferList/RenderList/RenderList.styles.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styles = require('@mantine/styles');
 
-var useStyles = styles.createStyles((theme, { reversed, height }) => ({
+const ITEM_PADDING = 7;
+var useStyles = styles.createStyles((theme, { reversed }) => ({
   transferList: {
     flex: 1,
     display: "flex",
@@ -12,21 +13,23 @@ var useStyles = styles.createStyles((theme, { reversed, height }) => ({
   },
   transferListItem: {
     display: "block",
-    width: "calc(100% - 14px)",
-    padding: 7,
-    marginLeft: theme.spacing.sm - 7,
-    marginRight: theme.spacing.sm - 7,
-    borderRadius: theme.radius.sm
+    width: `calc(100% - ${ITEM_PADDING * 2}px)`,
+    padding: ITEM_PADDING,
+    marginLeft: theme.spacing.sm - ITEM_PADDING,
+    marginRight: theme.spacing.sm - ITEM_PADDING,
+    borderRadius: theme.radius.sm,
+    "&:first-of-type": {
+      marginTop: theme.spacing.sm - ITEM_PADDING
+    },
+    "&:last-of-type": {
+      marginBottom: theme.spacing.sm - ITEM_PADDING
+    }
   },
   transferListItemHovered: {
     backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0]
   },
   transferListItems: {
-    paddingTop: theme.spacing.xs / 2,
-    paddingBottom: theme.spacing.xs / 2,
-    overflow: "auto",
-    height,
-    maxHeight: height
+    overflow: "auto"
   },
   transferListHeader: {
     display: "flex",
@@ -34,7 +37,6 @@ var useStyles = styles.createStyles((theme, { reversed, height }) => ({
   },
   transferListBody: {
     flex: 1,
-    overflow: "hidden",
     borderRadius: theme.radius.sm,
     backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white,
     border: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[4]}`

package/cjs/components/TransferList/RenderList/RenderList.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"RenderList.styles.js","sources":["../../../../src/components/TransferList/RenderList/RenderList.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/styles';\n\ninterface RenderListStyles {\n  reversed: boolean;\n  height: number;\n}\n\nexport default createStyles((theme, { reversed, height }: RenderListStyles) => ({\n  transferList: {\n    flex: 1,\n    display: 'flex',\n    flexDirection: 'column',\n  },\n\n  transferListItem: {\n    display: 'block',\n    width: 'calc(100% - 14px)',\n    padding: 7,\n    marginLeft: theme.spacing.sm - 7,\n    marginRight: theme.spacing.sm - 7,\n    borderRadius: theme.radius.sm,\n  },\n\n  transferListItemHovered: {\n    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],\n  },\n\n  transferListItems: {\n    paddingTop: theme.spacing.xs / 2,\n    paddingBottom: theme.spacing.xs / 2,\n    overflow: 'auto',\n    height,\n    maxHeight: height,\n  },\n\n  transferListHeader: {\n    display: 'flex',\n    flexDirection: reversed ? 'row-reverse' : 'row',\n  },\n\n  transferListBody: {\n    flex: 1,\n    overflow: 'hidden',\n    borderRadius: theme.radius.sm,\n    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,\n    border: `1px solid ${\n      theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]\n    }`,\n  },\n\n  transferListTitle: {\n    marginBottom: 5,\n  },\n\n  transferListSearch: {\n    borderTopWidth: 0,\n    borderRightWidth: 0,\n    borderLeftWidth: 0,\n    display: 'block',\n    borderBottomColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4],\n  },\n\n  transferListControl: {\n    borderTop: 0,\n    borderRightWidth: reversed ? undefined : 0,\n    borderLeftWidth: reversed ? 0 : undefined,\n    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4],\n\n    '&:disabled': {\n      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : 'transparent',\n      borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4],\n    },\n  },\n}));\n"],"names":["createStyles"],"mappings":"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"}
+{"version":3,"file":"RenderList.styles.js","sources":["../../../../src/components/TransferList/RenderList/RenderList.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/styles';\n\ninterface RenderListStyles {\n  reversed: boolean;\n}\n\nconst ITEM_PADDING = 7;\n\nexport default createStyles((theme, { reversed }: RenderListStyles) => ({\n  transferList: {\n    flex: 1,\n    display: 'flex',\n    flexDirection: 'column',\n  },\n\n  transferListItem: {\n    display: 'block',\n    width: `calc(100% - ${ITEM_PADDING * 2}px)`,\n    padding: ITEM_PADDING,\n    marginLeft: theme.spacing.sm - ITEM_PADDING,\n    marginRight: theme.spacing.sm - ITEM_PADDING,\n    borderRadius: theme.radius.sm,\n\n    '&:first-of-type': {\n      marginTop: theme.spacing.sm - ITEM_PADDING,\n    },\n\n    '&:last-of-type': {\n      marginBottom: theme.spacing.sm - ITEM_PADDING,\n    },\n  },\n\n  transferListItemHovered: {\n    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],\n  },\n\n  transferListItems: {\n    overflow: 'auto',\n  },\n\n  transferListHeader: {\n    display: 'flex',\n    flexDirection: reversed ? 'row-reverse' : 'row',\n  },\n\n  transferListBody: {\n    flex: 1,\n    borderRadius: theme.radius.sm,\n    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,\n    border: `1px solid ${\n      theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]\n    }`,\n  },\n\n  transferListTitle: {\n    marginBottom: 5,\n  },\n\n  transferListSearch: {\n    borderTopWidth: 0,\n    borderRightWidth: 0,\n    borderLeftWidth: 0,\n    display: 'block',\n    borderBottomColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4],\n  },\n\n  transferListControl: {\n    borderTop: 0,\n    borderRightWidth: reversed ? undefined : 0,\n    borderLeftWidth: reversed ? 0 : undefined,\n    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4],\n\n    '&:disabled': {\n      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : 'transparent',\n      borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4],\n    },\n  },\n}));\n"],"names":["createStyles"],"mappings":"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"}

package/cjs/components/TransferList/TransferList.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var RenderList = require('./RenderList/RenderList.js');
+var SelectScrollArea = require('../Select/SelectScrollArea/SelectScrollArea.js');
 var DefaultItem = require('./DefaultItem/DefaultItem.js');
 var useSelectionState = require('./use-selection-state/use-selection-state.js');
 var SimpleGrid = require('../SimpleGrid/SimpleGrid.js');
@@ -54,11 +55,10 @@ const TransferList = React.forwardRef((_a, ref) => {
     titles = [null, null],
     initialSelection,
     listHeight = 150,
-    listComponent,
+    listComponent = SelectScrollArea.SelectScrollArea,
     breakpoint,
     classNames,
-    styles,
-    sx
+    styles
   } = _b, others = __objRest(_b, [
     "value",
     "onChange",
@@ -72,8 +72,7 @@ const TransferList = React.forwardRef((_a, ref) => {
     "listComponent",
     "breakpoint",
     "classNames",
-    "styles",
-    "sx"
+    "styles"
   ]);
   const [selection, handlers] = useSelectionState.useSelectionState(initialSelection);
   const handleMoveAll = (listIndex) => {

package/cjs/components/TransferList/TransferList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransferList.js","sources":["../../../src/components/TransferList/TransferList.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, MantineNumberSize } from '@mantine/styles';\nimport { RenderList, RenderListStylesNames } from './RenderList/RenderList';\nimport { DefaultItem } from './DefaultItem/DefaultItem';\nimport { SimpleGrid } from '../SimpleGrid';\nimport { useSelectionState, Selection } from './use-selection-state/use-selection-state';\nimport { TransferListData, TransferListItemComponent, TransferListItem } from './types';\n\nexport type TransferListStylesNames = RenderListStylesNames;\n\nexport interface TransferListProps\n  extends DefaultProps<TransferListStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'value' | 'onChange'> {\n  /** Current value */\n  value: TransferListData;\n\n  /** Called when value changes */\n  onChange(value: TransferListData): void;\n\n  /** Initial items selection */\n  initialSelection?: Selection;\n\n  /** Custom item component */\n  itemComponent?: TransferListItemComponent;\n\n  /** Search fields placeholder */\n  searchPlaceholder?: string;\n\n  /** Nothing found message */\n  nothingFound?: React.ReactNode;\n\n  /** Function to filter search results */\n  filter?(query: string, item: TransferListItem): boolean;\n\n  /** Lists titles */\n  titles?: [string, string];\n\n  /** List items height */\n  listHeight?: number;\n\n  /** Change list component, can be used to add custom scrollbars */\n  listComponent?: React.FC<any>;\n\n  /** Breakpoint at which list will collapse to single column layout */\n  breakpoint?: MantineNumberSize;\n}\n\nexport function defaultFilter(query: string, item: TransferListItem) {\n  return item.label.toLowerCase().trim().includes(query.toLowerCase().trim());\n}\n\nexport const TransferList = forwardRef<HTMLDivElement, TransferListProps>(\n  (\n    {\n      value,\n      onChange,\n      itemComponent = DefaultItem,\n      searchPlaceholder,\n      filter = defaultFilter,\n      nothingFound,\n      titles = [null, null],\n      initialSelection,\n      listHeight = 150,\n      listComponent,\n      breakpoint,\n      classNames,\n      styles,\n      sx,\n      ...others\n    }: TransferListProps,\n    ref\n  ) => {\n    const [selection, handlers] = useSelectionState(initialSelection);\n\n    const handleMoveAll = (listIndex: 0 | 1) => {\n      const items: TransferListData = Array(2) as any;\n      const moveToIndex = listIndex === 0 ? 1 : 0;\n      items[listIndex] = [];\n      items[moveToIndex] = [...value[moveToIndex], ...value[listIndex]];\n      onChange(items);\n      handlers.deselectAll(listIndex);\n    };\n\n    const handleMove = (listIndex: 0 | 1) => {\n      const moveToIndex = listIndex === 0 ? 1 : 0;\n      const items: TransferListData = Array(2) as any;\n      const transferData = value[listIndex].reduce(\n        (acc, item) => {\n          if (!selection[listIndex].includes(item.value)) {\n            acc.filtered.push(item);\n          } else {\n            acc.current.push(item);\n          }\n          return acc;\n        },\n        { filtered: [], current: [] }\n      );\n      items[listIndex] = transferData.filtered;\n      items[moveToIndex] = [...transferData.current, ...value[moveToIndex]];\n      onChange(items);\n      handlers.deselectAll(listIndex);\n    };\n\n    const breakpoints = breakpoint ? [{ maxWidth: breakpoint, cols: 1 }] : undefined;\n\n    return (\n      <SimpleGrid cols={2} spacing=\"xl\" breakpoints={breakpoints} ref={ref} {...others}>\n        <RenderList\n          data={value[0]}\n          selection={selection[0]}\n          onSelect={(val) => handlers.select(0, val)}\n          onMoveAll={() => handleMoveAll(0)}\n          onMove={() => handleMove(0)}\n          itemComponent={itemComponent}\n          searchPlaceholder={searchPlaceholder}\n          filter={filter}\n          nothingFound={nothingFound}\n          title={titles[0]}\n          height={listHeight}\n          listComponent={listComponent}\n          classNames={classNames}\n          styles={styles}\n        />\n\n        <RenderList\n          data={value[1]}\n          selection={selection[1]}\n          onSelect={(val) => handlers.select(1, val)}\n          onMoveAll={() => handleMoveAll(1)}\n          onMove={() => handleMove(1)}\n          itemComponent={itemComponent}\n          searchPlaceholder={searchPlaceholder}\n          filter={filter}\n          nothingFound={nothingFound}\n          title={titles[1]}\n          height={listHeight}\n          listComponent={listComponent}\n          classNames={classNames}\n          styles={styles}\n          reversed\n        />\n      </SimpleGrid>\n    );\n  }\n);\n\nTransferList.displayName = '@mantine/core/TransferList';\n"],"names":["forwardRef","DefaultItem","useSelectionState","React","SimpleGrid","RenderList"],"mappings":"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"}
+{"version":3,"file":"TransferList.js","sources":["../../../src/components/TransferList/TransferList.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, MantineNumberSize } from '@mantine/styles';\nimport { RenderList, RenderListStylesNames } from './RenderList/RenderList';\nimport { SelectScrollArea } from '../Select/SelectScrollArea/SelectScrollArea';\nimport { DefaultItem } from './DefaultItem/DefaultItem';\nimport { SimpleGrid } from '../SimpleGrid';\nimport { useSelectionState, Selection } from './use-selection-state/use-selection-state';\nimport { TransferListData, TransferListItemComponent, TransferListItem } from './types';\n\nexport type TransferListStylesNames = RenderListStylesNames;\n\nexport interface TransferListProps\n  extends DefaultProps<TransferListStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'value' | 'onChange'> {\n  /** Current value */\n  value: TransferListData;\n\n  /** Called when value changes */\n  onChange(value: TransferListData): void;\n\n  /** Initial items selection */\n  initialSelection?: Selection;\n\n  /** Custom item component */\n  itemComponent?: TransferListItemComponent;\n\n  /** Search fields placeholder */\n  searchPlaceholder?: string;\n\n  /** Nothing found message */\n  nothingFound?: React.ReactNode;\n\n  /** Function to filter search results */\n  filter?(query: string, item: TransferListItem): boolean;\n\n  /** Lists titles */\n  titles?: [string, string];\n\n  /** List items height */\n  listHeight?: number;\n\n  /** Change list component, can be used to add custom scrollbars */\n  listComponent?: any;\n\n  /** Breakpoint at which list will collapse to single column layout */\n  breakpoint?: MantineNumberSize;\n}\n\nexport function defaultFilter(query: string, item: TransferListItem) {\n  return item.label.toLowerCase().trim().includes(query.toLowerCase().trim());\n}\n\nexport const TransferList = forwardRef<HTMLDivElement, TransferListProps>(\n  (\n    {\n      value,\n      onChange,\n      itemComponent = DefaultItem,\n      searchPlaceholder,\n      filter = defaultFilter,\n      nothingFound,\n      titles = [null, null],\n      initialSelection,\n      listHeight = 150,\n      listComponent = SelectScrollArea,\n      breakpoint,\n      classNames,\n      styles,\n      ...others\n    }: TransferListProps,\n    ref\n  ) => {\n    const [selection, handlers] = useSelectionState(initialSelection);\n\n    const handleMoveAll = (listIndex: 0 | 1) => {\n      const items: TransferListData = Array(2) as any;\n      const moveToIndex = listIndex === 0 ? 1 : 0;\n      items[listIndex] = [];\n      items[moveToIndex] = [...value[moveToIndex], ...value[listIndex]];\n      onChange(items);\n      handlers.deselectAll(listIndex);\n    };\n\n    const handleMove = (listIndex: 0 | 1) => {\n      const moveToIndex = listIndex === 0 ? 1 : 0;\n      const items: TransferListData = Array(2) as any;\n      const transferData = value[listIndex].reduce(\n        (acc, item) => {\n          if (!selection[listIndex].includes(item.value)) {\n            acc.filtered.push(item);\n          } else {\n            acc.current.push(item);\n          }\n          return acc;\n        },\n        { filtered: [], current: [] }\n      );\n      items[listIndex] = transferData.filtered;\n      items[moveToIndex] = [...transferData.current, ...value[moveToIndex]];\n      onChange(items);\n      handlers.deselectAll(listIndex);\n    };\n\n    const breakpoints = breakpoint ? [{ maxWidth: breakpoint, cols: 1 }] : undefined;\n\n    return (\n      <SimpleGrid cols={2} spacing=\"xl\" breakpoints={breakpoints} ref={ref} {...others}>\n        <RenderList\n          data={value[0]}\n          selection={selection[0]}\n          onSelect={(val) => handlers.select(0, val)}\n          onMoveAll={() => handleMoveAll(0)}\n          onMove={() => handleMove(0)}\n          itemComponent={itemComponent}\n          searchPlaceholder={searchPlaceholder}\n          filter={filter}\n          nothingFound={nothingFound}\n          title={titles[0]}\n          height={listHeight}\n          listComponent={listComponent}\n          classNames={classNames}\n          styles={styles}\n        />\n\n        <RenderList\n          data={value[1]}\n          selection={selection[1]}\n          onSelect={(val) => handlers.select(1, val)}\n          onMoveAll={() => handleMoveAll(1)}\n          onMove={() => handleMove(1)}\n          itemComponent={itemComponent}\n          searchPlaceholder={searchPlaceholder}\n          filter={filter}\n          nothingFound={nothingFound}\n          title={titles[1]}\n          height={listHeight}\n          listComponent={listComponent}\n          classNames={classNames}\n          styles={styles}\n          reversed\n        />\n      </SimpleGrid>\n    );\n  }\n);\n\nTransferList.displayName = '@mantine/core/TransferList';\n"],"names":["forwardRef","DefaultItem","SelectScrollArea","useSelectionState","React","SimpleGrid","RenderList"],"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;AAOK,SAAS,aAAa,CAAC,KAAK,EAAE,IAAI,EAAE;AAC3C,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC;AAC9E,CAAC;AACW,MAAC,YAAY,GAAGA,gBAAU,CAAC,CAAC,EAAE,EAAE,GAAG,KAAK;AACpD,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE;AACf,IAAI,KAAK;AACT,IAAI,QAAQ;AACZ,IAAI,aAAa,GAAGC,uBAAW;AAC/B,IAAI,iBAAiB;AACrB,IAAI,MAAM,GAAG,aAAa;AAC1B,IAAI,YAAY;AAChB,IAAI,MAAM,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC;AACzB,IAAI,gBAAgB;AACpB,IAAI,UAAU,GAAG,GAAG;AACpB,IAAI,aAAa,GAAGC,iCAAgB;AACpC,IAAI,UAAU;AACd,IAAI,UAAU;AACd,IAAI,MAAM;AACV,GAAG,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE;AACjC,IAAI,OAAO;AACX,IAAI,UAAU;AACd,IAAI,eAAe;AACnB,IAAI,mBAAmB;AACvB,IAAI,QAAQ;AACZ,IAAI,cAAc;AAClB,IAAI,QAAQ;AACZ,IAAI,kBAAkB;AACtB,IAAI,YAAY;AAChB,IAAI,eAAe;AACnB,IAAI,YAAY;AAChB,IAAI,YAAY;AAChB,IAAI,QAAQ;AACZ,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,CAAC,SAAS,EAAE,QAAQ,CAAC,GAAGC,mCAAiB,CAAC,gBAAgB,CAAC,CAAC;AACpE,EAAE,MAAM,aAAa,GAAG,CAAC,SAAS,KAAK;AACvC,IAAI,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;AAC3B,IAAI,MAAM,WAAW,GAAG,SAAS,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAChD,IAAI,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC;AAC1B,IAAI,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;AACtE,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC;AACpB,IAAI,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;AACpC,GAAG,CAAC;AACJ,EAAE,MAAM,UAAU,GAAG,CAAC,SAAS,KAAK;AACpC,IAAI,MAAM,WAAW,GAAG,SAAS,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAChD,IAAI,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;AAC3B,IAAI,MAAM,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK;AAChE,MAAM,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AACtD,QAAQ,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAChC,OAAO,MAAM;AACb,QAAQ,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC/B,OAAO;AACP,MAAM,OAAO,GAAG,CAAC;AACjB,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;AACtC,IAAI,KAAK,CAAC,SAAS,CAAC,GAAG,YAAY,CAAC,QAAQ,CAAC;AAC7C,IAAI,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,OAAO,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;AAC1E,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC;AACpB,IAAI,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;AACpC,GAAG,CAAC;AACJ,EAAE,MAAM,WAAW,GAAG,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC;AAChF,EAAE,uBAAuBC,cAAK,CAAC,aAAa,CAACC,qBAAU,EAAE,cAAc,CAAC;AACxE,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,OAAO,EAAE,IAAI;AACjB,IAAI,WAAW;AACf,IAAI,GAAG;AACP,GAAG,EAAE,MAAM,CAAC,kBAAkBD,cAAK,CAAC,aAAa,CAACE,qBAAU,EAAE;AAC9D,IAAI,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;AAClB,IAAI,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;AAC3B,IAAI,QAAQ,EAAE,CAAC,GAAG,KAAK,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC;AAC9C,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC,CAAC,CAAC;AACrC,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC,CAAC,CAAC;AAC/B,IAAI,aAAa;AACjB,IAAI,iBAAiB;AACrB,IAAI,MAAM;AACV,IAAI,YAAY;AAChB,IAAI,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;AACpB,IAAI,MAAM,EAAE,UAAU;AACtB,IAAI,aAAa;AACjB,IAAI,UAAU;AACd,IAAI,MAAM;AACV,GAAG,CAAC,kBAAkBF,cAAK,CAAC,aAAa,CAACE,qBAAU,EAAE;AACtD,IAAI,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;AAClB,IAAI,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;AAC3B,IAAI,QAAQ,EAAE,CAAC,GAAG,KAAK,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC;AAC9C,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC,CAAC,CAAC;AACrC,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC,CAAC,CAAC;AAC/B,IAAI,aAAa;AACjB,IAAI,iBAAiB;AACrB,IAAI,MAAM;AACV,IAAI,YAAY;AAChB,IAAI,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;AACpB,IAAI,MAAM,EAAE,UAAU;AACtB,IAAI,aAAa;AACjB,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,QAAQ,EAAE,IAAI;AAClB,GAAG,CAAC,CAAC,CAAC;AACN,CAAC,EAAE;AACH,YAAY,CAAC,WAAW,GAAG,4BAA4B;;;;;"}

package/cjs/index.js

@@ -74,7 +74,6 @@ var Loader = require('./components/Loader/Loader.js');
 var LoadingOverlay = require('./components/LoadingOverlay/LoadingOverlay.js');
 var Mark = require('./components/Mark/Mark.js');
 var MediaQuery = require('./components/MediaQuery/MediaQuery.js');
-var MenuBody_styles = require('./components/Menu/MenuBody/MenuBody.styles.js');
 var Menu = require('./components/Menu/Menu.js');
 var MenuItem = require('./components/Menu/MenuItem/MenuItem.js');
 var MenuLabel = require('./components/Menu/MenuLabel/MenuLabel.js');
@@ -97,6 +96,7 @@ var RadioGroup = require('./components/RadioGroup/RadioGroup.js');
 var Radio = require('./components/RadioGroup/Radio/Radio.js');
 var Radio_styles = require('./components/RadioGroup/Radio/Radio.styles.js');
 var RingProgress = require('./components/RingProgress/RingProgress.js');
+var ScrollArea = require('./components/ScrollArea/ScrollArea.js');
 var SegmentedControl = require('./components/SegmentedControl/SegmentedControl.js');
 var Select = require('./components/Select/Select.js');
 var SimpleGrid = require('./components/SimpleGrid/SimpleGrid.js');
@@ -111,7 +111,7 @@ var Stepper = require('./components/Stepper/Stepper.js');
 var Switch = require('./components/Switch/Switch.js');
 var Switch_styles = require('./components/Switch/Switch.styles.js');
 var Table = require('./components/Table/Table.js');
-var Tab = require('./components/Tabs/Tab/Tab.js');
+var TabControl = require('./components/Tabs/TabControl/TabControl.js');
 var Tabs = require('./components/Tabs/Tabs.js');
 var Text = require('./components/Text/Text.js');
 var Textarea = require('./components/Textarea/Textarea.js');
@@ -131,6 +131,7 @@ var TypographyStylesProvider = require('./components/TypographyStylesProvider/Ty
 
 exports.AVAILABLE_TRANSITIONS = index.AVAILABLE_TRANSITIONS;
 exports.createAccordionState = useAccordionState.createAccordionState;
+exports.useAccordionState = useAccordionState.useAccordionState;
 exports.Accordion = Accordion.Accordion;
 exports.AccordionItem = AccordionItem.AccordionItem;
 exports.ChevronIcon = ChevronIcon.ChevronIcon;
@@ -201,7 +202,6 @@ exports.Loader = Loader.Loader;
 exports.LoadingOverlay = LoadingOverlay.LoadingOverlay;
 exports.Mark = Mark.Mark;
 exports.MediaQuery = MediaQuery.MediaQuery;
-exports.MENU_SIZES = MenuBody_styles.sizes;
 exports.Menu = Menu.Menu;
 exports.MenuItem = MenuItem.MenuItem;
 exports.MenuLabel = MenuLabel.MenuLabel;
@@ -224,6 +224,7 @@ exports.RadioGroup = RadioGroup.RadioGroup;
 exports.Radio = Radio.Radio;
 exports.RADIO_SIZES = Radio_styles.sizes;
 exports.RingProgress = RingProgress.RingProgress;
+exports.ScrollArea = ScrollArea.ScrollArea;
 exports.SegmentedControl = SegmentedControl.SegmentedControl;
 exports.Select = Select.Select;
 exports.SimpleGrid = SimpleGrid.SimpleGrid;
@@ -238,7 +239,7 @@ exports.Stepper = Stepper.Stepper;
 exports.Switch = Switch.Switch;
 exports.SWITCH_SIZES = Switch_styles.sizes;
 exports.Table = Table.Table;
-exports.Tab = Tab.Tab;
+exports.Tab = TabControl.TabControl;
 exports.Tabs = Tabs.Tabs;
 exports.Text = Text.Text;
 exports.Textarea = Textarea.Textarea;

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}