@1771technologies/lytenyte-pro 0.9.3 → 1.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -2
- package/dist/+types.d.ts +5299 -0
- package/dist/+types.js +1 -0
- package/dist/cell-selection/adjust-rect-for-row-and-cell-span.d.ts +2 -0
- package/dist/cell-selection/adjust-rect-for-row-and-cell-span.js +43 -0
- package/dist/cell-selection/are-rects-equal.d.ts +2 -0
- package/dist/cell-selection/are-rects-equal.js +6 -0
- package/dist/cell-selection/bound-selection-rect.d.ts +2 -0
- package/dist/cell-selection/bound-selection-rect.js +17 -0
- package/dist/cell-selection/cell-selection-containers.d.ts +3 -0
- package/dist/cell-selection/cell-selection-containers.js +91 -0
- package/dist/cell-selection/cell-selection-driver.js +272 -0
- package/dist/{types/cell-selection → cell-selection}/cell-style-row.d.ts +2 -2
- package/dist/cell-selection/cell-style-row.js +84 -0
- package/dist/cell-selection/deselect-rect-range.d.ts +2 -0
- package/dist/cell-selection/deselect-rect-range.js +43 -0
- package/dist/cell-selection/expand-cell-selection-down.d.ts +5 -0
- package/dist/cell-selection/expand-cell-selection-down.js +39 -0
- package/dist/cell-selection/expand-cell-selection-end.d.ts +5 -0
- package/dist/cell-selection/expand-cell-selection-end.js +40 -0
- package/dist/cell-selection/expand-cell-selection-start.d.ts +5 -0
- package/dist/cell-selection/expand-cell-selection-start.js +39 -0
- package/dist/cell-selection/expand-cell-selection-up.d.ts +5 -0
- package/dist/cell-selection/expand-cell-selection-up.js +39 -0
- package/dist/cell-selection/full-width-start-end-index.d.ts +2 -0
- package/dist/cell-selection/full-width-start-end-index.js +5 -0
- package/dist/cell-selection/get-root-cell.d.ts +2 -0
- package/dist/cell-selection/get-root-cell.js +86 -0
- package/dist/cell-selection/index.d.ts +19 -0
- package/dist/cell-selection/index.js +19 -0
- package/dist/cell-selection/is-bottom-rect.d.ts +2 -0
- package/dist/cell-selection/is-bottom-rect.js +7 -0
- package/dist/cell-selection/is-center-col-rect.d.ts +5 -0
- package/dist/cell-selection/is-center-col-rect.js +5 -0
- package/dist/cell-selection/is-center-rect.d.ts +2 -0
- package/dist/cell-selection/is-center-rect.js +5 -0
- package/dist/cell-selection/is-end-rect.d.ts +5 -0
- package/dist/cell-selection/is-end-rect.js +4 -0
- package/dist/cell-selection/is-overlapping-rect.d.ts +2 -0
- package/dist/cell-selection/is-overlapping-rect.js +6 -0
- package/dist/cell-selection/is-start-rect.d.ts +5 -0
- package/dist/cell-selection/is-start-rect.js +4 -0
- package/dist/cell-selection/is-top-rect.d.ts +2 -0
- package/dist/cell-selection/is-top-rect.js +4 -0
- package/dist/cell-selection/is-within-selection-rect.d.ts +2 -0
- package/dist/cell-selection/is-within-selection-rect.js +3 -0
- package/dist/cell-selection/split-cell-selection-rect.d.ts +39 -0
- package/dist/cell-selection/split-cell-selection-rect.js +79 -0
- package/dist/cell-selection/update-additive-cell-selection.d.ts +5 -0
- package/dist/cell-selection/update-additive-cell-selection.js +25 -0
- package/dist/cell-selection/use-edge-scroll.d.ts +10 -0
- package/dist/cell-selection/use-edge-scroll.js +66 -0
- package/dist/cells/cell-default.d.ts +2 -0
- package/dist/cells/cell-default.js +8 -0
- package/dist/cells/cell-editor.d.ts +6 -0
- package/dist/cells/cell-editor.js +96 -0
- package/dist/cells/cell.d.ts +7 -0
- package/dist/cells/cell.js +37 -0
- package/dist/column-manager/branch-lookup-context.d.ts +4 -0
- package/dist/column-manager/branch-lookup-context.js +3 -0
- package/dist/column-manager/branch.d.ts +9 -0
- package/dist/column-manager/branch.js +38 -0
- package/dist/column-manager/column-manager.d.ts +15 -0
- package/dist/column-manager/column-manager.js +20 -0
- package/dist/column-manager/context.d.ts +7 -0
- package/dist/column-manager/context.js +3 -0
- package/dist/column-manager/label.d.ts +5 -0
- package/dist/column-manager/label.js +18 -0
- package/dist/column-manager/leaf.d.ts +6 -0
- package/dist/column-manager/leaf.js +40 -0
- package/dist/column-manager/move-handle.d.ts +12 -0
- package/dist/column-manager/move-handle.js +58 -0
- package/dist/column-manager/passive-scroll.d.ts +2 -0
- package/dist/column-manager/passive-scroll.js +2 -0
- package/dist/column-manager/root.d.ts +9 -0
- package/dist/column-manager/root.js +20 -0
- package/dist/column-manager/use-column-manager.d.ts +19 -0
- package/dist/column-manager/use-column-manager.js +24 -0
- package/dist/column-manager/use-columns-from-context.d.ts +3 -0
- package/dist/column-manager/use-columns-from-context.js +23 -0
- package/dist/column-manager/visibility-checkbox.d.ts +9 -0
- package/dist/column-manager/visibility-checkbox.js +30 -0
- package/dist/context.d.ts +10 -0
- package/dist/context.js +4 -0
- package/dist/filter-tree/branch.d.ts +10 -0
- package/dist/filter-tree/branch.js +21 -0
- package/dist/filter-tree/context.d.ts +27 -0
- package/dist/filter-tree/context.js +5 -0
- package/dist/filter-tree/filter-tree.d.ts +14 -0
- package/dist/filter-tree/filter-tree.js +18 -0
- package/dist/filter-tree/hooks/use-filter-tree.d.ts +37 -0
- package/dist/filter-tree/hooks/use-filter-tree.js +96 -0
- package/dist/filter-tree/hooks/use-tree-item.d.ts +8 -0
- package/dist/filter-tree/hooks/use-tree-item.js +116 -0
- package/dist/filter-tree/inclusion-checkbox.d.ts +9 -0
- package/dist/filter-tree/inclusion-checkbox.js +14 -0
- package/dist/filter-tree/label.d.ts +5 -0
- package/dist/filter-tree/label.js +18 -0
- package/dist/filter-tree/leaf.d.ts +6 -0
- package/dist/filter-tree/leaf.js +12 -0
- package/dist/filter-tree/root.d.ts +13 -0
- package/dist/filter-tree/root.js +30 -0
- package/dist/grid-box/+types.d.ts +13 -0
- package/dist/grid-box/+types.js +1 -0
- package/dist/grid-box/context.d.ts +9 -0
- package/dist/grid-box/context.js +3 -0
- package/dist/grid-box/grid-box.d.ts +12 -0
- package/dist/grid-box/grid-box.js +14 -0
- package/dist/grid-box/item.d.ts +7 -0
- package/dist/grid-box/item.js +33 -0
- package/dist/grid-box/panel.d.ts +1 -0
- package/dist/grid-box/panel.js +9 -0
- package/dist/grid-box/root.d.ts +9 -0
- package/dist/grid-box/root.js +8 -0
- package/dist/grid-box/use-aggregation-box-items.d.ts +18 -0
- package/dist/grid-box/use-aggregation-box-items.js +60 -0
- package/dist/grid-box/use-column-box-items.d.ts +31 -0
- package/dist/grid-box/use-column-box-items.js +81 -0
- package/dist/grid-box/use-row-group-box-items.d.ts +18 -0
- package/dist/grid-box/use-row-group-box-items.js +134 -0
- package/dist/grid-provider/context.d.ts +5 -0
- package/dist/grid-provider/context.js +2 -0
- package/dist/grid-provider/provider.d.ts +3 -0
- package/dist/grid-provider/provider.js +2 -0
- package/dist/grid-provider/use-grid.d.ts +3 -0
- package/dist/grid-provider/use-grid.js +3 -0
- package/dist/grid.d.ts +29 -0
- package/dist/grid.js +38 -0
- package/dist/header/header-cell.d.ts +10 -0
- package/dist/header/header-cell.js +24 -0
- package/dist/header/header-group-cell.d.ts +5 -0
- package/dist/header/header-group-cell.js +14 -0
- package/dist/header/header-row.d.ts +4 -0
- package/dist/header/header-row.js +10 -0
- package/dist/header/header.d.ts +1 -0
- package/dist/header/header.js +10 -0
- package/dist/header/resize-handler.d.ts +12 -0
- package/dist/header/resize-handler.js +128 -0
- package/dist/header/use-drag-move.d.ts +14 -0
- package/dist/header/use-drag-move.js +90 -0
- package/dist/header/use-header-cell-renderer.d.ts +4 -0
- package/dist/header/use-header-cell-renderer.js +36 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.js +6 -3860
- package/dist/license.d.ts +2 -0
- package/dist/license.js +217 -0
- package/dist/listbox/context.d.ts +6 -0
- package/dist/listbox/context.js +3 -0
- package/dist/listbox/item.d.ts +1 -0
- package/dist/listbox/item.js +25 -0
- package/dist/listbox/panel.d.ts +1 -0
- package/dist/listbox/panel.js +50 -0
- package/dist/listbox/root.d.ts +6 -0
- package/dist/listbox/root.js +12 -0
- package/dist/root/dialog-driver.js +21 -0
- package/dist/root/popover-driver.js +21 -0
- package/dist/root/root.d.ts +8 -0
- package/dist/root/root.js +120 -0
- package/dist/row-data-source-client/+constants.d.ts +2 -0
- package/dist/row-data-source-client/+constants.js +2 -0
- package/dist/row-data-source-client/+types.d.ts +27 -0
- package/dist/row-data-source-client/+types.js +1 -0
- package/dist/row-data-source-client/built-ins/avg.d.ts +10 -0
- package/dist/row-data-source-client/built-ins/avg.js +16 -0
- package/dist/row-data-source-client/built-ins/built-ins.d.ts +44 -0
- package/dist/row-data-source-client/built-ins/built-ins.js +44 -0
- package/dist/row-data-source-client/built-ins/count.d.ts +10 -0
- package/dist/row-data-source-client/built-ins/count.js +16 -0
- package/dist/row-data-source-client/built-ins/first.d.ts +10 -0
- package/dist/row-data-source-client/built-ins/first.js +12 -0
- package/dist/row-data-source-client/built-ins/group.d.ts +1 -0
- package/dist/row-data-source-client/built-ins/group.js +3 -0
- package/dist/row-data-source-client/built-ins/last.d.ts +10 -0
- package/dist/row-data-source-client/built-ins/last.js +12 -0
- package/dist/row-data-source-client/built-ins/max.d.ts +11 -0
- package/dist/row-data-source-client/built-ins/max.js +25 -0
- package/dist/row-data-source-client/built-ins/min.d.ts +11 -0
- package/dist/row-data-source-client/built-ins/min.js +25 -0
- package/dist/row-data-source-client/built-ins/sum.d.ts +10 -0
- package/dist/row-data-source-client/built-ins/sum.js +21 -0
- package/dist/row-data-source-client/filter/+types.d.ts +23 -0
- package/dist/row-data-source-client/filter/+types.js +1 -0
- package/dist/row-data-source-client/filter/compute-filtered-rows.d.ts +2 -0
- package/dist/row-data-source-client/filter/compute-filtered-rows.js +109 -0
- package/dist/row-data-source-client/pivots/create-agg-model.d.ts +6 -0
- package/dist/row-data-source-client/pivots/create-agg-model.js +13 -0
- package/dist/row-data-source-client/pivots/create-pivot-columns-from-paths.d.ts +2 -0
- package/dist/row-data-source-client/pivots/create-pivot-columns-from-paths.js +50 -0
- package/dist/row-data-source-client/pivots/create-pivot-columns.d.ts +2 -0
- package/dist/row-data-source-client/pivots/create-pivot-columns.js +22 -0
- package/dist/row-data-source-client/pivots/create-pivot-tree.d.ts +2 -0
- package/dist/row-data-source-client/pivots/create-pivot-tree.js +23 -0
- package/dist/row-data-source-client/tree/client-tree.d.ts +18 -0
- package/dist/row-data-source-client/tree/client-tree.js +76 -0
- package/dist/row-data-source-client/tree/evaluator-aggregation.d.ts +2 -0
- package/dist/row-data-source-client/tree/evaluator-aggregation.js +8 -0
- package/dist/row-data-source-client/tree/evaluator-group.d.ts +2 -0
- package/dist/row-data-source-client/tree/evaluator-group.js +9 -0
- package/dist/row-data-source-client/tree/traverse.d.ts +2 -0
- package/dist/row-data-source-client/tree/traverse.js +22 -0
- package/dist/row-data-source-client/use-client-data-source-paginated.d.ts +10 -0
- package/dist/row-data-source-client/use-client-data-source-paginated.js +538 -0
- package/dist/row-data-source-client/use-client-data-source.d.ts +10 -0
- package/dist/row-data-source-client/use-client-data-source.js +667 -0
- package/dist/row-data-source-client/use-client-tree-data-source.d.ts +9 -0
- package/dist/row-data-source-client/use-client-tree-data-source.js +513 -0
- package/dist/row-data-source-server/async-tree/+constants.async-tree.d.ts +1 -0
- package/dist/row-data-source-server/async-tree/+constants.async-tree.js +1 -0
- package/dist/row-data-source-server/async-tree/+types.async-tree.d.ts +59 -0
- package/dist/row-data-source-server/async-tree/+types.async-tree.js +1 -0
- package/dist/row-data-source-server/async-tree/apply-delete-action-to-tree.d.ts +2 -0
- package/dist/row-data-source-server/async-tree/apply-delete-action-to-tree.js +27 -0
- package/dist/row-data-source-server/async-tree/apply-set-action-to-tree.d.ts +2 -0
- package/dist/row-data-source-server/async-tree/apply-set-action-to-tree.js +36 -0
- package/dist/row-data-source-server/async-tree/check-set-action-item-keys-are-unique.d.ts +2 -0
- package/dist/row-data-source-server/async-tree/check-set-action-item-keys-are-unique.js +24 -0
- package/dist/row-data-source-server/async-tree/check-set-action-item-keys-are-valid.d.ts +2 -0
- package/dist/row-data-source-server/async-tree/check-set-action-item-keys-are-valid.js +14 -0
- package/dist/row-data-source-server/async-tree/check-set-action-item-keys-fit.d.ts +2 -0
- package/dist/row-data-source-server/async-tree/check-set-action-item-keys-fit.js +18 -0
- package/dist/row-data-source-server/async-tree/check-set-action-item-kinds.d.ts +2 -0
- package/dist/row-data-source-server/async-tree/check-set-action-item-kinds.js +14 -0
- package/dist/row-data-source-server/async-tree/get-parent-node-by-path.d.ts +2 -0
- package/dist/row-data-source-server/async-tree/get-parent-node-by-path.js +18 -0
- package/dist/row-data-source-server/async-tree/is-set-action-a-no-op-on-node.d.ts +2 -0
- package/dist/row-data-source-server/async-tree/is-set-action-a-no-op-on-node.js +3 -0
- package/dist/row-data-source-server/async-tree/make-async-tree.d.ts +2 -0
- package/dist/row-data-source-server/async-tree/make-async-tree.js +19 -0
- package/dist/row-data-source-server/async-tree/maybe-apply-parent-remove-self.d.ts +2 -0
- package/dist/row-data-source-server/async-tree/maybe-apply-parent-remove-self.js +8 -0
- package/dist/row-data-source-server/async-tree/maybe-apply-resize.d.ts +2 -0
- package/dist/row-data-source-server/async-tree/maybe-apply-resize.js +17 -0
- package/dist/row-data-source-server/async-tree/maybe-apply-set-action-items.d.ts +2 -0
- package/dist/row-data-source-server/async-tree/maybe-apply-set-action-items.js +51 -0
- package/dist/row-data-source-server/range-tree/range-tree.d.ts +66 -0
- package/dist/row-data-source-server/range-tree/range-tree.js +102 -0
- package/dist/row-data-source-server/use-server-data-source.d.ts +3 -0
- package/dist/row-data-source-server/use-server-data-source.js +679 -0
- package/dist/row-data-source-server/utils/get-node-depth.d.ts +2 -0
- package/dist/row-data-source-server/utils/get-node-depth.js +9 -0
- package/dist/row-data-source-server/utils/get-node-path.d.ts +2 -0
- package/dist/row-data-source-server/utils/get-node-path.js +9 -0
- package/dist/row-data-source-server/utils/get-request-id.d.ts +1 -0
- package/dist/row-data-source-server/utils/get-request-id.js +6 -0
- package/dist/rows/row/context.d.ts +6 -0
- package/dist/rows/row/context.js +3 -0
- package/dist/rows/row/row.d.ts +7 -0
- package/dist/rows/row/row.js +16 -0
- package/dist/rows/row/use-row-context-value.d.ts +6 -0
- package/dist/rows/row/use-row-context-value.js +29 -0
- package/dist/rows/row-detail-row.d.ts +4 -0
- package/dist/rows/row-detail-row.js +131 -0
- package/dist/rows/row-full-width.d.ts +8 -0
- package/dist/rows/row-full-width.js +17 -0
- package/dist/rows/rows-container.d.ts +1 -0
- package/dist/rows/rows-container.js +9 -0
- package/dist/rows/rows-sections.d.ts +3 -0
- package/dist/rows/rows-sections.js +27 -0
- package/dist/rows/scrollers/native-scroller.d.ts +2 -0
- package/dist/rows/scrollers/native-scroller.js +18 -0
- package/dist/{types/sort-manager/use-sort-state.d.ts → sort-manager/+types.d.ts} +5 -2
- package/dist/sort-manager/+types.js +1 -0
- package/dist/sort-manager/context.d.ts +14 -0
- package/dist/sort-manager/context.js +5 -0
- package/dist/sort-manager/hooks/use-sort-manager.d.ts +15 -0
- package/dist/sort-manager/hooks/use-sort-manager.js +56 -0
- package/dist/{types/sort-manager/sort-manager-container.d.ts → sort-manager/hooks/use-sort-row-item.d.ts} +5 -7
- package/dist/sort-manager/hooks/use-sort-row-item.js +145 -0
- package/dist/sort-manager/hooks/use-sortable-column-items.d.ts +5 -0
- package/dist/sort-manager/hooks/use-sortable-column-items.js +13 -0
- package/dist/sort-manager/root.d.ts +3 -0
- package/dist/sort-manager/root.js +14 -0
- package/dist/sort-manager/sort-add.d.ts +8 -0
- package/dist/sort-manager/sort-add.js +14 -0
- package/dist/sort-manager/sort-apply.d.ts +7 -0
- package/dist/sort-manager/sort-apply.js +24 -0
- package/dist/sort-manager/sort-cancel.d.ts +7 -0
- package/dist/sort-manager/sort-cancel.js +27 -0
- package/dist/sort-manager/sort-clear.d.ts +7 -0
- package/dist/sort-manager/sort-clear.js +22 -0
- package/dist/sort-manager/sort-column-select.d.ts +10 -0
- package/dist/sort-manager/sort-column-select.js +20 -0
- package/dist/sort-manager/sort-direction-select.d.ts +10 -0
- package/dist/sort-manager/sort-direction-select.js +24 -0
- package/dist/sort-manager/sort-manager.d.ts +16 -0
- package/dist/sort-manager/sort-manager.js +26 -0
- package/dist/sort-manager/sort-remove.d.ts +7 -0
- package/dist/sort-manager/sort-remove.js +14 -0
- package/dist/sort-manager/sort-row.d.ts +5 -0
- package/dist/sort-manager/sort-row.js +7 -0
- package/dist/sort-manager/sort-rows.d.ts +1 -0
- package/dist/sort-manager/sort-rows.js +6 -0
- package/dist/sort-manager/sort-value-select.d.ts +11 -0
- package/dist/sort-manager/sort-value-select.js +25 -0
- package/dist/sort-manager/utils/sort-item-to-sort-model.d.ts +3 -0
- package/dist/sort-manager/utils/sort-item-to-sort-model.js +57 -0
- package/dist/sort-manager/utils/sort-model-to-sort-items.d.ts +3 -0
- package/dist/sort-manager/utils/sort-model-to-sort-items.js +49 -0
- package/dist/state/+types.d.ts +34 -0
- package/dist/state/+types.js +1 -0
- package/dist/state/api/column-autosize.d.ts +5 -0
- package/dist/state/api/column-autosize.js +72 -0
- package/dist/state/api/column-by-id.d.ts +2 -0
- package/dist/state/api/column-by-id.js +6 -0
- package/dist/state/api/column-field.d.ts +2 -0
- package/dist/state/api/column-field.js +23 -0
- package/dist/state/api/column-from-index.d.ts +2 -0
- package/dist/state/api/column-from-index.js +6 -0
- package/dist/state/api/column-group-toggle.d.ts +2 -0
- package/dist/state/api/column-group-toggle.js +10 -0
- package/dist/state/api/column-index.d.ts +2 -0
- package/dist/state/api/column-index.js +7 -0
- package/dist/state/api/column-move.d.ts +2 -0
- package/dist/state/api/column-move.js +49 -0
- package/dist/state/api/column-resize.d.ts +2 -0
- package/dist/state/api/column-resize.js +9 -0
- package/dist/state/api/column-update.d.ts +2 -0
- package/dist/state/api/column-update.js +13 -0
- package/dist/state/api/dialog-frame.d.ts +8 -0
- package/dist/state/api/dialog-frame.js +16 -0
- package/dist/state/api/edit-begin.d.ts +5 -0
- package/dist/state/api/edit-begin.js +91 -0
- package/dist/state/api/edit-end.d.ts +5 -0
- package/dist/state/api/edit-end.js +43 -0
- package/dist/state/api/edit-is-cell-active.d.ts +5 -0
- package/dist/state/api/edit-is-cell-active.js +27 -0
- package/dist/state/api/edit-update.d.ts +5 -0
- package/dist/state/api/edit-update.js +88 -0
- package/dist/state/api/event-listeners.d.ts +5 -0
- package/dist/state/api/event-listeners.js +19 -0
- package/dist/state/api/export-csv.d.ts +3 -0
- package/dist/state/api/export-csv.js +40 -0
- package/dist/state/api/export-data-rect.d.ts +2 -0
- package/dist/state/api/export-data-rect.js +24 -0
- package/dist/state/api/focus-cell.d.ts +5 -0
- package/dist/state/api/focus-cell.js +117 -0
- package/dist/state/api/popover-frame.d.ts +8 -0
- package/dist/state/api/popover-frame.js +16 -0
- package/dist/state/api/position-from-element.d.ts +2 -0
- package/dist/state/api/position-from-element.js +9 -0
- package/dist/state/api/row-by-id.d.ts +2 -0
- package/dist/state/api/row-by-id.js +5 -0
- package/dist/state/api/row-by-index.d.ts +2 -0
- package/dist/state/api/row-by-index.js +9 -0
- package/dist/state/api/row-detail-is-expanded.d.ts +2 -0
- package/dist/state/api/row-detail-is-expanded.js +6 -0
- package/dist/state/api/row-detail-rendered-height.d.ts +5 -0
- package/dist/state/api/row-detail-rendered-height.js +14 -0
- package/dist/state/api/row-detail-toggle.d.ts +2 -0
- package/dist/state/api/row-detail-toggle.js +32 -0
- package/dist/state/api/row-group-apply-expansions.d.ts +2 -0
- package/dist/state/api/row-group-apply-expansions.js +20 -0
- package/dist/state/api/row-group-column-index.d.ts +2 -0
- package/dist/state/api/row-group-column-index.js +14 -0
- package/dist/state/api/row-group-is-expanded.d.ts +2 -0
- package/dist/state/api/row-group-is-expanded.js +15 -0
- package/dist/state/api/row-group-toggle.d.ts +2 -0
- package/dist/state/api/row-group-toggle.js +7 -0
- package/dist/state/api/row-handle-select.d.ts +5 -0
- package/dist/state/api/row-handle-select.js +43 -0
- package/dist/state/api/row-select-all.d.ts +2 -0
- package/dist/state/api/row-select-all.js +17 -0
- package/dist/state/api/row-select.d.ts +5 -0
- package/dist/state/api/row-select.js +35 -0
- package/dist/state/api/row-selected.d.ts +2 -0
- package/dist/state/api/row-selected.js +13 -0
- package/dist/state/api/scroll-into-view.d.ts +5 -0
- package/dist/state/api/scroll-into-view.js +50 -0
- package/dist/state/api/sort-for-column.d.ts +2 -0
- package/dist/state/api/sort-for-column.js +9 -0
- package/dist/state/api/use-row-drag.d.ts +2 -0
- package/dist/state/api/use-row-drag.js +27 -0
- package/dist/state/helpers/cell-row-group.d.ts +2 -0
- package/dist/state/helpers/cell-row-group.js +19 -0
- package/dist/state/helpers/column-add-row-group.d.ts +9 -0
- package/dist/state/helpers/column-add-row-group.js +66 -0
- package/dist/state/helpers/column-layout.d.ts +3 -0
- package/dist/state/helpers/column-layout.js +65 -0
- package/dist/state/helpers/column-marker.d.ts +8 -0
- package/dist/state/helpers/column-marker.js +43 -0
- package/dist/state/helpers/column-view.d.ts +21 -0
- package/dist/state/helpers/column-view.js +33 -0
- package/dist/state/helpers/edit-on-change.d.ts +15 -0
- package/dist/state/helpers/edit-on-change.js +26 -0
- package/dist/state/helpers/empty-row-data-source.d.ts +2 -0
- package/dist/state/helpers/empty-row-data-source.js +17 -0
- package/dist/state/helpers/get-data-rect.d.ts +13 -0
- package/dist/state/helpers/get-data-rect.js +65 -0
- package/dist/state/helpers/get-full-width-callback.d.ts +2 -0
- package/dist/state/helpers/get-full-width-callback.js +8 -0
- package/dist/state/helpers/get-span-callback.d.ts +2 -0
- package/dist/state/helpers/get-span-callback.js +20 -0
- package/dist/state/helpers/resolve-column.d.ts +4 -0
- package/dist/state/helpers/resolve-column.js +22 -0
- package/dist/state/helpers/row-layout/get-focus-criteria.d.ts +17 -0
- package/dist/state/helpers/row-layout/get-focus-criteria.js +62 -0
- package/dist/state/helpers/row-layout/row-layout.d.ts +18 -0
- package/dist/state/helpers/row-layout/row-layout.js +414 -0
- package/dist/state/use-lytenyte.d.ts +3 -0
- package/dist/state/use-lytenyte.js +579 -0
- package/dist/tree-view/branch/branch.d.ts +11 -0
- package/dist/tree-view/branch/branch.js +61 -0
- package/dist/tree-view/branch/use-branch-keys.d.ts +2 -0
- package/dist/tree-view/branch/use-branch-keys.js +87 -0
- package/dist/tree-view/context.d.ts +22 -0
- package/dist/tree-view/context.js +3 -0
- package/dist/tree-view/depth-provider.d.ts +2 -0
- package/dist/tree-view/depth-provider.js +3 -0
- package/dist/tree-view/hooks/use-tree-view-paths.d.ts +2 -0
- package/dist/tree-view/hooks/use-tree-view-paths.js +9 -0
- package/dist/tree-view/index.d.ts +16 -0
- package/dist/tree-view/index.js +16 -0
- package/dist/tree-view/leaf.d.ts +4 -0
- package/dist/tree-view/leaf.js +27 -0
- package/dist/tree-view/navigation/get-all-ids.d.ts +1 -0
- package/dist/tree-view/navigation/get-all-ids.js +7 -0
- package/dist/tree-view/navigation/get-first-node.d.ts +1 -0
- package/dist/tree-view/navigation/get-first-node.js +7 -0
- package/dist/tree-view/navigation/get-last-node.d.ts +1 -0
- package/dist/tree-view/navigation/get-last-node.js +7 -0
- package/dist/tree-view/navigation/get-next-node.d.ts +1 -0
- package/dist/tree-view/navigation/get-next-node.js +13 -0
- package/dist/tree-view/navigation/get-prev-node.d.ts +1 -0
- package/dist/tree-view/navigation/get-prev-node.js +13 -0
- package/dist/tree-view/panel/make-handle-navigation.d.ts +2 -0
- package/dist/tree-view/panel/make-handle-navigation.js +39 -0
- package/dist/tree-view/panel/make-handle-selection.d.ts +2 -0
- package/dist/tree-view/panel/make-handle-selection.js +92 -0
- package/dist/tree-view/panel/make-handle-typeahead.d.ts +1 -0
- package/dist/tree-view/panel/make-handle-typeahead.js +45 -0
- package/dist/tree-view/panel/panel.d.ts +1 -0
- package/dist/tree-view/panel/panel.js +30 -0
- package/dist/tree-view/panel/use-tree-navigation.d.ts +1 -0
- package/dist/tree-view/panel/use-tree-navigation.js +63 -0
- package/dist/tree-view/root.d.ts +17 -0
- package/dist/tree-view/root.js +63 -0
- package/dist/tree-view/utils/get-focusable-nodes.d.ts +1 -0
- package/dist/tree-view/utils/get-focusable-nodes.js +5 -0
- package/dist/tree-view/utils/get-focused-node.d.ts +1 -0
- package/dist/tree-view/utils/get-focused-node.js +14 -0
- package/dist/tree-view/utils/get-ids-between-nodes.d.ts +1 -0
- package/dist/tree-view/utils/get-ids-between-nodes.js +15 -0
- package/dist/tree-view/utils/get-panel.d.ts +1 -0
- package/dist/tree-view/utils/get-panel.js +7 -0
- package/dist/tree-view/utils/get-parent-node.d.ts +1 -0
- package/dist/tree-view/utils/get-parent-node.js +10 -0
- package/dist/tree-view/utils/get-sibling-branches.d.ts +1 -0
- package/dist/tree-view/utils/get-sibling-branches.js +14 -0
- package/dist/tree-view/utils/get-tree-node-id.d.ts +1 -0
- package/dist/tree-view/utils/get-tree-node-id.js +3 -0
- package/dist/tree-view/utils/is-branch-node.d.ts +1 -0
- package/dist/tree-view/utils/is-branch-node.js +3 -0
- package/dist/tree-view/utils/is-leaf-node.d.ts +1 -0
- package/dist/tree-view/utils/is-leaf-node.js +3 -0
- package/dist/tree-view/utils/is-tree-node-disabled.d.ts +1 -0
- package/dist/tree-view/utils/is-tree-node-disabled.js +3 -0
- package/dist/tree-view/utils/select-node.d.ts +2 -0
- package/dist/tree-view/utils/select-node.js +15 -0
- package/dist/tree-view/utils/toggle-all-selections.d.ts +2 -0
- package/dist/tree-view/utils/toggle-all-selections.js +9 -0
- package/dist/tree-view/utils/toggle-selection.d.ts +2 -0
- package/dist/tree-view/utils/toggle-selection.js +21 -0
- package/dist/tree-view/virtualized/force-sync-scrolling.d.ts +2 -0
- package/dist/tree-view/virtualized/force-sync-scrolling.js +23 -0
- package/dist/tree-view/virtualized/get-virtual-tree-paths.d.ts +2 -0
- package/dist/tree-view/virtualized/get-virtual-tree-paths.js +14 -0
- package/dist/tree-view/virtualized/make-virtual-tree.d.ts +31 -0
- package/dist/tree-view/virtualized/make-virtual-tree.js +90 -0
- package/dist/tree-view/virtualized/use-flattened-tree.d.ts +9 -0
- package/dist/tree-view/virtualized/use-flattened-tree.js +36 -0
- package/dist/tree-view/virtualized/use-row-start-and-end.d.ts +2 -0
- package/dist/tree-view/virtualized/use-row-start-and-end.js +27 -0
- package/dist/tree-view/virtualized/use-virtualized-tree.d.ts +22 -0
- package/dist/tree-view/virtualized/use-virtualized-tree.js +100 -0
- package/dist/types/types.d.ts +8 -13
- package/dist/types/types.js +1 -0
- package/dist/utils/cycle-sorts.d.ts +2 -0
- package/dist/utils/cycle-sorts.js +16 -0
- package/dist/viewport/begin-editing.d.ts +5 -0
- package/dist/viewport/begin-editing.js +15 -0
- package/dist/viewport/viewport.d.ts +1 -0
- package/dist/viewport/viewport.js +77 -0
- package/main.css +315 -0
- package/package.json +31 -79
- package/dist/CompositeList-CGRaS6LQ.js +0 -149
- package/dist/DialogPortalContext-C2WZTqJ3.js +0 -47
- package/dist/DirectionContext-DIPP5cAe.js +0 -15
- package/dist/InternalBackdrop-C4RACVzs.js +0 -324
- package/dist/PopoverPortalContext-BdsDjihw.js +0 -26
- package/dist/anchor-context-Cqr_oiJt.js +0 -11
- package/dist/arrow-down-icon-B-3ldODD.js +0 -27
- package/dist/column-manager.js +0 -1228
- package/dist/column-menu-driver-cG-EZgLa.js +0 -491
- package/dist/cross-icon-CEMLAlFX.js +0 -20
- package/dist/dialog.js +0 -506
- package/dist/drag-store-BMsDBUy_.js +0 -1039
- package/dist/filter-manager.js +0 -1057
- package/dist/getPseudoElementBounds-BSHt6WYm.js +0 -26
- package/dist/grid-container.js +0 -18
- package/dist/icons.js +0 -516
- package/dist/lytenyte-pro.css +0 -2167
- package/dist/manage-columns-icon-D4CElo5H.js +0 -146
- package/dist/menu-lIx6h6Vn.js +0 -1885
- package/dist/menu.js +0 -4
- package/dist/more-dots-icon-CzAH3xHG.js +0 -26
- package/dist/pill-BHBLeJ6k.js +0 -1012
- package/dist/pill-manager.js +0 -737
- package/dist/plus-icon-ToqW5CC-.js +0 -15
- package/dist/popover.js +0 -795
- package/dist/proptypes-BjYr2nFr.js +0 -6472
- package/dist/row-group-icon-DFUMye0v.js +0 -186
- package/dist/search-icon-CcG1lqsn.js +0 -86
- package/dist/select-Db5ksjoS.js +0 -2256
- package/dist/separator-BnPPeAk8.js +0 -21
- package/dist/sort-descending-BMtfaa2L.js +0 -34
- package/dist/sort-manager.js +0 -308
- package/dist/tickmark-icon-CoogRMoO.js +0 -51
- package/dist/types/anchor-context/anchor-context.d.ts +0 -6
- package/dist/types/cell-selection/cell-selection-containers.d.ts +0 -3
- package/dist/types/column-manager/column-manager-context.d.ts +0 -12
- package/dist/types/column-manager/column-manager-drag-box-controls.d.ts +0 -1
- package/dist/types/column-manager/column-manager-drag-box-expander.d.ts +0 -1
- package/dist/types/column-manager/column-manager-drag-box-label.d.ts +0 -5
- package/dist/types/column-manager/column-manager-drag-box.d.ts +0 -13
- package/dist/types/column-manager/column-manager-drag-placeholder.d.ts +0 -5
- package/dist/types/column-manager/column-manager-drop-zone.d.ts +0 -10
- package/dist/types/column-manager/column-manager-impl.d.ts +0 -36
- package/dist/types/column-manager/column-manager-pill.d.ts +0 -4
- package/dist/types/column-manager/column-manager-pivot-mode-toggle.d.ts +0 -1
- package/dist/types/column-manager/column-manager-search.d.ts +0 -1
- package/dist/types/column-manager/column-manager-state.d.ts +0 -8
- package/dist/types/column-manager/column-manager-tree-item.d.ts +0 -6
- package/dist/types/column-manager/column-manager-tree.d.ts +0 -11
- package/dist/types/column-manager/column-manager-types.d.ts +0 -1
- package/dist/types/column-manager/column-manager.d.ts +0 -1
- package/dist/types/column-manager/utils/all-leafs.d.ts +0 -3
- package/dist/types/column-manager/utils/can-hide-item.d.ts +0 -3
- package/dist/types/column-manager/utils/handle-item-hide.d.ts +0 -3
- package/dist/types/components-internal/button/button.d.ts +0 -9
- package/dist/types/components-internal/grid-frame/grid-frame.d.ts +0 -11
- package/dist/types/components-internal/radio/radio.d.ts +0 -5
- package/dist/types/components-internal/separator/separator.d.ts +0 -8
- package/dist/types/components-internal/toggle/toggle.d.ts +0 -7
- package/dist/types/dialog/dialog-impl.d.ts +0 -6
- package/dist/types/dialog/dialog.d.ts +0 -8
- package/dist/types/dialog/use-dialog-class.d.ts +0 -1
- package/dist/types/external.d.ts +0 -2
- package/dist/types/filter-manager/combined-to-flat.d.ts +0 -3
- package/dist/types/filter-manager/components/apply-filter-button.d.ts +0 -1
- package/dist/types/filter-manager/components/clear-filter-button.d.ts +0 -1
- package/dist/types/filter-manager/components/flatten-tree-items.d.ts +0 -4
- package/dist/types/filter-manager/components/get-child-values.d.ts +0 -2
- package/dist/types/filter-manager/components/in-filter-container.d.ts +0 -1
- package/dist/types/filter-manager/components/in-filter-error.d.ts +0 -5
- package/dist/types/filter-manager/components/in-filter-loading.d.ts +0 -1
- package/dist/types/filter-manager/components/in-filter-root.d.ts +0 -11
- package/dist/types/filter-manager/components/in-filter-tree.d.ts +0 -15
- package/dist/types/filter-manager/components/simple-filter-additional-switch.d.ts +0 -1
- package/dist/types/filter-manager/components/simple-filter-operator/date-operator.d.ts +0 -1
- package/dist/types/filter-manager/components/simple-filter-operator/number-operator.d.ts +0 -1
- package/dist/types/filter-manager/components/simple-filter-operator/simple-filter-operator.d.ts +0 -1
- package/dist/types/filter-manager/components/simple-filter-operator/text-operator.d.ts +0 -1
- package/dist/types/filter-manager/components/simple-filter-root.d.ts +0 -9
- package/dist/types/filter-manager/components/simple-filter-value/date-value.d.ts +0 -1
- package/dist/types/filter-manager/components/simple-filter-value/number-value.d.ts +0 -1
- package/dist/types/filter-manager/components/simple-filter-value/simple-filter-value.d.ts +0 -1
- package/dist/types/filter-manager/components/simple-filter-value/text-value.d.ts +0 -1
- package/dist/types/filter-manager/components/use-date-filter-callbacks.d.ts +0 -9
- package/dist/types/filter-manager/components/use-in-filter-item-loader.d.ts +0 -7
- package/dist/types/filter-manager/components/use-number-filter-callbacks.d.ts +0 -8
- package/dist/types/filter-manager/components/use-text-filter-callbacks.d.ts +0 -8
- package/dist/types/filter-manager/filter-manager-impl.d.ts +0 -27
- package/dist/types/filter-manager/filter-manager.d.ts +0 -1
- package/dist/types/filter-manager/filter-state-context.d.ts +0 -16
- package/dist/types/filter-manager/flat-to-combined.d.ts +0 -3
- package/dist/types/filter-manager/flatten-combined-filter.d.ts +0 -3
- package/dist/types/filter-manager/is-filter-complete.d.ts +0 -2
- package/dist/types/filter-manager/types.d.ts +0 -15
- package/dist/types/filter-manager/use-in-filter.d.ts +0 -5
- package/dist/types/filter-manager/use-simple-filters.d.ts +0 -8
- package/dist/types/grid-container/grid-container-impl.d.ts +0 -6
- package/dist/types/grid-container/grid-container.d.ts +0 -2
- package/dist/types/header-cell/header-cell-default.d.ts +0 -2
- package/dist/types/icons.d.ts +0 -1
- package/dist/types/index.d.ts +0 -8
- package/dist/types/license.d.ts +0 -12
- package/dist/types/list-view/list-view-context.d.ts +0 -21
- package/dist/types/list-view/list-view.d.ts +0 -26
- package/dist/types/lytenyte-pro.d.ts +0 -7
- package/dist/types/menu/arrow-svg.d.ts +0 -1
- package/dist/types/menu/column-menu/column-menu-driver.d.ts +0 -4
- package/dist/types/menu/context-menu/context-menu-driver.d.ts +0 -1
- package/dist/types/menu/context-menu/use-context-menu-listener.d.ts +0 -6
- package/dist/types/menu/menu-impl.d.ts +0 -18
- package/dist/types/menu/menu.d.ts +0 -19
- package/dist/types/menu/use-menu-class-name.d.ts +0 -1
- package/dist/types/menu-frame/menu-frame-driver.d.ts +0 -1
- package/dist/types/overlay/load-error-overlay.d.ts +0 -1
- package/dist/types/overlay/loading-overlay.d.ts +0 -1
- package/dist/types/overlay/no-data-overlay.d.ts +0 -1
- package/dist/types/overlay/overlay-driver.d.ts +0 -1
- package/dist/types/pill/pill.d.ts +0 -5
- package/dist/types/pill-manager/pill-manager-agg-menu.d.ts +0 -7
- package/dist/types/pill-manager/pill-manager-controls.d.ts +0 -9
- package/dist/types/pill-manager/pill-manager-drag-placeholder.d.ts +0 -5
- package/dist/types/pill-manager/pill-manager-expander.d.ts +0 -1
- package/dist/types/pill-manager/pill-manager-impl.d.ts +0 -50
- package/dist/types/pill-manager/pill-manager-pill.d.ts +0 -5
- package/dist/types/pill-manager/pill-manager-pills/pill-manager-pills.d.ts +0 -2
- package/dist/types/pill-manager/pill-manager-pills/use-aggregation-source.d.ts +0 -2
- package/dist/types/pill-manager/pill-manager-pills/use-column-pivot-source.d.ts +0 -2
- package/dist/types/pill-manager/pill-manager-pills/use-column-source.d.ts +0 -2
- package/dist/types/pill-manager/pill-manager-pills/use-measures-source.d.ts +0 -2
- package/dist/types/pill-manager/pill-manager-pills/use-row-groups-source.d.ts +0 -2
- package/dist/types/pill-manager/pill-manager-pills/utils.d.ts +0 -3
- package/dist/types/pill-manager/pill-manager-row-label.d.ts +0 -22
- package/dist/types/pill-manager/pill-manager-row.d.ts +0 -12
- package/dist/types/pill-manager/pill-manager-rows.d.ts +0 -1
- package/dist/types/pill-manager/pill-manager-separator.d.ts +0 -1
- package/dist/types/pill-manager/pill-manager-types.d.ts +0 -36
- package/dist/types/pill-manager/pill-manager.d.ts +0 -1
- package/dist/types/popover/popover-impl.d.ts +0 -8
- package/dist/types/popover/popover.d.ts +0 -10
- package/dist/types/popover/use-popover-class.d.ts +0 -1
- package/dist/types/select/select.d.ts +0 -26
- package/dist/types/sort-manager/sort-adder.d.ts +0 -4
- package/dist/types/sort-manager/sort-apply.d.ts +0 -1
- package/dist/types/sort-manager/sort-cancel.d.ts +0 -1
- package/dist/types/sort-manager/sort-clear.d.ts +0 -1
- package/dist/types/sort-manager/sort-column-select.d.ts +0 -6
- package/dist/types/sort-manager/sort-direction-select.d.ts +0 -6
- package/dist/types/sort-manager/sort-items-to-sort-model.d.ts +0 -3
- package/dist/types/sort-manager/sort-manager-context.d.ts +0 -4
- package/dist/types/sort-manager/sort-manager-impl.d.ts +0 -32
- package/dist/types/sort-manager/sort-manager.d.ts +0 -1
- package/dist/types/sort-manager/sort-model-to-sort-items.d.ts +0 -4
- package/dist/types/sort-manager/sort-remove.d.ts +0 -4
- package/dist/types/sort-manager/sort-sort-select.d.ts +0 -6
- package/dist/types/sort-manager/use-sortable-column-items.d.ts +0 -9
- package/dist/types/use-client-data-source.d.ts +0 -6
- package/dist/types/use-edge-scroll.d.ts +0 -7
- package/dist/types/use-grid.d.ts +0 -6
- package/dist/types/use-lytenyte.d.ts +0 -11
- package/dist/types/use-server-data-source.d.ts +0 -3
- package/dist/types/use-tree-data-source.d.ts +0 -3
- package/dist/types/watermark.d.ts +0 -3
- package/dist/types.js +0 -1
- package/dist/useAnchorPositioning-52zK7jlD.js +0 -241
- package/dist/useButton-DWXzFgcr.js +0 -184
- package/dist/useScrollLock-D4UY33Sb.js +0 -425
- /package/dist/{types/cell-selection → cell-selection}/cell-selection-driver.d.ts +0 -0
- /package/dist/{types/dialog → root}/dialog-driver.d.ts +0 -0
- /package/dist/{types/popover → root}/popover-driver.d.ts +0 -0
package/dist/select-Db5ksjoS.js
DELETED
|
@@ -1,2256 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { clsx } from "@1771technologies/js-utils";
|
|
3
|
-
import { A as ArrowDownIcon } from "./arrow-down-icon-B-3ldODD.js";
|
|
4
|
-
import { c as CheckMark } from "./drag-store-BMsDBUy_.js";
|
|
5
|
-
import "@1771technologies/react-sizer";
|
|
6
|
-
import "@1771technologies/react-utils";
|
|
7
|
-
import "@1771technologies/grid-provider";
|
|
8
|
-
import * as React from "react";
|
|
9
|
-
import "@1771technologies/react-dragon";
|
|
10
|
-
import "@1771technologies/grid-core";
|
|
11
|
-
import { j as useEventCallback, m as mergeProps, d as useEnhancedEffect, n as useOpenChangeComplete, p as useFloatingRootContext, v as useClick, w as useDismiss, x as useRole, y as useListNavigation, z as useTypeahead, A as useInteractions, P as PropTypes, E as contains, F as FloatingPortal, H as HTMLElementType, r as refType, D as FloatingFocusManager, u as useLatestRef } from "./proptypes-BjYr2nFr.js";
|
|
12
|
-
import { b as useBaseUiId, u as useForkRef, c as pressableTriggerOpenStateMapping, a as useComponentRenderer, p as popupStateMapping, I as InternalBackdrop, t as transitionStatusMapping } from "./InternalBackdrop-C4RACVzs.js";
|
|
13
|
-
import { u as useControlled, a as useTransitionStatus, o as ownerDocument, b as useScrollLock, d as ownerWindow, i as isWebKit } from "./useScrollLock-D4UY33Sb.js";
|
|
14
|
-
import { w as warn, u as useButton } from "./useButton-DWXzFgcr.js";
|
|
15
|
-
import { g as getPseudoElementBounds } from "./getPseudoElementBounds-BSHt6WYm.js";
|
|
16
|
-
import { C as CompositeList, u as useCompositeListItem } from "./CompositeList-CGRaS6LQ.js";
|
|
17
|
-
import { u as useAnchorPositioning } from "./useAnchorPositioning-52zK7jlD.js";
|
|
18
|
-
let FieldControlDataAttributes = /* @__PURE__ */ function(FieldControlDataAttributes2) {
|
|
19
|
-
FieldControlDataAttributes2["disabled"] = "data-disabled";
|
|
20
|
-
FieldControlDataAttributes2["valid"] = "data-valid";
|
|
21
|
-
FieldControlDataAttributes2["invalid"] = "data-invalid";
|
|
22
|
-
FieldControlDataAttributes2["touched"] = "data-touched";
|
|
23
|
-
FieldControlDataAttributes2["dirty"] = "data-dirty";
|
|
24
|
-
FieldControlDataAttributes2["filled"] = "data-filled";
|
|
25
|
-
FieldControlDataAttributes2["focused"] = "data-focused";
|
|
26
|
-
return FieldControlDataAttributes2;
|
|
27
|
-
}({});
|
|
28
|
-
const DEFAULT_VALIDITY_STATE = {
|
|
29
|
-
badInput: false,
|
|
30
|
-
customError: false,
|
|
31
|
-
patternMismatch: false,
|
|
32
|
-
rangeOverflow: false,
|
|
33
|
-
rangeUnderflow: false,
|
|
34
|
-
stepMismatch: false,
|
|
35
|
-
tooLong: false,
|
|
36
|
-
tooShort: false,
|
|
37
|
-
typeMismatch: false,
|
|
38
|
-
valid: null,
|
|
39
|
-
valueMissing: false
|
|
40
|
-
};
|
|
41
|
-
const fieldValidityMapping = {
|
|
42
|
-
valid(value) {
|
|
43
|
-
if (value === null) {
|
|
44
|
-
return null;
|
|
45
|
-
}
|
|
46
|
-
if (value) {
|
|
47
|
-
return {
|
|
48
|
-
[FieldControlDataAttributes.valid]: ""
|
|
49
|
-
};
|
|
50
|
-
}
|
|
51
|
-
return {
|
|
52
|
-
[FieldControlDataAttributes.invalid]: ""
|
|
53
|
-
};
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
const NOOP = () => {
|
|
57
|
-
};
|
|
58
|
-
const FieldRootContext = /* @__PURE__ */ React.createContext({
|
|
59
|
-
invalid: void 0,
|
|
60
|
-
controlId: void 0,
|
|
61
|
-
setControlId: NOOP,
|
|
62
|
-
labelId: void 0,
|
|
63
|
-
setLabelId: NOOP,
|
|
64
|
-
messageIds: [],
|
|
65
|
-
setMessageIds: NOOP,
|
|
66
|
-
name: void 0,
|
|
67
|
-
validityData: {
|
|
68
|
-
state: DEFAULT_VALIDITY_STATE,
|
|
69
|
-
errors: [],
|
|
70
|
-
error: "",
|
|
71
|
-
value: "",
|
|
72
|
-
initialValue: null
|
|
73
|
-
},
|
|
74
|
-
setValidityData: NOOP,
|
|
75
|
-
disabled: void 0,
|
|
76
|
-
touched: false,
|
|
77
|
-
setTouched: NOOP,
|
|
78
|
-
dirty: false,
|
|
79
|
-
setDirty: NOOP,
|
|
80
|
-
filled: false,
|
|
81
|
-
setFilled: NOOP,
|
|
82
|
-
focused: false,
|
|
83
|
-
setFocused: NOOP,
|
|
84
|
-
validate: () => null,
|
|
85
|
-
validationMode: "onBlur",
|
|
86
|
-
validationDebounceTime: 0,
|
|
87
|
-
state: {
|
|
88
|
-
disabled: false,
|
|
89
|
-
valid: null,
|
|
90
|
-
touched: false,
|
|
91
|
-
dirty: false,
|
|
92
|
-
filled: false,
|
|
93
|
-
focused: false
|
|
94
|
-
},
|
|
95
|
-
markedDirtyRef: {
|
|
96
|
-
current: false
|
|
97
|
-
}
|
|
98
|
-
});
|
|
99
|
-
if (process.env.NODE_ENV !== "production") {
|
|
100
|
-
FieldRootContext.displayName = "FieldRootContext";
|
|
101
|
-
}
|
|
102
|
-
function useFieldRootContext(optional = true) {
|
|
103
|
-
const context = React.useContext(FieldRootContext);
|
|
104
|
-
if (context.setControlId === NOOP && !optional) {
|
|
105
|
-
throw new Error("Base UI: FieldRootContext is missing. Field parts must be placed within <Field.Root>.");
|
|
106
|
-
}
|
|
107
|
-
return context;
|
|
108
|
-
}
|
|
109
|
-
const FormContext = /* @__PURE__ */ React.createContext({
|
|
110
|
-
formRef: {
|
|
111
|
-
current: {
|
|
112
|
-
fields: /* @__PURE__ */ new Map()
|
|
113
|
-
}
|
|
114
|
-
},
|
|
115
|
-
errors: {},
|
|
116
|
-
onClearErrors: () => {
|
|
117
|
-
}
|
|
118
|
-
});
|
|
119
|
-
if (process.env.NODE_ENV !== "production") {
|
|
120
|
-
FormContext.displayName = "FormContext";
|
|
121
|
-
}
|
|
122
|
-
function useFormContext() {
|
|
123
|
-
return React.useContext(FormContext);
|
|
124
|
-
}
|
|
125
|
-
function getCombinedFieldValidityData(validityData, invalid) {
|
|
126
|
-
return {
|
|
127
|
-
...validityData,
|
|
128
|
-
state: {
|
|
129
|
-
...validityData.state,
|
|
130
|
-
valid: !invalid && validityData.state.valid
|
|
131
|
-
}
|
|
132
|
-
};
|
|
133
|
-
}
|
|
134
|
-
const validityKeys = Object.keys(DEFAULT_VALIDITY_STATE);
|
|
135
|
-
function useFieldControlValidation() {
|
|
136
|
-
const {
|
|
137
|
-
setValidityData,
|
|
138
|
-
validate,
|
|
139
|
-
messageIds,
|
|
140
|
-
validityData,
|
|
141
|
-
validationMode,
|
|
142
|
-
validationDebounceTime,
|
|
143
|
-
invalid,
|
|
144
|
-
markedDirtyRef,
|
|
145
|
-
controlId,
|
|
146
|
-
state
|
|
147
|
-
} = useFieldRootContext();
|
|
148
|
-
const {
|
|
149
|
-
formRef
|
|
150
|
-
} = useFormContext();
|
|
151
|
-
const timeoutRef = React.useRef(-1);
|
|
152
|
-
const inputRef = React.useRef(null);
|
|
153
|
-
React.useEffect(() => {
|
|
154
|
-
return () => {
|
|
155
|
-
window.clearTimeout(timeoutRef.current);
|
|
156
|
-
};
|
|
157
|
-
}, []);
|
|
158
|
-
const commitValidation = useEventCallback(async (value) => {
|
|
159
|
-
const element = inputRef.current;
|
|
160
|
-
if (!element) {
|
|
161
|
-
return;
|
|
162
|
-
}
|
|
163
|
-
function getState(el) {
|
|
164
|
-
return validityKeys.reduce((acc, key) => {
|
|
165
|
-
acc[key] = el.validity[key];
|
|
166
|
-
if (!el.validity.customError && !markedDirtyRef.current) {
|
|
167
|
-
acc[key] = key === "valid";
|
|
168
|
-
}
|
|
169
|
-
return acc;
|
|
170
|
-
}, {});
|
|
171
|
-
}
|
|
172
|
-
window.clearTimeout(timeoutRef.current);
|
|
173
|
-
const resultOrPromise = validate(value);
|
|
174
|
-
let result = null;
|
|
175
|
-
if (typeof resultOrPromise === "object" && resultOrPromise !== null && "then" in resultOrPromise) {
|
|
176
|
-
result = await resultOrPromise;
|
|
177
|
-
} else {
|
|
178
|
-
result = resultOrPromise;
|
|
179
|
-
}
|
|
180
|
-
let errorMessage = "";
|
|
181
|
-
if (result !== null) {
|
|
182
|
-
errorMessage = Array.isArray(result) ? result.join("\n") : result;
|
|
183
|
-
}
|
|
184
|
-
element.setCustomValidity(errorMessage);
|
|
185
|
-
const nextState = getState(element);
|
|
186
|
-
let validationErrors = [];
|
|
187
|
-
if (Array.isArray(result)) {
|
|
188
|
-
validationErrors = result;
|
|
189
|
-
} else if (result) {
|
|
190
|
-
validationErrors = [result];
|
|
191
|
-
} else if (element.validationMessage) {
|
|
192
|
-
validationErrors = [element.validationMessage];
|
|
193
|
-
}
|
|
194
|
-
const nextValidityData = {
|
|
195
|
-
value,
|
|
196
|
-
state: nextState,
|
|
197
|
-
error: Array.isArray(result) ? result[0] : result ?? element.validationMessage,
|
|
198
|
-
errors: validationErrors,
|
|
199
|
-
initialValue: validityData.initialValue
|
|
200
|
-
};
|
|
201
|
-
if (controlId) {
|
|
202
|
-
const currentFieldData = formRef.current.fields.get(controlId);
|
|
203
|
-
if (currentFieldData) {
|
|
204
|
-
formRef.current.fields.set(controlId, {
|
|
205
|
-
...currentFieldData,
|
|
206
|
-
...getCombinedFieldValidityData(nextValidityData, invalid)
|
|
207
|
-
});
|
|
208
|
-
}
|
|
209
|
-
}
|
|
210
|
-
setValidityData(nextValidityData);
|
|
211
|
-
});
|
|
212
|
-
const getValidationProps = React.useCallback((externalProps = {}) => mergeProps({
|
|
213
|
-
...messageIds.length && {
|
|
214
|
-
"aria-describedby": messageIds.join(" ")
|
|
215
|
-
},
|
|
216
|
-
...state.valid === false && {
|
|
217
|
-
"aria-invalid": true
|
|
218
|
-
}
|
|
219
|
-
}, externalProps), [messageIds, state.valid]);
|
|
220
|
-
const getInputValidationProps = React.useCallback((externalProps = {}) => mergeProps({
|
|
221
|
-
onChange(event) {
|
|
222
|
-
if (event.nativeEvent.defaultPrevented) {
|
|
223
|
-
return;
|
|
224
|
-
}
|
|
225
|
-
if (invalid || validationMode !== "onChange") {
|
|
226
|
-
return;
|
|
227
|
-
}
|
|
228
|
-
const element = event.currentTarget;
|
|
229
|
-
if (element.value === "") {
|
|
230
|
-
commitValidation(element.value);
|
|
231
|
-
return;
|
|
232
|
-
}
|
|
233
|
-
window.clearTimeout(timeoutRef.current);
|
|
234
|
-
if (validationDebounceTime) {
|
|
235
|
-
timeoutRef.current = window.setTimeout(() => {
|
|
236
|
-
commitValidation(element.value);
|
|
237
|
-
}, validationDebounceTime);
|
|
238
|
-
} else {
|
|
239
|
-
commitValidation(element.value);
|
|
240
|
-
}
|
|
241
|
-
}
|
|
242
|
-
}, getValidationProps(externalProps)), [getValidationProps, invalid, validationMode, validationDebounceTime, commitValidation]);
|
|
243
|
-
return React.useMemo(() => ({
|
|
244
|
-
getValidationProps,
|
|
245
|
-
getInputValidationProps,
|
|
246
|
-
inputRef,
|
|
247
|
-
commitValidation
|
|
248
|
-
}), [getValidationProps, getInputValidationProps, commitValidation]);
|
|
249
|
-
}
|
|
250
|
-
const visuallyHidden = {
|
|
251
|
-
clip: "rect(0 0 0 0)",
|
|
252
|
-
overflow: "hidden",
|
|
253
|
-
whiteSpace: "nowrap",
|
|
254
|
-
position: "fixed",
|
|
255
|
-
top: 0,
|
|
256
|
-
left: 0,
|
|
257
|
-
border: 0,
|
|
258
|
-
padding: 0,
|
|
259
|
-
width: 1,
|
|
260
|
-
height: 1,
|
|
261
|
-
margin: -1
|
|
262
|
-
};
|
|
263
|
-
const EMPTY_ARRAY = [];
|
|
264
|
-
function useSelectRoot(params) {
|
|
265
|
-
const {
|
|
266
|
-
id: idProp,
|
|
267
|
-
disabled = false,
|
|
268
|
-
readOnly = false,
|
|
269
|
-
required = false,
|
|
270
|
-
alignItemToTrigger: alignItemToTriggerParam = true,
|
|
271
|
-
modal = false,
|
|
272
|
-
onOpenChangeComplete
|
|
273
|
-
} = params;
|
|
274
|
-
const {
|
|
275
|
-
setDirty,
|
|
276
|
-
validityData,
|
|
277
|
-
validationMode,
|
|
278
|
-
setControlId,
|
|
279
|
-
setFilled
|
|
280
|
-
} = useFieldRootContext();
|
|
281
|
-
const fieldControlValidation = useFieldControlValidation();
|
|
282
|
-
const id = useBaseUiId(idProp);
|
|
283
|
-
useEnhancedEffect(() => {
|
|
284
|
-
setControlId(id);
|
|
285
|
-
return () => {
|
|
286
|
-
setControlId(void 0);
|
|
287
|
-
};
|
|
288
|
-
}, [id, setControlId]);
|
|
289
|
-
const [value, setValueUnwrapped] = useControlled({
|
|
290
|
-
controlled: params.value,
|
|
291
|
-
default: params.defaultValue,
|
|
292
|
-
name: "Select",
|
|
293
|
-
state: "value"
|
|
294
|
-
});
|
|
295
|
-
const [open, setOpenUnwrapped] = useControlled({
|
|
296
|
-
controlled: params.open,
|
|
297
|
-
default: params.defaultOpen,
|
|
298
|
-
name: "Select",
|
|
299
|
-
state: "open"
|
|
300
|
-
});
|
|
301
|
-
useEnhancedEffect(() => {
|
|
302
|
-
setFilled(value !== null);
|
|
303
|
-
}, [setFilled, value]);
|
|
304
|
-
const [controlledAlignItemToTrigger, setControlledAlignItemToTrigger] = React.useState(alignItemToTriggerParam);
|
|
305
|
-
const listRef = React.useRef([]);
|
|
306
|
-
const labelsRef = React.useRef([]);
|
|
307
|
-
const popupRef = React.useRef(null);
|
|
308
|
-
const valueRef = React.useRef(null);
|
|
309
|
-
const valuesRef = React.useRef([]);
|
|
310
|
-
const typingRef = React.useRef(false);
|
|
311
|
-
const keyboardActiveRef = React.useRef(false);
|
|
312
|
-
const selectedItemTextRef = React.useRef(null);
|
|
313
|
-
const selectionRef = React.useRef({
|
|
314
|
-
allowSelectedMouseUp: false,
|
|
315
|
-
allowUnselectedMouseUp: false,
|
|
316
|
-
allowSelect: false
|
|
317
|
-
});
|
|
318
|
-
const [triggerElement, setTriggerElement] = React.useState(null);
|
|
319
|
-
const [positionerElement, setPositionerElement] = React.useState(null);
|
|
320
|
-
const [activeIndex, setActiveIndex] = React.useState(null);
|
|
321
|
-
const [selectedIndex, setSelectedIndex] = React.useState(null);
|
|
322
|
-
const [label, setLabel] = React.useState("");
|
|
323
|
-
const [touchModality, setTouchModality] = React.useState(false);
|
|
324
|
-
const [scrollUpArrowVisible, setScrollUpArrowVisible] = React.useState(false);
|
|
325
|
-
const [scrollDownArrowVisible, setScrollDownArrowVisible] = React.useState(false);
|
|
326
|
-
const {
|
|
327
|
-
mounted,
|
|
328
|
-
setMounted,
|
|
329
|
-
transitionStatus
|
|
330
|
-
} = useTransitionStatus(open);
|
|
331
|
-
const alignItemToTrigger = Boolean(mounted && controlledAlignItemToTrigger && !touchModality);
|
|
332
|
-
if (!mounted && controlledAlignItemToTrigger !== alignItemToTriggerParam) {
|
|
333
|
-
setControlledAlignItemToTrigger(alignItemToTriggerParam);
|
|
334
|
-
}
|
|
335
|
-
if (!alignItemToTriggerParam || !mounted) {
|
|
336
|
-
if (scrollUpArrowVisible) {
|
|
337
|
-
setScrollUpArrowVisible(false);
|
|
338
|
-
}
|
|
339
|
-
if (scrollDownArrowVisible) {
|
|
340
|
-
setScrollDownArrowVisible(false);
|
|
341
|
-
}
|
|
342
|
-
}
|
|
343
|
-
const setOpen = useEventCallback((nextOpen, event) => {
|
|
344
|
-
params.onOpenChange?.(nextOpen, event);
|
|
345
|
-
setOpenUnwrapped(nextOpen);
|
|
346
|
-
if (!nextOpen && activeIndex !== null) {
|
|
347
|
-
const activeOption = listRef.current[activeIndex];
|
|
348
|
-
queueMicrotask(() => {
|
|
349
|
-
activeOption?.setAttribute("tabindex", "-1");
|
|
350
|
-
});
|
|
351
|
-
}
|
|
352
|
-
});
|
|
353
|
-
const handleUnmount = useEventCallback(() => {
|
|
354
|
-
setMounted(false);
|
|
355
|
-
setActiveIndex(null);
|
|
356
|
-
onOpenChangeComplete?.(false);
|
|
357
|
-
});
|
|
358
|
-
useOpenChangeComplete({
|
|
359
|
-
enabled: !params.actionsRef,
|
|
360
|
-
open,
|
|
361
|
-
ref: popupRef,
|
|
362
|
-
onComplete() {
|
|
363
|
-
if (!open) {
|
|
364
|
-
handleUnmount();
|
|
365
|
-
}
|
|
366
|
-
}
|
|
367
|
-
});
|
|
368
|
-
React.useImperativeHandle(params.actionsRef, () => ({
|
|
369
|
-
unmount: handleUnmount
|
|
370
|
-
}), [handleUnmount]);
|
|
371
|
-
const setValue = useEventCallback((nextValue, event) => {
|
|
372
|
-
params.onValueChange?.(nextValue, event);
|
|
373
|
-
setValueUnwrapped(nextValue);
|
|
374
|
-
setDirty(nextValue !== validityData.initialValue);
|
|
375
|
-
if (validationMode === "onChange") {
|
|
376
|
-
fieldControlValidation.commitValidation(nextValue);
|
|
377
|
-
}
|
|
378
|
-
const index = valuesRef.current.indexOf(nextValue);
|
|
379
|
-
setSelectedIndex(index);
|
|
380
|
-
setLabel(labelsRef.current[index] ?? "");
|
|
381
|
-
});
|
|
382
|
-
const hasRegisteredRef = React.useRef(false);
|
|
383
|
-
const registerSelectedItem = useEventCallback((suppliedIndex) => {
|
|
384
|
-
if (suppliedIndex !== void 0) {
|
|
385
|
-
hasRegisteredRef.current = true;
|
|
386
|
-
}
|
|
387
|
-
const stringValue = typeof value === "string" || value === null ? value : JSON.stringify(value);
|
|
388
|
-
const index = suppliedIndex ?? valuesRef.current.indexOf(stringValue);
|
|
389
|
-
const hasIndex = index !== -1;
|
|
390
|
-
if (hasIndex || value === null) {
|
|
391
|
-
if (hasIndex) {
|
|
392
|
-
setSelectedIndex(index);
|
|
393
|
-
}
|
|
394
|
-
setLabel(hasIndex ? labelsRef.current[index] ?? "" : "");
|
|
395
|
-
} else if (value) {
|
|
396
|
-
warn(`The value \`${stringValue}\` is not present in the select items.`);
|
|
397
|
-
}
|
|
398
|
-
});
|
|
399
|
-
useEnhancedEffect(() => {
|
|
400
|
-
if (!hasRegisteredRef.current) {
|
|
401
|
-
return;
|
|
402
|
-
}
|
|
403
|
-
registerSelectedItem(void 0);
|
|
404
|
-
}, [value, registerSelectedItem]);
|
|
405
|
-
const floatingRootContext = useFloatingRootContext({
|
|
406
|
-
open,
|
|
407
|
-
onOpenChange: setOpen,
|
|
408
|
-
elements: {
|
|
409
|
-
reference: triggerElement,
|
|
410
|
-
floating: positionerElement
|
|
411
|
-
}
|
|
412
|
-
});
|
|
413
|
-
const click = useClick(floatingRootContext, {
|
|
414
|
-
enabled: !readOnly && !disabled,
|
|
415
|
-
event: "mousedown"
|
|
416
|
-
});
|
|
417
|
-
const dismiss = useDismiss(floatingRootContext, {
|
|
418
|
-
bubbles: false,
|
|
419
|
-
outsidePressEvent: "mousedown"
|
|
420
|
-
});
|
|
421
|
-
const role = useRole(floatingRootContext, {
|
|
422
|
-
role: "select"
|
|
423
|
-
});
|
|
424
|
-
const listNavigation = useListNavigation(floatingRootContext, {
|
|
425
|
-
enabled: !readOnly && !disabled,
|
|
426
|
-
listRef,
|
|
427
|
-
activeIndex,
|
|
428
|
-
selectedIndex,
|
|
429
|
-
disabledIndices: EMPTY_ARRAY,
|
|
430
|
-
onNavigate(nextActiveIndex) {
|
|
431
|
-
if (nextActiveIndex === null && !open) {
|
|
432
|
-
return;
|
|
433
|
-
}
|
|
434
|
-
setActiveIndex(nextActiveIndex);
|
|
435
|
-
},
|
|
436
|
-
// Implement our own listeners since `onPointerLeave` on each option fires while scrolling with
|
|
437
|
-
// the `alignItemToTrigger` prop enabled, causing a performance issue on Chrome.
|
|
438
|
-
focusItemOnHover: false
|
|
439
|
-
});
|
|
440
|
-
const typeahead = useTypeahead(floatingRootContext, {
|
|
441
|
-
enabled: !readOnly && !disabled,
|
|
442
|
-
listRef: labelsRef,
|
|
443
|
-
activeIndex,
|
|
444
|
-
selectedIndex,
|
|
445
|
-
onMatch(index) {
|
|
446
|
-
if (open) {
|
|
447
|
-
setActiveIndex(index);
|
|
448
|
-
} else {
|
|
449
|
-
setValue(valuesRef.current[index]);
|
|
450
|
-
}
|
|
451
|
-
},
|
|
452
|
-
onTypingChange(typing) {
|
|
453
|
-
typingRef.current = typing;
|
|
454
|
-
}
|
|
455
|
-
});
|
|
456
|
-
const {
|
|
457
|
-
getReferenceProps: getRootTriggerProps,
|
|
458
|
-
getFloatingProps: getRootPositionerProps,
|
|
459
|
-
getItemProps
|
|
460
|
-
} = useInteractions([click, dismiss, role, listNavigation, typeahead]);
|
|
461
|
-
const rootContext = React.useMemo(() => ({
|
|
462
|
-
id,
|
|
463
|
-
name: params.name,
|
|
464
|
-
required,
|
|
465
|
-
disabled,
|
|
466
|
-
readOnly,
|
|
467
|
-
triggerElement,
|
|
468
|
-
setTriggerElement,
|
|
469
|
-
positionerElement,
|
|
470
|
-
setPositionerElement,
|
|
471
|
-
scrollUpArrowVisible,
|
|
472
|
-
setScrollUpArrowVisible,
|
|
473
|
-
scrollDownArrowVisible,
|
|
474
|
-
setScrollDownArrowVisible,
|
|
475
|
-
setControlledAlignItemToTrigger,
|
|
476
|
-
value,
|
|
477
|
-
setValue,
|
|
478
|
-
open,
|
|
479
|
-
setOpen,
|
|
480
|
-
mounted,
|
|
481
|
-
setMounted,
|
|
482
|
-
label,
|
|
483
|
-
setLabel,
|
|
484
|
-
valueRef,
|
|
485
|
-
valuesRef,
|
|
486
|
-
labelsRef,
|
|
487
|
-
typingRef,
|
|
488
|
-
selectionRef,
|
|
489
|
-
getRootPositionerProps,
|
|
490
|
-
getRootTriggerProps,
|
|
491
|
-
getItemProps,
|
|
492
|
-
listRef,
|
|
493
|
-
popupRef,
|
|
494
|
-
selectedItemTextRef,
|
|
495
|
-
floatingRootContext,
|
|
496
|
-
touchModality,
|
|
497
|
-
setTouchModality,
|
|
498
|
-
alignItemToTrigger,
|
|
499
|
-
transitionStatus,
|
|
500
|
-
fieldControlValidation,
|
|
501
|
-
modal,
|
|
502
|
-
registerSelectedItem,
|
|
503
|
-
onOpenChangeComplete,
|
|
504
|
-
keyboardActiveRef
|
|
505
|
-
}), [id, params.name, required, disabled, readOnly, triggerElement, positionerElement, scrollUpArrowVisible, scrollDownArrowVisible, value, setValue, open, setOpen, mounted, setMounted, label, getRootPositionerProps, getRootTriggerProps, getItemProps, floatingRootContext, touchModality, alignItemToTrigger, transitionStatus, fieldControlValidation, modal, registerSelectedItem, onOpenChangeComplete, keyboardActiveRef]);
|
|
506
|
-
const indexContext = React.useMemo(() => ({
|
|
507
|
-
activeIndex,
|
|
508
|
-
setActiveIndex,
|
|
509
|
-
selectedIndex,
|
|
510
|
-
setSelectedIndex
|
|
511
|
-
}), [activeIndex, selectedIndex, setActiveIndex]);
|
|
512
|
-
return React.useMemo(() => ({
|
|
513
|
-
rootContext,
|
|
514
|
-
indexContext
|
|
515
|
-
}), [rootContext, indexContext]);
|
|
516
|
-
}
|
|
517
|
-
const SelectRootContext = /* @__PURE__ */ React.createContext(null);
|
|
518
|
-
function useSelectRootContext() {
|
|
519
|
-
const context = React.useContext(SelectRootContext);
|
|
520
|
-
if (context === null) {
|
|
521
|
-
throw new Error("useSelectRootContext must be used within a SelectRoot");
|
|
522
|
-
}
|
|
523
|
-
return context;
|
|
524
|
-
}
|
|
525
|
-
const SelectIndexContext = /* @__PURE__ */ React.createContext(void 0);
|
|
526
|
-
function useSelectIndexContext() {
|
|
527
|
-
const context = React.useContext(SelectIndexContext);
|
|
528
|
-
if (context === void 0) {
|
|
529
|
-
throw new Error("Base UI: SelectIndexContext is missing. Select parts must be placed within <Select.Root>.");
|
|
530
|
-
}
|
|
531
|
-
return context;
|
|
532
|
-
}
|
|
533
|
-
const SelectRoot = function SelectRoot2(props) {
|
|
534
|
-
const {
|
|
535
|
-
value: valueProp,
|
|
536
|
-
defaultValue = null,
|
|
537
|
-
onValueChange,
|
|
538
|
-
open,
|
|
539
|
-
defaultOpen = false,
|
|
540
|
-
onOpenChange,
|
|
541
|
-
alignItemToTrigger = true,
|
|
542
|
-
name,
|
|
543
|
-
disabled = false,
|
|
544
|
-
readOnly = false,
|
|
545
|
-
required = false,
|
|
546
|
-
modal = true,
|
|
547
|
-
actionsRef,
|
|
548
|
-
onOpenChangeComplete
|
|
549
|
-
} = props;
|
|
550
|
-
const selectRoot = useSelectRoot({
|
|
551
|
-
value: valueProp,
|
|
552
|
-
defaultValue,
|
|
553
|
-
onValueChange,
|
|
554
|
-
open,
|
|
555
|
-
defaultOpen,
|
|
556
|
-
onOpenChange,
|
|
557
|
-
alignItemToTrigger,
|
|
558
|
-
name,
|
|
559
|
-
disabled,
|
|
560
|
-
readOnly,
|
|
561
|
-
required,
|
|
562
|
-
modal,
|
|
563
|
-
actionsRef,
|
|
564
|
-
onOpenChangeComplete
|
|
565
|
-
});
|
|
566
|
-
const {
|
|
567
|
-
setDirty,
|
|
568
|
-
validityData,
|
|
569
|
-
validationMode
|
|
570
|
-
} = useFieldRootContext();
|
|
571
|
-
const {
|
|
572
|
-
rootContext
|
|
573
|
-
} = selectRoot;
|
|
574
|
-
const value = rootContext.value;
|
|
575
|
-
const serializedValue = React.useMemo(() => {
|
|
576
|
-
if (value == null) {
|
|
577
|
-
return "";
|
|
578
|
-
}
|
|
579
|
-
if (typeof value === "string") {
|
|
580
|
-
return value;
|
|
581
|
-
}
|
|
582
|
-
return JSON.stringify(value);
|
|
583
|
-
}, [value]);
|
|
584
|
-
return /* @__PURE__ */ jsx(SelectRootContext.Provider, {
|
|
585
|
-
value: selectRoot.rootContext,
|
|
586
|
-
children: /* @__PURE__ */ jsxs(SelectIndexContext.Provider, {
|
|
587
|
-
value: selectRoot.indexContext,
|
|
588
|
-
children: [props.children, /* @__PURE__ */ jsx("input", {
|
|
589
|
-
...rootContext.fieldControlValidation.getInputValidationProps({
|
|
590
|
-
onFocus() {
|
|
591
|
-
rootContext.triggerElement?.focus();
|
|
592
|
-
},
|
|
593
|
-
// Handle browser autofill.
|
|
594
|
-
onChange(event) {
|
|
595
|
-
if (event.nativeEvent.defaultPrevented) {
|
|
596
|
-
return;
|
|
597
|
-
}
|
|
598
|
-
const nextValue = event.target.value;
|
|
599
|
-
const exactValue = rootContext.valuesRef.current.find((v) => v === nextValue || typeof value === "string" && nextValue.toLowerCase() === v.toLowerCase());
|
|
600
|
-
if (exactValue != null) {
|
|
601
|
-
setDirty(exactValue !== validityData.initialValue);
|
|
602
|
-
rootContext.setValue?.(exactValue, event.nativeEvent);
|
|
603
|
-
if (validationMode === "onChange") {
|
|
604
|
-
selectRoot.rootContext.fieldControlValidation.commitValidation(exactValue);
|
|
605
|
-
}
|
|
606
|
-
}
|
|
607
|
-
},
|
|
608
|
-
id: rootContext.id,
|
|
609
|
-
name: rootContext.name,
|
|
610
|
-
disabled: rootContext.disabled,
|
|
611
|
-
required: rootContext.required,
|
|
612
|
-
readOnly: rootContext.readOnly,
|
|
613
|
-
value: serializedValue,
|
|
614
|
-
ref: rootContext.fieldControlValidation.inputRef,
|
|
615
|
-
style: visuallyHidden,
|
|
616
|
-
tabIndex: -1,
|
|
617
|
-
"aria-hidden": true
|
|
618
|
-
})
|
|
619
|
-
})]
|
|
620
|
-
})
|
|
621
|
-
});
|
|
622
|
-
};
|
|
623
|
-
process.env.NODE_ENV !== "production" ? SelectRoot.propTypes = {
|
|
624
|
-
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
625
|
-
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
626
|
-
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
627
|
-
// └─────────────────────────────────────────────────────────────────────┘
|
|
628
|
-
/**
|
|
629
|
-
* A ref to imperative actions.
|
|
630
|
-
*/
|
|
631
|
-
actionsRef: PropTypes.shape({
|
|
632
|
-
current: PropTypes.shape({
|
|
633
|
-
unmount: PropTypes.func.isRequired
|
|
634
|
-
}).isRequired
|
|
635
|
-
}),
|
|
636
|
-
/**
|
|
637
|
-
* Determines if the selected item inside the popup should align to the trigger element.
|
|
638
|
-
* @default true
|
|
639
|
-
*/
|
|
640
|
-
alignItemToTrigger: PropTypes.bool,
|
|
641
|
-
/**
|
|
642
|
-
* @ignore
|
|
643
|
-
*/
|
|
644
|
-
children: PropTypes.node,
|
|
645
|
-
/**
|
|
646
|
-
* Whether the select menu is initially open.
|
|
647
|
-
*
|
|
648
|
-
* To render a controlled select menu, use the `open` prop instead.
|
|
649
|
-
* @default false
|
|
650
|
-
*/
|
|
651
|
-
defaultOpen: PropTypes.bool,
|
|
652
|
-
/**
|
|
653
|
-
* The uncontrolled value of the select when it’s initially rendered.
|
|
654
|
-
*
|
|
655
|
-
* To render a controlled select, use the `value` prop instead.
|
|
656
|
-
* @default null
|
|
657
|
-
*/
|
|
658
|
-
defaultValue: PropTypes.any,
|
|
659
|
-
/**
|
|
660
|
-
* Whether the component should ignore user interaction.
|
|
661
|
-
* @default false
|
|
662
|
-
*/
|
|
663
|
-
disabled: PropTypes.bool,
|
|
664
|
-
/**
|
|
665
|
-
* Whether the select should prevent outside clicks and lock page scroll when open.
|
|
666
|
-
* @default true
|
|
667
|
-
*/
|
|
668
|
-
modal: PropTypes.bool,
|
|
669
|
-
/**
|
|
670
|
-
* Identifies the field when a form is submitted.
|
|
671
|
-
*/
|
|
672
|
-
name: PropTypes.string,
|
|
673
|
-
/**
|
|
674
|
-
* Event handler called when the select menu is opened or closed.
|
|
675
|
-
*/
|
|
676
|
-
onOpenChange: PropTypes.func,
|
|
677
|
-
/**
|
|
678
|
-
* Event handler called after any animations complete when the select menu is opened or closed.
|
|
679
|
-
*/
|
|
680
|
-
onOpenChangeComplete: PropTypes.func,
|
|
681
|
-
/**
|
|
682
|
-
* Callback fired when the value of the select changes. Use when controlled.
|
|
683
|
-
*/
|
|
684
|
-
onValueChange: PropTypes.func,
|
|
685
|
-
/**
|
|
686
|
-
* Whether the select menu is currently open.
|
|
687
|
-
*/
|
|
688
|
-
open: PropTypes.bool,
|
|
689
|
-
/**
|
|
690
|
-
* Whether the user should be unable to choose a different option from the select menu.
|
|
691
|
-
* @default false
|
|
692
|
-
*/
|
|
693
|
-
readOnly: PropTypes.bool,
|
|
694
|
-
/**
|
|
695
|
-
* Whether the user must choose a value before submitting a form.
|
|
696
|
-
* @default false
|
|
697
|
-
*/
|
|
698
|
-
required: PropTypes.bool,
|
|
699
|
-
/**
|
|
700
|
-
* The value of the select.
|
|
701
|
-
*/
|
|
702
|
-
value: PropTypes.any
|
|
703
|
-
} : void 0;
|
|
704
|
-
function useSelectTrigger(parameters) {
|
|
705
|
-
const BOUNDARY_OFFSET = 2;
|
|
706
|
-
const {
|
|
707
|
-
disabled = false,
|
|
708
|
-
rootRef: externalRef
|
|
709
|
-
} = parameters;
|
|
710
|
-
const {
|
|
711
|
-
open,
|
|
712
|
-
setOpen,
|
|
713
|
-
setTriggerElement,
|
|
714
|
-
selectionRef,
|
|
715
|
-
value,
|
|
716
|
-
fieldControlValidation,
|
|
717
|
-
setTouchModality,
|
|
718
|
-
positionerElement,
|
|
719
|
-
alignItemToTrigger,
|
|
720
|
-
readOnly
|
|
721
|
-
} = useSelectRootContext();
|
|
722
|
-
const {
|
|
723
|
-
labelId,
|
|
724
|
-
setTouched,
|
|
725
|
-
setFocused,
|
|
726
|
-
validationMode
|
|
727
|
-
} = useFieldRootContext();
|
|
728
|
-
const triggerRef = React.useRef(null);
|
|
729
|
-
const timeoutRef = React.useRef(-1);
|
|
730
|
-
const mergedRef = useForkRef(externalRef, triggerRef);
|
|
731
|
-
const {
|
|
732
|
-
getButtonProps,
|
|
733
|
-
buttonRef
|
|
734
|
-
} = useButton({
|
|
735
|
-
disabled,
|
|
736
|
-
buttonRef: mergedRef
|
|
737
|
-
});
|
|
738
|
-
const handleRef = useForkRef(buttonRef, setTriggerElement);
|
|
739
|
-
React.useEffect(() => {
|
|
740
|
-
if (open) {
|
|
741
|
-
const timeoutId1 = window.setTimeout(() => {
|
|
742
|
-
selectionRef.current.allowSelectedMouseUp = true;
|
|
743
|
-
}, 400);
|
|
744
|
-
const timeoutId2 = window.setTimeout(() => {
|
|
745
|
-
selectionRef.current.allowUnselectedMouseUp = true;
|
|
746
|
-
}, 200);
|
|
747
|
-
return () => {
|
|
748
|
-
clearTimeout(timeoutId1);
|
|
749
|
-
clearTimeout(timeoutId2);
|
|
750
|
-
};
|
|
751
|
-
}
|
|
752
|
-
selectionRef.current = {
|
|
753
|
-
allowSelectedMouseUp: false,
|
|
754
|
-
allowUnselectedMouseUp: false,
|
|
755
|
-
allowSelect: true
|
|
756
|
-
};
|
|
757
|
-
clearTimeout(timeoutRef.current);
|
|
758
|
-
return void 0;
|
|
759
|
-
}, [open, selectionRef]);
|
|
760
|
-
const getTriggerProps = React.useCallback((externalProps) => {
|
|
761
|
-
return mergeProps(
|
|
762
|
-
{
|
|
763
|
-
"aria-labelledby": labelId,
|
|
764
|
-
"aria-readonly": readOnly || void 0,
|
|
765
|
-
tabIndex: disabled ? -1 : 0,
|
|
766
|
-
// this is needed to make the button focused after click in Safari
|
|
767
|
-
ref: handleRef,
|
|
768
|
-
onFocus() {
|
|
769
|
-
setFocused(true);
|
|
770
|
-
if (open && alignItemToTrigger) {
|
|
771
|
-
setOpen(false);
|
|
772
|
-
}
|
|
773
|
-
},
|
|
774
|
-
onBlur() {
|
|
775
|
-
setTouched(true);
|
|
776
|
-
setFocused(false);
|
|
777
|
-
if (validationMode === "onBlur") {
|
|
778
|
-
fieldControlValidation.commitValidation(value);
|
|
779
|
-
}
|
|
780
|
-
},
|
|
781
|
-
onPointerMove({
|
|
782
|
-
pointerType
|
|
783
|
-
}) {
|
|
784
|
-
setTouchModality(pointerType === "touch");
|
|
785
|
-
},
|
|
786
|
-
onPointerDown({
|
|
787
|
-
pointerType
|
|
788
|
-
}) {
|
|
789
|
-
setTouchModality(pointerType === "touch");
|
|
790
|
-
},
|
|
791
|
-
onMouseDown(event) {
|
|
792
|
-
if (open) {
|
|
793
|
-
return;
|
|
794
|
-
}
|
|
795
|
-
const doc = ownerDocument(event.currentTarget);
|
|
796
|
-
function handleMouseUp(mouseEvent) {
|
|
797
|
-
if (!triggerRef.current) {
|
|
798
|
-
return;
|
|
799
|
-
}
|
|
800
|
-
const mouseUpTarget = mouseEvent.target;
|
|
801
|
-
if (contains(triggerRef.current, mouseUpTarget) || contains(positionerElement, mouseUpTarget) || mouseUpTarget === triggerRef.current) {
|
|
802
|
-
return;
|
|
803
|
-
}
|
|
804
|
-
const bounds = getPseudoElementBounds(triggerRef.current);
|
|
805
|
-
if (mouseEvent.clientX >= bounds.left - BOUNDARY_OFFSET && mouseEvent.clientX <= bounds.right + BOUNDARY_OFFSET && mouseEvent.clientY >= bounds.top - BOUNDARY_OFFSET && mouseEvent.clientY <= bounds.bottom + BOUNDARY_OFFSET) {
|
|
806
|
-
return;
|
|
807
|
-
}
|
|
808
|
-
setOpen(false, mouseEvent);
|
|
809
|
-
}
|
|
810
|
-
timeoutRef.current = window.setTimeout(() => {
|
|
811
|
-
doc.addEventListener("mouseup", handleMouseUp, {
|
|
812
|
-
once: true
|
|
813
|
-
});
|
|
814
|
-
});
|
|
815
|
-
}
|
|
816
|
-
},
|
|
817
|
-
fieldControlValidation.getValidationProps(externalProps),
|
|
818
|
-
getButtonProps,
|
|
819
|
-
// ensure nested useButton does not overwrite the combobox role:
|
|
820
|
-
// <Toolbar.Button render={<Select.Trigger />} />
|
|
821
|
-
{
|
|
822
|
-
role: "combobox"
|
|
823
|
-
}
|
|
824
|
-
);
|
|
825
|
-
}, [getButtonProps, fieldControlValidation, labelId, readOnly, disabled, handleRef, setFocused, open, alignItemToTrigger, setOpen, setTouched, setTouchModality, validationMode, value, positionerElement]);
|
|
826
|
-
return React.useMemo(() => ({
|
|
827
|
-
getTriggerProps,
|
|
828
|
-
rootRef: handleRef
|
|
829
|
-
}), [getTriggerProps, handleRef]);
|
|
830
|
-
}
|
|
831
|
-
const SelectTrigger = /* @__PURE__ */ React.forwardRef(function SelectTrigger2(props, forwardedRef) {
|
|
832
|
-
const {
|
|
833
|
-
render,
|
|
834
|
-
className,
|
|
835
|
-
disabled: disabledProp = false,
|
|
836
|
-
...otherProps
|
|
837
|
-
} = props;
|
|
838
|
-
const {
|
|
839
|
-
state: fieldState,
|
|
840
|
-
disabled: fieldDisabled
|
|
841
|
-
} = useFieldRootContext();
|
|
842
|
-
const {
|
|
843
|
-
getRootTriggerProps,
|
|
844
|
-
disabled: selectDisabled,
|
|
845
|
-
mounted
|
|
846
|
-
} = useSelectRootContext();
|
|
847
|
-
const disabled = fieldDisabled || selectDisabled || disabledProp;
|
|
848
|
-
const {
|
|
849
|
-
getTriggerProps
|
|
850
|
-
} = useSelectTrigger({
|
|
851
|
-
disabled,
|
|
852
|
-
rootRef: forwardedRef
|
|
853
|
-
});
|
|
854
|
-
const state = React.useMemo(() => ({
|
|
855
|
-
...fieldState,
|
|
856
|
-
open: mounted,
|
|
857
|
-
disabled
|
|
858
|
-
}), [fieldState, mounted, disabled]);
|
|
859
|
-
const styleHookMapping = React.useMemo(() => ({
|
|
860
|
-
...pressableTriggerOpenStateMapping,
|
|
861
|
-
...fieldValidityMapping
|
|
862
|
-
}), []);
|
|
863
|
-
const {
|
|
864
|
-
renderElement
|
|
865
|
-
} = useComponentRenderer({
|
|
866
|
-
render: render ?? "div",
|
|
867
|
-
className,
|
|
868
|
-
state,
|
|
869
|
-
propGetter: (externalProps) => getTriggerProps(getRootTriggerProps(externalProps)),
|
|
870
|
-
customStyleHookMapping: styleHookMapping,
|
|
871
|
-
extraProps: otherProps
|
|
872
|
-
});
|
|
873
|
-
return renderElement();
|
|
874
|
-
});
|
|
875
|
-
process.env.NODE_ENV !== "production" ? SelectTrigger.propTypes = {
|
|
876
|
-
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
877
|
-
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
878
|
-
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
879
|
-
// └─────────────────────────────────────────────────────────────────────┘
|
|
880
|
-
/**
|
|
881
|
-
* @ignore
|
|
882
|
-
*/
|
|
883
|
-
children: PropTypes.node,
|
|
884
|
-
/**
|
|
885
|
-
* CSS class applied to the element, or a function that
|
|
886
|
-
* returns a class based on the component’s state.
|
|
887
|
-
*/
|
|
888
|
-
className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
889
|
-
/**
|
|
890
|
-
* Whether the component should ignore user interaction.
|
|
891
|
-
* @default false
|
|
892
|
-
*/
|
|
893
|
-
disabled: PropTypes.bool,
|
|
894
|
-
/**
|
|
895
|
-
* Allows you to replace the component’s HTML element
|
|
896
|
-
* with a different tag, or compose it with another component.
|
|
897
|
-
*
|
|
898
|
-
* Accepts a `ReactElement` or a function that returns the element to render.
|
|
899
|
-
*/
|
|
900
|
-
render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
|
|
901
|
-
} : void 0;
|
|
902
|
-
const SelectValue = /* @__PURE__ */ React.forwardRef(function SelectValue2(props, forwardedRef) {
|
|
903
|
-
const {
|
|
904
|
-
className,
|
|
905
|
-
render,
|
|
906
|
-
children,
|
|
907
|
-
placeholder,
|
|
908
|
-
...otherProps
|
|
909
|
-
} = props;
|
|
910
|
-
const {
|
|
911
|
-
value,
|
|
912
|
-
label,
|
|
913
|
-
valueRef
|
|
914
|
-
} = useSelectRootContext();
|
|
915
|
-
const mergedRef = useForkRef(forwardedRef, valueRef);
|
|
916
|
-
const state = React.useMemo(() => ({}), []);
|
|
917
|
-
const getValueProps = React.useCallback((externalProps = {}) => mergeProps({
|
|
918
|
-
children: typeof children === "function" ? children(!label && placeholder ? placeholder : label, value) : label || placeholder
|
|
919
|
-
}, externalProps), [children, label, placeholder, value]);
|
|
920
|
-
const {
|
|
921
|
-
renderElement
|
|
922
|
-
} = useComponentRenderer({
|
|
923
|
-
propGetter: getValueProps,
|
|
924
|
-
render: render ?? "span",
|
|
925
|
-
className,
|
|
926
|
-
state,
|
|
927
|
-
ref: mergedRef,
|
|
928
|
-
extraProps: otherProps
|
|
929
|
-
});
|
|
930
|
-
return renderElement();
|
|
931
|
-
});
|
|
932
|
-
process.env.NODE_ENV !== "production" ? SelectValue.propTypes = {
|
|
933
|
-
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
934
|
-
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
935
|
-
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
936
|
-
// └─────────────────────────────────────────────────────────────────────┘
|
|
937
|
-
/**
|
|
938
|
-
* @ignore
|
|
939
|
-
*/
|
|
940
|
-
children: PropTypes.func,
|
|
941
|
-
/**
|
|
942
|
-
* CSS class applied to the element, or a function that
|
|
943
|
-
* returns a class based on the component’s state.
|
|
944
|
-
*/
|
|
945
|
-
className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
946
|
-
/**
|
|
947
|
-
* A placeholder value to display when no value is selected.
|
|
948
|
-
*
|
|
949
|
-
* You can use this prop to pre-render the displayed text
|
|
950
|
-
* during SSR in order to avoid the hydration flash.
|
|
951
|
-
*/
|
|
952
|
-
placeholder: PropTypes.string,
|
|
953
|
-
/**
|
|
954
|
-
* Allows you to replace the component’s HTML element
|
|
955
|
-
* with a different tag, or compose it with another component.
|
|
956
|
-
*
|
|
957
|
-
* Accepts a `ReactElement` or a function that returns the element to render.
|
|
958
|
-
*/
|
|
959
|
-
render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
|
|
960
|
-
} : void 0;
|
|
961
|
-
const SelectIcon = /* @__PURE__ */ React.forwardRef(function SelectIcon2(props, forwardedRef) {
|
|
962
|
-
const {
|
|
963
|
-
className,
|
|
964
|
-
render,
|
|
965
|
-
...otherProps
|
|
966
|
-
} = props;
|
|
967
|
-
const state = React.useMemo(() => ({}), []);
|
|
968
|
-
const getIconProps = React.useCallback((externalProps) => {
|
|
969
|
-
return mergeProps({
|
|
970
|
-
"aria-hidden": true,
|
|
971
|
-
children: "▼"
|
|
972
|
-
}, externalProps);
|
|
973
|
-
}, []);
|
|
974
|
-
const {
|
|
975
|
-
renderElement
|
|
976
|
-
} = useComponentRenderer({
|
|
977
|
-
propGetter: getIconProps,
|
|
978
|
-
render: render ?? "span",
|
|
979
|
-
ref: forwardedRef,
|
|
980
|
-
className,
|
|
981
|
-
state,
|
|
982
|
-
extraProps: otherProps
|
|
983
|
-
});
|
|
984
|
-
return renderElement();
|
|
985
|
-
});
|
|
986
|
-
process.env.NODE_ENV !== "production" ? SelectIcon.propTypes = {
|
|
987
|
-
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
988
|
-
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
989
|
-
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
990
|
-
// └─────────────────────────────────────────────────────────────────────┘
|
|
991
|
-
/**
|
|
992
|
-
* @ignore
|
|
993
|
-
*/
|
|
994
|
-
children: PropTypes.node,
|
|
995
|
-
/**
|
|
996
|
-
* CSS class applied to the element, or a function that
|
|
997
|
-
* returns a class based on the component’s state.
|
|
998
|
-
*/
|
|
999
|
-
className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
1000
|
-
/**
|
|
1001
|
-
* Allows you to replace the component’s HTML element
|
|
1002
|
-
* with a different tag, or compose it with another component.
|
|
1003
|
-
*
|
|
1004
|
-
* Accepts a `ReactElement` or a function that returns the element to render.
|
|
1005
|
-
*/
|
|
1006
|
-
render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
|
|
1007
|
-
} : void 0;
|
|
1008
|
-
const SelectPortalContext = /* @__PURE__ */ React.createContext(void 0);
|
|
1009
|
-
function SelectPortal(props) {
|
|
1010
|
-
const {
|
|
1011
|
-
children,
|
|
1012
|
-
container
|
|
1013
|
-
} = props;
|
|
1014
|
-
return /* @__PURE__ */ jsx(SelectPortalContext.Provider, {
|
|
1015
|
-
value: true,
|
|
1016
|
-
children: /* @__PURE__ */ jsx(FloatingPortal, {
|
|
1017
|
-
root: container,
|
|
1018
|
-
children
|
|
1019
|
-
})
|
|
1020
|
-
});
|
|
1021
|
-
}
|
|
1022
|
-
process.env.NODE_ENV !== "production" ? SelectPortal.propTypes = {
|
|
1023
|
-
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
1024
|
-
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
1025
|
-
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
1026
|
-
// └─────────────────────────────────────────────────────────────────────┘
|
|
1027
|
-
/**
|
|
1028
|
-
* @ignore
|
|
1029
|
-
*/
|
|
1030
|
-
children: PropTypes.node,
|
|
1031
|
-
/**
|
|
1032
|
-
* A parent element to render the portal element into.
|
|
1033
|
-
*/
|
|
1034
|
-
container: PropTypes.oneOfType([HTMLElementType, refType])
|
|
1035
|
-
} : void 0;
|
|
1036
|
-
function useSelectPositioner(params) {
|
|
1037
|
-
const {
|
|
1038
|
-
open,
|
|
1039
|
-
alignItemToTrigger,
|
|
1040
|
-
mounted,
|
|
1041
|
-
triggerElement,
|
|
1042
|
-
modal
|
|
1043
|
-
} = useSelectRootContext();
|
|
1044
|
-
useScrollLock((alignItemToTrigger || modal) && open, triggerElement);
|
|
1045
|
-
const positioning = useAnchorPositioning({
|
|
1046
|
-
...params,
|
|
1047
|
-
trackAnchor: params.trackAnchor ?? !alignItemToTrigger
|
|
1048
|
-
});
|
|
1049
|
-
const positionerStyles = React.useMemo(() => alignItemToTrigger ? {
|
|
1050
|
-
position: "fixed"
|
|
1051
|
-
} : positioning.positionerStyles, [alignItemToTrigger, positioning.positionerStyles]);
|
|
1052
|
-
const getPositionerProps = React.useCallback((externalProps = {}) => {
|
|
1053
|
-
const hiddenStyles = {};
|
|
1054
|
-
if (!open) {
|
|
1055
|
-
hiddenStyles.pointerEvents = "none";
|
|
1056
|
-
}
|
|
1057
|
-
return mergeProps({
|
|
1058
|
-
role: "presentation",
|
|
1059
|
-
hidden: !mounted,
|
|
1060
|
-
style: {
|
|
1061
|
-
...positionerStyles,
|
|
1062
|
-
...hiddenStyles
|
|
1063
|
-
}
|
|
1064
|
-
}, externalProps);
|
|
1065
|
-
}, [open, mounted, positionerStyles]);
|
|
1066
|
-
return React.useMemo(() => ({
|
|
1067
|
-
...positioning,
|
|
1068
|
-
side: alignItemToTrigger ? "none" : positioning.side,
|
|
1069
|
-
getPositionerProps
|
|
1070
|
-
}), [alignItemToTrigger, getPositionerProps, positioning]);
|
|
1071
|
-
}
|
|
1072
|
-
const SelectPositionerContext = /* @__PURE__ */ React.createContext(null);
|
|
1073
|
-
function useSelectPositionerContext() {
|
|
1074
|
-
const context = React.useContext(SelectPositionerContext);
|
|
1075
|
-
if (context === null) {
|
|
1076
|
-
throw new Error("Base UI: SelectPositionerContext is missing. SelectPositioner parts must be placed within <Select.Positioner>.");
|
|
1077
|
-
}
|
|
1078
|
-
return context;
|
|
1079
|
-
}
|
|
1080
|
-
var _InternalBackdrop;
|
|
1081
|
-
const SelectPositioner = /* @__PURE__ */ React.forwardRef(function SelectPositioner2(props, ref) {
|
|
1082
|
-
const {
|
|
1083
|
-
anchor,
|
|
1084
|
-
positionMethod = "absolute",
|
|
1085
|
-
className,
|
|
1086
|
-
render,
|
|
1087
|
-
side = "bottom",
|
|
1088
|
-
align = "center",
|
|
1089
|
-
sideOffset = 0,
|
|
1090
|
-
alignOffset = 0,
|
|
1091
|
-
collisionBoundary = "clipping-ancestors",
|
|
1092
|
-
collisionPadding,
|
|
1093
|
-
arrowPadding = 5,
|
|
1094
|
-
sticky = false,
|
|
1095
|
-
trackAnchor = true,
|
|
1096
|
-
...otherProps
|
|
1097
|
-
} = props;
|
|
1098
|
-
const {
|
|
1099
|
-
open,
|
|
1100
|
-
mounted,
|
|
1101
|
-
setPositionerElement,
|
|
1102
|
-
listRef,
|
|
1103
|
-
labelsRef,
|
|
1104
|
-
floatingRootContext,
|
|
1105
|
-
modal
|
|
1106
|
-
} = useSelectRootContext();
|
|
1107
|
-
const positioner = useSelectPositioner({
|
|
1108
|
-
anchor,
|
|
1109
|
-
floatingRootContext,
|
|
1110
|
-
positionMethod,
|
|
1111
|
-
mounted,
|
|
1112
|
-
side,
|
|
1113
|
-
sideOffset,
|
|
1114
|
-
align,
|
|
1115
|
-
alignOffset,
|
|
1116
|
-
arrowPadding,
|
|
1117
|
-
collisionBoundary,
|
|
1118
|
-
collisionPadding,
|
|
1119
|
-
sticky,
|
|
1120
|
-
trackAnchor,
|
|
1121
|
-
keepMounted: true
|
|
1122
|
-
});
|
|
1123
|
-
const mergedRef = useForkRef(ref, setPositionerElement);
|
|
1124
|
-
const state = React.useMemo(() => ({
|
|
1125
|
-
open,
|
|
1126
|
-
side: positioner.side,
|
|
1127
|
-
align: positioner.align,
|
|
1128
|
-
anchorHidden: positioner.anchorHidden
|
|
1129
|
-
}), [open, positioner.side, positioner.align, positioner.anchorHidden]);
|
|
1130
|
-
const {
|
|
1131
|
-
renderElement
|
|
1132
|
-
} = useComponentRenderer({
|
|
1133
|
-
propGetter: positioner.getPositionerProps,
|
|
1134
|
-
render: render ?? "div",
|
|
1135
|
-
ref: mergedRef,
|
|
1136
|
-
className,
|
|
1137
|
-
state,
|
|
1138
|
-
customStyleHookMapping: popupStateMapping,
|
|
1139
|
-
extraProps: otherProps
|
|
1140
|
-
});
|
|
1141
|
-
return /* @__PURE__ */ jsx(CompositeList, {
|
|
1142
|
-
elementsRef: listRef,
|
|
1143
|
-
labelsRef,
|
|
1144
|
-
children: /* @__PURE__ */ jsxs(SelectPositionerContext.Provider, {
|
|
1145
|
-
value: positioner,
|
|
1146
|
-
children: [mounted && modal && (_InternalBackdrop || (_InternalBackdrop = /* @__PURE__ */ jsx(InternalBackdrop, {}))), renderElement()]
|
|
1147
|
-
})
|
|
1148
|
-
});
|
|
1149
|
-
});
|
|
1150
|
-
process.env.NODE_ENV !== "production" ? SelectPositioner.propTypes = {
|
|
1151
|
-
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
1152
|
-
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
1153
|
-
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
1154
|
-
// └─────────────────────────────────────────────────────────────────────┘
|
|
1155
|
-
/**
|
|
1156
|
-
* How to align the popup relative to the specified side.
|
|
1157
|
-
* @default 'center'
|
|
1158
|
-
*/
|
|
1159
|
-
align: PropTypes.oneOf(["center", "end", "start"]),
|
|
1160
|
-
/**
|
|
1161
|
-
* Additional offset along the alignment axis in pixels.
|
|
1162
|
-
* Also accepts a function that returns the offset to read the dimensions of the anchor
|
|
1163
|
-
* and positioner elements, along with its side and alignment.
|
|
1164
|
-
*
|
|
1165
|
-
* - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
|
|
1166
|
-
* - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
|
|
1167
|
-
* - `data.side`: which side of the anchor element the positioner is aligned against.
|
|
1168
|
-
* - `data.align`: how the positioner is aligned relative to the specified side.
|
|
1169
|
-
* @default 0
|
|
1170
|
-
*/
|
|
1171
|
-
alignOffset: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
|
|
1172
|
-
/**
|
|
1173
|
-
* An element to position the popup against.
|
|
1174
|
-
* By default, the popup will be positioned against the trigger.
|
|
1175
|
-
*/
|
|
1176
|
-
anchor: PropTypes.oneOfType([HTMLElementType, refType, PropTypes.object, PropTypes.func]),
|
|
1177
|
-
/**
|
|
1178
|
-
* Minimum distance to maintain between the arrow and the edges of the popup.
|
|
1179
|
-
*
|
|
1180
|
-
* Use it to prevent the arrow element from hanging out of the rounded corners of a popup.
|
|
1181
|
-
* @default 5
|
|
1182
|
-
*/
|
|
1183
|
-
arrowPadding: PropTypes.number,
|
|
1184
|
-
/**
|
|
1185
|
-
* @ignore
|
|
1186
|
-
*/
|
|
1187
|
-
children: PropTypes.node,
|
|
1188
|
-
/**
|
|
1189
|
-
* CSS class applied to the element, or a function that
|
|
1190
|
-
* returns a class based on the component’s state.
|
|
1191
|
-
*/
|
|
1192
|
-
className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
1193
|
-
/**
|
|
1194
|
-
* An element or a rectangle that delimits the area that the popup is confined to.
|
|
1195
|
-
* @default 'clipping-ancestors'
|
|
1196
|
-
*/
|
|
1197
|
-
collisionBoundary: PropTypes.oneOfType([HTMLElementType, PropTypes.arrayOf(HTMLElementType), PropTypes.string, PropTypes.shape({
|
|
1198
|
-
height: PropTypes.number,
|
|
1199
|
-
width: PropTypes.number,
|
|
1200
|
-
x: PropTypes.number,
|
|
1201
|
-
y: PropTypes.number
|
|
1202
|
-
})]),
|
|
1203
|
-
/**
|
|
1204
|
-
* Additional space to maintain from the edge of the collision boundary.
|
|
1205
|
-
* @default 5
|
|
1206
|
-
*/
|
|
1207
|
-
collisionPadding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
|
|
1208
|
-
bottom: PropTypes.number,
|
|
1209
|
-
left: PropTypes.number,
|
|
1210
|
-
right: PropTypes.number,
|
|
1211
|
-
top: PropTypes.number
|
|
1212
|
-
})]),
|
|
1213
|
-
/**
|
|
1214
|
-
* Determines which CSS `position` property to use.
|
|
1215
|
-
* @default 'absolute'
|
|
1216
|
-
*/
|
|
1217
|
-
positionMethod: PropTypes.oneOf(["absolute", "fixed"]),
|
|
1218
|
-
/**
|
|
1219
|
-
* Allows you to replace the component’s HTML element
|
|
1220
|
-
* with a different tag, or compose it with another component.
|
|
1221
|
-
*
|
|
1222
|
-
* Accepts a `ReactElement` or a function that returns the element to render.
|
|
1223
|
-
*/
|
|
1224
|
-
render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
|
|
1225
|
-
/**
|
|
1226
|
-
* Which side of the anchor element to align the popup against.
|
|
1227
|
-
* May automatically change to avoid collisions.
|
|
1228
|
-
* @default 'bottom'
|
|
1229
|
-
*/
|
|
1230
|
-
side: PropTypes.oneOf(["bottom", "inline-end", "inline-start", "left", "right", "top"]),
|
|
1231
|
-
/**
|
|
1232
|
-
* Distance between the anchor and the popup in pixels.
|
|
1233
|
-
* Also accepts a function that returns the distance to read the dimensions of the anchor
|
|
1234
|
-
* and positioner elements, along with its side and alignment.
|
|
1235
|
-
*
|
|
1236
|
-
* - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
|
|
1237
|
-
* - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
|
|
1238
|
-
* - `data.side`: which side of the anchor element the positioner is aligned against.
|
|
1239
|
-
* - `data.align`: how the positioner is aligned relative to the specified side.
|
|
1240
|
-
* @default 0
|
|
1241
|
-
*/
|
|
1242
|
-
sideOffset: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
|
|
1243
|
-
/**
|
|
1244
|
-
* Whether to maintain the popup in the viewport after
|
|
1245
|
-
* the anchor element was scrolled out of view.
|
|
1246
|
-
* @default false
|
|
1247
|
-
*/
|
|
1248
|
-
sticky: PropTypes.bool,
|
|
1249
|
-
/**
|
|
1250
|
-
* Whether the popup tracks any layout shift of its positioning anchor.
|
|
1251
|
-
* @default true
|
|
1252
|
-
*/
|
|
1253
|
-
trackAnchor: PropTypes.bool
|
|
1254
|
-
} : void 0;
|
|
1255
|
-
function clearPositionerStyles(positionerElement, originalPositionerStyles) {
|
|
1256
|
-
Object.assign(positionerElement.style, originalPositionerStyles);
|
|
1257
|
-
}
|
|
1258
|
-
function useSelectPopup() {
|
|
1259
|
-
const {
|
|
1260
|
-
mounted,
|
|
1261
|
-
id,
|
|
1262
|
-
setOpen,
|
|
1263
|
-
getRootPositionerProps,
|
|
1264
|
-
alignItemToTrigger,
|
|
1265
|
-
triggerElement,
|
|
1266
|
-
positionerElement,
|
|
1267
|
-
valueRef,
|
|
1268
|
-
selectedItemTextRef,
|
|
1269
|
-
popupRef,
|
|
1270
|
-
scrollUpArrowVisible,
|
|
1271
|
-
scrollDownArrowVisible,
|
|
1272
|
-
setScrollUpArrowVisible,
|
|
1273
|
-
setScrollDownArrowVisible,
|
|
1274
|
-
setControlledAlignItemToTrigger,
|
|
1275
|
-
keyboardActiveRef
|
|
1276
|
-
} = useSelectRootContext();
|
|
1277
|
-
const initialHeightRef = React.useRef(0);
|
|
1278
|
-
const reachedMaxHeightRef = React.useRef(false);
|
|
1279
|
-
const maxHeightRef = React.useRef(0);
|
|
1280
|
-
const initialPlacedRef = React.useRef(false);
|
|
1281
|
-
const originalPositionerStylesRef = React.useRef({});
|
|
1282
|
-
const handleScrollArrowVisibility = useEventCallback(() => {
|
|
1283
|
-
if (!alignItemToTrigger || !popupRef.current) {
|
|
1284
|
-
return;
|
|
1285
|
-
}
|
|
1286
|
-
const isScrolledToTop = popupRef.current.scrollTop < 1;
|
|
1287
|
-
const isScrolledToBottom = popupRef.current.scrollTop + popupRef.current.clientHeight >= popupRef.current.scrollHeight - 1;
|
|
1288
|
-
if (scrollUpArrowVisible !== !isScrolledToTop) {
|
|
1289
|
-
setScrollUpArrowVisible(!isScrolledToTop);
|
|
1290
|
-
}
|
|
1291
|
-
if (scrollDownArrowVisible !== !isScrolledToBottom) {
|
|
1292
|
-
setScrollDownArrowVisible(!isScrolledToBottom);
|
|
1293
|
-
}
|
|
1294
|
-
});
|
|
1295
|
-
useEnhancedEffect(() => {
|
|
1296
|
-
if (alignItemToTrigger || !positionerElement || Object.keys(originalPositionerStylesRef.current).length) {
|
|
1297
|
-
return;
|
|
1298
|
-
}
|
|
1299
|
-
originalPositionerStylesRef.current = {
|
|
1300
|
-
top: positionerElement.style.top || "0",
|
|
1301
|
-
left: positionerElement.style.left || "0",
|
|
1302
|
-
right: positionerElement.style.right,
|
|
1303
|
-
height: positionerElement.style.height,
|
|
1304
|
-
bottom: positionerElement.style.bottom,
|
|
1305
|
-
minHeight: positionerElement.style.minHeight,
|
|
1306
|
-
maxHeight: positionerElement.style.maxHeight,
|
|
1307
|
-
marginTop: positionerElement.style.marginTop,
|
|
1308
|
-
marginBottom: positionerElement.style.marginBottom
|
|
1309
|
-
};
|
|
1310
|
-
}, [alignItemToTrigger, positionerElement]);
|
|
1311
|
-
useEnhancedEffect(() => {
|
|
1312
|
-
if (mounted || alignItemToTrigger) {
|
|
1313
|
-
return;
|
|
1314
|
-
}
|
|
1315
|
-
initialPlacedRef.current = false;
|
|
1316
|
-
reachedMaxHeightRef.current = false;
|
|
1317
|
-
initialHeightRef.current = 0;
|
|
1318
|
-
maxHeightRef.current = 0;
|
|
1319
|
-
if (positionerElement) {
|
|
1320
|
-
clearPositionerStyles(positionerElement, originalPositionerStylesRef.current);
|
|
1321
|
-
}
|
|
1322
|
-
}, [mounted, alignItemToTrigger, positionerElement]);
|
|
1323
|
-
useEnhancedEffect(() => {
|
|
1324
|
-
if (!mounted || !alignItemToTrigger || !triggerElement || !positionerElement || !popupRef.current) {
|
|
1325
|
-
return;
|
|
1326
|
-
}
|
|
1327
|
-
const positionerStyles = getComputedStyle(positionerElement);
|
|
1328
|
-
const popupStyles = getComputedStyle(popupRef.current);
|
|
1329
|
-
const doc = ownerDocument(triggerElement);
|
|
1330
|
-
const win = ownerWindow(positionerElement);
|
|
1331
|
-
const triggerRect = triggerElement.getBoundingClientRect();
|
|
1332
|
-
const positionerRect = positionerElement.getBoundingClientRect();
|
|
1333
|
-
const triggerX = triggerRect.left;
|
|
1334
|
-
const triggerHeight = triggerRect.height;
|
|
1335
|
-
const scrollHeight = popupRef.current.scrollHeight;
|
|
1336
|
-
const borderBottom = parseFloat(popupStyles.borderBottomWidth);
|
|
1337
|
-
const marginTop = parseFloat(positionerStyles.marginTop) || 10;
|
|
1338
|
-
const marginBottom = parseFloat(positionerStyles.marginBottom) || 10;
|
|
1339
|
-
const minHeight = parseFloat(positionerStyles.minHeight) || 100;
|
|
1340
|
-
const paddingLeft = 5;
|
|
1341
|
-
const paddingRight = 5;
|
|
1342
|
-
const triggerCollisionThreshold = 20;
|
|
1343
|
-
const viewportHeight = doc.documentElement.clientHeight - marginTop - marginBottom;
|
|
1344
|
-
const viewportWidth = doc.documentElement.clientWidth;
|
|
1345
|
-
const availableSpaceBeneathTrigger = viewportHeight - triggerRect.bottom + triggerHeight;
|
|
1346
|
-
const textElement = selectedItemTextRef.current;
|
|
1347
|
-
const valueElement = valueRef.current;
|
|
1348
|
-
let offsetX = 0;
|
|
1349
|
-
let offsetY = 0;
|
|
1350
|
-
if (textElement && valueElement) {
|
|
1351
|
-
const valueRect = valueElement.getBoundingClientRect();
|
|
1352
|
-
const textRect = textElement.getBoundingClientRect();
|
|
1353
|
-
const valueLeftFromTriggerLeft = valueRect.left - triggerX;
|
|
1354
|
-
const textLeftFromPositionerLeft = textRect.left - positionerRect.left;
|
|
1355
|
-
const valueCenterFromPositionerTop = valueRect.top - triggerRect.top + valueRect.height / 2;
|
|
1356
|
-
const textCenterFromTriggerTop = textRect.top - positionerRect.top + textRect.height / 2;
|
|
1357
|
-
offsetX = valueLeftFromTriggerLeft - textLeftFromPositionerLeft;
|
|
1358
|
-
offsetY = textCenterFromTriggerTop - valueCenterFromPositionerTop;
|
|
1359
|
-
}
|
|
1360
|
-
const idealHeight = availableSpaceBeneathTrigger + offsetY + marginBottom + borderBottom;
|
|
1361
|
-
let height = Math.min(viewportHeight, idealHeight);
|
|
1362
|
-
const maxHeight = viewportHeight - marginTop - marginBottom;
|
|
1363
|
-
const scrollTop = idealHeight - height;
|
|
1364
|
-
const left = Math.max(paddingLeft, triggerX + offsetX);
|
|
1365
|
-
const maxRight = viewportWidth - paddingRight;
|
|
1366
|
-
const rightOverflow = Math.max(0, left + positionerRect.width - maxRight);
|
|
1367
|
-
positionerElement.style.left = `${left - rightOverflow}px`;
|
|
1368
|
-
positionerElement.style.height = `${height}px`;
|
|
1369
|
-
positionerElement.style.maxHeight = "auto";
|
|
1370
|
-
positionerElement.style.marginTop = `${marginTop}px`;
|
|
1371
|
-
positionerElement.style.marginBottom = `${marginBottom}px`;
|
|
1372
|
-
const maxScrollTop = popupRef.current.scrollHeight - popupRef.current.clientHeight;
|
|
1373
|
-
const isTopPositioned = scrollTop >= maxScrollTop;
|
|
1374
|
-
if (isTopPositioned) {
|
|
1375
|
-
height = Math.min(viewportHeight, positionerRect.height) - (scrollTop - maxScrollTop);
|
|
1376
|
-
}
|
|
1377
|
-
const fallbackToAlignPopupToTrigger = triggerRect.top < triggerCollisionThreshold || triggerRect.bottom > viewportHeight - triggerCollisionThreshold || height < Math.min(scrollHeight, minHeight);
|
|
1378
|
-
const isPinchZoomed = (win.visualViewport?.scale ?? 1) !== 1 && isWebKit();
|
|
1379
|
-
if (fallbackToAlignPopupToTrigger || isPinchZoomed) {
|
|
1380
|
-
initialPlacedRef.current = true;
|
|
1381
|
-
clearPositionerStyles(positionerElement, originalPositionerStylesRef.current);
|
|
1382
|
-
setControlledAlignItemToTrigger(false);
|
|
1383
|
-
return;
|
|
1384
|
-
}
|
|
1385
|
-
if (isTopPositioned) {
|
|
1386
|
-
const topOffset = Math.max(0, viewportHeight - idealHeight);
|
|
1387
|
-
positionerElement.style.top = positionerRect.height >= maxHeight ? "0" : `${topOffset}px`;
|
|
1388
|
-
positionerElement.style.height = `${height}px`;
|
|
1389
|
-
popupRef.current.scrollTop = popupRef.current.scrollHeight - popupRef.current.clientHeight;
|
|
1390
|
-
initialHeightRef.current = Math.max(minHeight, height);
|
|
1391
|
-
} else {
|
|
1392
|
-
positionerElement.style.bottom = "0";
|
|
1393
|
-
initialHeightRef.current = Math.max(minHeight, height);
|
|
1394
|
-
popupRef.current.scrollTop = scrollTop;
|
|
1395
|
-
}
|
|
1396
|
-
if (initialHeightRef.current === viewportHeight) {
|
|
1397
|
-
reachedMaxHeightRef.current = true;
|
|
1398
|
-
}
|
|
1399
|
-
handleScrollArrowVisibility();
|
|
1400
|
-
setTimeout(() => {
|
|
1401
|
-
initialPlacedRef.current = true;
|
|
1402
|
-
});
|
|
1403
|
-
}, [mounted, alignItemToTrigger, positionerElement, triggerElement, valueRef, selectedItemTextRef, popupRef, setScrollUpArrowVisible, setScrollDownArrowVisible, handleScrollArrowVisibility, setControlledAlignItemToTrigger]);
|
|
1404
|
-
React.useEffect(() => {
|
|
1405
|
-
if (!alignItemToTrigger || !positionerElement || !mounted) {
|
|
1406
|
-
return void 0;
|
|
1407
|
-
}
|
|
1408
|
-
const win = ownerWindow(positionerElement);
|
|
1409
|
-
function handleResize() {
|
|
1410
|
-
setOpen(false);
|
|
1411
|
-
}
|
|
1412
|
-
win.addEventListener("resize", handleResize);
|
|
1413
|
-
return () => {
|
|
1414
|
-
win.removeEventListener("resize", handleResize);
|
|
1415
|
-
};
|
|
1416
|
-
}, [setOpen, alignItemToTrigger, positionerElement, mounted]);
|
|
1417
|
-
const getPopupProps = React.useCallback((externalProps = {}) => {
|
|
1418
|
-
return mergeProps({
|
|
1419
|
-
["data-id"]: `${id}-popup`,
|
|
1420
|
-
onKeyDown() {
|
|
1421
|
-
keyboardActiveRef.current = true;
|
|
1422
|
-
},
|
|
1423
|
-
onMouseMove() {
|
|
1424
|
-
keyboardActiveRef.current = false;
|
|
1425
|
-
},
|
|
1426
|
-
onScroll(event) {
|
|
1427
|
-
if (!alignItemToTrigger || !positionerElement || !popupRef.current || !initialPlacedRef.current) {
|
|
1428
|
-
return;
|
|
1429
|
-
}
|
|
1430
|
-
if (reachedMaxHeightRef.current || !alignItemToTrigger) {
|
|
1431
|
-
handleScrollArrowVisibility();
|
|
1432
|
-
return;
|
|
1433
|
-
}
|
|
1434
|
-
const isTopPositioned = positionerElement.style.top === "0px";
|
|
1435
|
-
const isBottomPositioned = positionerElement.style.bottom === "0px";
|
|
1436
|
-
const currentHeight = positionerElement.getBoundingClientRect().height;
|
|
1437
|
-
const doc = ownerDocument(positionerElement);
|
|
1438
|
-
const positionerStyles = getComputedStyle(positionerElement);
|
|
1439
|
-
const marginTop = parseFloat(positionerStyles.marginTop);
|
|
1440
|
-
const marginBottom = parseFloat(positionerStyles.marginBottom);
|
|
1441
|
-
const viewportHeight = doc.documentElement.clientHeight - marginTop - marginBottom;
|
|
1442
|
-
if (isTopPositioned) {
|
|
1443
|
-
const scrollTop = event.currentTarget.scrollTop;
|
|
1444
|
-
const maxScrollTop = event.currentTarget.scrollHeight - event.currentTarget.clientHeight;
|
|
1445
|
-
const diff = maxScrollTop - scrollTop;
|
|
1446
|
-
const nextHeight = Math.min(currentHeight + diff, viewportHeight);
|
|
1447
|
-
positionerElement.style.height = `${Math.min(currentHeight + diff, viewportHeight)}px`;
|
|
1448
|
-
if (nextHeight !== viewportHeight) {
|
|
1449
|
-
event.currentTarget.scrollTop = maxScrollTop;
|
|
1450
|
-
} else {
|
|
1451
|
-
reachedMaxHeightRef.current = true;
|
|
1452
|
-
}
|
|
1453
|
-
} else if (isBottomPositioned) {
|
|
1454
|
-
const scrollTop = event.currentTarget.scrollTop;
|
|
1455
|
-
const minScrollTop = 0;
|
|
1456
|
-
const diff = scrollTop - minScrollTop;
|
|
1457
|
-
const nextHeight = Math.min(currentHeight + diff, viewportHeight);
|
|
1458
|
-
const idealHeight = currentHeight + diff;
|
|
1459
|
-
const overshoot = idealHeight - viewportHeight;
|
|
1460
|
-
positionerElement.style.height = `${Math.min(idealHeight, viewportHeight)}px`;
|
|
1461
|
-
if (nextHeight !== viewportHeight) {
|
|
1462
|
-
event.currentTarget.scrollTop = 0;
|
|
1463
|
-
} else {
|
|
1464
|
-
reachedMaxHeightRef.current = true;
|
|
1465
|
-
if (event.currentTarget.scrollTop < event.currentTarget.scrollHeight - event.currentTarget.clientHeight) {
|
|
1466
|
-
event.currentTarget.scrollTop -= diff - overshoot;
|
|
1467
|
-
}
|
|
1468
|
-
}
|
|
1469
|
-
}
|
|
1470
|
-
handleScrollArrowVisibility();
|
|
1471
|
-
},
|
|
1472
|
-
...alignItemToTrigger && {
|
|
1473
|
-
style: {
|
|
1474
|
-
position: "relative",
|
|
1475
|
-
maxHeight: "100%",
|
|
1476
|
-
overflowX: "hidden",
|
|
1477
|
-
overflowY: "auto"
|
|
1478
|
-
}
|
|
1479
|
-
}
|
|
1480
|
-
}, getRootPositionerProps(externalProps));
|
|
1481
|
-
}, [id, alignItemToTrigger, getRootPositionerProps, keyboardActiveRef, positionerElement, popupRef, handleScrollArrowVisibility]);
|
|
1482
|
-
return React.useMemo(() => ({
|
|
1483
|
-
getPopupProps
|
|
1484
|
-
}), [getPopupProps]);
|
|
1485
|
-
}
|
|
1486
|
-
const customStyleHookMapping = {
|
|
1487
|
-
...popupStateMapping,
|
|
1488
|
-
...transitionStatusMapping
|
|
1489
|
-
};
|
|
1490
|
-
const SelectPopup = /* @__PURE__ */ React.forwardRef(function SelectPopup2(props, forwardedRef) {
|
|
1491
|
-
const {
|
|
1492
|
-
render,
|
|
1493
|
-
className,
|
|
1494
|
-
...otherProps
|
|
1495
|
-
} = props;
|
|
1496
|
-
const {
|
|
1497
|
-
id,
|
|
1498
|
-
open,
|
|
1499
|
-
popupRef,
|
|
1500
|
-
transitionStatus,
|
|
1501
|
-
alignItemToTrigger,
|
|
1502
|
-
mounted,
|
|
1503
|
-
modal,
|
|
1504
|
-
onOpenChangeComplete
|
|
1505
|
-
} = useSelectRootContext();
|
|
1506
|
-
const positioner = useSelectPositionerContext();
|
|
1507
|
-
useOpenChangeComplete({
|
|
1508
|
-
open,
|
|
1509
|
-
ref: popupRef,
|
|
1510
|
-
onComplete() {
|
|
1511
|
-
if (open) {
|
|
1512
|
-
onOpenChangeComplete?.(true);
|
|
1513
|
-
}
|
|
1514
|
-
}
|
|
1515
|
-
});
|
|
1516
|
-
const {
|
|
1517
|
-
getPopupProps
|
|
1518
|
-
} = useSelectPopup();
|
|
1519
|
-
const mergedRef = useForkRef(forwardedRef, popupRef);
|
|
1520
|
-
const state = React.useMemo(() => ({
|
|
1521
|
-
open,
|
|
1522
|
-
transitionStatus,
|
|
1523
|
-
side: positioner.side,
|
|
1524
|
-
align: positioner.align
|
|
1525
|
-
}), [open, transitionStatus, positioner]);
|
|
1526
|
-
const {
|
|
1527
|
-
renderElement
|
|
1528
|
-
} = useComponentRenderer({
|
|
1529
|
-
propGetter: getPopupProps,
|
|
1530
|
-
render: render ?? "div",
|
|
1531
|
-
ref: mergedRef,
|
|
1532
|
-
className,
|
|
1533
|
-
state,
|
|
1534
|
-
customStyleHookMapping,
|
|
1535
|
-
extraProps: transitionStatus === "starting" ? mergeProps({
|
|
1536
|
-
style: {
|
|
1537
|
-
transition: "none"
|
|
1538
|
-
}
|
|
1539
|
-
}, otherProps) : otherProps
|
|
1540
|
-
});
|
|
1541
|
-
const popupSelector = `[data-id="${id}-popup"]`;
|
|
1542
|
-
const html = React.useMemo(() => ({
|
|
1543
|
-
__html: `${popupSelector}{scrollbar-width:none}${popupSelector}::-webkit-scrollbar{display:none}`
|
|
1544
|
-
}), [popupSelector]);
|
|
1545
|
-
return /* @__PURE__ */ jsxs(React.Fragment, {
|
|
1546
|
-
children: [id && alignItemToTrigger && /* @__PURE__ */ jsx("style", {
|
|
1547
|
-
// eslint-disable-next-line react/no-danger
|
|
1548
|
-
dangerouslySetInnerHTML: html
|
|
1549
|
-
}), /* @__PURE__ */ jsx(FloatingFocusManager, {
|
|
1550
|
-
context: positioner.context,
|
|
1551
|
-
modal: false,
|
|
1552
|
-
disabled: !mounted,
|
|
1553
|
-
visuallyHiddenDismiss: modal ? "Dismiss popup" : void 0,
|
|
1554
|
-
children: renderElement()
|
|
1555
|
-
})]
|
|
1556
|
-
});
|
|
1557
|
-
});
|
|
1558
|
-
process.env.NODE_ENV !== "production" ? SelectPopup.propTypes = {
|
|
1559
|
-
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
1560
|
-
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
1561
|
-
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
1562
|
-
// └─────────────────────────────────────────────────────────────────────┘
|
|
1563
|
-
/**
|
|
1564
|
-
* @ignore
|
|
1565
|
-
*/
|
|
1566
|
-
children: PropTypes.node,
|
|
1567
|
-
/**
|
|
1568
|
-
* CSS class applied to the element, or a function that
|
|
1569
|
-
* returns a class based on the component’s state.
|
|
1570
|
-
*/
|
|
1571
|
-
className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
1572
|
-
/**
|
|
1573
|
-
* @ignore
|
|
1574
|
-
*/
|
|
1575
|
-
id: PropTypes.string,
|
|
1576
|
-
/**
|
|
1577
|
-
* Allows you to replace the component’s HTML element
|
|
1578
|
-
* with a different tag, or compose it with another component.
|
|
1579
|
-
*
|
|
1580
|
-
* Accepts a `ReactElement` or a function that returns the element to render.
|
|
1581
|
-
*/
|
|
1582
|
-
render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
|
|
1583
|
-
} : void 0;
|
|
1584
|
-
function useSelectItem(params) {
|
|
1585
|
-
const {
|
|
1586
|
-
open,
|
|
1587
|
-
disabled = false,
|
|
1588
|
-
highlighted,
|
|
1589
|
-
selected,
|
|
1590
|
-
ref: externalRef,
|
|
1591
|
-
setOpen,
|
|
1592
|
-
typingRef,
|
|
1593
|
-
handleSelect,
|
|
1594
|
-
selectionRef,
|
|
1595
|
-
indexRef,
|
|
1596
|
-
setActiveIndex,
|
|
1597
|
-
popupRef,
|
|
1598
|
-
keyboardActiveRef
|
|
1599
|
-
} = params;
|
|
1600
|
-
const ref = React.useRef(null);
|
|
1601
|
-
const mergedRef = useForkRef(externalRef, ref);
|
|
1602
|
-
const {
|
|
1603
|
-
getButtonProps,
|
|
1604
|
-
buttonRef
|
|
1605
|
-
} = useButton({
|
|
1606
|
-
disabled,
|
|
1607
|
-
focusableWhenDisabled: true,
|
|
1608
|
-
buttonRef: mergedRef
|
|
1609
|
-
});
|
|
1610
|
-
const commitSelection = useEventCallback((event) => {
|
|
1611
|
-
handleSelect();
|
|
1612
|
-
setOpen(false, event);
|
|
1613
|
-
});
|
|
1614
|
-
const lastKeyRef = React.useRef(null);
|
|
1615
|
-
const pointerTypeRef = React.useRef("mouse");
|
|
1616
|
-
const prevPopupHeightRef = React.useRef(0);
|
|
1617
|
-
const allowFocusSyncRef = React.useRef(true);
|
|
1618
|
-
const getItemProps = React.useCallback((externalProps) => {
|
|
1619
|
-
return mergeProps({
|
|
1620
|
-
"aria-disabled": disabled || void 0,
|
|
1621
|
-
tabIndex: highlighted ? 0 : -1,
|
|
1622
|
-
onFocus() {
|
|
1623
|
-
if (allowFocusSyncRef.current) {
|
|
1624
|
-
setActiveIndex(indexRef.current);
|
|
1625
|
-
}
|
|
1626
|
-
},
|
|
1627
|
-
onMouseMove() {
|
|
1628
|
-
setActiveIndex(indexRef.current);
|
|
1629
|
-
if (popupRef.current) {
|
|
1630
|
-
prevPopupHeightRef.current = popupRef.current.offsetHeight;
|
|
1631
|
-
}
|
|
1632
|
-
},
|
|
1633
|
-
onMouseLeave(event) {
|
|
1634
|
-
const popup = popupRef.current;
|
|
1635
|
-
if (!popup || !open || keyboardActiveRef.current) {
|
|
1636
|
-
return;
|
|
1637
|
-
}
|
|
1638
|
-
const targetRect = event.currentTarget.getBoundingClientRect();
|
|
1639
|
-
const isWithinBounds = targetRect.top + 1 <= event.clientY && event.clientY <= targetRect.bottom - 1 && targetRect.left + 1 <= event.clientX && event.clientX <= targetRect.right - 1;
|
|
1640
|
-
if (isWithinBounds) {
|
|
1641
|
-
return;
|
|
1642
|
-
}
|
|
1643
|
-
if (popup.offsetHeight === prevPopupHeightRef.current) {
|
|
1644
|
-
allowFocusSyncRef.current = false;
|
|
1645
|
-
setActiveIndex(null);
|
|
1646
|
-
requestAnimationFrame(() => {
|
|
1647
|
-
popup.focus({
|
|
1648
|
-
preventScroll: true
|
|
1649
|
-
});
|
|
1650
|
-
allowFocusSyncRef.current = true;
|
|
1651
|
-
});
|
|
1652
|
-
}
|
|
1653
|
-
},
|
|
1654
|
-
onTouchStart() {
|
|
1655
|
-
selectionRef.current = {
|
|
1656
|
-
allowSelectedMouseUp: false,
|
|
1657
|
-
allowUnselectedMouseUp: false,
|
|
1658
|
-
allowSelect: true
|
|
1659
|
-
};
|
|
1660
|
-
},
|
|
1661
|
-
onKeyDown(event) {
|
|
1662
|
-
selectionRef.current.allowSelect = true;
|
|
1663
|
-
lastKeyRef.current = event.key;
|
|
1664
|
-
},
|
|
1665
|
-
onClick(event) {
|
|
1666
|
-
if (disabled || lastKeyRef.current === " " && typingRef.current || pointerTypeRef.current !== "touch" && !highlighted) {
|
|
1667
|
-
return;
|
|
1668
|
-
}
|
|
1669
|
-
if (selectionRef.current.allowSelect) {
|
|
1670
|
-
lastKeyRef.current = null;
|
|
1671
|
-
commitSelection(event.nativeEvent);
|
|
1672
|
-
}
|
|
1673
|
-
},
|
|
1674
|
-
onPointerEnter(event) {
|
|
1675
|
-
pointerTypeRef.current = event.pointerType;
|
|
1676
|
-
},
|
|
1677
|
-
onPointerDown(event) {
|
|
1678
|
-
pointerTypeRef.current = event.pointerType;
|
|
1679
|
-
},
|
|
1680
|
-
onMouseUp(event) {
|
|
1681
|
-
if (disabled) {
|
|
1682
|
-
return;
|
|
1683
|
-
}
|
|
1684
|
-
const disallowSelectedMouseUp = !selectionRef.current.allowSelectedMouseUp && selected;
|
|
1685
|
-
const disallowUnselectedMouseUp = !selectionRef.current.allowUnselectedMouseUp && !selected;
|
|
1686
|
-
if (disallowSelectedMouseUp || disallowUnselectedMouseUp || pointerTypeRef.current !== "touch" && !highlighted) {
|
|
1687
|
-
return;
|
|
1688
|
-
}
|
|
1689
|
-
if (selectionRef.current.allowSelect || !selected) {
|
|
1690
|
-
commitSelection(event.nativeEvent);
|
|
1691
|
-
}
|
|
1692
|
-
selectionRef.current.allowSelect = true;
|
|
1693
|
-
}
|
|
1694
|
-
}, externalProps, getButtonProps);
|
|
1695
|
-
}, [commitSelection, disabled, getButtonProps, highlighted, indexRef, keyboardActiveRef, open, popupRef, selected, selectionRef, setActiveIndex, typingRef]);
|
|
1696
|
-
return React.useMemo(() => ({
|
|
1697
|
-
getItemProps,
|
|
1698
|
-
rootRef: buttonRef
|
|
1699
|
-
}), [getItemProps, buttonRef]);
|
|
1700
|
-
}
|
|
1701
|
-
const SelectItemContext = /* @__PURE__ */ React.createContext(void 0);
|
|
1702
|
-
function useSelectItemContext() {
|
|
1703
|
-
const context = React.useContext(SelectItemContext);
|
|
1704
|
-
if (context === void 0) {
|
|
1705
|
-
throw new Error("Base UI: SelectItemContext is missing. SelectItem parts must be placed within <Select.Item>.");
|
|
1706
|
-
}
|
|
1707
|
-
return context;
|
|
1708
|
-
}
|
|
1709
|
-
const InnerSelectItem = /* @__PURE__ */ React.forwardRef(function InnerSelectItem2(props, forwardedRef) {
|
|
1710
|
-
const {
|
|
1711
|
-
className,
|
|
1712
|
-
disabled = false,
|
|
1713
|
-
highlighted,
|
|
1714
|
-
selected,
|
|
1715
|
-
getRootItemProps,
|
|
1716
|
-
render,
|
|
1717
|
-
setOpen,
|
|
1718
|
-
typingRef,
|
|
1719
|
-
selectionRef,
|
|
1720
|
-
open,
|
|
1721
|
-
value,
|
|
1722
|
-
setValue,
|
|
1723
|
-
selectedIndexRef,
|
|
1724
|
-
indexRef,
|
|
1725
|
-
setActiveIndex,
|
|
1726
|
-
popupRef,
|
|
1727
|
-
keyboardActiveRef,
|
|
1728
|
-
...otherProps
|
|
1729
|
-
} = props;
|
|
1730
|
-
const state = React.useMemo(() => ({
|
|
1731
|
-
disabled,
|
|
1732
|
-
open,
|
|
1733
|
-
highlighted,
|
|
1734
|
-
selected
|
|
1735
|
-
}), [disabled, open, highlighted, selected]);
|
|
1736
|
-
const {
|
|
1737
|
-
getItemProps,
|
|
1738
|
-
rootRef
|
|
1739
|
-
} = useSelectItem({
|
|
1740
|
-
open,
|
|
1741
|
-
setOpen,
|
|
1742
|
-
disabled,
|
|
1743
|
-
highlighted,
|
|
1744
|
-
selected,
|
|
1745
|
-
ref: forwardedRef,
|
|
1746
|
-
typingRef,
|
|
1747
|
-
handleSelect: () => setValue(value),
|
|
1748
|
-
selectionRef,
|
|
1749
|
-
selectedIndexRef,
|
|
1750
|
-
indexRef,
|
|
1751
|
-
setActiveIndex,
|
|
1752
|
-
popupRef,
|
|
1753
|
-
keyboardActiveRef
|
|
1754
|
-
});
|
|
1755
|
-
const mergedRef = useForkRef(rootRef, forwardedRef);
|
|
1756
|
-
const {
|
|
1757
|
-
renderElement
|
|
1758
|
-
} = useComponentRenderer({
|
|
1759
|
-
propGetter(externalProps = {}) {
|
|
1760
|
-
const rootProps = getRootItemProps({
|
|
1761
|
-
...externalProps,
|
|
1762
|
-
active: highlighted,
|
|
1763
|
-
selected
|
|
1764
|
-
});
|
|
1765
|
-
delete rootProps.onFocus;
|
|
1766
|
-
return getItemProps(rootProps);
|
|
1767
|
-
},
|
|
1768
|
-
render: render ?? "div",
|
|
1769
|
-
ref: mergedRef,
|
|
1770
|
-
className,
|
|
1771
|
-
state,
|
|
1772
|
-
extraProps: otherProps
|
|
1773
|
-
});
|
|
1774
|
-
const contextValue = React.useMemo(() => ({
|
|
1775
|
-
selected,
|
|
1776
|
-
indexRef
|
|
1777
|
-
}), [selected, indexRef]);
|
|
1778
|
-
return /* @__PURE__ */ jsx(SelectItemContext.Provider, {
|
|
1779
|
-
value: contextValue,
|
|
1780
|
-
children: renderElement()
|
|
1781
|
-
});
|
|
1782
|
-
});
|
|
1783
|
-
process.env.NODE_ENV !== "production" ? InnerSelectItem.propTypes = {
|
|
1784
|
-
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
1785
|
-
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
1786
|
-
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
1787
|
-
// └─────────────────────────────────────────────────────────────────────┘
|
|
1788
|
-
/**
|
|
1789
|
-
* @ignore
|
|
1790
|
-
*/
|
|
1791
|
-
children: PropTypes.node,
|
|
1792
|
-
/**
|
|
1793
|
-
* CSS class applied to the element, or a function that
|
|
1794
|
-
* returns a class based on the component’s state.
|
|
1795
|
-
*/
|
|
1796
|
-
className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
1797
|
-
/**
|
|
1798
|
-
* Whether the component should ignore user interaction.
|
|
1799
|
-
* @default false
|
|
1800
|
-
*/
|
|
1801
|
-
disabled: PropTypes.bool,
|
|
1802
|
-
/**
|
|
1803
|
-
* @ignore
|
|
1804
|
-
*/
|
|
1805
|
-
getRootItemProps: PropTypes.func.isRequired,
|
|
1806
|
-
/**
|
|
1807
|
-
* @ignore
|
|
1808
|
-
*/
|
|
1809
|
-
highlighted: PropTypes.bool.isRequired,
|
|
1810
|
-
/**
|
|
1811
|
-
* @ignore
|
|
1812
|
-
*/
|
|
1813
|
-
indexRef: PropTypes.shape({
|
|
1814
|
-
current: PropTypes.number.isRequired
|
|
1815
|
-
}).isRequired,
|
|
1816
|
-
/**
|
|
1817
|
-
* @ignore
|
|
1818
|
-
*/
|
|
1819
|
-
keyboardActiveRef: PropTypes.shape({
|
|
1820
|
-
current: PropTypes.bool.isRequired
|
|
1821
|
-
}).isRequired,
|
|
1822
|
-
/**
|
|
1823
|
-
* Overrides the text label to use on the trigger when this item is selected
|
|
1824
|
-
* and when the item is matched during keyboard text navigation.
|
|
1825
|
-
*/
|
|
1826
|
-
label: PropTypes.string,
|
|
1827
|
-
/**
|
|
1828
|
-
* @ignore
|
|
1829
|
-
*/
|
|
1830
|
-
open: PropTypes.bool.isRequired,
|
|
1831
|
-
/**
|
|
1832
|
-
* @ignore
|
|
1833
|
-
*/
|
|
1834
|
-
popupRef: PropTypes.shape({
|
|
1835
|
-
current: PropTypes.object
|
|
1836
|
-
}).isRequired,
|
|
1837
|
-
/**
|
|
1838
|
-
* Allows you to replace the component’s HTML element
|
|
1839
|
-
* with a different tag, or compose it with another component.
|
|
1840
|
-
*
|
|
1841
|
-
* Accepts a `ReactElement` or a function that returns the element to render.
|
|
1842
|
-
*/
|
|
1843
|
-
render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
|
|
1844
|
-
/**
|
|
1845
|
-
* @ignore
|
|
1846
|
-
*/
|
|
1847
|
-
selected: PropTypes.bool.isRequired,
|
|
1848
|
-
/**
|
|
1849
|
-
* @ignore
|
|
1850
|
-
*/
|
|
1851
|
-
selectedIndexRef: PropTypes.shape({
|
|
1852
|
-
current: PropTypes.number
|
|
1853
|
-
}).isRequired,
|
|
1854
|
-
/**
|
|
1855
|
-
* @ignore
|
|
1856
|
-
*/
|
|
1857
|
-
selectionRef: PropTypes.shape({
|
|
1858
|
-
current: PropTypes.shape({
|
|
1859
|
-
allowSelect: PropTypes.bool.isRequired,
|
|
1860
|
-
allowSelectedMouseUp: PropTypes.bool.isRequired,
|
|
1861
|
-
allowUnselectedMouseUp: PropTypes.bool.isRequired
|
|
1862
|
-
}).isRequired
|
|
1863
|
-
}).isRequired,
|
|
1864
|
-
/**
|
|
1865
|
-
* @ignore
|
|
1866
|
-
*/
|
|
1867
|
-
setActiveIndex: PropTypes.func.isRequired,
|
|
1868
|
-
/**
|
|
1869
|
-
* @ignore
|
|
1870
|
-
*/
|
|
1871
|
-
setOpen: PropTypes.func.isRequired,
|
|
1872
|
-
/**
|
|
1873
|
-
* @ignore
|
|
1874
|
-
*/
|
|
1875
|
-
setValue: PropTypes.func.isRequired,
|
|
1876
|
-
/**
|
|
1877
|
-
* @ignore
|
|
1878
|
-
*/
|
|
1879
|
-
typingRef: PropTypes.shape({
|
|
1880
|
-
current: PropTypes.bool.isRequired
|
|
1881
|
-
}).isRequired,
|
|
1882
|
-
/**
|
|
1883
|
-
* @ignore
|
|
1884
|
-
*/
|
|
1885
|
-
value: PropTypes.any.isRequired
|
|
1886
|
-
} : void 0;
|
|
1887
|
-
const MemoizedInnerSelectItem = /* @__PURE__ */ React.memo(InnerSelectItem);
|
|
1888
|
-
const SelectItem = /* @__PURE__ */ React.forwardRef(function SelectItem2(props, forwardedRef) {
|
|
1889
|
-
const {
|
|
1890
|
-
value: valueProp = null,
|
|
1891
|
-
label,
|
|
1892
|
-
...otherProps
|
|
1893
|
-
} = props;
|
|
1894
|
-
const listItem = useCompositeListItem({
|
|
1895
|
-
label
|
|
1896
|
-
});
|
|
1897
|
-
const {
|
|
1898
|
-
activeIndex,
|
|
1899
|
-
selectedIndex,
|
|
1900
|
-
setActiveIndex
|
|
1901
|
-
} = useSelectIndexContext();
|
|
1902
|
-
const {
|
|
1903
|
-
getItemProps,
|
|
1904
|
-
setOpen,
|
|
1905
|
-
setValue,
|
|
1906
|
-
open,
|
|
1907
|
-
selectionRef,
|
|
1908
|
-
typingRef,
|
|
1909
|
-
valuesRef,
|
|
1910
|
-
popupRef,
|
|
1911
|
-
registerSelectedItem,
|
|
1912
|
-
value,
|
|
1913
|
-
keyboardActiveRef
|
|
1914
|
-
} = useSelectRootContext();
|
|
1915
|
-
const itemRef = React.useRef(null);
|
|
1916
|
-
const selectedIndexRef = useLatestRef(selectedIndex);
|
|
1917
|
-
const indexRef = useLatestRef(listItem.index);
|
|
1918
|
-
const mergedRef = useForkRef(listItem.ref, forwardedRef, itemRef);
|
|
1919
|
-
const hasRegistered = listItem.index !== -1;
|
|
1920
|
-
useEnhancedEffect(() => {
|
|
1921
|
-
if (!hasRegistered) {
|
|
1922
|
-
return void 0;
|
|
1923
|
-
}
|
|
1924
|
-
const values = valuesRef.current;
|
|
1925
|
-
values[listItem.index] = valueProp;
|
|
1926
|
-
return () => {
|
|
1927
|
-
delete values[listItem.index];
|
|
1928
|
-
};
|
|
1929
|
-
}, [hasRegistered, listItem.index, valueProp, valuesRef]);
|
|
1930
|
-
useEnhancedEffect(() => {
|
|
1931
|
-
if (hasRegistered && valueProp === value) {
|
|
1932
|
-
registerSelectedItem(listItem.index);
|
|
1933
|
-
}
|
|
1934
|
-
}, [hasRegistered, listItem.index, registerSelectedItem, valueProp, value]);
|
|
1935
|
-
const highlighted = activeIndex === listItem.index;
|
|
1936
|
-
const selected = selectedIndex === listItem.index;
|
|
1937
|
-
return /* @__PURE__ */ jsx(MemoizedInnerSelectItem, {
|
|
1938
|
-
ref: mergedRef,
|
|
1939
|
-
highlighted,
|
|
1940
|
-
selected,
|
|
1941
|
-
getRootItemProps: getItemProps,
|
|
1942
|
-
setOpen,
|
|
1943
|
-
open,
|
|
1944
|
-
selectionRef,
|
|
1945
|
-
typingRef,
|
|
1946
|
-
value: valueProp,
|
|
1947
|
-
setValue,
|
|
1948
|
-
selectedIndexRef,
|
|
1949
|
-
indexRef,
|
|
1950
|
-
setActiveIndex,
|
|
1951
|
-
popupRef,
|
|
1952
|
-
keyboardActiveRef,
|
|
1953
|
-
...otherProps
|
|
1954
|
-
});
|
|
1955
|
-
});
|
|
1956
|
-
process.env.NODE_ENV !== "production" ? SelectItem.propTypes = {
|
|
1957
|
-
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
1958
|
-
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
1959
|
-
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
1960
|
-
// └─────────────────────────────────────────────────────────────────────┘
|
|
1961
|
-
/**
|
|
1962
|
-
* @ignore
|
|
1963
|
-
*/
|
|
1964
|
-
children: PropTypes.node,
|
|
1965
|
-
/**
|
|
1966
|
-
* CSS class applied to the element, or a function that
|
|
1967
|
-
* returns a class based on the component’s state.
|
|
1968
|
-
*/
|
|
1969
|
-
className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
1970
|
-
/**
|
|
1971
|
-
* Whether the component should ignore user interaction.
|
|
1972
|
-
* @default false
|
|
1973
|
-
*/
|
|
1974
|
-
disabled: PropTypes.bool,
|
|
1975
|
-
/**
|
|
1976
|
-
* Overrides the text label to use on the trigger when this item is selected
|
|
1977
|
-
* and when the item is matched during keyboard text navigation.
|
|
1978
|
-
*/
|
|
1979
|
-
label: PropTypes.string,
|
|
1980
|
-
/**
|
|
1981
|
-
* Allows you to replace the component’s HTML element
|
|
1982
|
-
* with a different tag, or compose it with another component.
|
|
1983
|
-
*
|
|
1984
|
-
* Accepts a `ReactElement` or a function that returns the element to render.
|
|
1985
|
-
*/
|
|
1986
|
-
render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
|
|
1987
|
-
/**
|
|
1988
|
-
* A unique value that identifies this select item.
|
|
1989
|
-
* @default null
|
|
1990
|
-
*/
|
|
1991
|
-
value: PropTypes.any
|
|
1992
|
-
} : void 0;
|
|
1993
|
-
const SelectItemIndicator = /* @__PURE__ */ React.forwardRef(function SelectItemIndicator2(props, forwardedRef) {
|
|
1994
|
-
const {
|
|
1995
|
-
render,
|
|
1996
|
-
className,
|
|
1997
|
-
keepMounted = false,
|
|
1998
|
-
...otherProps
|
|
1999
|
-
} = props;
|
|
2000
|
-
const {
|
|
2001
|
-
selected
|
|
2002
|
-
} = useSelectItemContext();
|
|
2003
|
-
const indicatorRef = React.useRef(null);
|
|
2004
|
-
const mergedRef = useForkRef(forwardedRef, indicatorRef);
|
|
2005
|
-
const {
|
|
2006
|
-
mounted,
|
|
2007
|
-
transitionStatus,
|
|
2008
|
-
setMounted
|
|
2009
|
-
} = useTransitionStatus(selected);
|
|
2010
|
-
const getItemProps = React.useCallback((externalProps = {}) => mergeProps({
|
|
2011
|
-
"aria-hidden": true,
|
|
2012
|
-
children: "✔️"
|
|
2013
|
-
}, externalProps), []);
|
|
2014
|
-
const state = React.useMemo(() => ({
|
|
2015
|
-
selected,
|
|
2016
|
-
transitionStatus
|
|
2017
|
-
}), [selected, transitionStatus]);
|
|
2018
|
-
const {
|
|
2019
|
-
renderElement
|
|
2020
|
-
} = useComponentRenderer({
|
|
2021
|
-
propGetter: getItemProps,
|
|
2022
|
-
render: render ?? "span",
|
|
2023
|
-
ref: mergedRef,
|
|
2024
|
-
className,
|
|
2025
|
-
state,
|
|
2026
|
-
extraProps: {
|
|
2027
|
-
hidden: !mounted,
|
|
2028
|
-
...otherProps
|
|
2029
|
-
}
|
|
2030
|
-
});
|
|
2031
|
-
useOpenChangeComplete({
|
|
2032
|
-
open: selected,
|
|
2033
|
-
ref: indicatorRef,
|
|
2034
|
-
onComplete() {
|
|
2035
|
-
if (!selected) {
|
|
2036
|
-
setMounted(false);
|
|
2037
|
-
}
|
|
2038
|
-
}
|
|
2039
|
-
});
|
|
2040
|
-
const shouldRender = keepMounted || selected;
|
|
2041
|
-
if (!shouldRender) {
|
|
2042
|
-
return null;
|
|
2043
|
-
}
|
|
2044
|
-
return renderElement();
|
|
2045
|
-
});
|
|
2046
|
-
process.env.NODE_ENV !== "production" ? SelectItemIndicator.propTypes = {
|
|
2047
|
-
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
2048
|
-
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
2049
|
-
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
2050
|
-
// └─────────────────────────────────────────────────────────────────────┘
|
|
2051
|
-
/**
|
|
2052
|
-
* @ignore
|
|
2053
|
-
*/
|
|
2054
|
-
children: PropTypes.node,
|
|
2055
|
-
/**
|
|
2056
|
-
* CSS class applied to the element, or a function that
|
|
2057
|
-
* returns a class based on the component’s state.
|
|
2058
|
-
*/
|
|
2059
|
-
className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
2060
|
-
/**
|
|
2061
|
-
* Whether to keep the HTML element in the DOM when the item is not selected.
|
|
2062
|
-
* @default false
|
|
2063
|
-
*/
|
|
2064
|
-
keepMounted: PropTypes.bool,
|
|
2065
|
-
/**
|
|
2066
|
-
* Allows you to replace the component’s HTML element
|
|
2067
|
-
* with a different tag, or compose it with another component.
|
|
2068
|
-
*
|
|
2069
|
-
* Accepts a `ReactElement` or a function that returns the element to render.
|
|
2070
|
-
*/
|
|
2071
|
-
render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
|
|
2072
|
-
} : void 0;
|
|
2073
|
-
const InnerSelectItemText = /* @__PURE__ */ React.forwardRef(function InnerSelectItemText2(props, forwardedRef) {
|
|
2074
|
-
const {
|
|
2075
|
-
className,
|
|
2076
|
-
render,
|
|
2077
|
-
selected,
|
|
2078
|
-
selectedItemTextRef,
|
|
2079
|
-
indexRef,
|
|
2080
|
-
...otherProps
|
|
2081
|
-
} = props;
|
|
2082
|
-
const mergedRef = useForkRef(forwardedRef);
|
|
2083
|
-
const state = React.useMemo(() => ({}), []);
|
|
2084
|
-
const ref = React.useCallback((node) => {
|
|
2085
|
-
if (mergedRef) {
|
|
2086
|
-
mergedRef(node);
|
|
2087
|
-
}
|
|
2088
|
-
queueMicrotask(() => {
|
|
2089
|
-
if (selected || selectedItemTextRef.current === null && indexRef.current === 0) {
|
|
2090
|
-
selectedItemTextRef.current = node;
|
|
2091
|
-
}
|
|
2092
|
-
});
|
|
2093
|
-
}, [mergedRef, selected, selectedItemTextRef, indexRef]);
|
|
2094
|
-
const {
|
|
2095
|
-
renderElement
|
|
2096
|
-
} = useComponentRenderer({
|
|
2097
|
-
ref,
|
|
2098
|
-
render: render ?? "div",
|
|
2099
|
-
className,
|
|
2100
|
-
state,
|
|
2101
|
-
extraProps: otherProps
|
|
2102
|
-
});
|
|
2103
|
-
return renderElement();
|
|
2104
|
-
});
|
|
2105
|
-
process.env.NODE_ENV !== "production" ? InnerSelectItemText.propTypes = {
|
|
2106
|
-
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
2107
|
-
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
2108
|
-
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
2109
|
-
// └─────────────────────────────────────────────────────────────────────┘
|
|
2110
|
-
/**
|
|
2111
|
-
* @ignore
|
|
2112
|
-
*/
|
|
2113
|
-
children: PropTypes.node,
|
|
2114
|
-
/**
|
|
2115
|
-
* CSS class applied to the element, or a function that
|
|
2116
|
-
* returns a class based on the component’s state.
|
|
2117
|
-
*/
|
|
2118
|
-
className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
2119
|
-
/**
|
|
2120
|
-
* @ignore
|
|
2121
|
-
*/
|
|
2122
|
-
indexRef: PropTypes.shape({
|
|
2123
|
-
current: PropTypes.number.isRequired
|
|
2124
|
-
}).isRequired,
|
|
2125
|
-
/**
|
|
2126
|
-
* Allows you to replace the component’s HTML element
|
|
2127
|
-
* with a different tag, or compose it with another component.
|
|
2128
|
-
*
|
|
2129
|
-
* Accepts a `ReactElement` or a function that returns the element to render.
|
|
2130
|
-
*/
|
|
2131
|
-
render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
|
|
2132
|
-
/**
|
|
2133
|
-
* @ignore
|
|
2134
|
-
*/
|
|
2135
|
-
selected: PropTypes.bool.isRequired,
|
|
2136
|
-
/**
|
|
2137
|
-
* @ignore
|
|
2138
|
-
*/
|
|
2139
|
-
selectedItemTextRef: PropTypes.shape({
|
|
2140
|
-
current: (props, propName) => {
|
|
2141
|
-
if (props[propName] == null) {
|
|
2142
|
-
return null;
|
|
2143
|
-
}
|
|
2144
|
-
if (typeof props[propName] !== "object" || props[propName].nodeType !== 1) {
|
|
2145
|
-
return new Error(`Expected prop '${propName}' to be of type Element`);
|
|
2146
|
-
}
|
|
2147
|
-
return null;
|
|
2148
|
-
}
|
|
2149
|
-
}).isRequired
|
|
2150
|
-
} : void 0;
|
|
2151
|
-
const MemoizedInnerSelectItemText = /* @__PURE__ */ React.memo(InnerSelectItemText);
|
|
2152
|
-
const SelectItemText = /* @__PURE__ */ React.forwardRef(function SelectItemText2(props, forwardedRef) {
|
|
2153
|
-
const {
|
|
2154
|
-
selected,
|
|
2155
|
-
indexRef
|
|
2156
|
-
} = useSelectItemContext();
|
|
2157
|
-
const {
|
|
2158
|
-
selectedItemTextRef
|
|
2159
|
-
} = useSelectRootContext();
|
|
2160
|
-
const mergedRef = useForkRef(forwardedRef);
|
|
2161
|
-
return /* @__PURE__ */ jsx(MemoizedInnerSelectItemText, {
|
|
2162
|
-
ref: mergedRef,
|
|
2163
|
-
selected,
|
|
2164
|
-
selectedItemTextRef,
|
|
2165
|
-
indexRef,
|
|
2166
|
-
...props
|
|
2167
|
-
});
|
|
2168
|
-
});
|
|
2169
|
-
process.env.NODE_ENV !== "production" ? SelectItemText.propTypes = {
|
|
2170
|
-
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
2171
|
-
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
2172
|
-
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
2173
|
-
// └─────────────────────────────────────────────────────────────────────┘
|
|
2174
|
-
/**
|
|
2175
|
-
* @ignore
|
|
2176
|
-
*/
|
|
2177
|
-
children: PropTypes.node,
|
|
2178
|
-
/**
|
|
2179
|
-
* CSS class applied to the element, or a function that
|
|
2180
|
-
* returns a class based on the component’s state.
|
|
2181
|
-
*/
|
|
2182
|
-
className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
2183
|
-
/**
|
|
2184
|
-
* Allows you to replace the component’s HTML element
|
|
2185
|
-
* with a different tag, or compose it with another component.
|
|
2186
|
-
*
|
|
2187
|
-
* Accepts a `ReactElement` or a function that returns the element to render.
|
|
2188
|
-
*/
|
|
2189
|
-
render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
|
|
2190
|
-
} : void 0;
|
|
2191
|
-
function Select({
|
|
2192
|
-
selected,
|
|
2193
|
-
onSelect,
|
|
2194
|
-
options,
|
|
2195
|
-
placeholder,
|
|
2196
|
-
triggerClassName,
|
|
2197
|
-
triggerValueClassName,
|
|
2198
|
-
triggerIconClassName,
|
|
2199
|
-
popupClassName,
|
|
2200
|
-
itemClassName,
|
|
2201
|
-
itemIndicatorClassName,
|
|
2202
|
-
itemTextClassName,
|
|
2203
|
-
...props
|
|
2204
|
-
}) {
|
|
2205
|
-
return /* @__PURE__ */ jsxs(
|
|
2206
|
-
SelectRoot,
|
|
2207
|
-
{
|
|
2208
|
-
value: selected?.value ?? null,
|
|
2209
|
-
onValueChange: (v) => {
|
|
2210
|
-
const opt = options.find((c) => c.value === v);
|
|
2211
|
-
if (!opt) return;
|
|
2212
|
-
onSelect(opt);
|
|
2213
|
-
},
|
|
2214
|
-
alignItemToTrigger: false,
|
|
2215
|
-
children: [
|
|
2216
|
-
/* @__PURE__ */ jsxs(SelectTrigger, { ...props, className: clsx("lng1771-select", triggerClassName), children: [
|
|
2217
|
-
/* @__PURE__ */ jsx(
|
|
2218
|
-
SelectValue,
|
|
2219
|
-
{
|
|
2220
|
-
className: clsx(
|
|
2221
|
-
"lng1771-select__value",
|
|
2222
|
-
!selected && "lng1771-select__value--no-value",
|
|
2223
|
-
triggerValueClassName
|
|
2224
|
-
),
|
|
2225
|
-
placeholder
|
|
2226
|
-
}
|
|
2227
|
-
),
|
|
2228
|
-
/* @__PURE__ */ jsx(SelectIcon, { className: clsx("lng1771-select__trigger", triggerIconClassName), children: /* @__PURE__ */ jsx(ArrowDownIcon, {}) })
|
|
2229
|
-
] }),
|
|
2230
|
-
/* @__PURE__ */ jsx(SelectPortal, { children: /* @__PURE__ */ jsx(SelectPositioner, { sideOffset: 8, className: "lng1771-select__positioner", children: /* @__PURE__ */ jsx(SelectPopup, { className: clsx("lng1771-select__popup", popupClassName), children: options.map((c) => {
|
|
2231
|
-
return /* @__PURE__ */ jsxs(
|
|
2232
|
-
SelectItem,
|
|
2233
|
-
{
|
|
2234
|
-
value: c.value,
|
|
2235
|
-
className: clsx("lng1771-select__item", itemClassName),
|
|
2236
|
-
children: [
|
|
2237
|
-
/* @__PURE__ */ jsx(SelectItemText, { className: clsx("lng1771-select__item-text", itemIndicatorClassName), children: c.label }),
|
|
2238
|
-
/* @__PURE__ */ jsx(
|
|
2239
|
-
SelectItemIndicator,
|
|
2240
|
-
{
|
|
2241
|
-
className: clsx("lng1771-select__item-indicator", itemTextClassName),
|
|
2242
|
-
children: /* @__PURE__ */ jsx(CheckMark, {})
|
|
2243
|
-
}
|
|
2244
|
-
)
|
|
2245
|
-
]
|
|
2246
|
-
},
|
|
2247
|
-
c.value
|
|
2248
|
-
);
|
|
2249
|
-
}) }) }) })
|
|
2250
|
-
]
|
|
2251
|
-
}
|
|
2252
|
-
);
|
|
2253
|
-
}
|
|
2254
|
-
export {
|
|
2255
|
-
Select as S
|
|
2256
|
-
};
|