@godxjp/ui 28.6.0 → 28.8.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/dist/components/data-display/data-table.d.ts +10 -2
- package/dist/components/data-display/data-table.js +12 -5
- package/dist/components/data-display/index.d.ts +2 -0
- package/dist/components/data-display/index.js +2 -0
- package/dist/components/data-display/marquee.d.ts +16 -0
- package/dist/components/data-display/marquee.js +155 -0
- package/dist/components/data-display/scroll-area.js +16 -2
- package/dist/components/data-display/service-launcher-card.d.ts +25 -0
- package/dist/components/data-display/table.d.ts +38 -1
- package/dist/components/data-display/table.js +57 -39
- package/dist/components/data-entry/form-field.js +29 -12
- package/dist/components/general/reveal.d.ts +23 -2
- package/dist/components/general/reveal.js +37 -7
- package/dist/components/general/typography.d.ts +4 -1
- package/dist/components/general/typography.js +14 -1
- package/dist/components/layout/affix.d.ts +86 -0
- package/dist/components/layout/affix.js +187 -0
- package/dist/components/layout/index.d.ts +4 -0
- package/dist/components/layout/index.js +4 -0
- package/dist/components/layout/legal-document-shell.js +4 -3
- package/dist/components/layout/masonry.d.ts +74 -0
- package/dist/components/layout/masonry.js +214 -0
- package/dist/components/layout/page-container.js +5 -20
- package/dist/components/navigation/anchor.d.ts +64 -0
- package/dist/components/navigation/anchor.js +284 -0
- package/dist/components/navigation/app-setting-picker.js +20 -3
- package/dist/components/navigation/index.d.ts +4 -0
- package/dist/components/navigation/index.js +4 -0
- package/dist/components/navigation/mega-menu.d.ts +21 -0
- package/dist/components/navigation/mega-menu.js +526 -0
- package/dist/components/ui/table.js +1 -0
- package/dist/contracts/measurement.json +1 -1
- package/dist/i18n/messages/en.json +522 -1
- package/dist/i18n/messages/ja.json +518 -1
- package/dist/i18n/messages/vi.json +518 -1
- package/dist/lib/hooks.d.ts +91 -0
- package/dist/lib/hooks.js +79 -0
- package/dist/lib/platform.d.ts +14 -0
- package/dist/lib/platform.js +10 -1
- package/dist/lib/utils.d.ts +1 -1
- package/dist/lib/utils.js +3 -2
- package/dist/props/components/data-display.prop.d.ts +109 -1
- package/dist/props/components/general.prop.d.ts +47 -3
- package/dist/props/components/layout.prop.d.ts +194 -0
- package/dist/props/components/navigation.prop.d.ts +263 -0
- package/dist/props/registry.d.ts +360 -5
- package/dist/props/registry.js +474 -4
- package/dist/props/vocabulary/index.d.ts +1 -1
- package/dist/props/vocabulary/interaction.prop.d.ts +39 -2
- package/dist/styles/control.css +5 -6
- package/dist/styles/data-display-layout.css +2 -1
- package/dist/styles/density.css +4 -0
- package/dist/styles/form-layout.css +22 -0
- package/dist/styles/layout.css +79 -1
- package/dist/styles/motion.css +121 -1
- package/dist/styles/navigation-layout.css +415 -20
- package/dist/styles/shell-layout.css +3 -0
- package/dist/styles/text-layout.css +52 -4
- package/dist/tokens/base.css +5 -0
- package/dist/tokens/components/affix.css +7 -0
- package/dist/tokens/components/anchor.css +17 -0
- package/dist/tokens/components/control.css +3 -3
- package/dist/tokens/components/form.css +3 -1
- package/dist/tokens/components/marquee.css +7 -0
- package/dist/tokens/components/masonry.css +6 -0
- package/dist/tokens/components/mega-menu.css +62 -0
- package/dist/tokens/components/navigation.css +2 -0
- package/dist/tokens/components/shell.css +3 -0
- package/dist/tokens/foundation.css +11 -0
- package/dist/tokens/semantic/layout.css +7 -0
- package/docs/COMPOSITION-VS-COMPONENT.md +21 -0
- package/docs/DESIGN-AUTHORITY.md +124 -23
- package/docs/FRAME-COVERAGE-REPORT.md +7 -2
- package/docs/data-display/marquee.tsx +254 -0
- package/docs/data-display/scroll-area.tsx +31 -0
- package/docs/data-display/service-launcher-card.tsx +275 -115
- package/docs/foundation/_theme-editor-scope.ts +222 -0
- package/docs/foundation/density.tsx +12 -2
- package/docs/foundation/spacing.tsx +5 -0
- package/docs/foundation/theme-editor.tsx +645 -0
- package/docs/general/activity.tsx +65 -0
- package/docs/general/reveal.tsx +290 -22
- package/docs/general/typography.tsx +91 -1
- package/docs/layout/affix.tsx +209 -0
- package/docs/layout/masonry.tsx +291 -0
- package/docs/navigation/anchor.tsx +285 -0
- package/docs/navigation/mega-menu-panel.tsx +86 -0
- package/docs/navigation/mega-menu.tsx +254 -0
- package/docs/roadmap/website-components.md +779 -0
- package/docs/showcase/acme-website.tsx +75 -39
- package/docs/showcase/futurelastic-web.tsx +91 -49
- package/docs/showcase/marketing-page.tsx +885 -0
- package/docs/showcase/table-footer-totals.tsx +12 -2
- package/docs/showcase/theme-customization.tsx +1259 -0
- package/package.json +8 -5
- package/scripts/brand-accent.generated.mjs +27 -0
- package/scripts/ui-audit.mjs +66 -0
- package/scripts/visual-audit-rules.mjs +46 -2
- package/scripts/visual-audit.mjs +29 -1
|
@@ -300,6 +300,12 @@
|
|
|
300
300
|
"unread": "Chưa đọc",
|
|
301
301
|
"read": "Đã đọc"
|
|
302
302
|
},
|
|
303
|
+
"marquee": {
|
|
304
|
+
"pause": "Tạm dừng cuộn",
|
|
305
|
+
"play": "Tiếp tục cuộn",
|
|
306
|
+
"pauseNamed": "Tạm dừng cuộn: {label}",
|
|
307
|
+
"playNamed": "Tiếp tục cuộn: {label}"
|
|
308
|
+
},
|
|
303
309
|
"permissionMatrix": {
|
|
304
310
|
"caption": "Ma trận vai trò và quyền",
|
|
305
311
|
"permissionColumn": "Quyền",
|
|
@@ -319,6 +325,9 @@
|
|
|
319
325
|
"ariaLabel": "Tiến độ",
|
|
320
326
|
"breakdownSeparator": ", "
|
|
321
327
|
},
|
|
328
|
+
"scrollArea": {
|
|
329
|
+
"region": "Vùng có thể cuộn"
|
|
330
|
+
},
|
|
322
331
|
"tree": {
|
|
323
332
|
"expand": "Mở rộng",
|
|
324
333
|
"collapse": "Thu gọn",
|
|
@@ -403,6 +412,9 @@
|
|
|
403
412
|
"breadcrumb": {
|
|
404
413
|
"ariaLabel": "Đường dẫn"
|
|
405
414
|
},
|
|
415
|
+
"anchor": {
|
|
416
|
+
"ariaLabel": "Trong trang này"
|
|
417
|
+
},
|
|
406
418
|
"toolbar": {
|
|
407
419
|
"ariaLabel": "Bộ lọc"
|
|
408
420
|
},
|
|
@@ -469,6 +481,9 @@
|
|
|
469
481
|
"label": "Danh sách hội thoại",
|
|
470
482
|
"creation": "Hội thoại mới",
|
|
471
483
|
"rowActions": "Thao tác khác cho {label}"
|
|
484
|
+
},
|
|
485
|
+
"megaMenu": {
|
|
486
|
+
"label": "Điều hướng chính"
|
|
472
487
|
}
|
|
473
488
|
},
|
|
474
489
|
"locale": {
|
|
@@ -525,7 +540,8 @@
|
|
|
525
540
|
"sortAscending": "Sắp xếp tăng dần",
|
|
526
541
|
"sortDescending": "Sắp xếp giảm dần",
|
|
527
542
|
"sortCancel": "Bỏ sắp xếp",
|
|
528
|
-
"selectColumn": "Chọn"
|
|
543
|
+
"selectColumn": "Chọn",
|
|
544
|
+
"scrollRegion": "Bảng có thể cuộn"
|
|
529
545
|
},
|
|
530
546
|
"dataGrid": {
|
|
531
547
|
"search": "Tìm kiếm",
|
|
@@ -639,5 +655,506 @@
|
|
|
639
655
|
"error": "thất bại"
|
|
640
656
|
}
|
|
641
657
|
}
|
|
658
|
+
},
|
|
659
|
+
"themeShowcase": {
|
|
660
|
+
"page": {
|
|
661
|
+
"title": "Tùy biến giao diện linh hoạt",
|
|
662
|
+
"subtitle": "Một hạt giống làm cả hệ thống đổi màu. Chọn một bảng màu và mọi điều khiển, bề mặt, dấu hiệu và vòng focus trên bảng bên dưới sẽ được vẽ lại tại chỗ."
|
|
663
|
+
},
|
|
664
|
+
"bar": {
|
|
665
|
+
"title": "Giao diện",
|
|
666
|
+
"description": "Các chip đặt hạt giống --primary trong một phạm vi. Không sửa component, không tách stylesheet, không ghi đè vai trò.",
|
|
667
|
+
"paletteLabel": "Bảng màu",
|
|
668
|
+
"cornerLabel": "Bo góc",
|
|
669
|
+
"customLabel": "Hạt giống tự chọn",
|
|
670
|
+
"customHint": "Bất kỳ mã hex nào. Các bậc hover, nhấn, viền, focus và liên kết đều suy ra từ đó.",
|
|
671
|
+
"identityNote": "Màu nhận diện cố ý đứng yên: đổi màu hành động của một tenant không làm nhuộm lại logo của họ."
|
|
672
|
+
},
|
|
673
|
+
"palette": {
|
|
674
|
+
"godx": "GoDX",
|
|
675
|
+
"indigo": "Chàm",
|
|
676
|
+
"teal": "Mòng két",
|
|
677
|
+
"amber": "Hổ phách",
|
|
678
|
+
"rose": "Hồng đào",
|
|
679
|
+
"custom": "Tự chọn"
|
|
680
|
+
},
|
|
681
|
+
"corner": {
|
|
682
|
+
"sharp": "Vuông",
|
|
683
|
+
"default": "Mặc định",
|
|
684
|
+
"soft": "Mềm"
|
|
685
|
+
},
|
|
686
|
+
"tabs": {
|
|
687
|
+
"components": "Component",
|
|
688
|
+
"dashboard": "Bảng điều khiển"
|
|
689
|
+
},
|
|
690
|
+
"form": {
|
|
691
|
+
"email": "Email công việc",
|
|
692
|
+
"emailHint": "Chỉ dùng cho thông báo phát hành.",
|
|
693
|
+
"emailPlaceholder": "you@ops.example.jp",
|
|
694
|
+
"handle": "Tên định danh",
|
|
695
|
+
"regions": "Khu vực",
|
|
696
|
+
"regionsPlaceholder": "Chọn khu vực",
|
|
697
|
+
"regionsEmpty": "Chưa chọn khu vực nào.",
|
|
698
|
+
"labels": "Nhãn",
|
|
699
|
+
"labelsPlaceholder": "Thêm nhãn",
|
|
700
|
+
"plan": "Gói",
|
|
701
|
+
"releaseDate": "Ngày phát hành",
|
|
702
|
+
"channels": "Kênh thông báo",
|
|
703
|
+
"cadence": "Tần suất",
|
|
704
|
+
"density": "Mật độ dòng",
|
|
705
|
+
"autoDeploy": "Triển khai khi merge",
|
|
706
|
+
"autoDeployHint": "Pipeline xanh sẽ tự đưa lên staging.",
|
|
707
|
+
"freeze": "Đóng băng phát hành",
|
|
708
|
+
"budget": "Ngân sách lỗi · {value}",
|
|
709
|
+
"syncing": "Đang đồng bộ sổ phát hành"
|
|
710
|
+
},
|
|
711
|
+
"plan": {
|
|
712
|
+
"starter": "Khởi đầu",
|
|
713
|
+
"standard": "Tiêu chuẩn",
|
|
714
|
+
"scale": "Mở rộng"
|
|
715
|
+
},
|
|
716
|
+
"channel": {
|
|
717
|
+
"email": "Email",
|
|
718
|
+
"escalation": "Chuyển lên ca trực khi một bản phát hành nằm ở trạng thái xét duyệt quá một ngày làm việc, tính cả cuối tuần và ngày lễ của khu vực phụ trách",
|
|
719
|
+
"escalationHint": "Gửi cho ca trực, không gửi cho cá nhân.",
|
|
720
|
+
"pager": "Máy nhắn tin"
|
|
721
|
+
},
|
|
722
|
+
"cadence": {
|
|
723
|
+
"daily": "Hằng ngày",
|
|
724
|
+
"weekly": "Hằng tuần",
|
|
725
|
+
"manual": "Thủ công"
|
|
726
|
+
},
|
|
727
|
+
"density": {
|
|
728
|
+
"compact": "Gọn",
|
|
729
|
+
"default": "Mặc định",
|
|
730
|
+
"comfortable": "Thoáng"
|
|
731
|
+
},
|
|
732
|
+
"steps": {
|
|
733
|
+
"caption": "Tiến độ phát hành",
|
|
734
|
+
"finished": "Hoàn tất",
|
|
735
|
+
"finishedHint": "Đã ký và lưu trữ hiện vật.",
|
|
736
|
+
"inProcess": "Đang xử lý",
|
|
737
|
+
"waiting": "Chờ",
|
|
738
|
+
"waitingHint": "Đang chờ kiểm tra tương phản cho hạt giống mới."
|
|
739
|
+
},
|
|
740
|
+
"progress": {
|
|
741
|
+
"rollout": "Triển khai · {value}",
|
|
742
|
+
"quota": "Phút build · {value}",
|
|
743
|
+
"done": "Xong"
|
|
744
|
+
},
|
|
745
|
+
"legend": {
|
|
746
|
+
"failed": "Thất bại",
|
|
747
|
+
"review": "Đang xét duyệt",
|
|
748
|
+
"shipped": "Đã phát hành"
|
|
749
|
+
},
|
|
750
|
+
"status": {
|
|
751
|
+
"caption": "Dấu hiệu trạng thái",
|
|
752
|
+
"success": "Thành công",
|
|
753
|
+
"error": "Lỗi",
|
|
754
|
+
"default": "Mặc định",
|
|
755
|
+
"processing": "Đang xử lý",
|
|
756
|
+
"warning": "Cảnh báo",
|
|
757
|
+
"seed": "Hạt giống"
|
|
758
|
+
},
|
|
759
|
+
"action": {
|
|
760
|
+
"primary": "Triển khai",
|
|
761
|
+
"secondary": "So sánh",
|
|
762
|
+
"outline": "Quay lui",
|
|
763
|
+
"dashed": "Thêm bước",
|
|
764
|
+
"ghost": "Nhật ký",
|
|
765
|
+
"deploying": "Đang triển khai",
|
|
766
|
+
"discard": "Loại bỏ bản ứng viên này"
|
|
767
|
+
},
|
|
768
|
+
"confirm": {
|
|
769
|
+
"trigger": "Xóa bản phát hành",
|
|
770
|
+
"title": "Xóa bản phát hành này?",
|
|
771
|
+
"description": "Hiện vật vẫn nằm trong registry. Hồ sơ phát hành và các phê duyệt thì không.",
|
|
772
|
+
"cancel": "Giữ lại",
|
|
773
|
+
"ok": "Xóa"
|
|
774
|
+
},
|
|
775
|
+
"avatars": {
|
|
776
|
+
"caption": "12 người duyệt"
|
|
777
|
+
},
|
|
778
|
+
"rating": {
|
|
779
|
+
"1": "Không dùng được",
|
|
780
|
+
"2": "Còn thô",
|
|
781
|
+
"3": "Chấp nhận được",
|
|
782
|
+
"4": "Tốt",
|
|
783
|
+
"5": "Sẵn sàng phát hành"
|
|
784
|
+
},
|
|
785
|
+
"otp": {
|
|
786
|
+
"title": "Xác minh thiết bị này",
|
|
787
|
+
"description": "Nhập mã sáu chữ số từ ứng dụng xác thực của bạn.",
|
|
788
|
+
"field": "Mã xác minh",
|
|
789
|
+
"verify": "Xác minh"
|
|
790
|
+
},
|
|
791
|
+
"signup": {
|
|
792
|
+
"title": "Tạo tài khoản",
|
|
793
|
+
"description": "Một tài khoản dùng cho mọi môi trường bạn được cấp quyền.",
|
|
794
|
+
"email": "Email công việc",
|
|
795
|
+
"password": "Mật khẩu",
|
|
796
|
+
"submit": "Tạo tài khoản",
|
|
797
|
+
"or": "hoặc",
|
|
798
|
+
"sso": "Tiếp tục bằng đăng nhập một lần",
|
|
799
|
+
"passkey": "Tiếp tục bằng passkey"
|
|
800
|
+
},
|
|
801
|
+
"notify": {
|
|
802
|
+
"title": "Thông báo",
|
|
803
|
+
"longTitle": "Lời mời tham gia nhóm công tác về Độ tin cậy nền tảng và Quản trị phát hành đang chờ bạn trả lời",
|
|
804
|
+
"longMeta": "2026-09-12 09:12 UTC · hết hạn sau 3 ngày",
|
|
805
|
+
"open": "Mở",
|
|
806
|
+
"bareTitle": "Đã phát hành hóa đơn"
|
|
807
|
+
},
|
|
808
|
+
"qr": {
|
|
809
|
+
"caption": "Đăng ký ứng dụng xác thực",
|
|
810
|
+
"label": "Mã thiết lập xác thực hai yếu tố",
|
|
811
|
+
"manualKey": "Khóa thiết lập thủ công"
|
|
812
|
+
},
|
|
813
|
+
"welcome": {
|
|
814
|
+
"title": "Bắt đầu từ một mã hex",
|
|
815
|
+
"description": "Đưa cho trình tạo một màu thương hiệu, nó viết tệp hạt giống, đo mọi cặp tương phản và từ chối những giá trị không đạt.",
|
|
816
|
+
"dismiss": "Đóng"
|
|
817
|
+
},
|
|
818
|
+
"chat": {
|
|
819
|
+
"assistant": "Trợ lý",
|
|
820
|
+
"sent": "09:41",
|
|
821
|
+
"answer": "Hạt giống được giới hạn trong bảng, nên phần còn lại của tài liệu vẫn giữ bảng màu của nó.",
|
|
822
|
+
"bare": "Còn vòng focus thì sao?"
|
|
823
|
+
},
|
|
824
|
+
"thought": {
|
|
825
|
+
"label": "Cách hạt giống được áp dụng",
|
|
826
|
+
"read": "Đọc phạm vi",
|
|
827
|
+
"readHint": "[data-godx-theme] trên gốc của bảng",
|
|
828
|
+
"contrast": "Đo từng cặp",
|
|
829
|
+
"contrastBody": "Nhãn trên nền tô và nền tô trên canvas, ở cả hai giao diện, theo WCAG 2.2 SC 1.4.3 và SC 1.4.11.",
|
|
830
|
+
"write": "Viết giá trị dự phòng cho email"
|
|
831
|
+
},
|
|
832
|
+
"carousel": {
|
|
833
|
+
"caption": "Các bảng màu đã phát hành"
|
|
834
|
+
},
|
|
835
|
+
"alert": {
|
|
836
|
+
"title": "Lưu ý",
|
|
837
|
+
"description": "Hạt giống tự chọn được áp dụng đúng như đã nhập. CSS không có cách nào nâng một hạt giống sáng lên sống lưng tối, nên một thương hiệu cần đọc được trên cả hai canvas phải có giá trị thứ hai được đo trên nền tối.",
|
|
838
|
+
"okTitle": "Đã kiểm tra tương phản"
|
|
839
|
+
},
|
|
840
|
+
"timeline": {
|
|
841
|
+
"seedApplied": "Đã áp dụng hạt giống",
|
|
842
|
+
"scope": "Phạm vi bảng",
|
|
843
|
+
"contrastQueued": "Đã xếp hàng kiểm tra tương phản"
|
|
844
|
+
},
|
|
845
|
+
"dashboard": {
|
|
846
|
+
"releases": "Số bản phát hành",
|
|
847
|
+
"releasesHint": "30 ngày gần nhất",
|
|
848
|
+
"revenue": "Doanh thu ghi nhận",
|
|
849
|
+
"failureRate": "Tỷ lệ thay đổi thất bại",
|
|
850
|
+
"failureHint": "Càng thấp càng tốt",
|
|
851
|
+
"seatsLabel": "Khu vực trong phạm vi",
|
|
852
|
+
"seats": {
|
|
853
|
+
"other": "{count} khu vực"
|
|
854
|
+
},
|
|
855
|
+
"mix": "Cơ cấu phát hành",
|
|
856
|
+
"activity": "Hoạt động gần đây",
|
|
857
|
+
"environment": "Môi trường",
|
|
858
|
+
"owner": "Phụ trách",
|
|
859
|
+
"ledger": "Tham chiếu sổ",
|
|
860
|
+
"table": "Danh sách phát hành",
|
|
861
|
+
"tableHint": "Phụ trách, khu vực và số tiền được định dạng theo ngôn ngữ đang dùng.",
|
|
862
|
+
"updated": "Cập nhật {date}",
|
|
863
|
+
"rotate": "Xoay khóa"
|
|
864
|
+
},
|
|
865
|
+
"table": {
|
|
866
|
+
"id": "Bản phát hành",
|
|
867
|
+
"owner": "Phụ trách",
|
|
868
|
+
"region": "Khu vực",
|
|
869
|
+
"ref": "Tham chiếu",
|
|
870
|
+
"status": "Trạng thái",
|
|
871
|
+
"amount": "Số tiền",
|
|
872
|
+
"noRef": "Chưa đặt"
|
|
873
|
+
},
|
|
874
|
+
"releaseStatus": {
|
|
875
|
+
"shipped": "Đã phát hành",
|
|
876
|
+
"review": "Đang xét duyệt",
|
|
877
|
+
"draft": "Bản nháp",
|
|
878
|
+
"failed": "Thất bại"
|
|
879
|
+
}
|
|
880
|
+
},
|
|
881
|
+
"themeEditor": {
|
|
882
|
+
"title": "Trình sửa theme",
|
|
883
|
+
"subtitle": "Một màu hạt giống vào, cả bộ thương hiệu ra, được đo chứ không phải khẳng định.",
|
|
884
|
+
"unreadable": {
|
|
885
|
+
"title": "Không đọc được stylesheet token",
|
|
886
|
+
"description": "Trang này suy ra thương hiệu từ màu nền và các bậc ramp mà tài liệu đang vẽ, đọc trực tiếp từ stylesheet. Ở đây không đọc được cả hai, nên mọi số bên dưới sẽ không còn là phép đo."
|
|
887
|
+
},
|
|
888
|
+
"order": {
|
|
889
|
+
"title": "Hạt giống, rồi vai trò, rồi phạm vi, rồi từng phần tử",
|
|
890
|
+
"description": "Hãy dừng ở mức đầu tiên giải quyết được việc. Mọi mức dưới hạt giống là một giá trị đã thôi suy ra, và không gì báo cho bạn khi thương hiệu đi tiếp."
|
|
891
|
+
},
|
|
892
|
+
"seed": {
|
|
893
|
+
"title": "1. Hạt giống",
|
|
894
|
+
"description": "Màu hành động của thương hiệu: màu tô của nút chính. Phần lớn trường hợp, chừng này là đủ cho cả theme.",
|
|
895
|
+
"label": "Hạt giống thương hiệu",
|
|
896
|
+
"helper": "Một mã hex sáu chữ số. Mọi thứ bên dưới suy ra từ nó và được đo theo WCAG 2.2 AA.",
|
|
897
|
+
"presetLabel": "Các ca biên",
|
|
898
|
+
"presetHelper": "Mỗi ca cho một câu trả lời mà một màu xanh ngoan ngoãn sẽ giấu đi.",
|
|
899
|
+
"presetPlaceholder": "Một hạt giống của bạn",
|
|
900
|
+
"preset": {
|
|
901
|
+
"godx": "Hạt giống của chính gói này",
|
|
902
|
+
"blue": "Một màu xanh thương hiệu thông thường",
|
|
903
|
+
"very-light": "Gần trắng: màu tô không đạt ngưỡng trên nền sáng",
|
|
904
|
+
"very-dark": "Gần đen: hạt giống tối chạy tới trắng",
|
|
905
|
+
"sunflower": "Hướng dương: đảo hướng bậc trạng thái ở cả hai theme"
|
|
906
|
+
},
|
|
907
|
+
"announce": "Hạt giống {hex}. Sáng {light}, tối {dark}. {pass} trên {count} cặp đo được đạt AA.",
|
|
908
|
+
"announceNoDark": "Hạt giống {hex}. Với sắc và độ bão hoà này, không độ sáng nào cho một màu tô đọc được trên nền tối, nên không có theme tối để đo."
|
|
909
|
+
},
|
|
910
|
+
"derived": {
|
|
911
|
+
"title": "2. Hạt giống sinh ra những gì",
|
|
912
|
+
"description": "Chỉ đọc, vì đây là kết quả. Mỗi theme chỉ ghi ba vai trò vào bản xuất; phần còn lại suy ra từ primary trong phạm vi của chính phần tử đang vẽ, nên ghi ra sẽ ghim chúng vào hạt giống này.",
|
|
913
|
+
"tableLabel": "Các vai trò suy ra từ hạt giống",
|
|
914
|
+
"column": {
|
|
915
|
+
"token": "Token",
|
|
916
|
+
"light": "Sáng",
|
|
917
|
+
"dark": "Tối",
|
|
918
|
+
"emitted": "Trong bản xuất"
|
|
919
|
+
},
|
|
920
|
+
"written": "Được ghi",
|
|
921
|
+
"derivedOnly": "Suy ra"
|
|
922
|
+
},
|
|
923
|
+
"contrast": {
|
|
924
|
+
"title": "3. Tương phản",
|
|
925
|
+
"description": "Mọi cặp hạt giống sinh ra, đo bằng chính helper WCAG của gói. Nhãn trên nền tô cần 4.5:1 (SC 1.4.3); màu tô trên nền phía sau cần 3:1 (SC 1.4.11).",
|
|
926
|
+
"tableLabel": "Các cặp tương phản đã đo",
|
|
927
|
+
"column": {
|
|
928
|
+
"pair": "Cặp",
|
|
929
|
+
"measured": "Đo được",
|
|
930
|
+
"threshold": "Cần",
|
|
931
|
+
"result": "Kết quả"
|
|
932
|
+
},
|
|
933
|
+
"pair": {
|
|
934
|
+
"label-on-fill-light": "Nhãn trên nền tô, sáng",
|
|
935
|
+
"label-on-fill-dark": "Nhãn trên nền tô, tối",
|
|
936
|
+
"fill-on-canvas-light": "Màu tô trên nền trang, sáng",
|
|
937
|
+
"fill-on-canvas-dark": "Màu tô trên nền trang, tối",
|
|
938
|
+
"link-on-canvas-light": "Màu liên kết trên nền trang, sáng",
|
|
939
|
+
"link-on-canvas-dark": "Màu liên kết trên nền trang, tối"
|
|
940
|
+
},
|
|
941
|
+
"ratio": "{value}:1",
|
|
942
|
+
"pass": "Đạt AA",
|
|
943
|
+
"fail": "Dưới AA"
|
|
944
|
+
},
|
|
945
|
+
"overrides": {
|
|
946
|
+
"title": "4. Ghi đè từng token",
|
|
947
|
+
"description": "Đặt dưới hạt giống là có chủ ý. Chỉ dùng khi hạt giống đã đúng và duy nhất một token cần khác đi.",
|
|
948
|
+
"costTitle": "Cái giá của một lần ghi đè",
|
|
949
|
+
"costDescription": "Một token đặt tay sẽ thôi bám theo hạt giống. Lần đổi thương hiệu sau, mọi thứ suy ra đều dịch chuyển và riêng giá trị này ở lại, không bản kiểm nào báo.",
|
|
950
|
+
"labelTitle": "Màu nhãn trên nền tô",
|
|
951
|
+
"labelHelper": "Mặc định, nhãn do chính độ chói của hạt giống chọn, cùng ngưỡng 0.179 mà lần đổi theme lúc chạy dùng. Ép nhãn là ghi đè duy nhất trình sinh có cờ cho nó.",
|
|
952
|
+
"labelAuto": "Tự động",
|
|
953
|
+
"labelLight": "Nhãn sáng",
|
|
954
|
+
"labelDark": "Nhãn tối",
|
|
955
|
+
"darkTitle": "Độ sáng của hạt giống tối",
|
|
956
|
+
"darkHelper": "Tương phản ngang bằng với theme sáng đặt nó ở {parity}. Sắc và độ bão hoà luôn giữ nguyên; chỉ độ sáng dịch chuyển. Một giá trị đặt tay được phép trượt ngưỡng, và bảng trên là nơi nó nói ra.",
|
|
957
|
+
"darkNoParity": "Với sắc và độ bão hoà này, không độ sáng nào đạt cả hai ngưỡng, nên không có giá trị ngang bằng để rời khỏi.",
|
|
958
|
+
"darkReset": "Về giá trị ngang bằng",
|
|
959
|
+
"darkAuthored": "Đặt tay",
|
|
960
|
+
"darkParity": "Ngang bằng"
|
|
961
|
+
},
|
|
962
|
+
"export": {
|
|
963
|
+
"title": "5. Bản xuất",
|
|
964
|
+
"description": "Dán khối đầu vào file theme của bạn, và khối thứ hai đè lên bảng màu email đã nướng sẵn, nơi không stylesheet nào với tới.",
|
|
965
|
+
"nameLabel": "Tên theme",
|
|
966
|
+
"nameHelper": "Ghi ra {name}.service.css và {name}.email.ts.",
|
|
967
|
+
"matches": "Trùng khớp gen:brand",
|
|
968
|
+
"diverges": "Không lệnh nào sinh ra bản này",
|
|
969
|
+
"divergesWhy": "Độ sáng của hạt giống tối được đặt tay ở đây. Trình sinh tìm giá trị ngang bằng và không có cờ cho nó, nên không lệnh nào tái tạo được file này.",
|
|
970
|
+
"cssLabel": "CSS theme cho {name}",
|
|
971
|
+
"emailLabel": "Bảng màu email cho {name}",
|
|
972
|
+
"noDarkTitle": "Hạt giống này không có màu tô tối đọc được",
|
|
973
|
+
"noDarkDescription": "Với sắc và độ bão hoà này, không độ sáng nào đạt đồng thời 4.5:1 với nhãn của nó và 3:1 với nền tối. Hãy giảm bão hoà, hoặc ép nhãn ở trên rồi xem lại."
|
|
974
|
+
},
|
|
975
|
+
"preview": {
|
|
976
|
+
"lightTitle": "Sáng",
|
|
977
|
+
"darkTitle": "Tối",
|
|
978
|
+
"seedIs": "Phạm vi {hex}",
|
|
979
|
+
"tableLabel": "Dòng hoá đơn",
|
|
980
|
+
"column": {
|
|
981
|
+
"id": "Dòng",
|
|
982
|
+
"item": "Hạng mục",
|
|
983
|
+
"owner": "Phụ trách",
|
|
984
|
+
"state": "Trạng thái"
|
|
985
|
+
},
|
|
986
|
+
"state": {
|
|
987
|
+
"active": "Đang chạy",
|
|
988
|
+
"pending": "Chờ"
|
|
989
|
+
},
|
|
990
|
+
"line": {
|
|
991
|
+
"licence": "Bản quyền",
|
|
992
|
+
"support": "Bảo trì",
|
|
993
|
+
"setup": "Triển khai"
|
|
994
|
+
},
|
|
995
|
+
"action": {
|
|
996
|
+
"save": "Lưu",
|
|
997
|
+
"duplicate": "Nhân bản",
|
|
998
|
+
"export": "Xuất",
|
|
999
|
+
"add": "Thêm dòng",
|
|
1000
|
+
"dismiss": "Bỏ qua",
|
|
1001
|
+
"delete": "Xoá",
|
|
1002
|
+
"details": "Chi tiết"
|
|
1003
|
+
},
|
|
1004
|
+
"badge": {
|
|
1005
|
+
"brand": "Thương hiệu",
|
|
1006
|
+
"success": "Đã thu",
|
|
1007
|
+
"warning": "Sắp đến hạn",
|
|
1008
|
+
"destructive": "Quá hạn",
|
|
1009
|
+
"info": "Nháp",
|
|
1010
|
+
"neutral": "Lưu trữ"
|
|
1011
|
+
},
|
|
1012
|
+
"alert": {
|
|
1013
|
+
"title": "Địa chỉ xuất hoá đơn chưa đủ",
|
|
1014
|
+
"description": "Chưa thể phát hành hoá đơn cho tới khi điền xong.",
|
|
1015
|
+
"link": "Về phần hạt giống"
|
|
1016
|
+
},
|
|
1017
|
+
"field": {
|
|
1018
|
+
"org": "Tổ chức",
|
|
1019
|
+
"orgHelper": "Hiện trên mọi chứng từ phát hành.",
|
|
1020
|
+
"plan": "Gói",
|
|
1021
|
+
"tax": "Gồm thuế",
|
|
1022
|
+
"mail": "Gửi tự động"
|
|
1023
|
+
},
|
|
1024
|
+
"plan": {
|
|
1025
|
+
"starter": "Khởi đầu",
|
|
1026
|
+
"pro": "Chuyên nghiệp",
|
|
1027
|
+
"scale": "Mở rộng"
|
|
1028
|
+
}
|
|
1029
|
+
}
|
|
1030
|
+
},
|
|
1031
|
+
"marketingShowcase": {
|
|
1032
|
+
"brand": {
|
|
1033
|
+
"name": "Example Works",
|
|
1034
|
+
"suffix": "Phê duyệt"
|
|
1035
|
+
},
|
|
1036
|
+
"nav": {
|
|
1037
|
+
"label": "Điều hướng chính",
|
|
1038
|
+
"product": "Sản phẩm",
|
|
1039
|
+
"solutions": "Giải pháp",
|
|
1040
|
+
"pricing": "Bảng giá",
|
|
1041
|
+
"docs": "Tài liệu",
|
|
1042
|
+
"signIn": "Đăng nhập",
|
|
1043
|
+
"getStarted": "Dùng thử miễn phí",
|
|
1044
|
+
"open": "Mở điều hướng",
|
|
1045
|
+
"title": "Điều hướng",
|
|
1046
|
+
"description": "Mọi điểm đến trên thanh tiêu đề, gồm cả hai mục bị ẩn ở khổ điện thoại.",
|
|
1047
|
+
"close": "Đóng điều hướng"
|
|
1048
|
+
},
|
|
1049
|
+
"hero": {
|
|
1050
|
+
"eyebrow": "Quy trình phê duyệt",
|
|
1051
|
+
"title": "Mọi phê duyệt, trong một dấu vết.",
|
|
1052
|
+
"lead": "Chuyển hoá đơn, đơn mua hàng hay hợp đồng tới đúng người chịu trách nhiệm, giữ chứng cứ ngay cạnh quyết định, và xuất cả năm trong một tệp.",
|
|
1053
|
+
"primary": "Dùng thử miễn phí",
|
|
1054
|
+
"secondary": "Đặt lịch xem demo",
|
|
1055
|
+
"trust": "Không cần thẻ. 14 ngày. Huỷ ngay trong sản phẩm.",
|
|
1056
|
+
"panelTitle": "Hàng đợi hôm nay",
|
|
1057
|
+
"panelNote": "Số liệu thật của một tenant, cập nhật sau mỗi lần duyệt.",
|
|
1058
|
+
"pending": "Đang chờ bạn",
|
|
1059
|
+
"cleared": "Đã xong hôm nay",
|
|
1060
|
+
"median": "Trung vị thời gian quyết định",
|
|
1061
|
+
"medianValue": "4 giờ 12 phút",
|
|
1062
|
+
"endpointLabel": "Endpoint webhook",
|
|
1063
|
+
"endpointNote": "Dán nguyên văn vào gateway. Chuỗi này không có chỗ để ngắt dòng."
|
|
1064
|
+
},
|
|
1065
|
+
"logos": {
|
|
1066
|
+
"title": "Những đội đã bỏ phê duyệt qua email",
|
|
1067
|
+
"caption": "Băng chạy được giao ở trạng thái DỪNG, và nút cạnh nó là một nút thật, có trong thứ tự tab.",
|
|
1068
|
+
"marqueeLabel": "Logo khách hàng"
|
|
1069
|
+
},
|
|
1070
|
+
"features": {
|
|
1071
|
+
"title": "Sản phẩm làm gì",
|
|
1072
|
+
"lead": "Sáu năng lực, và không cái nào là một component mới.",
|
|
1073
|
+
"routingTitle": "Định tuyến",
|
|
1074
|
+
"routingBody": "Một quy tắc đọc số tiền, trung tâm chi phí và nhà cung cấp, rồi chọn người duyệt phụ trách tổ hợp đó.",
|
|
1075
|
+
"auditTitle": "Dấu vết kiểm toán mà kế toán đọc được mà không phải hỏi ai mã trạng thái nghĩa là gì",
|
|
1076
|
+
"residencyTitle": "Nơi lưu trữ dữ liệu",
|
|
1077
|
+
"residencyBody": "Mọi tài liệu và chỉ mục dẫn xuất đều ở lại vùng Tokyo.",
|
|
1078
|
+
"evidenceTitle": "承認の証跡",
|
|
1079
|
+
"evidenceBody": "決裁の理由と添付を同じ行に残します。Chứng cứ và quyết định là một bản ghi, không phải hai hệ thống.",
|
|
1080
|
+
"webhookTitle": "Webhook",
|
|
1081
|
+
"webhookBody": "Mỗi endpoint mang một định danh không có chỗ ngắt dòng, và thẻ này chứa được nó:",
|
|
1082
|
+
"ssoTitle": "SSO",
|
|
1083
|
+
"ssoBody": "SAML và OIDC, ánh xạ nhóm sang vai trò phê duyệt."
|
|
1084
|
+
},
|
|
1085
|
+
"testimonials": {
|
|
1086
|
+
"title": "Năm đầu tiên trông như thế nào",
|
|
1087
|
+
"label": "Trích dẫn khách hàng",
|
|
1088
|
+
"ratingLabel": "Đánh giá",
|
|
1089
|
+
"q1": "Chúng tôi đóng quý mà không còn phê duyệt nào nằm lại trong hộp thư của ai đó, kiểm toán chỉ hỏi một bản xuất thay vì mười một, và bộ phận tài chính bỏ hẳn bảng tính riêng dùng để theo dõi thứ đã thực sự được ký.",
|
|
1090
|
+
"a1": "山口 佳奈",
|
|
1091
|
+
"r1": "Kế toán trưởng, Aoba Foods",
|
|
1092
|
+
"q2": "Nó chấm dứt tranh cãi.",
|
|
1093
|
+
"a2": "Dana Whitfield",
|
|
1094
|
+
"r2": "Trưởng bộ phận Mua hàng, Meridian Health",
|
|
1095
|
+
"q3": "Chúng tôi chuyển 240 quy trình phê duyệt sang đây trong sáu tuần, và không mất một chứng từ nào.",
|
|
1096
|
+
"a3": "Trần Minh Khoa",
|
|
1097
|
+
"r3": "Phụ trách Tài chính, Truong An"
|
|
1098
|
+
},
|
|
1099
|
+
"pricing": {
|
|
1100
|
+
"title": "Bảng giá",
|
|
1101
|
+
"lead": "Tính theo mỗi người duyệt, mỗi tháng. Chu kỳ năm chỉ xuất hoá đơn một lần.",
|
|
1102
|
+
"cycleLabel": "Chu kỳ thanh toán",
|
|
1103
|
+
"monthly": "Theo tháng",
|
|
1104
|
+
"yearly": "Theo năm",
|
|
1105
|
+
"perMonth": "mỗi người duyệt / tháng",
|
|
1106
|
+
"billedYearly": "xuất hoá đơn một lần mỗi năm",
|
|
1107
|
+
"popular": "Được chọn nhiều nhất",
|
|
1108
|
+
"saving": "Miễn phí 2 tháng",
|
|
1109
|
+
"fresh": "Mới",
|
|
1110
|
+
"quoted": "Báo giá riêng",
|
|
1111
|
+
"quotedNote": "Báo giá theo số người duyệt và vùng lưu trữ của bạn.",
|
|
1112
|
+
"starterName": "Starter",
|
|
1113
|
+
"starterNote": "Một luồng phê duyệt, một vùng.",
|
|
1114
|
+
"teamName": "Team",
|
|
1115
|
+
"teamNote": "Luồng song song, uỷ quyền, và bản xuất chứng cứ.",
|
|
1116
|
+
"enterpriseName": "エンタープライズ",
|
|
1117
|
+
"enterpriseNote": "専用テナント · SSO · 監査窓口。Tenant riêng, SSO, đầu mối kiểm toán.",
|
|
1118
|
+
"cta": "Dùng thử miễn phí",
|
|
1119
|
+
"ctaQuote": "Liên hệ với chúng tôi",
|
|
1120
|
+
"featChains": "Luồng phê duyệt",
|
|
1121
|
+
"featDelegation": "Uỷ quyền và vắng mặt",
|
|
1122
|
+
"featExport": "Xuất kiểm toán một tệp",
|
|
1123
|
+
"featSso": "SAML và OIDC",
|
|
1124
|
+
"featResidency": "Chọn vùng lưu trữ",
|
|
1125
|
+
"featSupport": "Đầu mối hỗ trợ riêng",
|
|
1126
|
+
"limitedChains": "Chỉ một luồng",
|
|
1127
|
+
"limitedSupport": "Giờ hành chính"
|
|
1128
|
+
},
|
|
1129
|
+
"cta": {
|
|
1130
|
+
"title": "Tuần này hãy cho một luồng phê duyệt chạy thử",
|
|
1131
|
+
"lead": "Nhập một luồng từ bảng tính, cho ba phê duyệt thật chạy qua, và giữ lại bản xuất.",
|
|
1132
|
+
"primary": "Dùng thử miễn phí",
|
|
1133
|
+
"secondary": "Đặt lịch xem demo",
|
|
1134
|
+
"note": "Bộ phận kinh doanh trả lời trong một ngày làm việc, giờ Tokyo."
|
|
1135
|
+
},
|
|
1136
|
+
"footer": {
|
|
1137
|
+
"label": "Chân trang",
|
|
1138
|
+
"product": "Sản phẩm",
|
|
1139
|
+
"company": "Công ty",
|
|
1140
|
+
"legal": "Pháp lý",
|
|
1141
|
+
"contact": "Liên hệ",
|
|
1142
|
+
"featuresLink": "Tính năng",
|
|
1143
|
+
"pricingLink": "Bảng giá",
|
|
1144
|
+
"changelog": "Nhật ký thay đổi",
|
|
1145
|
+
"status": "Tình trạng hệ thống",
|
|
1146
|
+
"about": "Giới thiệu",
|
|
1147
|
+
"careers": "Tuyển dụng",
|
|
1148
|
+
"terms": "Điều khoản",
|
|
1149
|
+
"privacy": "Quyền riêng tư",
|
|
1150
|
+
"security": "Bảo mật",
|
|
1151
|
+
"subprocessors": "Bên xử lý phụ",
|
|
1152
|
+
"accessibility": "Tuyên bố về khả năng tiếp cận",
|
|
1153
|
+
"salesLine": "Kinh doanh",
|
|
1154
|
+
"supportLine": "Hỗ trợ",
|
|
1155
|
+
"addressLabel": "Trụ sở đăng ký",
|
|
1156
|
+
"address": "Chiyoda, Tokyo",
|
|
1157
|
+
"rights": "Example Works. Một công ty hư cấu, chỉ dùng cho tài liệu."
|
|
1158
|
+
}
|
|
642
1159
|
}
|
|
643
1160
|
}
|
package/dist/lib/hooks.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type RefObject } from "react";
|
|
1
2
|
/**
|
|
2
3
|
* Returns a debounced view of `value`, updated only after `delay` ms of no
|
|
3
4
|
* change. Use for search inputs to avoid querying on every keystroke.
|
|
@@ -37,3 +38,93 @@ export declare function useIsMobile(): boolean;
|
|
|
37
38
|
* @param element the scroll container itself (state, not a ref, so the effect re-runs when it mounts)
|
|
38
39
|
*/
|
|
39
40
|
export declare function useScrollableRegionTabIndex(element: HTMLElement | null): void;
|
|
41
|
+
/**
|
|
42
|
+
* Does this scroll box actually have somewhere to scroll, on the axes it is allowed to scroll on?
|
|
43
|
+
*
|
|
44
|
+
* Drives BOTH halves of a scroll region: the `tabindex="0"` a keyboard user needs to reach the
|
|
45
|
+
* overflow (WCAG 2.1.1 / axe `scrollable-region-focusable`) AND the `role`/name that stop needs in
|
|
46
|
+
* order not to be an anonymous one (gh#817 for the table, gh#821 for `ScrollArea`). A stop that
|
|
47
|
+
* scrolls nothing is pure noise, and a name on it is noise too, so both are withheld until there is
|
|
48
|
+
* overflow to reach.
|
|
49
|
+
*
|
|
50
|
+
* The measurement may only ever REMOVE the stop, never withhold it on a guess: a box that has not
|
|
51
|
+
* been laid out reports 0 for `clientWidth`/`clientHeight` (the server render, jsdom, a
|
|
52
|
+
* `display:none` ancestor, the frame before first layout), and that is not evidence that nothing
|
|
53
|
+
* overflows. Reading it as "no overflow" would strand the overflow from every keyboard user — a
|
|
54
|
+
* worse failure than an extra tab stop — so an unmeasured box counts as scrolling.
|
|
55
|
+
*
|
|
56
|
+
* `axis` is the box's OWN `overflow`, not a preference: an axis it does not scroll on is `hidden`
|
|
57
|
+
* there, so overflow on that axis is CLIPPED rather than reachable, and measuring it would keep a
|
|
58
|
+
* tab stop that scrolls nothing. `ScrollArea`'s `orientation` is exactly this union.
|
|
59
|
+
*/
|
|
60
|
+
export declare function useScrollsOnAxis(ref: RefObject<HTMLElement | null>, enabled: boolean, axis: "horizontal" | "vertical" | "both"): boolean;
|
|
61
|
+
/** A table's wrapper scrolls on one axis only, so it asks the one question it has (gh#817). */
|
|
62
|
+
export declare function useScrollsHorizontally(ref: RefObject<HTMLElement | null>, enabled: boolean): boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Nearest scrollable ancestor — the box an element actually scrolls inside — else `null`, which is
|
|
65
|
+
* what `IntersectionObserver` already spells "the document viewport".
|
|
66
|
+
*
|
|
67
|
+
* Lifted VERBATIM out of `src/components/layout/page-container.tsx`, where it was private to
|
|
68
|
+
* `footerReveal="onScroll"` (gh#827). It is exported because the callers that need `useInView` to
|
|
69
|
+
* measure against a scroll PANE rather than the viewport have to name that pane, and every one of
|
|
70
|
+
* them would otherwise write this walk again.
|
|
71
|
+
*/
|
|
72
|
+
export declare function scrollParent(el: HTMLElement | null): HTMLElement | null;
|
|
73
|
+
/**
|
|
74
|
+
* Has this element entered the viewport (or `root`) yet?
|
|
75
|
+
*
|
|
76
|
+
* The ONE `IntersectionObserver` wrapper in the library, and it has to stay that way: before
|
|
77
|
+
* gh#827 the only observer in `src/components/` was `PageContainer`'s private `useFooterReveal`,
|
|
78
|
+
* so the next component that needed one copied it rather than finding it. Callers today are
|
|
79
|
+
* `Reveal on="view"` (gh#829, the first), `PageContainer footerReveal="onScroll"` and `Affix`
|
|
80
|
+
* (gh#827). `root` exists because two of the three measure against a scrolling PANE rather than
|
|
81
|
+
* the viewport; `scrollParent` above is how they name it.
|
|
82
|
+
*
|
|
83
|
+
* Borrowed from Motion's `useInView` (https://motion.dev/docs/react-use-in-view): `once` and
|
|
84
|
+
* `amount` keep their names, their types and their defaults, including `amount`'s
|
|
85
|
+
* `"some" | "all" | number` and Motion's own `{ some: 0, all: 1 }` threshold mapping.
|
|
86
|
+
*
|
|
87
|
+
* ## Unobservable counts as IN VIEW
|
|
88
|
+
*
|
|
89
|
+
* The server render, jsdom, a browser without `IntersectionObserver`, and `enabled: false` all
|
|
90
|
+
* report `true`. A caller that hides content until this returns `true` therefore shows it — the
|
|
91
|
+
* only safe direction, because the alternative is content that is never revealed at all. Callers
|
|
92
|
+
* MUST keep it that way: visibility is never gated on an observer that might not exist.
|
|
93
|
+
*
|
|
94
|
+
* ## `assumeInView` — which way to be wrong for the ONE frame before the first entry
|
|
95
|
+
*
|
|
96
|
+
* The hook normally flips to `false` the moment a live observer exists, before that observer has
|
|
97
|
+
* said anything, because a caller that HIDES on `false` would otherwise paint its content in and
|
|
98
|
+
* then take it away again. That is right for `Reveal` and wrong for the two callers that ACT on
|
|
99
|
+
* `false`: `PageContainer` would reveal its sticky footer for a frame, and `Affix` would fix a bar
|
|
100
|
+
* over the page before measuring it. Those pass `assumeInView`, which leaves the answer `true`
|
|
101
|
+
* until the observer actually reports — so neither ever acts on a measurement it has not taken.
|
|
102
|
+
*
|
|
103
|
+
* ## `amount` is clamped to what the element can actually reach
|
|
104
|
+
*
|
|
105
|
+
* `threshold` is the ratio of the intersection to the TARGET's own box
|
|
106
|
+
* (https://www.w3.org/TR/intersection-observer/#dom-intersectionobserverentry-intersectionratio), so
|
|
107
|
+
* an element taller than the root can never reach `1`: `amount: "all"` on a full-height section
|
|
108
|
+
* would hide it forever. The requested ratio is clamped at observe time to the largest ratio the
|
|
109
|
+
* element's measured box can attain inside the root.
|
|
110
|
+
*/
|
|
111
|
+
export declare function useInView(ref: RefObject<Element | null>, { enabled, once, amount, root, rootMargin, assumeInView, }?: {
|
|
112
|
+
/** `false` skips the observer entirely and reports `true`. */
|
|
113
|
+
enabled?: boolean;
|
|
114
|
+
/** Stop observing after the first entry, so the element never reports out-of-view again. */
|
|
115
|
+
once?: boolean;
|
|
116
|
+
/** How much must be visible — `"some"` (any pixel) | `"all"` | a 0..1 ratio. */
|
|
117
|
+
amount?: "some" | "all" | number;
|
|
118
|
+
/** Scroll container to measure against. `null` → the document viewport. */
|
|
119
|
+
root?: Element | null;
|
|
120
|
+
/**
|
|
121
|
+
* `IntersectionObserver` `rootMargin` — grows or shrinks the clipping box before the test.
|
|
122
|
+
*
|
|
123
|
+
* `Affix` is why it exists: it observes a hairline SENTINEL at the pinning edge and grows the
|
|
124
|
+
* box a million pixels past the line, so that "has not reached the line yet" and "is far below
|
|
125
|
+
* it" are one answer and the pin reduces to `!inView` in both directions.
|
|
126
|
+
*/
|
|
127
|
+
rootMargin?: string;
|
|
128
|
+
/** Stay `true` until the observer reports, instead of flipping to `false` on mount. */
|
|
129
|
+
assumeInView?: boolean;
|
|
130
|
+
}): boolean;
|