@lobehub/ui 5.43.1 → 5.45.0

package/es/base-ui/Select/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Select/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { controlHeight } from '@/base-ui/controlSize';\nimport { focusRing } from '@/base-ui/focusRing';\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  arrow: css`\n    display: flex;\n    width: 12px;\n    height: 6px;\n\n    & > svg {\n      width: 100%;\n      height: 100%;\n    }\n  `,\n  borderless: cx(\n    lobeStaticStylish.variantBorderless,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillTertiary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 70%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 55%, transparent);\n    `,\n  ),\n  clear: css`\n    display: inline-flex;\n    align-items: center;\n\n    color: ${cssVar.colorTextTertiary};\n\n    opacity: 0;\n\n    transition: opacity 150ms ${cssVar.motionEaseOut};\n\n    &:hover {\n      color: ${cssVar.colorTextSecondary};\n    }\n  `,\n  empty: css``,\n  filled: cx(\n    lobeStaticStylish.variantFilled,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillSecondary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 70%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 55%, transparent);\n    `,\n  ),\n  group: css``,\n  groupLabel: css``,\n  icon: css`\n    display: inline-flex;\n    align-items: center;\n    transition: transform 150ms ${cssVar.motionEaseOut};\n\n    &[data-popup-open] {\n      transform: rotate(180deg);\n    }\n  `,\n  item: css``,\n  itemBoldSelected: css`\n    &[data-selected] {\n      font-weight: 600;\n    }\n  `,\n  itemIndicator: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-inline-start: auto;\n    padding-inline-start: 8px;\n\n    color: ${cssVar.colorPrimary};\n  `,\n  itemText: css``,\n  list: css`\n    overflow-y: auto;\n    flex: 1;\n\n    min-height: 0;\n    padding-block: 0;\n  `,\n  listWithSearch: css`\n    padding-block-start: 4px;\n  `,\n  outlined: cx(\n    lobeStaticStylish.variantOutlined,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillTertiary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorBgContainer} 75%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n    `,\n  ),\n  popup: css`\n    --lobe-select-available-height: min(\n      var(--available-height),\n      var(--lobe-select-popup-max-height, var(--available-height))\n    );\n\n    max-height: var(--lobe-select-available-height);\n\n    transform-origin: var(--transform-origin);\n\n    display: flex;\n    flex-direction: column;\n\n    box-sizing: border-box;\n\n    transition:\n      opacity 150ms ${cssVar.motionEaseOut},\n      transform 150ms ${cssVar.motionEaseOut};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: scaleY(0.92);\n      opacity: 0;\n    }\n  `,\n  positioner: css`\n    z-index: 1100;\n    outline: none;\n  `,\n  prefix: css`\n    display: inline-flex;\n    align-items: center;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  scrollArrow: css`\n    cursor: default;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    height: 16px;\n\n    color: ${cssVar.colorTextSecondary};\n\n    background: ${cssVar.colorBgElevated};\n  `,\n  search: css`\n    cursor: text;\n\n    display: flex;\n    align-items: center;\n\n    min-height: 36px;\n    margin-inline: -4px;\n    padding-block: 8px;\n    padding-inline: 12px;\n    border-block-end: 1px solid ${cssVar.colorFillSecondary};\n  `,\n  searchInput: css`\n    flex: 1;\n\n    min-width: 0;\n    padding-block: 0;\n    padding-inline: 4px;\n    border: 0;\n\n    font-size: 14px;\n    line-height: 20px;\n    color: ${cssVar.colorText};\n\n    background: transparent;\n    outline: none;\n\n    &::placeholder {\n      color: ${cssVar.colorTextPlaceholder};\n    }\n  `,\n  shadow: lobeStaticStylish.shadow,\n  suffix: css`\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  tag: css`\n    display: inline-flex;\n    align-items: center;\n\n    max-width: 100%;\n    padding-block: 0;\n    padding-inline: 6px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    line-height: 20px;\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  tagClose: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-inline-start: 4px;\n\n    color: ${cssVar.colorTextSecondary};\n\n    transition: opacity 150ms ${cssVar.motionEaseOut};\n  `,\n  tags: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    align-items: center;\n  `,\n  tagsValue: css`\n    /* No growing, so an empty trigger leaves the inline input the full width — but it must\n       still shrink, or the tags stay at max-content and run off the trigger instead of wrapping. */\n    flex: 0 1 auto;\n  `,\n  tagsSearch: css`\n    display: flex;\n    flex: 1;\n    min-width: 48px;\n  `,\n  trigger: css`\n    cursor: pointer;\n    user-select: none;\n\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n\n    box-sizing: border-box;\n    width: 100%;\n    border: 1px solid transparent;\n    border-radius: ${cssVar.borderRadius};\n\n    font-family: inherit;\n    color: ${cssVar.colorText};\n\n    background: transparent;\n    outline: none;\n\n    transition: all 150ms ${cssVar.motionEaseOut};\n\n    &:not([data-disabled], [data-readonly])[data-popup-open],\n    &:not([data-disabled], [data-readonly])[data-open],\n    &:not([data-disabled], [data-readonly])[data-state='open'],\n    &:not([data-disabled], [data-readonly])[aria-expanded='true'] {\n      background: var(--lobe-select-open-bg, ${cssVar.colorFillTertiary});\n    }\n\n    ${focusRing};\n\n    &:hover [data-role='lobe-select-clear'] {\n      opacity: 1;\n    }\n\n    &[data-placeholder] [data-role='lobe-select-clear'] {\n      pointer-events: none;\n      opacity: 0;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n      background: var(--lobe-select-disabled-bg, transparent);\n\n      &:hover {\n        background: var(--lobe-select-disabled-bg, transparent);\n      }\n    }\n\n    &[data-readonly] {\n      cursor: default;\n      color: ${cssVar.colorTextSecondary};\n      background: var(--lobe-select-readonly-bg, transparent);\n\n      &:hover {\n        background: var(--lobe-select-readonly-bg, transparent);\n      }\n    }\n\n    &[data-disabled] [data-role='lobe-select-clear'] {\n      pointer-events: none;\n      opacity: 0;\n    }\n  `,\n  triggerLarge: css`\n    min-height: ${controlHeight.large}px;\n    padding-block: 6px;\n    padding-inline: 12px;\n\n    font-size: 16px;\n    line-height: 24px;\n  `,\n  triggerMiddle: css`\n    min-height: ${controlHeight.middle}px;\n    padding-block: 4px;\n    padding-inline: 11px;\n\n    font-size: 14px;\n    line-height: 20px;\n  `,\n  triggerSmall: css`\n    min-height: ${controlHeight.small}px;\n    padding-block: 0;\n    padding-inline: 8px;\n\n    font-size: 12px;\n    line-height: 18px;\n  `,\n  value: css`\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    gap: 4px;\n    align-items: center;\n\n    min-width: 0;\n\n    color: inherit;\n\n    &[data-placeholder] {\n      color: ${cssVar.colorTextPlaceholder};\n    }\n  `,\n  valueText: css`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n}));\n\nexport const triggerVariants = cva(styles.trigger, {\n  defaultVariants: {\n    shadow: false,\n    size: 'middle',\n    variant: 'outlined',\n  },\n  variants: {\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n    size: {\n      large: styles.triggerLarge,\n      middle: styles.triggerMiddle,\n      small: styles.triggerSmall,\n    },\n    variant: {\n      borderless: styles.borderless,\n      filled: styles.filled,\n      outlined: styles.outlined,\n    },\n  },\n});\n"],"mappings":";;;;;;AAOA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;CAUV,YAAY,GACVA,cAAkB,mBAClB,GAAG;+BACwB,OAAO,kBAAkB;sDACF,OAAO,kBAAkB;sDACzB,OAAO,kBAAkB;KAE7E;CACA,OAAO,GAAG;;;;aAIC,OAAO,kBAAkB;;;;gCAIN,OAAO,cAAc;;;eAGtC,OAAO,mBAAmB;;;CAGvC,OAAO,GAAG;CACV,QAAQ,GACNA,cAAkB,eAClB,GAAG;+BACwB,OAAO,mBAAmB;sDACH,OAAO,kBAAkB;sDACzB,OAAO,kBAAkB;KAE7E;CACA,OAAO,GAAG;CACV,YAAY,GAAG;CACf,MAAM,GAAG;;;kCAGuB,OAAO,cAAc;;;;;;CAMrD,MAAM,GAAG;CACT,kBAAkB,GAAG;;;;;CAKrB,eAAe,GAAG;;;;;;;;aAQP,OAAO,aAAa;;CAE/B,UAAU,GAAG;CACb,MAAM,GAAG;;;;;;;CAOT,gBAAgB,GAAG;;;CAGnB,UAAU,GACRA,cAAkB,iBAClB,GAAG;+BACwB,OAAO,kBAAkB;sDACF,OAAO,iBAAiB;sDACxB,OAAO,iBAAiB;KAE5E;CACA,OAAO,GAAG;;;;;;;;;;;;;;;;sBAgBU,OAAO,cAAc;wBACnB,OAAO,cAAc;;;;;;;;CAQ3C,YAAY,GAAG;;;;CAIf,QAAQ,GAAG;;;aAGA,OAAO,mBAAmB;;CAErC,aAAa,GAAG;;;;;;;;;aASL,OAAO,mBAAmB;;kBAErB,OAAO,gBAAgB;;CAEvC,QAAQ,GAAG;;;;;;;;;;kCAUqB,OAAO,mBAAmB;;CAE1D,aAAa,GAAG;;;;;;;;;;aAUL,OAAO,UAAU;;;;;;eAMf,OAAO,qBAAqB;;;CAGzC,QAAQA,cAAkB;CAC1B,QAAQ,GAAG;;;;aAIA,OAAO,mBAAmB;;CAErC,KAAK,GAAG;;;;;;;qBAOW,OAAO,eAAe;;;;aAI9B,OAAO,UAAU;;kBAEZ,OAAO,kBAAkB;;CAEzC,UAAU,GAAG;;;;;;;;;aASF,OAAO,mBAAmB;;gCAEP,OAAO,cAAc;;CAEnD,MAAM,GAAG;;;;;;CAMT,WAAW,GAAG;;;;;CAKd,YAAY,GAAG;;;;;CAKf,SAAS,GAAG;;;;;;;;;;;qBAWO,OAAO,aAAa;;;aAG5B,OAAO,UAAU;;;;;4BAKF,OAAO,cAAc;;;;;;+CAMF,OAAO,kBAAkB;;;MAGlE,UAAU;;;;;;;;;;;;;eAaD,OAAO,kBAAkB;;;;;;;;;;eAUzB,OAAO,mBAAmB;;;;;;;;;;;;;CAavC,cAAc,GAAG;kBACD,cAAc,MAAM;;;;;;;CAOpC,eAAe,GAAG;kBACF,cAAc,OAAO;;;;;;;CAOrC,cAAc,GAAG;kBACD,cAAc,MAAM;;;;;;;CAOpC,OAAO,GAAG;;;;;;;;;;;;eAYG,OAAO,qBAAqB;;;CAGzC,WAAW,GAAG;;;;;AAKhB,EAAE;AAEF,MAAa,kBAAkB,IAAI,OAAO,SAAS;CACjD,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;CACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Select/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { controlHeight } from '@/base-ui/controlSize';\nimport { focusRing } from '@/base-ui/focusRing';\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  arrow: css`\n    display: flex;\n    width: 12px;\n    height: 6px;\n\n    & > svg {\n      width: 100%;\n      height: 100%;\n    }\n  `,\n  borderless: cx(\n    lobeStaticStylish.variantBorderless,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillTertiary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 70%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 55%, transparent);\n    `,\n  ),\n  clear: css`\n    display: inline-flex;\n    align-items: center;\n\n    color: ${cssVar.colorTextTertiary};\n\n    opacity: 0;\n\n    transition: opacity 150ms ${cssVar.motionEaseOut};\n\n    &:hover {\n      color: ${cssVar.colorTextSecondary};\n    }\n  `,\n  empty: css``,\n  filled: cx(\n    lobeStaticStylish.variantFilled,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillSecondary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 70%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorFillTertiary} 55%, transparent);\n    `,\n  ),\n  group: css``,\n  groupLabel: css``,\n  icon: css`\n    display: inline-flex;\n    align-items: center;\n    transition: transform 150ms ${cssVar.motionEaseOut};\n\n    &[data-popup-open] {\n      transform: rotate(180deg);\n    }\n  `,\n  item: css``,\n  itemBoldSelected: css`\n    &[data-selected] {\n      font-weight: 600;\n    }\n  `,\n  itemIndicator: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-inline-start: auto;\n    padding-inline-start: 8px;\n\n    color: ${cssVar.colorPrimary};\n  `,\n  itemText: css``,\n  list: css`\n    overflow-y: auto;\n    flex: 1;\n    min-height: 0;\n    padding-block: 0;\n  `,\n  listWithSearch: css`\n    padding-block-start: 4px;\n  `,\n  outlined: cx(\n    lobeStaticStylish.variantOutlined,\n    css`\n      --lobe-select-open-bg: ${cssVar.colorFillTertiary};\n      --lobe-select-readonly-bg: color-mix(in srgb, ${cssVar.colorBgContainer} 75%, transparent);\n      --lobe-select-disabled-bg: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n    `,\n  ),\n  popup: css`\n    --lobe-select-available-height: min(\n      var(--available-height),\n      var(--lobe-select-popup-max-height, var(--available-height))\n    );\n\n    transform-origin: var(--transform-origin);\n\n    display: flex;\n    flex-direction: column;\n\n    box-sizing: border-box;\n    max-height: var(--lobe-select-available-height);\n\n    transition:\n      opacity 150ms ${cssVar.motionEaseOut},\n      transform 150ms ${cssVar.motionEaseOut};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: scaleY(0.92);\n      opacity: 0;\n    }\n  `,\n  positioner: css`\n    z-index: 1100;\n    outline: none;\n  `,\n  prefix: css`\n    display: inline-flex;\n    align-items: center;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  scrollArrow: css`\n    cursor: default;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    height: 16px;\n\n    color: ${cssVar.colorTextSecondary};\n\n    background: ${cssVar.colorBgElevated};\n  `,\n  search: css`\n    cursor: text;\n\n    display: flex;\n    align-items: center;\n\n    min-height: 36px;\n    margin-inline: calc(-1 * var(--lobe-menu-popup-padding));\n    padding-block: 8px;\n    padding-inline: 12px;\n    border-block-end: 1px solid ${cssVar.colorFillSecondary};\n  `,\n  searchInput: css`\n    flex: 1;\n\n    min-width: 0;\n    padding-block: 0;\n    padding-inline: 4px;\n    border: 0;\n\n    font-size: 14px;\n    line-height: 20px;\n    color: ${cssVar.colorText};\n\n    background: transparent;\n    outline: none;\n\n    &::placeholder {\n      color: ${cssVar.colorTextPlaceholder};\n    }\n  `,\n  shadow: lobeStaticStylish.shadow,\n  suffix: css`\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  tag: css`\n    display: inline-flex;\n    align-items: center;\n\n    max-width: 100%;\n    padding-block: 0;\n    padding-inline: 6px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    line-height: 20px;\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  tagClose: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-inline-start: 4px;\n\n    color: ${cssVar.colorTextSecondary};\n\n    transition: opacity 150ms ${cssVar.motionEaseOut};\n  `,\n  tags: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    align-items: center;\n  `,\n  tagsValue: css`\n    /* No growing, so an empty trigger leaves the inline input the full width — but it must\n       still shrink, or the tags stay at max-content and run off the trigger instead of wrapping. */\n    flex: 0 1 auto;\n  `,\n  tagsSearch: css`\n    display: flex;\n    flex: 1;\n    min-width: 48px;\n  `,\n  trigger: css`\n    cursor: pointer;\n    user-select: none;\n\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n\n    box-sizing: border-box;\n    width: 100%;\n    border: 1px solid transparent;\n    border-radius: ${cssVar.borderRadius};\n\n    font-family: inherit;\n    color: ${cssVar.colorText};\n\n    background: transparent;\n    outline: none;\n\n    transition: all 150ms ${cssVar.motionEaseOut};\n\n    &:not([data-disabled], [data-readonly])[data-popup-open],\n    &:not([data-disabled], [data-readonly])[data-open],\n    &:not([data-disabled], [data-readonly])[data-state='open'],\n    &:not([data-disabled], [data-readonly])[aria-expanded='true'] {\n      background: var(--lobe-select-open-bg, ${cssVar.colorFillTertiary});\n    }\n\n    ${focusRing};\n\n    &:hover [data-role='lobe-select-clear'] {\n      opacity: 1;\n    }\n\n    &[data-placeholder] [data-role='lobe-select-clear'] {\n      pointer-events: none;\n      opacity: 0;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: ${cssVar.colorTextDisabled};\n      background: var(--lobe-select-disabled-bg, transparent);\n\n      &:hover {\n        background: var(--lobe-select-disabled-bg, transparent);\n      }\n    }\n\n    &[data-readonly] {\n      cursor: default;\n      color: ${cssVar.colorTextSecondary};\n      background: var(--lobe-select-readonly-bg, transparent);\n\n      &:hover {\n        background: var(--lobe-select-readonly-bg, transparent);\n      }\n    }\n\n    &[data-disabled] [data-role='lobe-select-clear'] {\n      pointer-events: none;\n      opacity: 0;\n    }\n  `,\n  triggerLarge: css`\n    min-height: ${controlHeight.large}px;\n    padding-block: 6px;\n    padding-inline: 12px;\n\n    font-size: 16px;\n    line-height: 24px;\n  `,\n  triggerMiddle: css`\n    min-height: ${controlHeight.middle}px;\n    padding-block: 4px;\n    padding-inline: 11px;\n\n    font-size: 14px;\n    line-height: 20px;\n  `,\n  triggerSmall: css`\n    min-height: ${controlHeight.small}px;\n    padding-block: 0;\n    padding-inline: 8px;\n\n    font-size: 12px;\n    line-height: 18px;\n  `,\n  value: css`\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    gap: 4px;\n    align-items: center;\n\n    min-width: 0;\n\n    color: inherit;\n\n    &[data-placeholder] {\n      color: ${cssVar.colorTextPlaceholder};\n    }\n  `,\n  valueText: css`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n}));\n\nexport const triggerVariants = cva(styles.trigger, {\n  defaultVariants: {\n    shadow: false,\n    size: 'middle',\n    variant: 'outlined',\n  },\n  variants: {\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n    size: {\n      large: styles.triggerLarge,\n      middle: styles.triggerMiddle,\n      small: styles.triggerSmall,\n    },\n    variant: {\n      borderless: styles.borderless,\n      filled: styles.filled,\n      outlined: styles.outlined,\n    },\n  },\n});\n"],"mappings":";;;;;;AAOA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;CAUV,YAAY,GACVA,cAAkB,mBAClB,GAAG;+BACwB,OAAO,kBAAkB;sDACF,OAAO,kBAAkB;sDACzB,OAAO,kBAAkB;KAE7E;CACA,OAAO,GAAG;;;;aAIC,OAAO,kBAAkB;;;;gCAIN,OAAO,cAAc;;;eAGtC,OAAO,mBAAmB;;;CAGvC,OAAO,GAAG;CACV,QAAQ,GACNA,cAAkB,eAClB,GAAG;+BACwB,OAAO,mBAAmB;sDACH,OAAO,kBAAkB;sDACzB,OAAO,kBAAkB;KAE7E;CACA,OAAO,GAAG;CACV,YAAY,GAAG;CACf,MAAM,GAAG;;;kCAGuB,OAAO,cAAc;;;;;;CAMrD,MAAM,GAAG;CACT,kBAAkB,GAAG;;;;;CAKrB,eAAe,GAAG;;;;;;;;aAQP,OAAO,aAAa;;CAE/B,UAAU,GAAG;CACb,MAAM,GAAG;;;;;;CAMT,gBAAgB,GAAG;;;CAGnB,UAAU,GACRA,cAAkB,iBAClB,GAAG;+BACwB,OAAO,kBAAkB;sDACF,OAAO,iBAAiB;sDACxB,OAAO,iBAAiB;KAE5E;CACA,OAAO,GAAG;;;;;;;;;;;;;;;sBAeU,OAAO,cAAc;wBACnB,OAAO,cAAc;;;;;;;;CAQ3C,YAAY,GAAG;;;;CAIf,QAAQ,GAAG;;;aAGA,OAAO,mBAAmB;;CAErC,aAAa,GAAG;;;;;;;;;aASL,OAAO,mBAAmB;;kBAErB,OAAO,gBAAgB;;CAEvC,QAAQ,GAAG;;;;;;;;;;kCAUqB,OAAO,mBAAmB;;CAE1D,aAAa,GAAG;;;;;;;;;;aAUL,OAAO,UAAU;;;;;;eAMf,OAAO,qBAAqB;;;CAGzC,QAAQA,cAAkB;CAC1B,QAAQ,GAAG;;;;aAIA,OAAO,mBAAmB;;CAErC,KAAK,GAAG;;;;;;;qBAOW,OAAO,eAAe;;;;aAI9B,OAAO,UAAU;;kBAEZ,OAAO,kBAAkB;;CAEzC,UAAU,GAAG;;;;;;;;;aASF,OAAO,mBAAmB;;gCAEP,OAAO,cAAc;;CAEnD,MAAM,GAAG;;;;;;CAMT,WAAW,GAAG;;;;;CAKd,YAAY,GAAG;;;;;CAKf,SAAS,GAAG;;;;;;;;;;;qBAWO,OAAO,aAAa;;;aAG5B,OAAO,UAAU;;;;;4BAKF,OAAO,cAAc;;;;;;+CAMF,OAAO,kBAAkB;;;MAGlE,UAAU;;;;;;;;;;;;;eAaD,OAAO,kBAAkB;;;;;;;;;;eAUzB,OAAO,mBAAmB;;;;;;;;;;;;;CAavC,cAAc,GAAG;kBACD,cAAc,MAAM;;;;;;;CAOpC,eAAe,GAAG;kBACF,cAAc,OAAO;;;;;;;CAOrC,cAAc,GAAG;kBACD,cAAc,MAAM;;;;;;;CAOpC,OAAO,GAAG;;;;;;;;;;;;eAYG,OAAO,qBAAqB;;;CAGzC,WAAW,GAAG;;;;;AAKhB,EAAE;AAEF,MAAa,kBAAkB,IAAI,OAAO,SAAS;CACjD,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;CACF;AACF,CAAC"}

package/es/base-ui/Select/type.d.mts

@@ -1,5 +1,7 @@
 import { IconProps } from "../../Icon/type.mjs";
 import "../../Icon/index.mjs";
+import { VirtualListProps } from "../virtual/type.mjs";
+import "../virtual/index.mjs";
 import { CSSProperties, ReactNode } from "react";
 import { SelectRootChangeEventDetails } from "@base-ui/react/select";
 //#region src/base-ui/Select/type.d.ts
@@ -46,7 +48,7 @@ interface SelectClassNames {
   trigger?: string;
   value?: string;
 }
-interface SelectProps<Value = string> {
+interface SelectProps<Value = string> extends Pick<VirtualListProps, 'virtual' | 'listItemHeight'> {
   allowClear?: boolean;
   autoFocus?: boolean;
   /**
@@ -69,7 +71,6 @@ interface SelectProps<Value = string> {
    * @default 512
    */
   listHeight?: number;
-  listItemHeight?: number;
   loading?: boolean;
   mode?: 'multiple' | 'tags';
   name?: string;
@@ -103,7 +104,6 @@ interface SelectProps<Value = string> {
   tokenSeparators?: string[];
   value?: Value | Value[] | null;
   variant?: SelectVariant;
-  virtual?: boolean;
 }
 //#endregion
 export { SelectBehaviorVariant, SelectClassNames, SelectIndicatorVariant, SelectOption, SelectOptionGroup, SelectOptions, SelectProps, type SelectRootChangeEventDetails, SelectSize, SelectVariant };

package/es/base-ui/index.d.mts

@@ -6,6 +6,9 @@ import { ActionIconClassNames, ActionIconOutdent, ActionIconProps, ActionIconSiz
 import ActionIcon from "./ActionIcon/ActionIcon.mjs";
 import { styles as styles$1 } from "./ActionIcon/style.mjs";
 import "./ActionIcon/index.mjs";
+import { VirtualListProps } from "./virtual/type.mjs";
+import { ScrollAreaContent, ScrollAreaContentProps, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaRoot, ScrollAreaRootProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps } from "./ScrollArea/atoms.mjs";
+import "./virtual/index.mjs";
 import { IconSpaceMode } from "../Menu/renderUtils.mjs";
 import { renderDropdownMenuItems } from "./DropdownMenu/renderItems.mjs";
 import { DropdownItem, DropdownMenuCheckboxItem, DropdownMenuPlacement, DropdownMenuProps, DropdownMenuSwitchItem as DropdownMenuSwitchItem$1 } from "./DropdownMenu/type.mjs";
@@ -27,7 +30,6 @@ import Popover from "./Popover/Popover.mjs";
 import PopoverGroup from "./Popover/PopoverGroup.mjs";
 import { usePopoverPortalContainer } from "./Popover/PopoverPortal.mjs";
 import "./Popover/index.mjs";
-import { ScrollAreaContent, ScrollAreaContentProps, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaRoot, ScrollAreaRootProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps } from "./ScrollArea/atoms.mjs";
 import { ScrollAreaProps } from "./ScrollArea/type.mjs";
 import { ScrollArea } from "./ScrollArea/ScrollArea.mjs";
 import "./ScrollArea/index.mjs";
@@ -148,4 +150,4 @@ import { styles as styles$12 } from "./ToggleGroup/style.mjs";
 import { ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, ToggleGroupItemProps, ToggleGroupRoot, ToggleGroupRootProps } from "./ToggleGroup/atoms.mjs";
 import ToggleGroup from "./ToggleGroup/ToggleGroup.mjs";
 import "./ToggleGroup/index.mjs";
-export { Accordion, type AccordionClassNames, AccordionHeader, type AccordionHeaderProps, type AccordionIndicatorPlacement, AccordionItem, type AccordionItemProps, type AccordionItemType, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionRoot, type AccordionRootProps, type AccordionStyles, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, ActionIcon, type ActionIconClassNames, type ActionIconOutdent, type ActionIconProps, type ActionIconSize, type ActionIconStyles, type ActionIconVariant, Alert, type AlertClassNames, type AlertCloseConfig, type AlertProps, type AlertRef, type AlertStyles, type AlertType, type AlertVariant, AutoComplete, type AutoCompleteOption, type AutoCompleteProps, Avatar, type AvatarClassNames, AvatarGroup, type AvatarGroupItemType, type AvatarGroupProps, type AvatarProps, type AvatarStyles, type BaseModalProps, Button, type ButtonIconPosition, type ButtonOutdent, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonType, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, type CheckboxShape, type ContextMenuCheckboxItem, ContextMenuHost, type ContextMenuInterceptor, type ContextMenuItem, ContextMenuTrigger, type ControlSize, DraggablePanel, DraggablePanelBody, type DraggablePanelBodyProps, DraggablePanelContainer, type DraggablePanelContainerProps, DraggablePanelContent, type DraggablePanelContentProps, DraggablePanelFooter, type DraggablePanelFooterProps, DraggablePanelHandle, type DraggablePanelHandleProps, DraggablePanelHeader, type DraggablePanelHeaderProps, type DraggablePanelPlacement, type DraggablePanelProps, DraggablePanelRoot, type DraggablePanelRootProps, type DraggablePanelSize, DraggablePanelToggle, type DraggablePanelToggleProps, Drawer, DrawerBackdrop, type DrawerBackdropProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerPlacement, DrawerPopup, type DrawerPopupProps, DrawerPortal, type DrawerPortalProps, type DrawerProps, type DrawerPush, DrawerRoot, type DrawerRootProps, type DrawerSemanticNames, type DrawerSemanticStyles, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, type DropdownItem, DropdownMenu, type DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, type DropdownMenuCheckboxItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, DropdownMenuGroup, DropdownMenuGroupLabel, type DropdownMenuGroupLabelProps, DropdownMenuHeader, type DropdownMenuHeaderProps, DropdownMenuItem, DropdownMenuItemContent, type DropdownMenuItemContentProps, DropdownMenuItemDesc, type DropdownMenuItemDescProps, DropdownMenuItemExtra, type DropdownMenuItemExtraProps, DropdownMenuItemIcon, type DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, type DropdownMenuItemLabelGroupProps, type DropdownMenuItemLabelProps, type DropdownMenuItemProps, type DropdownMenuPlacement, DropdownMenuPopup, type DropdownMenuPopupProps, DropdownMenuPortal, type DropdownMenuPortalProps, DropdownMenuPositioner, type DropdownMenuPositionerProps, type DropdownMenuProps, DropdownMenuRoot, DropdownMenuScrollViewport, type DropdownMenuScrollViewportProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, type DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, type DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, type DropdownMenuSwitchItemProps, type DropdownMenuSwitchItem$1 as DropdownMenuSwitchItemType, DropdownMenuTrigger, type DropdownMenuTriggerProps, type FloatingCollisionPadding, FloatingPanel, type FloatingPanelOffset, type FloatingPanelPlacement, type FloatingPanelProps, FloatingSheet, type FloatingSheetProps, Form, type FormContextValue, FormDivider, type FormDividerProps, FormField, type FormFieldProps, FormFlatGroup, type FormFlatGroupProps, FormFooter, type FormFooterProps, FormGroup, type FormGroupItemType, type FormGroupProps, type FormLayout, type FormProps, FormSubmitFooter, type FormSubmitFooterProps, FormTitle, type FormTitleProps, type FormValues, type FormVariant, type IconSpaceMode, type ImperativeModalProps, Input, type InputClassNames, InputNumber, type InputNumberProps, InputOTP, type InputOTPProps, InputPassword, type InputPasswordProps, type InputProps, type InputSize, type InputStyles, type InputVariant, type ItemsType, Modal, ModalBackdrop, type ModalBackdropProps, ModalClose, type ModalCloseProps, type ModalComponentProps, type ModalConfirmConfig, ModalContent, type ModalContentProps, ModalContext, type ModalContextValue, ModalDescription, type ModalDescriptionProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalHost, type ModalHostProps, type ModalInstance, ModalPopup, type ModalPopupProps, ModalPortal, type ModalPortalProps, ModalRoot, type ModalRootProps, type ModalSystem, ModalTitle, type ModalTitleProps, ModalTrigger, type ModalTriggerProps, ModalViewport, type ModalViewportProps, Popover, PopoverArrow, type PopoverArrowAtomProps, PopoverArrowIcon, PopoverBackdrop, type PopoverBackdropProps, type PopoverContextValue, PopoverGroup, type PopoverGroupHandle, type PopoverGroupItem, type PopoverPlacement, PopoverPopup, type PopoverPopupAtomProps, type PopoverPopupProps, PopoverPortal, type PopoverPortalAtomProps, type PopoverPortalProps, PopoverPositioner, type PopoverPositionerAtomProps, type PopoverPositionerProps, type PopoverProps, PopoverProvider, PopoverRoot, type PopoverTrigger, type PopoverTriggerComponentProps, PopoverTriggerElement, type PopoverTriggerElementProps, PopoverViewport, type PopoverViewportAtomProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaCornerProps, type ScrollAreaProps, ScrollAreaRoot, type ScrollAreaRootProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb, type ScrollAreaThumbProps, ScrollAreaViewport, type ScrollAreaViewportProps, Segmented, type SegmentedClassNames, SegmentedIndicator, type SegmentedIndicatorProps, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, type SegmentedItemProps, type SegmentedOption, type SegmentedOptions, type SegmentedOrientation, type SegmentedProps, SegmentedRoot, type SegmentedRootProps, type SegmentedSize, type SegmentedStyles, type SegmentedVariant, Select, SelectArrow, type SelectArrowProps, SelectBackdrop, type SelectBehaviorVariant, type SelectClassNames, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectIcon, type SelectIconProps, type SelectIndicatorVariant, SelectItem, SelectItemIndicator, type SelectItemIndicatorProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectList, type SelectListProps, type SelectOption, type SelectOptionGroup, type SelectOptions, SelectPopup, type SelectPopupProps, SelectPortal, type SelectPortalProps, SelectPositioner, type SelectPositionerProps, type SelectProps, SelectRoot, type SelectRootChangeEventDetails, SelectScrollDownArrow, type SelectScrollDownArrowProps, SelectScrollUpArrow, type SelectScrollUpArrowProps, SelectSeparator, type SelectSize, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, type SelectVariant, Skeleton, type SkeletonAnimation, SkeletonAvatar, type SkeletonAvatarProps, type SkeletonProps, SkeletonText, type SkeletonTextProps, Slider, type SliderProps, SliderWithInput, type SliderWithInputProps, _default as SplitButton, type SplitButtonMenuProps, type SplitButtonProps, Switch, type SwitchChangeEventHandler, type SwitchClassNames, type SwitchClickEventHandler, type SwitchContextType, SwitchIcon, type SwitchIconPosition, type SwitchIconProps, type SwitchProps, SwitchRoot, type SwitchRootProps, type SwitchSize, type SwitchStyles, SwitchThumb, type SwitchThumbProps, Tabs, type TabsClassNames, TabsIndicator, type TabsIndicatorProps, type TabsItem, TabsList, type TabsListProps, type TabsOrientation, TabsPanel, type TabsPanelProps, type TabsProps, TabsRoot, type TabsRootProps, type TabsSize, type TabsStyles, TabsTab, type TabsTabProps, type TabsVariant, Tag, type TagClassNames, type TagProps, type TagShape, type TagSize, type TagStyles, type TagVariant, Text, TextArea, type TextAreaAutoSize, type TextAreaProps, type TextClassNames, type TextProps, type TextStyles, type ToastAPI, ToastHost, type ToastHostProps, type ToastInstance, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastProps, type ToastType, ToggleGroup, type ToggleGroupClassNames, ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, type ToggleGroupItemProps, type ToggleGroupOption, type ToggleGroupProps, ToggleGroupRoot, type ToggleGroupRootProps, type ToggleGroupSize, type ToggleGroupStyles, type ToggleGroupVariant, Tooltip, TooltipGroup, type TooltipGroupProps, type TooltipPlacement, type TooltipPopupComponentProps, type TooltipPortalProps, type TooltipPositionerProps, type TooltipProps, type TooltipTriggerComponentProps, styles as accordionStyles, styles$1 as actionIconStyles, styles$2 as alertStyles, styles$3 as autoCompleteStyles, backdropTransition, buttonPaddingInline, styles$4 as buttonStyles, styles$5 as checkboxStyles, closeContextMenu, colorsPreset, colorsPresetSystem, confirmModal, controlHeight, createModal, createModalSystem, drawerBackdropTransition, getDrawerMotionConfig, getFloatingCollisionPadding, styles$6 as inputStyles, rootVariants as inputVariants, modalMotionConfig, parseTrigger, presetColors, presetSystemColors, styles$7 as radioStyles, renderDropdownMenuItems, setContextMenuInterceptor, setFloatingCollisionPadding, showContextMenu, styles$8 as sliderStyles, styles$9 as switchStyles, styles$10 as tabsStyles, groupStyles as textGroupStyles, styles$11 as textStyles, variants as textVariants, toast, styles$12 as toggleGroupStyles, updateContextMenuItems, useAccordionContext, useDraggablePanelContext, useDrawerActions, useDrawerOpen, useFormContext, useModalActions, useModalContext, useModalOpen, usePopoverContext, usePopoverGroupHandle, usePopoverPortalContainer, useSwitchContext, useTabsContext, useToast };
+export { Accordion, type AccordionClassNames, AccordionHeader, type AccordionHeaderProps, type AccordionIndicatorPlacement, AccordionItem, type AccordionItemProps, type AccordionItemType, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionRoot, type AccordionRootProps, type AccordionStyles, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, ActionIcon, type ActionIconClassNames, type ActionIconOutdent, type ActionIconProps, type ActionIconSize, type ActionIconStyles, type ActionIconVariant, Alert, type AlertClassNames, type AlertCloseConfig, type AlertProps, type AlertRef, type AlertStyles, type AlertType, type AlertVariant, AutoComplete, type AutoCompleteOption, type AutoCompleteProps, Avatar, type AvatarClassNames, AvatarGroup, type AvatarGroupItemType, type AvatarGroupProps, type AvatarProps, type AvatarStyles, type BaseModalProps, Button, type ButtonIconPosition, type ButtonOutdent, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonType, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, type CheckboxShape, type ContextMenuCheckboxItem, ContextMenuHost, type ContextMenuInterceptor, type ContextMenuItem, ContextMenuTrigger, type ControlSize, DraggablePanel, DraggablePanelBody, type DraggablePanelBodyProps, DraggablePanelContainer, type DraggablePanelContainerProps, DraggablePanelContent, type DraggablePanelContentProps, DraggablePanelFooter, type DraggablePanelFooterProps, DraggablePanelHandle, type DraggablePanelHandleProps, DraggablePanelHeader, type DraggablePanelHeaderProps, type DraggablePanelPlacement, type DraggablePanelProps, DraggablePanelRoot, type DraggablePanelRootProps, type DraggablePanelSize, DraggablePanelToggle, type DraggablePanelToggleProps, Drawer, DrawerBackdrop, type DrawerBackdropProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerPlacement, DrawerPopup, type DrawerPopupProps, DrawerPortal, type DrawerPortalProps, type DrawerProps, type DrawerPush, DrawerRoot, type DrawerRootProps, type DrawerSemanticNames, type DrawerSemanticStyles, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, type DropdownItem, DropdownMenu, type DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, type DropdownMenuCheckboxItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, DropdownMenuGroup, DropdownMenuGroupLabel, type DropdownMenuGroupLabelProps, DropdownMenuHeader, type DropdownMenuHeaderProps, DropdownMenuItem, DropdownMenuItemContent, type DropdownMenuItemContentProps, DropdownMenuItemDesc, type DropdownMenuItemDescProps, DropdownMenuItemExtra, type DropdownMenuItemExtraProps, DropdownMenuItemIcon, type DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, type DropdownMenuItemLabelGroupProps, type DropdownMenuItemLabelProps, type DropdownMenuItemProps, type DropdownMenuPlacement, DropdownMenuPopup, type DropdownMenuPopupProps, DropdownMenuPortal, type DropdownMenuPortalProps, DropdownMenuPositioner, type DropdownMenuPositionerProps, type DropdownMenuProps, DropdownMenuRoot, DropdownMenuScrollViewport, type DropdownMenuScrollViewportProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, type DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, type DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, type DropdownMenuSwitchItemProps, type DropdownMenuSwitchItem$1 as DropdownMenuSwitchItemType, DropdownMenuTrigger, type DropdownMenuTriggerProps, type FloatingCollisionPadding, FloatingPanel, type FloatingPanelOffset, type FloatingPanelPlacement, type FloatingPanelProps, FloatingSheet, type FloatingSheetProps, Form, type FormContextValue, FormDivider, type FormDividerProps, FormField, type FormFieldProps, FormFlatGroup, type FormFlatGroupProps, FormFooter, type FormFooterProps, FormGroup, type FormGroupItemType, type FormGroupProps, type FormLayout, type FormProps, FormSubmitFooter, type FormSubmitFooterProps, FormTitle, type FormTitleProps, type FormValues, type FormVariant, type IconSpaceMode, type ImperativeModalProps, Input, type InputClassNames, InputNumber, type InputNumberProps, InputOTP, type InputOTPProps, InputPassword, type InputPasswordProps, type InputProps, type InputSize, type InputStyles, type InputVariant, type ItemsType, Modal, ModalBackdrop, type ModalBackdropProps, ModalClose, type ModalCloseProps, type ModalComponentProps, type ModalConfirmConfig, ModalContent, type ModalContentProps, ModalContext, type ModalContextValue, ModalDescription, type ModalDescriptionProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalHost, type ModalHostProps, type ModalInstance, ModalPopup, type ModalPopupProps, ModalPortal, type ModalPortalProps, ModalRoot, type ModalRootProps, type ModalSystem, ModalTitle, type ModalTitleProps, ModalTrigger, type ModalTriggerProps, ModalViewport, type ModalViewportProps, Popover, PopoverArrow, type PopoverArrowAtomProps, PopoverArrowIcon, PopoverBackdrop, type PopoverBackdropProps, type PopoverContextValue, PopoverGroup, type PopoverGroupHandle, type PopoverGroupItem, type PopoverPlacement, PopoverPopup, type PopoverPopupAtomProps, type PopoverPopupProps, PopoverPortal, type PopoverPortalAtomProps, type PopoverPortalProps, PopoverPositioner, type PopoverPositionerAtomProps, type PopoverPositionerProps, type PopoverProps, PopoverProvider, PopoverRoot, type PopoverTrigger, type PopoverTriggerComponentProps, PopoverTriggerElement, type PopoverTriggerElementProps, PopoverViewport, type PopoverViewportAtomProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaCornerProps, type ScrollAreaProps, ScrollAreaRoot, type ScrollAreaRootProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb, type ScrollAreaThumbProps, ScrollAreaViewport, type ScrollAreaViewportProps, Segmented, type SegmentedClassNames, SegmentedIndicator, type SegmentedIndicatorProps, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, type SegmentedItemProps, type SegmentedOption, type SegmentedOptions, type SegmentedOrientation, type SegmentedProps, SegmentedRoot, type SegmentedRootProps, type SegmentedSize, type SegmentedStyles, type SegmentedVariant, Select, SelectArrow, type SelectArrowProps, SelectBackdrop, type SelectBehaviorVariant, type SelectClassNames, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectIcon, type SelectIconProps, type SelectIndicatorVariant, SelectItem, SelectItemIndicator, type SelectItemIndicatorProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectList, type SelectListProps, type SelectOption, type SelectOptionGroup, type SelectOptions, SelectPopup, type SelectPopupProps, SelectPortal, type SelectPortalProps, SelectPositioner, type SelectPositionerProps, type SelectProps, SelectRoot, type SelectRootChangeEventDetails, SelectScrollDownArrow, type SelectScrollDownArrowProps, SelectScrollUpArrow, type SelectScrollUpArrowProps, SelectSeparator, type SelectSize, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, type SelectVariant, Skeleton, type SkeletonAnimation, SkeletonAvatar, type SkeletonAvatarProps, type SkeletonProps, SkeletonText, type SkeletonTextProps, Slider, type SliderProps, SliderWithInput, type SliderWithInputProps, _default as SplitButton, type SplitButtonMenuProps, type SplitButtonProps, Switch, type SwitchChangeEventHandler, type SwitchClassNames, type SwitchClickEventHandler, type SwitchContextType, SwitchIcon, type SwitchIconPosition, type SwitchIconProps, type SwitchProps, SwitchRoot, type SwitchRootProps, type SwitchSize, type SwitchStyles, SwitchThumb, type SwitchThumbProps, Tabs, type TabsClassNames, TabsIndicator, type TabsIndicatorProps, type TabsItem, TabsList, type TabsListProps, type TabsOrientation, TabsPanel, type TabsPanelProps, type TabsProps, TabsRoot, type TabsRootProps, type TabsSize, type TabsStyles, TabsTab, type TabsTabProps, type TabsVariant, Tag, type TagClassNames, type TagProps, type TagShape, type TagSize, type TagStyles, type TagVariant, Text, TextArea, type TextAreaAutoSize, type TextAreaProps, type TextClassNames, type TextProps, type TextStyles, type ToastAPI, ToastHost, type ToastHostProps, type ToastInstance, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastProps, type ToastType, ToggleGroup, type ToggleGroupClassNames, ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, type ToggleGroupItemProps, type ToggleGroupOption, type ToggleGroupProps, ToggleGroupRoot, type ToggleGroupRootProps, type ToggleGroupSize, type ToggleGroupStyles, type ToggleGroupVariant, Tooltip, TooltipGroup, type TooltipGroupProps, type TooltipPlacement, type TooltipPopupComponentProps, type TooltipPortalProps, type TooltipPositionerProps, type TooltipProps, type TooltipTriggerComponentProps, type VirtualListProps, styles as accordionStyles, styles$1 as actionIconStyles, styles$2 as alertStyles, styles$3 as autoCompleteStyles, backdropTransition, buttonPaddingInline, styles$4 as buttonStyles, styles$5 as checkboxStyles, closeContextMenu, colorsPreset, colorsPresetSystem, confirmModal, controlHeight, createModal, createModalSystem, drawerBackdropTransition, getDrawerMotionConfig, getFloatingCollisionPadding, styles$6 as inputStyles, rootVariants as inputVariants, modalMotionConfig, parseTrigger, presetColors, presetSystemColors, styles$7 as radioStyles, renderDropdownMenuItems, setContextMenuInterceptor, setFloatingCollisionPadding, showContextMenu, styles$8 as sliderStyles, styles$9 as switchStyles, styles$10 as tabsStyles, groupStyles as textGroupStyles, styles$11 as textStyles, variants as textVariants, toast, styles$12 as toggleGroupStyles, updateContextMenuItems, useAccordionContext, useDraggablePanelContext, useDrawerActions, useDrawerOpen, useFormContext, useModalActions, useModalContext, useModalOpen, usePopoverContext, usePopoverGroupHandle, usePopoverPortalContainer, useSwitchContext, useTabsContext, useToast };

package/es/base-ui/index.mjs

@@ -7,6 +7,7 @@ import Button from "./Button/Button.mjs";
 import { styles as styles$9 } from "./Switch/style.mjs";
 import { SwitchIcon, SwitchRoot, SwitchThumb, useSwitchContext } from "./Switch/atoms.mjs";
 import Switch from "./Switch/Switch.mjs";
+import { ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "./ScrollArea/atoms.mjs";
 import { DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuHeader, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDesc, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger } from "./DropdownMenu/atoms.mjs";
 import { parseTrigger } from "../utils/parseTrigger.mjs";
 import { renderDropdownMenuItems } from "./DropdownMenu/renderItems.mjs";
@@ -28,7 +29,6 @@ import SkeletonAvatar from "./Skeleton/SkeletonAvatar.mjs";
 import SkeletonText from "./Skeleton/SkeletonText.mjs";
 import Skeleton from "./Skeleton/index.mjs";
 import { ToastHost, toast, useToast } from "./Toast/imperative.mjs";
-import { ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "./ScrollArea/atoms.mjs";
 import { ScrollArea } from "./ScrollArea/ScrollArea.mjs";
 import { styles } from "./Accordion/style.mjs";
 import { AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, useAccordionContext } from "./Accordion/atoms.mjs";

package/es/base-ui/virtual/MenuVirtualList.d.mts

@@ -0,0 +1,3 @@
+import "./type.mjs";
+import "./VirtualScrollArea.mjs";
+import { ReactNode } from "react";

package/es/base-ui/virtual/MenuVirtualList.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { VirtualScrollArea } from "./VirtualScrollArea.mjs";
+import { useMenuVirtualList } from "./useMenuVirtualList.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/base-ui/virtual/MenuVirtualList.tsx
+const MenuVirtualList = ({ children, getItemLabel, keepMounted, ...rest }) => {
+	const { keepMountedIndices, viewportProps, viewportRef, virtualChildren, virtualizerRef } = useMenuVirtualList({
+		children,
+		enabled: true,
+		getItemLabel,
+		keepMounted
+	});
+	return /* @__PURE__ */ jsx(VirtualScrollArea, {
+		...rest,
+		keepMounted: keepMountedIndices,
+		viewportProps: {
+			ref: viewportRef,
+			...viewportProps
+		},
+		virtualizerRef,
+		children: virtualChildren
+	});
+};
+MenuVirtualList.displayName = "MenuVirtualList";
+//#endregion
+export { MenuVirtualList };
+
+//# sourceMappingURL=MenuVirtualList.mjs.map

package/es/base-ui/virtual/MenuVirtualList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuVirtualList.mjs","names":[],"sources":["../../../src/base-ui/virtual/MenuVirtualList.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode } from 'react';\n\nimport type { VirtualListProps } from './type';\nimport { useMenuVirtualList } from './useMenuVirtualList';\nimport { VirtualScrollArea, type VirtualScrollAreaProps } from './VirtualScrollArea';\n\nexport interface MenuVirtualListProps\n  extends\n    Omit<VirtualScrollAreaProps, 'viewport' | 'viewportProps' | 'virtualizerRef'>,\n    Pick<VirtualListProps, 'getItemLabel' | 'keepMounted'> {\n  children: ReactNode;\n}\n\nexport const MenuVirtualList = ({\n  children,\n  getItemLabel,\n  keepMounted,\n  ...rest\n}: MenuVirtualListProps) => {\n  const { keepMountedIndices, viewportProps, viewportRef, virtualChildren, virtualizerRef } =\n    useMenuVirtualList({ children, enabled: true, getItemLabel, keepMounted });\n\n  return (\n    <VirtualScrollArea\n      {...rest}\n      keepMounted={keepMountedIndices}\n      viewportProps={{ ref: viewportRef, ...viewportProps }}\n      virtualizerRef={virtualizerRef}\n    >\n      {virtualChildren}\n    </VirtualScrollArea>\n  );\n};\n\nMenuVirtualList.displayName = 'MenuVirtualList';\n"],"mappings":";;;;;AAeA,MAAa,mBAAmB,EAC9B,UACA,cACA,aACA,GAAG,WACuB;CAC1B,MAAM,EAAE,oBAAoB,eAAe,aAAa,iBAAiB,mBACvE,mBAAmB;EAAE;EAAU,SAAS;EAAM;EAAc;CAAY,CAAC;CAE3E,OACE,oBAAC,mBAAD;EACE,GAAI;EACJ,aAAa;EACb,eAAe;GAAE,KAAK;GAAa,GAAG;EAAc;EACpC;EAEf,UAAA;CACgB,CAAA;AAEvB;AAEA,gBAAgB,cAAc"}

package/es/base-ui/virtual/VirtualScrollArea.d.mts

@@ -0,0 +1,3 @@
+import "../ScrollArea/atoms.mjs";
+import { ReactElement, ReactNode, Ref } from "react";
+import "virtua";

package/es/base-ui/virtual/VirtualScrollArea.mjs

@@ -0,0 +1,82 @@
+"use client";
+import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "../ScrollArea/atoms.mjs";
+import { cloneElement, useCallback, useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createStaticStyles, cx } from "antd-style";
+import { useMergeRefs } from "react-merge-refs";
+import { Virtualizer } from "virtua";
+//#region src/base-ui/virtual/VirtualScrollArea.tsx
+const styles = createStaticStyles(({ css }) => ({
+	root: css`
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
+    min-height: 0;
+    margin-inline: calc(-1 * var(--lobe-virtual-scroll-inset, 0px));
+  `,
+	viewport: css`
+    flex: 1;
+    height: auto;
+    min-height: 0;
+    padding-inline: var(--lobe-virtual-scroll-inset, 0);
+  `
+}));
+const INITIAL_ROW_COUNT = 20;
+const VirtualScrollArea = ({ children, className, itemSize, keepMounted, viewport, viewportProps, virtualizerRef, ...rest }) => {
+	const viewportRef = useRef(null);
+	const mergedViewportRef = useMergeRefs([viewportRef, viewportProps?.ref]);
+	const list = /* @__PURE__ */ jsx(Virtualizer, {
+		itemSize,
+		keepMounted,
+		ref: virtualizerRef,
+		scrollRef: viewportRef,
+		ssrCount: INITIAL_ROW_COUNT,
+		children
+	});
+	const viewportElement = /* @__PURE__ */ jsx(ScrollAreaViewport, {
+		tabIndex: -1,
+		...viewportProps,
+		className: cx(styles.viewport, viewportProps?.className),
+		ref: mergedViewportRef
+	});
+	return /* @__PURE__ */ jsxs(ScrollAreaRoot, {
+		"data-virtual": "",
+		...rest,
+		className: cx(styles.root, className),
+		children: [cloneElement(viewport ?? viewportElement, {
+			children: list,
+			...viewport && { render: viewportElement }
+		}), /* @__PURE__ */ jsx(ScrollAreaScrollbar, { children: /* @__PURE__ */ jsx(ScrollAreaThumb, {}) })]
+	});
+};
+VirtualScrollArea.displayName = "VirtualScrollArea";
+function usePointerScrollGuard() {
+	const pointerScrollRef = useRef(false);
+	const timeoutRef = useRef(null);
+	const markPointerScroll = useCallback(() => {
+		pointerScrollRef.current = true;
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		timeoutRef.current = setTimeout(() => {
+			pointerScrollRef.current = false;
+		}, 120);
+	}, []);
+	useEffect(() => {
+		return () => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		};
+	}, []);
+	return {
+		markPointerScroll,
+		pointerScrollRef,
+		scrollGuardProps: {
+			onPointerDown: markPointerScroll,
+			onTouchMove: markPointerScroll,
+			onWheel: markPointerScroll
+		}
+	};
+}
+//#endregion
+export { VirtualScrollArea, usePointerScrollGuard };
+
+//# sourceMappingURL=VirtualScrollArea.mjs.map

package/es/base-ui/virtual/VirtualScrollArea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualScrollArea.mjs","names":[],"sources":["../../../src/base-ui/virtual/VirtualScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, cx } from 'antd-style';\nimport {\n  cloneElement,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\nimport { Virtualizer, type VirtualizerHandle } from 'virtua';\n\nimport {\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaViewport,\n  type ScrollAreaViewportProps,\n} from '@/base-ui/ScrollArea/atoms';\n\n// `--lobe-virtual-scroll-inset` is the inline padding of the box the scroll area sits in: the\n// root bleeds out by it so the scrollbar hugs that box's edge, and the viewport pads the rows back.\nconst styles = createStaticStyles(({ css }) => ({\n  root: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    min-height: 0;\n    margin-inline: calc(-1 * var(--lobe-virtual-scroll-inset, 0px));\n  `,\n  viewport: css`\n    flex: 1;\n    height: auto;\n    min-height: 0;\n    padding-inline: var(--lobe-virtual-scroll-inset, 0);\n  `,\n}));\n\n// Rows mounted on the very first render, before the viewport is measured, so Base UI's\n// list navigation sees the leading rows (not a pinned footer item) when it focuses on open.\nconst INITIAL_ROW_COUNT = 20;\n\nexport interface VirtualScrollAreaProps extends Omit<ScrollAreaRootProps, 'children'> {\n  children: ReactNode;\n  itemSize?: number;\n  keepMounted?: readonly number[];\n  /**\n   * Element that owns the scrolling box (e.g. a Base UI `Select.List`); it is rendered\n   * through the ScrollArea viewport so its own props and role win.\n   */\n  viewport?: ReactElement<{ children?: ReactNode; render?: ReactElement }>;\n  viewportProps?: ScrollAreaViewportProps;\n  virtualizerRef?: Ref<VirtualizerHandle>;\n}\n\nexport const VirtualScrollArea = ({\n  children,\n  className,\n  itemSize,\n  keepMounted,\n  viewport,\n  viewportProps,\n  virtualizerRef,\n  ...rest\n}: VirtualScrollAreaProps) => {\n  const viewportRef = useRef<HTMLDivElement | null>(null);\n  const mergedViewportRef = useMergeRefs([viewportRef, viewportProps?.ref]);\n\n  const list = (\n    <Virtualizer\n      itemSize={itemSize}\n      keepMounted={keepMounted}\n      ref={virtualizerRef}\n      scrollRef={viewportRef}\n      ssrCount={INITIAL_ROW_COUNT}\n    >\n      {children}\n    </Virtualizer>\n  );\n  const viewportElement = (\n    <ScrollAreaViewport\n      tabIndex={-1}\n      {...viewportProps}\n      className={cx(styles.viewport, viewportProps?.className as string)}\n      ref={mergedViewportRef}\n    />\n  );\n\n  return (\n    <ScrollAreaRoot data-virtual=\"\" {...rest} className={cx(styles.root, className as string)}>\n      {cloneElement(viewport ?? viewportElement, {\n        children: list,\n        ...(viewport && { render: viewportElement }),\n      })}\n      <ScrollAreaScrollbar>\n        <ScrollAreaThumb />\n      </ScrollAreaScrollbar>\n    </ScrollAreaRoot>\n  );\n};\n\nVirtualScrollArea.displayName = 'VirtualScrollArea';\n\n// Base UI scrolls the highlighted item into view after focusing it; while the pointer drives\n// the scroll that would yank the list back, so callers consult `pointerScrollRef` first.\nexport function usePointerScrollGuard() {\n  const pointerScrollRef = useRef(false);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const markPointerScroll = useCallback(() => {\n    pointerScrollRef.current = true;\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    timeoutRef.current = setTimeout(() => {\n      pointerScrollRef.current = false;\n    }, 120);\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    };\n  }, []);\n\n  return {\n    markPointerScroll,\n    pointerScrollRef,\n    scrollGuardProps: {\n      onPointerDown: markPointerScroll,\n      onTouchMove: markPointerScroll,\n      onWheel: markPointerScroll,\n    },\n  };\n}\n"],"mappings":";;;;;;;;AA0BA,MAAM,SAAS,oBAAoB,EAAE,WAAW;CAC9C,MAAM,GAAG;;;;;;;;CAQT,UAAU,GAAG;;;;;;AAMf,EAAE;AAIF,MAAM,oBAAoB;AAe1B,MAAa,qBAAqB,EAChC,UACA,WACA,UACA,aACA,UACA,eACA,gBACA,GAAG,WACyB;CAC5B,MAAM,cAAc,OAA8B,IAAI;CACtD,MAAM,oBAAoB,aAAa,CAAC,aAAa,eAAe,GAAG,CAAC;CAExE,MAAM,OACJ,oBAAC,aAAD;EACY;EACG;EACb,KAAK;EACL,WAAW;EACX,UAAU;EAET;CACU,CAAA;CAEf,MAAM,kBACJ,oBAAC,oBAAD;EACE,UAAU;EACV,GAAI;EACJ,WAAW,GAAG,OAAO,UAAU,eAAe,SAAmB;EACjE,KAAK;CACN,CAAA;CAGH,OACE,qBAAC,gBAAD;EAAgB,gBAAa;EAAG,GAAI;EAAM,WAAW,GAAG,OAAO,MAAM,SAAmB;EAAxF,UAAA,CACG,aAAa,YAAY,iBAAiB;GACzC,UAAU;GACV,GAAI,YAAY,EAAE,QAAQ,gBAAgB;EAC5C,CAAC,GACD,oBAAC,qBAAD,EAAA,UACE,oBAAC,iBAAD,CAAkB,CAAA,EACC,CAAA,CACP;;AAEpB;AAEA,kBAAkB,cAAc;AAIhC,SAAgB,wBAAwB;CACtC,MAAM,mBAAmB,OAAO,KAAK;CACrC,MAAM,aAAa,OAA6C,IAAI;CAEpE,MAAM,oBAAoB,kBAAkB;EAC1C,iBAAiB,UAAU;EAC3B,IAAI,WAAW,SAAS,aAAa,WAAW,OAAO;EACvD,WAAW,UAAU,iBAAiB;GACpC,iBAAiB,UAAU;EAC7B,GAAG,GAAG;CACR,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,aAAa;GACX,IAAI,WAAW,SAAS,aAAa,WAAW,OAAO;EACzD;CACF,GAAG,CAAC,CAAC;CAEL,OAAO;EACL;EACA;EACA,kBAAkB;GAChB,eAAe;GACf,aAAa;GACb,SAAS;EACX;CACF;AACF"}

package/es/base-ui/virtual/index.d.mts

@@ -0,0 +1,5 @@
+import { VirtualListProps } from "./type.mjs";
+import "./VirtualScrollArea.mjs";
+import "./MenuVirtualList.mjs";
+import "./useMenuVirtualList.mjs";
+export type { VirtualListProps };

package/es/base-ui/virtual/type.d.mts

@@ -0,0 +1,26 @@
+import { ReactElement } from "react";
+//#region src/base-ui/virtual/type.d.ts
+interface VirtualListProps {
+  /**
+   * Typeahead label for a child row. Defaults to the row's `label` prop, then `aria-label`,
+   * then the flattened text of its children.
+   */
+  getItemLabel?: (child: ReactElement, index: number) => string | undefined;
+  /**
+   * Extra child indices to keep mounted while virtualized, on top of the highlighted row.
+   */
+  keepMounted?: readonly number[];
+  /**
+   * Row height hint for the virtualizer; rows are still measured after mount.
+   */
+  listItemHeight?: number;
+  /**
+   * Only mount the rows near the scroll position. Use for long flat lists (hundreds of rows);
+   * groups and submenus keep working but are kept mounted as one row.
+   * @default false
+   */
+  virtual?: boolean;
+}
+//#endregion
+export { VirtualListProps };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/virtual/useMenuVirtualList.d.mts

@@ -0,0 +1,3 @@
+import "./type.mjs";
+import React from "react";
+import "virtua";

package/es/base-ui/virtual/useMenuVirtualList.mjs

@@ -0,0 +1,256 @@
+"use client";
+import { usePointerScrollGuard } from "./VirtualScrollArea.mjs";
+import { Children, cloneElement, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+//#region src/base-ui/virtual/useMenuVirtualList.tsx
+const LIST_ITEM_SELECTOR = "[role^=\"menuitem\"], [role=\"option\"]";
+const INDEX_ATTRIBUTE = "data-virtual-index";
+const MAX_JUMP_FRAMES = 60;
+const flattenText = (node) => {
+	if (node == null || typeof node === "boolean") return "";
+	if (typeof node === "string" || typeof node === "number") return String(node);
+	if (Array.isArray(node)) return node.map(flattenText).join("");
+	if (isValidElement(node)) return flattenText(node.props.children);
+	return "";
+};
+const readEntry = (child, index, getItemLabel) => {
+	if (!isValidElement(child)) return {
+		disabled: true,
+		label: ""
+	};
+	const props = child.props;
+	const label = getItemLabel?.(child, index) ?? props.label ?? props["aria-label"] ?? flattenText(props.children);
+	return {
+		disabled: Boolean(props.disabled) || props["aria-disabled"] === true || props["aria-disabled"] === "true",
+		label: label.trim()
+	};
+};
+const findMatch = (entries, query, startIndex) => {
+	if (entries.length === 0) return -1;
+	const lowerQuery = query.toLowerCase();
+	const start = (startIndex % entries.length + entries.length) % entries.length;
+	for (let offset = 0; offset < entries.length; offset += 1) {
+		const index = (start + offset) % entries.length;
+		const entry = entries[index];
+		if (!entry.disabled && entry.label.toLowerCase().startsWith(lowerQuery)) return index;
+	}
+	return -1;
+};
+const findEdge = (entries, fromEnd) => {
+	if (fromEnd) {
+		for (let index = entries.length - 1; index >= 0; index -= 1) if (!entries[index].disabled) return index;
+		return -1;
+	}
+	return entries.findIndex((entry) => !entry.disabled);
+};
+function useMenuVirtualList({ children, enabled, getItemLabel, keepMounted, typeaheadResetMs = 500 }) {
+	const viewportRef = useRef(null);
+	const virtualizerRef = useRef(null);
+	const focusedItemRef = useRef(null);
+	const activeIndexRef = useRef(null);
+	const [activeIndex, setActiveIndex] = useState(null);
+	const jumpTargetRef = useRef(null);
+	const [jumpTarget, setJumpTarget] = useState(null);
+	const { pointerScrollRef, scrollGuardProps } = usePointerScrollGuard();
+	const entries = useMemo(() => enabled ? Children.map(children, (child, index) => readEntry(child, index, getItemLabel)) ?? [] : [], [
+		children,
+		enabled,
+		getItemLabel
+	]);
+	const guardScrollIntoView = useCallback((item) => {
+		if (Object.hasOwn(item, "scrollIntoView")) return;
+		item.scrollIntoView = (...args) => {
+			if (!pointerScrollRef.current) HTMLElement.prototype.scrollIntoView.call(item, ...args);
+		};
+	}, [pointerScrollRef]);
+	const parkFocus = useCallback(() => {
+		const viewport = viewportRef.current;
+		if (viewport && !viewport.contains(document.activeElement)) viewport.focus({ preventScroll: true });
+	}, []);
+	const settleScrollRef = useRef(-1);
+	const focusJumpTarget = useCallback(() => {
+		const index = jumpTargetRef.current;
+		const viewport = viewportRef.current;
+		if (index === null || !viewport) return false;
+		parkFocus();
+		const scrollTop = viewport.scrollTop;
+		const settled = scrollTop === settleScrollRef.current;
+		settleScrollRef.current = scrollTop;
+		if (!settled) return false;
+		const child = viewport.querySelector(`[${INDEX_ATTRIBUTE}="${index}"]`);
+		const target = child && (child.matches(LIST_ITEM_SELECTOR) ? child : child.querySelector(LIST_ITEM_SELECTOR));
+		if (!target) return false;
+		guardScrollIntoView(target);
+		focusedItemRef.current = target;
+		target.focus({ preventScroll: true });
+		return true;
+	}, [guardScrollIntoView, parkFocus]);
+	useEffect(() => {
+		const viewport = viewportRef.current;
+		if (!enabled || !viewport) return;
+		const observer = new MutationObserver(() => {
+			if (jumpTargetRef.current !== null) {
+				focusJumpTarget();
+				return;
+			}
+			const focusedItem = focusedItemRef.current;
+			const active = document.activeElement;
+			if (focusedItem && !focusedItem.isConnected && active === document.body) {
+				focusedItemRef.current = null;
+				viewport.focus({ preventScroll: true });
+				return;
+			}
+			if (focusedItem && active === focusedItem) focusedItem.dispatchEvent(new FocusEvent("focusin", { bubbles: true }));
+		});
+		observer.observe(viewport, {
+			childList: true,
+			subtree: true
+		});
+		return () => observer.disconnect();
+	}, [enabled, focusJumpTarget]);
+	const jumpFrameRef = useRef(null);
+	useEffect(() => {
+		return () => {
+			if (jumpFrameRef.current !== null) cancelAnimationFrame(jumpFrameRef.current);
+		};
+	}, []);
+	const jumpTo = useCallback((index) => {
+		activeIndexRef.current = index;
+		jumpTargetRef.current = index;
+		setActiveIndex(index);
+		setJumpTarget(index);
+		viewportRef.current?.focus({ preventScroll: true });
+		settleScrollRef.current = -1;
+		virtualizerRef.current?.scrollToIndex(index, { align: "nearest" });
+		if (jumpFrameRef.current !== null) cancelAnimationFrame(jumpFrameRef.current);
+		let frames = 0;
+		const kick = () => {
+			jumpFrameRef.current = null;
+			focusJumpTarget();
+			frames += 1;
+			if (jumpTargetRef.current !== null && frames < MAX_JUMP_FRAMES) jumpFrameRef.current = requestAnimationFrame(kick);
+			else if (jumpTargetRef.current !== null) {
+				jumpTargetRef.current = null;
+				setJumpTarget(null);
+			}
+		};
+		jumpFrameRef.current = requestAnimationFrame(kick);
+	}, [focusJumpTarget]);
+	const queryRef = useRef("");
+	const lastMatchRef = useRef(null);
+	const resetTimeoutRef = useRef(null);
+	const resetQuery = useCallback(() => {
+		queryRef.current = "";
+		if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);
+		resetTimeoutRef.current = null;
+	}, []);
+	useEffect(() => {
+		return () => {
+			if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);
+		};
+	}, []);
+	const handleKeyDownCapture = useCallback((event) => {
+		if (!enabled || entries.length === 0) return;
+		if (event.target instanceof HTMLElement && event.target.matches("input, textarea")) return;
+		if (event.key === "Home" || event.key === "End") {
+			const fromEnd = event.key === "End";
+			const index = findEdge(entries, fromEnd);
+			if (index === -1) return;
+			event.preventDefault();
+			event.stopPropagation();
+			resetQuery();
+			jumpTo(index);
+			return;
+		}
+		if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return;
+		if (event.key === " " && queryRef.current === "") return;
+		event.preventDefault();
+		event.stopPropagation();
+		const isNewSession = queryRef.current === "";
+		if (entries.every((entry) => entry.disabled || entry.label[0]?.toLowerCase() !== entry.label[1]?.toLowerCase()) && queryRef.current === event.key) queryRef.current = "";
+		queryRef.current += event.key;
+		if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);
+		resetTimeoutRef.current = setTimeout(resetQuery, typeaheadResetMs);
+		const previous = isNewSession || queryRef.current.length === 1 ? activeIndexRef.current ?? lastMatchRef.current ?? -1 : lastMatchRef.current ?? activeIndexRef.current ?? -1;
+		const startIndex = queryRef.current.length === 1 ? previous + 1 : previous;
+		const index = findMatch(entries, queryRef.current, startIndex);
+		if (index !== -1) {
+			lastMatchRef.current = index;
+			jumpTo(index);
+		} else if (event.key !== " ") resetQuery();
+	}, [
+		enabled,
+		entries,
+		jumpTo,
+		resetQuery,
+		typeaheadResetMs
+	]);
+	const virtualChildren = useMemo(() => {
+		if (!enabled) return children;
+		return Children.map(children, (child, index) => {
+			if (!isValidElement(child)) return child;
+			const { onFocus } = child.props;
+			return cloneElement(child, {
+				[INDEX_ATTRIBUTE]: index,
+				onFocus: (event) => {
+					onFocus?.(event);
+					const item = event.target.closest(LIST_ITEM_SELECTOR);
+					if (item && event.currentTarget.contains(item)) {
+						focusedItemRef.current = item;
+						guardScrollIntoView(item);
+					}
+					activeIndexRef.current = index;
+					setActiveIndex(index);
+					if (jumpTargetRef.current === index) {
+						jumpTargetRef.current = null;
+						setJumpTarget(null);
+					}
+				}
+			});
+		});
+	}, [
+		children,
+		enabled,
+		guardScrollIntoView
+	]);
+	const keepMountedIndices = useMemo(() => {
+		if (!enabled) return void 0;
+		const count = Children.count(children);
+		const indices = new Set(keepMounted);
+		if (activeIndex !== null) indices.add(activeIndex);
+		if (jumpTarget !== null) indices.add(jumpTarget);
+		const inRange = [...indices].filter((index) => index >= 0 && index < count);
+		return inRange.length ? inRange : void 0;
+	}, [
+		activeIndex,
+		children,
+		enabled,
+		jumpTarget,
+		keepMounted
+	]);
+	const handleBlur = useCallback((event) => {
+		if (jumpTargetRef.current === null) return;
+		const viewport = viewportRef.current;
+		if (!viewport) return;
+		if (event.relatedTarget && viewport.contains(event.relatedTarget)) return;
+		viewport.focus({ preventScroll: true });
+	}, []);
+	return {
+		keepMountedIndices,
+		viewportProps: useMemo(() => ({
+			...scrollGuardProps,
+			onBlur: handleBlur,
+			onKeyDownCapture: handleKeyDownCapture
+		}), [
+			handleBlur,
+			handleKeyDownCapture,
+			scrollGuardProps
+		]),
+		viewportRef,
+		virtualChildren,
+		virtualizerRef
+	};
+}
+//#endregion
+export { findEdge, findMatch, flattenText, useMenuVirtualList };
+
+//# sourceMappingURL=useMenuVirtualList.mjs.map