@capra/core 1.8.1 → 1.9.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/index.cjs +330 -92
- package/dist/index.d.cts +663 -639
- package/dist/index.d.mts +663 -639
- package/dist/index.mjs +317 -80
- package/dist/style.css +328 -167
- package/docs/core-alert--usage.md +2 -0
- package/docs/core-anchor--usage.md +2 -0
- package/docs/core-autocompletefield--usage.md +2 -0
- package/docs/core-badge--usage.md +2 -0
- package/docs/core-breadcrumbs--usage.md +2 -0
- package/docs/core-button--usage.md +2 -0
- package/docs/core-buttonlink--usage.md +2 -0
- package/docs/core-checkbox--usage.md +2 -0
- package/docs/core-collapse--usage.md +2 -0
- package/docs/core-datepickerfield--usage.md +2 -0
- package/docs/core-daterangepickerfield--usage.md +2 -0
- package/docs/core-divider--usage.md +2 -0
- package/docs/core-emptystate--usage.md +2 -0
- package/docs/core-helpertext--usage.md +2 -0
- package/docs/core-iconbutton--usage.md +2 -0
- package/docs/core-inputrow--usage.md +2 -0
- package/docs/core-label--usage.md +2 -0
- package/docs/core-link--usage.md +2 -0
- package/docs/core-listitem--usage.md +2 -0
- package/docs/core-menu--usage.md +2 -0
- package/docs/core-modal--usage.md +2 -0
- package/docs/core-pagination--usage.md +2 -0
- package/docs/core-pill--usage.md +2 -0
- package/docs/core-radio--usage.md +2 -0
- package/docs/core-radiogroup--usage.md +2 -0
- package/docs/core-radiotile--usage.md +2 -0
- package/docs/core-ribbon--usage.md +2 -0
- package/docs/core-skeleton--usage.md +1 -2
- package/docs/core-skeletongroup--usage.md +0 -1
- package/docs/core-spinner--usage.md +2 -0
- package/docs/core-switch--usage.md +2 -0
- package/docs/core-tabnav--usage.md +2 -0
- package/docs/core-tag--usage.md +2 -0
- package/docs/core-text--usage.md +2 -0
- package/docs/core-textarea--usage.md +2 -0
- package/docs/core-textinput--usage.md +2 -0
- package/docs/core-tooltip--usage.md +2 -0
- package/docs/core-topnav--usage.md +2 -0
- package/docs/core-tree--design.md +31 -0
- package/docs/core-tree--usage.md +102 -0
- package/docs/core-verticalnavigation--usage.md +2 -0
- package/docs/history-changelogs-capra-core--docs.md +35 -0
- package/docs/index.md +2 -0
- package/package.json +9 -10
package/dist/index.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React$1 from "react";
|
|
2
2
|
import React, { Suspense, useCallback, useState } from "react";
|
|
3
|
-
import { AnglesLeft, AnglesRight, ArrowUpRightFromSquare, AttentionOutlined, AttentionSolid, CalendarNextOutlined, CalendarOutlined, CalendarPrevOutlined, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, CircleXmark, CloseOutlined, DragGrip, Exclamation, EyeInvisibleOutlined, EyeOutlined, InfoOutlined, InfoSolid, Loading, SuccessOutlined, SuccessSolid, SwapRightOutlined, WarningOutlined, WarningSolid } from "@capra/icons";
|
|
4
|
-
import { Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, Button as Button$1, ButtonContext, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, ComboBox, DateInput, DatePicker, DatePickerStateContext, DateRangePicker, DateRangePickerStateContext, DateSegment, Dialog, DialogTrigger, Disclosure, DisclosurePanel, Focusable, Group, Header, Heading, HeadingContext, Input, InputContext, LabelContext, Link as Link$1, ListBox, ListBoxItem, Menu as Menu$1, MenuItem, MenuSection, MenuTrigger, Modal as Modal$1, ModalOverlay, NumberField as NumberField$1, OverlayArrow, OverlayTriggerStateContext, Popover as Popover$1, Pressable, RangeCalendar, RangeCalendarStateContext, RouterProvider, Separator, SubmenuTrigger, Text as Text$1, TextArea as TextArea$1, TextContext, TextField as TextField$1, Tooltip as Tooltip$1, TooltipTrigger, composeRenderProps, useContextProps, useSlottedContext } from "react-aria-components";
|
|
3
|
+
import { AnglesLeft, AnglesRight, ArrowUpRightFromSquare, AttentionOutlined, AttentionSolid, CalendarNextOutlined, CalendarOutlined, CalendarPrevOutlined, CaretRight, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, CircleXmark, CloseOutlined, DragGrip, Exclamation, EyeInvisibleOutlined, EyeOutlined, InfoOutlined, InfoSolid, Loading, SuccessOutlined, SuccessSolid, SwapRightOutlined, WarningOutlined, WarningSolid } from "@capra/icons";
|
|
4
|
+
import { Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, Button as Button$1, ButtonContext, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, Collection, ComboBox, DateInput, DatePicker, DatePickerStateContext, DateRangePicker, DateRangePickerStateContext, DateSegment, Dialog, DialogTrigger, Disclosure, DisclosurePanel, Focusable, Group, Header, Heading, HeadingContext, Input, InputContext, LabelContext, Link as Link$1, ListBox, ListBoxItem, Menu as Menu$1, MenuItem, MenuSection, MenuTrigger, Modal as Modal$1, ModalOverlay, NumberField as NumberField$1, OverlayArrow, OverlayTriggerStateContext, Popover as Popover$1, Pressable, RangeCalendar, RangeCalendarStateContext, RouterProvider, Separator, SubmenuTrigger, Text as Text$1, TextArea as TextArea$1, TextContext, TextField as TextField$1, Tooltip as Tooltip$1, TooltipTrigger, Tree as Tree$1, TreeItem, TreeItemContent, composeRenderProps, useContextProps, useSlottedContext } from "react-aria-components";
|
|
5
5
|
import { FocusScope, UNSAFE_PortalProvider, useDateFormatter, useFocusWithin, usePreventScroll } from "react-aria";
|
|
6
6
|
import { createRoot } from "react-dom/client";
|
|
7
7
|
import { createPortal } from "react-dom";
|
|
@@ -229,7 +229,7 @@ const VisuallyHidden = ({ children, ...props }) => {
|
|
|
229
229
|
//#endregion
|
|
230
230
|
//#region src/components/input-helpers/Label.tsx
|
|
231
231
|
/** Label text and optional required indicator for form fields, aligned with Capra field layouts. */
|
|
232
|
-
const Label
|
|
232
|
+
const Label = React$1.forwardRef((props, ref) => {
|
|
233
233
|
const [mergedProps, mergedRef] = useContextProps(props, ref, LabelContext);
|
|
234
234
|
const { trailingSlot, children, required, FORCE__className: classNameOverride, style, ...labelProps } = mergedProps;
|
|
235
235
|
if (!children) return null;
|
|
@@ -242,7 +242,7 @@ const Label$1 = React$1.forwardRef((props, ref) => {
|
|
|
242
242
|
"aria-hidden": true
|
|
243
243
|
}, "*"), /* @__PURE__ */ React$1.createElement(VisuallyHidden, null, "This field is required"))), trailingSlot && /* @__PURE__ */ React$1.createElement("span", { className: Label_module_default.trailingSlot }, trailingSlot));
|
|
244
244
|
});
|
|
245
|
-
Label
|
|
245
|
+
Label.displayName = "Label";
|
|
246
246
|
//#endregion
|
|
247
247
|
//#region src/components/TextInput/TextInput.module.css
|
|
248
248
|
var TextInput_module_default = {
|
|
@@ -372,7 +372,7 @@ function AutocompleteFieldWithoutRef(props, ref) {
|
|
|
372
372
|
id,
|
|
373
373
|
shouldFocusWrap: true,
|
|
374
374
|
ref: comboboxRef
|
|
375
|
-
}, /* @__PURE__ */ React.createElement(Label
|
|
375
|
+
}, /* @__PURE__ */ React.createElement(Label, null, label), /* @__PURE__ */ React.createElement(TextInput, {
|
|
376
376
|
...inputProps,
|
|
377
377
|
ref,
|
|
378
378
|
trailingSlot: trailingContent
|
|
@@ -586,27 +586,32 @@ function BadgeLayout({ children }) {
|
|
|
586
586
|
//#endregion
|
|
587
587
|
//#region src/components/ListItem/ListItem.module.css
|
|
588
588
|
var ListItem_module_default = {
|
|
589
|
-
"
|
|
590
|
-
"
|
|
591
|
-
"
|
|
592
|
-
"
|
|
593
|
-
"
|
|
594
|
-
"
|
|
595
|
-
"
|
|
596
|
-
"
|
|
597
|
-
"
|
|
589
|
+
"__listItem-layout": "capra-ListItem-module-QN6vFW-__listItem-layout",
|
|
590
|
+
"content": "capra-ListItem-module-QN6vFW-content",
|
|
591
|
+
"description": "capra-ListItem-module-QN6vFW-description",
|
|
592
|
+
"label": "capra-ListItem-module-QN6vFW-label",
|
|
593
|
+
"leading": "capra-ListItem-module-QN6vFW-leading",
|
|
594
|
+
"listItem": "capra-ListItem-module-QN6vFW-listItem capra-ListItem-module-QN6vFW-__listItem-layout",
|
|
595
|
+
"slot": "capra-ListItem-module-QN6vFW-slot",
|
|
596
|
+
"slots": "capra-ListItem-module-QN6vFW-slots",
|
|
597
|
+
"suffix": "capra-ListItem-module-QN6vFW-suffix",
|
|
598
|
+
"trailing": "capra-ListItem-module-QN6vFW-trailing"
|
|
598
599
|
};
|
|
599
600
|
//#endregion
|
|
600
601
|
//#region src/components/ListItem/ListItemSlots.tsx
|
|
602
|
+
const CollapsedSlot = "__CollapsedSlot__";
|
|
601
603
|
const ListItemSlots = ({ children, trailing = false, FORCE__className }) => {
|
|
602
604
|
if (React.Children.count(children) === 0) return null;
|
|
603
605
|
return /* @__PURE__ */ React.createElement("div", {
|
|
604
606
|
className: clsx(ListItem_module_default.slots, FORCE__className),
|
|
605
607
|
"data-trailing": trailing || void 0
|
|
606
|
-
}, React.Children.map(children, (child, index) =>
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
608
|
+
}, React.Children.map(children, (child, index) => {
|
|
609
|
+
if (child === "__CollapsedSlot__") return void 0;
|
|
610
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
611
|
+
key: index,
|
|
612
|
+
className: ListItem_module_default.slot
|
|
613
|
+
}, child);
|
|
614
|
+
}));
|
|
610
615
|
};
|
|
611
616
|
//#endregion
|
|
612
617
|
//#region src/components/ListItem/ListItem.tsx
|
|
@@ -629,7 +634,7 @@ const Trailing = ({ children, FORCE__className }) => {
|
|
|
629
634
|
const Content = ({ children, FORCE__className }) => {
|
|
630
635
|
return /* @__PURE__ */ React$1.createElement("div", { className: clsx(ListItem_module_default.content, FORCE__className) }, children);
|
|
631
636
|
};
|
|
632
|
-
const Label = ({ children, id }) => {
|
|
637
|
+
const Label$1 = ({ children, id }) => {
|
|
633
638
|
return /* @__PURE__ */ React$1.createElement("div", {
|
|
634
639
|
id,
|
|
635
640
|
className: ListItem_module_default.label
|
|
@@ -648,7 +653,7 @@ const Spacer = () => {
|
|
|
648
653
|
});
|
|
649
654
|
};
|
|
650
655
|
ListItem.Content = Content;
|
|
651
|
-
ListItem.Label = Label;
|
|
656
|
+
ListItem.Label = Label$1;
|
|
652
657
|
ListItem.Description = Description;
|
|
653
658
|
ListItem.Suffix = Suffix;
|
|
654
659
|
ListItem.Spacer = Spacer;
|
|
@@ -757,7 +762,7 @@ function RadioWithoutRef({ name, checked, required, disabled, value, onChange, F
|
|
|
757
762
|
const Radio = fixedForwardRef(RadioWithoutRef);
|
|
758
763
|
//#endregion
|
|
759
764
|
//#region src/components/RadioTile/RadioTile.module.css
|
|
760
|
-
var RadioTile_module_default = { "base": "capra-RadioTile-module-
|
|
765
|
+
var RadioTile_module_default = { "base": "capra-RadioTile-module-iEQ2jG-base" };
|
|
761
766
|
//#endregion
|
|
762
767
|
//#region src/components/RadioTile/RadioTile.tsx
|
|
763
768
|
function RadioTileWithoutRef({ children, checked, disabled, description, icon, FORCE__className, ...props }, ref) {
|
|
@@ -1089,7 +1094,7 @@ const TextField = React$1.forwardRef((props, ref) => {
|
|
|
1089
1094
|
className: fieldLayout_module_default.field,
|
|
1090
1095
|
"data-capra-field-root": "",
|
|
1091
1096
|
"data-layout": layout
|
|
1092
|
-
}, /* @__PURE__ */ React$1.createElement(Label
|
|
1097
|
+
}, /* @__PURE__ */ React$1.createElement(Label, { required }, label), /* @__PURE__ */ React$1.createElement(TextInput, {
|
|
1093
1098
|
ref,
|
|
1094
1099
|
...inputRest,
|
|
1095
1100
|
appearance,
|
|
@@ -1193,7 +1198,7 @@ const NumberField = React$1.forwardRef((props, ref) => {
|
|
|
1193
1198
|
className: fieldLayout_module_default.field,
|
|
1194
1199
|
"data-capra-field-root": "",
|
|
1195
1200
|
"data-layout": layout
|
|
1196
|
-
}, /* @__PURE__ */ React$1.createElement(Label
|
|
1201
|
+
}, /* @__PURE__ */ React$1.createElement(Label, { required }, label), /* @__PURE__ */ React$1.createElement(Group, {
|
|
1197
1202
|
"data-capra-text-input": "",
|
|
1198
1203
|
"data-size": size,
|
|
1199
1204
|
className: clsx(TextInput_module_default.wrapper, NumberField_module_default.withStepper, classNameOverride)
|
|
@@ -2209,7 +2214,7 @@ function DatePickerFieldInner(props, ref) {
|
|
|
2209
2214
|
isInvalid,
|
|
2210
2215
|
shouldForceLeadingZeros: true,
|
|
2211
2216
|
validationBehavior: "aria"
|
|
2212
|
-
}, /* @__PURE__ */ React$1.createElement(Label
|
|
2217
|
+
}, /* @__PURE__ */ React$1.createElement(Label, { required }, label), /* @__PURE__ */ React$1.createElement(DatePickerFieldRow, {
|
|
2213
2218
|
appearance,
|
|
2214
2219
|
size,
|
|
2215
2220
|
leadingSlot,
|
|
@@ -2451,7 +2456,7 @@ function DateRangePickerFieldInner(props, ref) {
|
|
|
2451
2456
|
isInvalid,
|
|
2452
2457
|
shouldForceLeadingZeros: true,
|
|
2453
2458
|
validationBehavior: "aria"
|
|
2454
|
-
}, /* @__PURE__ */ React$1.createElement(Label
|
|
2459
|
+
}, /* @__PURE__ */ React$1.createElement(Label, { required }, label), /* @__PURE__ */ React$1.createElement(DateRangePickerFieldRow, {
|
|
2455
2460
|
appearance,
|
|
2456
2461
|
size,
|
|
2457
2462
|
leadingSlot,
|
|
@@ -2680,7 +2685,7 @@ const TextArea = React$1.forwardRef((props, ref) => {
|
|
|
2680
2685
|
...ariaFieldProps,
|
|
2681
2686
|
className: fieldLayout_module_default.field,
|
|
2682
2687
|
"data-layout": layout
|
|
2683
|
-
}, /* @__PURE__ */ React$1.createElement(Label
|
|
2688
|
+
}, /* @__PURE__ */ React$1.createElement(Label, { required }, label), /* @__PURE__ */ React$1.createElement("div", {
|
|
2684
2689
|
className: clsx(TextArea_module_default.wrapper, classNameOverride),
|
|
2685
2690
|
"data-has-indicator": hasIndicator,
|
|
2686
2691
|
"data-autosize": autoSizeActive,
|
|
@@ -2709,23 +2714,24 @@ TextArea.displayName = "TextArea";
|
|
|
2709
2714
|
//#endregion
|
|
2710
2715
|
//#region src/components/Modal/Modal.module.css
|
|
2711
2716
|
var Modal_module_default = {
|
|
2712
|
-
"confirmationActions": "capra-Modal-module-
|
|
2713
|
-
"confirmationBody": "capra-Modal-module-
|
|
2714
|
-
"confirmationIcon": "capra-Modal-module-
|
|
2715
|
-
"confirmationLayout": "capra-Modal-module-
|
|
2716
|
-
"confirmationMessage": "capra-Modal-module-
|
|
2717
|
-
"confirmationSurface": "capra-Modal-module-
|
|
2718
|
-
"content": "capra-Modal-module-
|
|
2719
|
-
"contentShow": "capra-Modal-module-
|
|
2720
|
-
"
|
|
2721
|
-
"
|
|
2722
|
-
"
|
|
2723
|
-
"
|
|
2724
|
-
"
|
|
2725
|
-
"
|
|
2726
|
-
"
|
|
2727
|
-
"
|
|
2728
|
-
"
|
|
2717
|
+
"confirmationActions": "capra-Modal-module-gAoc6W-confirmationActions",
|
|
2718
|
+
"confirmationBody": "capra-Modal-module-gAoc6W-confirmationBody",
|
|
2719
|
+
"confirmationIcon": "capra-Modal-module-gAoc6W-confirmationIcon",
|
|
2720
|
+
"confirmationLayout": "capra-Modal-module-gAoc6W-confirmationLayout",
|
|
2721
|
+
"confirmationMessage": "capra-Modal-module-gAoc6W-confirmationMessage",
|
|
2722
|
+
"confirmationSurface": "capra-Modal-module-gAoc6W-confirmationSurface",
|
|
2723
|
+
"content": "capra-Modal-module-gAoc6W-content",
|
|
2724
|
+
"contentShow": "capra-Modal-module-gAoc6W-contentShow",
|
|
2725
|
+
"dialog": "capra-Modal-module-gAoc6W-dialog",
|
|
2726
|
+
"expandedFooterLayout": "capra-Modal-module-gAoc6W-expandedFooterLayout",
|
|
2727
|
+
"expandedTitleLayout": "capra-Modal-module-gAoc6W-expandedTitleLayout",
|
|
2728
|
+
"footer": "capra-Modal-module-gAoc6W-footer",
|
|
2729
|
+
"footerActions": "capra-Modal-module-gAoc6W-footerActions",
|
|
2730
|
+
"header": "capra-Modal-module-gAoc6W-header",
|
|
2731
|
+
"headerLeading": "capra-Modal-module-gAoc6W-headerLeading",
|
|
2732
|
+
"overlay": "capra-Modal-module-gAoc6W-overlay",
|
|
2733
|
+
"overlayShow": "capra-Modal-module-gAoc6W-overlayShow",
|
|
2734
|
+
"surface": "capra-Modal-module-gAoc6W-surface"
|
|
2729
2735
|
};
|
|
2730
2736
|
//#endregion
|
|
2731
2737
|
//#region src/components/Text/Heading.tsx
|
|
@@ -2747,10 +2753,7 @@ const Heading$1 = React$1.forwardRef(function Heading(props, ref) {
|
|
|
2747
2753
|
//#endregion
|
|
2748
2754
|
//#region src/components/Modal/Modal.tsx
|
|
2749
2755
|
function ModalInner({ children, isOpen: open, onIsOpenChange: onOpenChange, title, footer, size = "md", isDismissible = true, FORCE__className, confirmButtonText = "OK", cancelButtonText = "Cancel", onClose, onConfirm, getContainer }) {
|
|
2750
|
-
const footerToDisplay = footer !== void 0 ? footer : /* @__PURE__ */ React$1.createElement(ModalFooterActions, null, cancelButtonText && /* @__PURE__ */ React$1.createElement(Button, {
|
|
2751
|
-
slot: "close",
|
|
2752
|
-
onPress: () => onClose?.()
|
|
2753
|
-
}, cancelButtonText), /* @__PURE__ */ React$1.createElement(Button, {
|
|
2756
|
+
const footerToDisplay = footer !== void 0 ? footer : /* @__PURE__ */ React$1.createElement(ModalFooterActions, null, cancelButtonText && /* @__PURE__ */ React$1.createElement(Button, { slot: "close" }, cancelButtonText), /* @__PURE__ */ React$1.createElement(Button, {
|
|
2754
2757
|
onPress: () => onConfirm?.(),
|
|
2755
2758
|
variant: "primary"
|
|
2756
2759
|
}, confirmButtonText));
|
|
@@ -2767,7 +2770,7 @@ function ModalInner({ children, isOpen: open, onIsOpenChange: onOpenChange, titl
|
|
|
2767
2770
|
}, /* @__PURE__ */ React$1.createElement(Modal$1, {
|
|
2768
2771
|
className: clsx(Modal_module_default.surface, FORCE__className),
|
|
2769
2772
|
"data-size": size ?? "md"
|
|
2770
|
-
}, /* @__PURE__ */ React$1.createElement(Dialog, { className:
|
|
2773
|
+
}, /* @__PURE__ */ React$1.createElement(Dialog, { className: Modal_module_default.dialog }, (!!title || isDismissible) && /* @__PURE__ */ React$1.createElement("div", { className: Modal_module_default.header }, /* @__PURE__ */ React$1.createElement("div", { className: Modal_module_default.headerLeading }, !!title && typeof title === "string" ? /* @__PURE__ */ React$1.createElement(ModalHeading, null, title) : title), isDismissible && /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
2771
2774
|
slot: "close",
|
|
2772
2775
|
variant: "tertiary",
|
|
2773
2776
|
appearance: "neutral",
|
|
@@ -4075,20 +4078,20 @@ const Toast = {
|
|
|
4075
4078
|
//#endregion
|
|
4076
4079
|
//#region src/components/Menu/Menu.module.css
|
|
4077
4080
|
var Menu_module_default = {
|
|
4078
|
-
"divider": "capra-Menu-module-
|
|
4079
|
-
"header": "capra-Menu-module-
|
|
4080
|
-
"list": "capra-Menu-module-
|
|
4081
|
-
"menu": "capra-Menu-module-
|
|
4082
|
-
"menuItem": "capra-Menu-module-
|
|
4083
|
-
"menuItemDescription": "capra-Menu-module-
|
|
4084
|
-
"menuItemLabel": "capra-Menu-module-
|
|
4085
|
-
"menuItemLeadingGutter": "capra-Menu-module-
|
|
4086
|
-
"menuItemListItemShell": "capra-Menu-module-
|
|
4087
|
-
"menuItemShortcut": "capra-Menu-module-
|
|
4088
|
-
"menuItemTrailingGroup": "capra-Menu-module-
|
|
4089
|
-
"menuItemTrailingGutter": "capra-Menu-module-
|
|
4090
|
-
"menuTriggerSlot": "capra-Menu-module-
|
|
4091
|
-
"section": "capra-Menu-module-
|
|
4081
|
+
"divider": "capra-Menu-module-3G4VeG-divider",
|
|
4082
|
+
"header": "capra-Menu-module-3G4VeG-header",
|
|
4083
|
+
"list": "capra-Menu-module-3G4VeG-list",
|
|
4084
|
+
"menu": "capra-Menu-module-3G4VeG-menu",
|
|
4085
|
+
"menuItem": "capra-Menu-module-3G4VeG-menuItem",
|
|
4086
|
+
"menuItemDescription": "capra-Menu-module-3G4VeG-menuItemDescription",
|
|
4087
|
+
"menuItemLabel": "capra-Menu-module-3G4VeG-menuItemLabel",
|
|
4088
|
+
"menuItemLeadingGutter": "capra-Menu-module-3G4VeG-menuItemLeadingGutter",
|
|
4089
|
+
"menuItemListItemShell": "capra-Menu-module-3G4VeG-menuItemListItemShell",
|
|
4090
|
+
"menuItemShortcut": "capra-Menu-module-3G4VeG-menuItemShortcut",
|
|
4091
|
+
"menuItemTrailingGroup": "capra-Menu-module-3G4VeG-menuItemTrailingGroup",
|
|
4092
|
+
"menuItemTrailingGutter": "capra-Menu-module-3G4VeG-menuItemTrailingGutter",
|
|
4093
|
+
"menuTriggerSlot": "capra-Menu-module-3G4VeG-menuTriggerSlot",
|
|
4094
|
+
"section": "capra-Menu-module-3G4VeG-section"
|
|
4092
4095
|
};
|
|
4093
4096
|
//#endregion
|
|
4094
4097
|
//#region src/components/Menu/Menu.tsx
|
|
@@ -4359,23 +4362,23 @@ const submenuPanelClassName = Menu_module_default.menu;
|
|
|
4359
4362
|
//#endregion
|
|
4360
4363
|
//#region src/components/TabNav/TabNav.module.css
|
|
4361
4364
|
var TabNav_module_default = {
|
|
4362
|
-
"dropdownIcon": "capra-TabNav-module-
|
|
4363
|
-
"extraContent": "capra-TabNav-module-
|
|
4364
|
-
"indentSpacer": "capra-TabNav-module-
|
|
4365
|
-
"panel": "capra-TabNav-module-
|
|
4366
|
-
"root": "capra-TabNav-module-
|
|
4367
|
-
"subMenu": "capra-TabNav-module-
|
|
4368
|
-
"subMenuItem": "capra-TabNav-module-
|
|
4369
|
-
"subMenuItemActive": "capra-TabNav-module-
|
|
4370
|
-
"subTab": "capra-TabNav-module-
|
|
4371
|
-
"subTabList": "capra-TabNav-module-
|
|
4372
|
-
"subTabListItem": "capra-TabNav-module-
|
|
4373
|
-
"tab": "capra-TabNav-module-
|
|
4374
|
-
"tabBar": "capra-TabNav-module-
|
|
4375
|
-
"tabGroup": "capra-TabNav-module-
|
|
4376
|
-
"tabIcon": "capra-TabNav-module-
|
|
4377
|
-
"tabLabel": "capra-TabNav-module-
|
|
4378
|
-
"tabList": "capra-TabNav-module-
|
|
4365
|
+
"dropdownIcon": "capra-TabNav-module-qqfvea-dropdownIcon",
|
|
4366
|
+
"extraContent": "capra-TabNav-module-qqfvea-extraContent",
|
|
4367
|
+
"indentSpacer": "capra-TabNav-module-qqfvea-indentSpacer",
|
|
4368
|
+
"panel": "capra-TabNav-module-qqfvea-panel",
|
|
4369
|
+
"root": "capra-TabNav-module-qqfvea-root",
|
|
4370
|
+
"subMenu": "capra-TabNav-module-qqfvea-subMenu",
|
|
4371
|
+
"subMenuItem": "capra-TabNav-module-qqfvea-subMenuItem",
|
|
4372
|
+
"subMenuItemActive": "capra-TabNav-module-qqfvea-subMenuItemActive",
|
|
4373
|
+
"subTab": "capra-TabNav-module-qqfvea-subTab",
|
|
4374
|
+
"subTabList": "capra-TabNav-module-qqfvea-subTabList",
|
|
4375
|
+
"subTabListItem": "capra-TabNav-module-qqfvea-subTabListItem",
|
|
4376
|
+
"tab": "capra-TabNav-module-qqfvea-tab",
|
|
4377
|
+
"tabBar": "capra-TabNav-module-qqfvea-tabBar",
|
|
4378
|
+
"tabGroup": "capra-TabNav-module-qqfvea-tabGroup",
|
|
4379
|
+
"tabIcon": "capra-TabNav-module-qqfvea-tabIcon",
|
|
4380
|
+
"tabLabel": "capra-TabNav-module-qqfvea-tabLabel",
|
|
4381
|
+
"tabList": "capra-TabNav-module-qqfvea-tabList"
|
|
4379
4382
|
};
|
|
4380
4383
|
//#endregion
|
|
4381
4384
|
//#region src/components/TabNav/TabNav.tsx
|
|
@@ -4949,4 +4952,238 @@ function ArrowSvg() {
|
|
|
4949
4952
|
}));
|
|
4950
4953
|
}
|
|
4951
4954
|
//#endregion
|
|
4952
|
-
|
|
4955
|
+
//#region src/components/Tree/Tree.module.css
|
|
4956
|
+
var Tree_module_default = {
|
|
4957
|
+
"chevronButton": "capra-Tree-module--hXpBa-chevronButton",
|
|
4958
|
+
"chevronIcon": "capra-Tree-module--hXpBa-chevronIcon",
|
|
4959
|
+
"indentSpacer": "capra-Tree-module--hXpBa-indentSpacer",
|
|
4960
|
+
"item": "capra-Tree-module--hXpBa-item capra-ListItem-module-QN6vFW-__listItem-layout",
|
|
4961
|
+
"itemContent": "capra-Tree-module--hXpBa-itemContent capra-ListItem-module-QN6vFW-content",
|
|
4962
|
+
"itemLabel": "capra-Tree-module--hXpBa-itemLabel capra-ListItem-module-QN6vFW-label",
|
|
4963
|
+
"itemSuffix": "capra-Tree-module--hXpBa-itemSuffix capra-ListItem-module-QN6vFW-suffix",
|
|
4964
|
+
"label": "capra-Tree-module--hXpBa-label",
|
|
4965
|
+
"root": "capra-Tree-module--hXpBa-root",
|
|
4966
|
+
"selectionCheckbox": "capra-Tree-module--hXpBa-selectionCheckbox",
|
|
4967
|
+
"suffix": "capra-Tree-module--hXpBa-suffix"
|
|
4968
|
+
};
|
|
4969
|
+
//#endregion
|
|
4970
|
+
//#region src/components/Tree/Tree.tsx
|
|
4971
|
+
const TreeSelectionContext = React$1.createContext(null);
|
|
4972
|
+
function getTextValue(item) {
|
|
4973
|
+
return typeof item.label === "string" ? item.label : String(item.key);
|
|
4974
|
+
}
|
|
4975
|
+
function buildTreeIndex(items) {
|
|
4976
|
+
const parentByKey = /* @__PURE__ */ new Map();
|
|
4977
|
+
const descendantsByKey = /* @__PURE__ */ new Map();
|
|
4978
|
+
const selectableDescendantsByKey = /* @__PURE__ */ new Map();
|
|
4979
|
+
const disabledKeys = /* @__PURE__ */ new Set();
|
|
4980
|
+
const selectableKeys = /* @__PURE__ */ new Set();
|
|
4981
|
+
const visit = (item, parent) => {
|
|
4982
|
+
parentByKey.set(item.key, parent);
|
|
4983
|
+
if (item.isDisabled) disabledKeys.add(item.key);
|
|
4984
|
+
else selectableKeys.add(item.key);
|
|
4985
|
+
const descendants = [];
|
|
4986
|
+
const selectableDescendants = [];
|
|
4987
|
+
for (const child of item.children ?? []) {
|
|
4988
|
+
visit(child, item.key);
|
|
4989
|
+
descendants.push(child.key, ...descendantsByKey.get(child.key) ?? []);
|
|
4990
|
+
if (!child.isDisabled) selectableDescendants.push(child.key);
|
|
4991
|
+
for (const descendant of selectableDescendantsByKey.get(child.key) ?? []) selectableDescendants.push(descendant);
|
|
4992
|
+
}
|
|
4993
|
+
descendantsByKey.set(item.key, descendants);
|
|
4994
|
+
selectableDescendantsByKey.set(item.key, selectableDescendants);
|
|
4995
|
+
};
|
|
4996
|
+
for (const item of items) visit(item, null);
|
|
4997
|
+
return {
|
|
4998
|
+
parentByKey,
|
|
4999
|
+
descendantsByKey,
|
|
5000
|
+
selectableDescendantsByKey,
|
|
5001
|
+
disabledKeys,
|
|
5002
|
+
selectableKeys
|
|
5003
|
+
};
|
|
5004
|
+
}
|
|
5005
|
+
function sanitizeSelection(selection, index) {
|
|
5006
|
+
const next = /* @__PURE__ */ new Set();
|
|
5007
|
+
for (const key of selection) if (index.parentByKey.has(key) && !index.disabledKeys.has(key)) next.add(key);
|
|
5008
|
+
return next;
|
|
5009
|
+
}
|
|
5010
|
+
function reconcileParentKeys(selection, index) {
|
|
5011
|
+
const next = new Set(selection);
|
|
5012
|
+
for (const [key, selectableDescendants] of index.selectableDescendantsByKey) {
|
|
5013
|
+
if (selectableDescendants.length === 0) continue;
|
|
5014
|
+
if (!selectableDescendants.every((descendantKey) => next.has(descendantKey))) next.delete(key);
|
|
5015
|
+
}
|
|
5016
|
+
return next;
|
|
5017
|
+
}
|
|
5018
|
+
function selectionToSet(selection, index) {
|
|
5019
|
+
if (selection === "all") return new Set(index.selectableKeys);
|
|
5020
|
+
if (selection == null) return /* @__PURE__ */ new Set();
|
|
5021
|
+
return sanitizeSelection(selection, index);
|
|
5022
|
+
}
|
|
5023
|
+
function expandKeysWithAncestors(keys, index) {
|
|
5024
|
+
if (keys == null) return;
|
|
5025
|
+
const expanded = /* @__PURE__ */ new Set();
|
|
5026
|
+
for (const key of keys) {
|
|
5027
|
+
if (!index.parentByKey.has(key)) continue;
|
|
5028
|
+
let current = key;
|
|
5029
|
+
while (current != null) {
|
|
5030
|
+
expanded.add(current);
|
|
5031
|
+
current = index.parentByKey.get(current) ?? null;
|
|
5032
|
+
}
|
|
5033
|
+
}
|
|
5034
|
+
return expanded;
|
|
5035
|
+
}
|
|
5036
|
+
function getCheckboxState(key, selectedKeys, index) {
|
|
5037
|
+
const selectableDescendants = index.selectableDescendantsByKey.get(key) ?? [];
|
|
5038
|
+
if (selectableDescendants.length === 0) return {
|
|
5039
|
+
checked: selectedKeys.has(key),
|
|
5040
|
+
indeterminate: false
|
|
5041
|
+
};
|
|
5042
|
+
const selectedDescendantCount = selectableDescendants.filter((descendantKey) => selectedKeys.has(descendantKey)).length;
|
|
5043
|
+
const allSelectableDescendantsSelected = selectedDescendantCount === selectableDescendants.length;
|
|
5044
|
+
const someSelectableDescendantsSelected = selectedDescendantCount > 0;
|
|
5045
|
+
if (allSelectableDescendantsSelected || selectedKeys.has(key)) return {
|
|
5046
|
+
checked: true,
|
|
5047
|
+
indeterminate: false
|
|
5048
|
+
};
|
|
5049
|
+
return {
|
|
5050
|
+
checked: false,
|
|
5051
|
+
indeterminate: someSelectableDescendantsSelected
|
|
5052
|
+
};
|
|
5053
|
+
}
|
|
5054
|
+
function applySelectionChange(prev, next, index) {
|
|
5055
|
+
const cascadedSelection = sanitizeSelection(next, index);
|
|
5056
|
+
for (const key of next) {
|
|
5057
|
+
if (prev.has(key) || index.disabledKeys.has(key)) continue;
|
|
5058
|
+
if ((index.descendantsByKey.get(key) ?? []).length === 0) continue;
|
|
5059
|
+
cascadedSelection.add(key);
|
|
5060
|
+
for (const descendantKey of index.selectableDescendantsByKey.get(key) ?? []) cascadedSelection.add(descendantKey);
|
|
5061
|
+
}
|
|
5062
|
+
for (const key of prev) {
|
|
5063
|
+
if (next.has(key) || index.disabledKeys.has(key)) continue;
|
|
5064
|
+
if ((index.descendantsByKey.get(key) ?? []).length === 0) continue;
|
|
5065
|
+
cascadedSelection.delete(key);
|
|
5066
|
+
for (const descendantKey of index.descendantsByKey.get(key) ?? []) cascadedSelection.delete(descendantKey);
|
|
5067
|
+
}
|
|
5068
|
+
return reconcileParentKeys(cascadedSelection, index);
|
|
5069
|
+
}
|
|
5070
|
+
function TreeSelectionCheckbox({ item }) {
|
|
5071
|
+
const context = React$1.useContext(TreeSelectionContext);
|
|
5072
|
+
if (context?.selectionMode !== "multiple") return null;
|
|
5073
|
+
const checkboxState = getCheckboxState(item.key, context.selectedKeys, context.index);
|
|
5074
|
+
return /* @__PURE__ */ React$1.createElement(Checkbox, {
|
|
5075
|
+
"aria-checked": checkboxState.indeterminate ? "mixed" : checkboxState.checked ? "true" : "false",
|
|
5076
|
+
"aria-label": getTextValue(item),
|
|
5077
|
+
checked: checkboxState.checked,
|
|
5078
|
+
disabled: context.index.disabledKeys.has(item.key),
|
|
5079
|
+
indeterminate: checkboxState.indeterminate,
|
|
5080
|
+
FORCE__className: Tree_module_default.selectionCheckbox,
|
|
5081
|
+
onChange: (event) => {
|
|
5082
|
+
event.stopPropagation();
|
|
5083
|
+
context.toggleSelection(item.key);
|
|
5084
|
+
},
|
|
5085
|
+
onClick: (event) => {
|
|
5086
|
+
event.stopPropagation();
|
|
5087
|
+
},
|
|
5088
|
+
onMouseDown: (event) => {
|
|
5089
|
+
event.stopPropagation();
|
|
5090
|
+
},
|
|
5091
|
+
onKeyDown: (event) => {
|
|
5092
|
+
event.stopPropagation();
|
|
5093
|
+
},
|
|
5094
|
+
onPointerDown: (event) => {
|
|
5095
|
+
event.stopPropagation();
|
|
5096
|
+
}
|
|
5097
|
+
});
|
|
5098
|
+
}
|
|
5099
|
+
function renderTreeItem(item) {
|
|
5100
|
+
return /* @__PURE__ */ React$1.createElement(TreeItem, {
|
|
5101
|
+
id: item.key,
|
|
5102
|
+
key: item.key,
|
|
5103
|
+
className: Tree_module_default.item,
|
|
5104
|
+
isDisabled: item.isDisabled,
|
|
5105
|
+
textValue: getTextValue(item)
|
|
5106
|
+
}, /* @__PURE__ */ React$1.createElement(TreeItemContent, null, ({ hasChildItems, id, level, selectionMode }) => /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(ListItem.Leading, null, Array.from({ length: Math.max(level - 1, 0) }).map((_, index) => /* @__PURE__ */ React$1.createElement("span", {
|
|
5107
|
+
key: `${String(item.key)}-indent-${index}`,
|
|
5108
|
+
"aria-hidden": "true",
|
|
5109
|
+
className: Tree_module_default.indentSpacer
|
|
5110
|
+
})), hasChildItems ? /* @__PURE__ */ React$1.createElement(Button$1, {
|
|
5111
|
+
slot: "chevron",
|
|
5112
|
+
className: Tree_module_default.chevronButton
|
|
5113
|
+
}, /* @__PURE__ */ React$1.createElement("span", {
|
|
5114
|
+
"aria-hidden": "true",
|
|
5115
|
+
className: Tree_module_default.chevronIcon
|
|
5116
|
+
}, /* @__PURE__ */ React$1.createElement(CaretRight, { size: "xs" }))) : /* @__PURE__ */ React$1.createElement("div", null), selectionMode === "multiple" ? /* @__PURE__ */ React$1.createElement(TreeSelectionCheckbox, { item }) : CollapsedSlot), /* @__PURE__ */ React$1.createElement("div", { className: Tree_module_default.itemContent }, /* @__PURE__ */ React$1.createElement("div", {
|
|
5117
|
+
id: String(id),
|
|
5118
|
+
className: Tree_module_default.itemLabel
|
|
5119
|
+
}, item.label)), /* @__PURE__ */ React$1.createElement(ListItem.Trailing, null, item.suffix ? /* @__PURE__ */ React$1.createElement("div", { className: Tree_module_default.itemSuffix }, item.suffix) : CollapsedSlot, item.trailingSlot || "__CollapsedSlot__"))), /* @__PURE__ */ React$1.createElement(Collection, { items: item.children }, renderTreeItem));
|
|
5120
|
+
}
|
|
5121
|
+
/**
|
|
5122
|
+
* A hierarchical tree with cascading multi-select and Capra ListItem row layout.
|
|
5123
|
+
*/
|
|
5124
|
+
function Tree({ FORCE__className: classNameOverride, items, selectionMode = "multiple", defaultSelectedKeys, selectedKeys, onSelectionChange, expandedKeys, defaultExpandedKeys, ...props }) {
|
|
5125
|
+
const index = React$1.useMemo(() => buildTreeIndex(items), [items]);
|
|
5126
|
+
const resolvedExpandedKeys = React$1.useMemo(() => expandKeysWithAncestors(expandedKeys, index), [expandedKeys, index]);
|
|
5127
|
+
const resolvedDefaultExpandedKeys = React$1.useMemo(() => expandKeysWithAncestors(defaultExpandedKeys, index), [defaultExpandedKeys, index]);
|
|
5128
|
+
const [internalSelectedKeys, setInternalSelectedKeys] = React$1.useState(() => applySelectionChange(/* @__PURE__ */ new Set(), selectionToSet(selectedKeys ?? defaultSelectedKeys, index), index));
|
|
5129
|
+
React$1.useEffect(() => {
|
|
5130
|
+
const nextSelectedKeys = selectedKeys != null ? applySelectionChange(/* @__PURE__ */ new Set(), selectionToSet(selectedKeys, index), index) : reconcileParentKeys(sanitizeSelection(internalSelectedKeys, index), index);
|
|
5131
|
+
if (nextSelectedKeys.size !== internalSelectedKeys.size || Array.from(nextSelectedKeys).some((key) => !internalSelectedKeys.has(key))) setInternalSelectedKeys(nextSelectedKeys);
|
|
5132
|
+
}, [
|
|
5133
|
+
index,
|
|
5134
|
+
internalSelectedKeys,
|
|
5135
|
+
selectedKeys
|
|
5136
|
+
]);
|
|
5137
|
+
const selectedKeysRef = React$1.useRef(internalSelectedKeys);
|
|
5138
|
+
selectedKeysRef.current = internalSelectedKeys;
|
|
5139
|
+
const commitSelection = React$1.useCallback((nextSelectedKeys) => {
|
|
5140
|
+
setInternalSelectedKeys(nextSelectedKeys);
|
|
5141
|
+
onSelectionChange?.(new Set(nextSelectedKeys));
|
|
5142
|
+
}, [onSelectionChange]);
|
|
5143
|
+
const toggleSelection = React$1.useCallback((key) => {
|
|
5144
|
+
if (selectionMode !== "multiple" || index.disabledKeys.has(key)) return;
|
|
5145
|
+
const nextSelectedKeys = new Set(selectedKeysRef.current);
|
|
5146
|
+
if (nextSelectedKeys.has(key)) nextSelectedKeys.delete(key);
|
|
5147
|
+
else nextSelectedKeys.add(key);
|
|
5148
|
+
commitSelection(applySelectionChange(selectedKeysRef.current, nextSelectedKeys, index));
|
|
5149
|
+
}, [
|
|
5150
|
+
commitSelection,
|
|
5151
|
+
index,
|
|
5152
|
+
selectionMode
|
|
5153
|
+
]);
|
|
5154
|
+
const handleSelectionChange = React$1.useCallback((nextSelection) => {
|
|
5155
|
+
if (selectionMode !== "multiple") {
|
|
5156
|
+
commitSelection(selectionToSet(nextSelection, index));
|
|
5157
|
+
return;
|
|
5158
|
+
}
|
|
5159
|
+
commitSelection(applySelectionChange(selectedKeysRef.current, selectionToSet(nextSelection, index), index));
|
|
5160
|
+
}, [
|
|
5161
|
+
commitSelection,
|
|
5162
|
+
index,
|
|
5163
|
+
selectionMode
|
|
5164
|
+
]);
|
|
5165
|
+
const selectionContext = React$1.useMemo(() => ({
|
|
5166
|
+
index,
|
|
5167
|
+
selectedKeys: internalSelectedKeys,
|
|
5168
|
+
selectionMode,
|
|
5169
|
+
toggleSelection
|
|
5170
|
+
}), [
|
|
5171
|
+
index,
|
|
5172
|
+
internalSelectedKeys,
|
|
5173
|
+
selectionMode,
|
|
5174
|
+
toggleSelection
|
|
5175
|
+
]);
|
|
5176
|
+
return /* @__PURE__ */ React$1.createElement(TreeSelectionContext.Provider, { value: selectionContext }, /* @__PURE__ */ React$1.createElement(Tree$1, {
|
|
5177
|
+
...props,
|
|
5178
|
+
selectionBehavior: "toggle",
|
|
5179
|
+
className: clsx(Tree_module_default.root, classNameOverride),
|
|
5180
|
+
items,
|
|
5181
|
+
selectedKeys: internalSelectedKeys,
|
|
5182
|
+
selectionMode,
|
|
5183
|
+
onSelectionChange: handleSelectionChange,
|
|
5184
|
+
expandedKeys: resolvedExpandedKeys,
|
|
5185
|
+
defaultExpandedKeys: resolvedDefaultExpandedKeys
|
|
5186
|
+
}, /* @__PURE__ */ React$1.createElement(Collection, { items }, renderTreeItem)));
|
|
5187
|
+
}
|
|
5188
|
+
//#endregion
|
|
5189
|
+
export { Alert, Anchor, AutocompleteField, Badge, BadgeLayout, Breadcrumb, Breadcrumbs, Button, ButtonLink, Card, Checkbox, Collapse, CustomTooltipTrigger, DatePickerField, DateRangePickerField, Divider, Drawer, EmptyState, IconButton, InputRow, Label, Link, ListItem, Menu, Modal, NumberField, Pagination, PasswordField, Pill, Popover, Radio, RadioGroup, RadioTile, Ribbon, RouterProvider, SKELETON_SIZE, SKELETON_SIZE_TOKENS, Skeleton, SkeletonGroup, Spinner, Switch, TabNav, Tag, Text, TextArea, TextField, Toast, Tooltip, TopNav, Tree, VerticalNavigation, VisuallyHidden, submenuPanelClassName, tagColors };
|