@capra/core 1.13.0 → 1.14.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 +340 -60
- package/dist/index.d.cts +228 -55
- package/dist/index.d.mts +228 -55
- package/dist/index.mjs +338 -63
- package/dist/style.css +334 -116
- package/docs/core-badge--design.md +10 -2
- package/docs/core-badge--usage.md +7 -1
- package/docs/core-checkbox--usage.md +1 -0
- package/docs/core-table--design.md +17 -0
- package/docs/core-table--usage.md +198 -0
- package/docs/core-togglebuttongroup--design.md +89 -0
- package/docs/core-togglebuttongroup--usage.md +113 -0
- package/docs/history-changelogs-capra-core--docs.md +21 -0
- package/docs/index.md +4 -0
- package/package.json +3 -3
package/dist/index.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React$1 from "react";
|
|
2
2
|
import React, { Suspense } from "react";
|
|
3
|
-
import { AnglesLeft, AnglesRight, ArrowUpRightFromSquare, AttentionOutlined, AttentionSolid, CalendarNextOutlined, CalendarOutlined, CalendarPrevOutlined, CaretRight, CheckOutlined, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, CircleXmark, CloseOutlined, DragGrip, Exclamation, EyeInvisibleOutlined, EyeOutlined, InfoOutlined, InfoSolid, Loading, SuccessOutlined, SuccessSolid, SwapRightOutlined, WarningOutlined, WarningSolid } from "@capra/icons";
|
|
4
|
-
import { Autocomplete, 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, FieldInputContext, Focusable, Group, Header, Heading, HeadingContext, Input, InputContext, LabelContext, Link as Link$1, ListBox, ListBoxItem, ListBoxSection, 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, Select, SelectStateContext, SelectValue, Separator, SubmenuTrigger, Tag as Tag$1, TagGroup, TagList, 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, useFilter, useSlottedContext } from "react-aria-components";
|
|
3
|
+
import { AnglesLeft, AnglesRight, ArrowUpRightFromSquare, AttentionOutlined, AttentionSolid, CalendarNextOutlined, CalendarOutlined, CalendarPrevOutlined, CaretDown, CaretRight, CaretUp, CheckOutlined, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, CircleXmark, CloseOutlined, DragGrip, Exclamation, EyeInvisibleOutlined, EyeOutlined, FilterOutlined, InfoOutlined, InfoSolid, Loading, SuccessOutlined, SuccessSolid, SwapRightOutlined, WarningOutlined, WarningSolid } from "@capra/icons";
|
|
4
|
+
import { Autocomplete, Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, Button as Button$1, ButtonContext, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, Cell, Checkbox as Checkbox$1, Collection, Column, ColumnResizer, ComboBox, DateInput, DatePicker, DatePickerStateContext, DateRangePicker, DateRangePickerStateContext, DateSegment, Dialog, DialogTrigger, Disclosure, DisclosurePanel, DropIndicator, FieldInputContext, Focusable, Group, Header, Heading, HeadingContext, Input, InputContext, LabelContext, Link as Link$1, ListBox, ListBoxItem, ListBoxSection, 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, Row, Select, SelectStateContext, SelectValue, Separator, SubmenuTrigger, Table as Table$1, TableBody, TableHeader, Tag as Tag$1, TagGroup, TagList, Text as Text$1, TextArea as TextArea$1, TextContext, TextField as TextField$1, ToggleButton, ToggleButtonGroup as ToggleButtonGroup$1, Tooltip as Tooltip$1, TooltipTrigger, Tree as Tree$1, TreeItem, TreeItemContent, composeRenderProps, useContextProps, useDragAndDrop, useFilter, useSlottedContext, useTableOptions } from "react-aria-components";
|
|
5
5
|
import { FocusScope, UNSAFE_PortalProvider, mergeProps, useButton, useDateFormatter, useFocusRing, useFocusWithin, usePreventScroll } from "react-aria";
|
|
6
6
|
import { createRoot } from "react-dom/client";
|
|
7
7
|
import { createPortal } from "react-dom";
|
|
@@ -246,12 +246,12 @@ Label.displayName = "Label";
|
|
|
246
246
|
//#endregion
|
|
247
247
|
//#region src/components/TextInput/TextInput.module.css
|
|
248
248
|
var TextInput_module_default = {
|
|
249
|
-
"errorIndicator": "capra-TextInput-module-
|
|
250
|
-
"input": "capra-TextInput-module-
|
|
251
|
-
"leadingSlot": "capra-TextInput-module-
|
|
252
|
-
"trailingSlot": "capra-TextInput-module-
|
|
253
|
-
"warningIndicator": "capra-TextInput-module-
|
|
254
|
-
"wrapper": "capra-TextInput-module-
|
|
249
|
+
"errorIndicator": "capra-TextInput-module--5NVeG-errorIndicator",
|
|
250
|
+
"input": "capra-TextInput-module--5NVeG-input",
|
|
251
|
+
"leadingSlot": "capra-TextInput-module--5NVeG-leadingSlot",
|
|
252
|
+
"trailingSlot": "capra-TextInput-module--5NVeG-trailingSlot",
|
|
253
|
+
"warningIndicator": "capra-TextInput-module--5NVeG-warningIndicator",
|
|
254
|
+
"wrapper": "capra-TextInput-module--5NVeG-wrapper"
|
|
255
255
|
};
|
|
256
256
|
//#endregion
|
|
257
257
|
//#region src/components/TextInput/TextInput.tsx
|
|
@@ -566,18 +566,23 @@ var Badge_module_default = {
|
|
|
566
566
|
/**
|
|
567
567
|
* Badges display an indicator/counter on an associated component.
|
|
568
568
|
*/
|
|
569
|
-
function Badge({ appearance = "danger", variant = "counter", size = "md", count = 0, showZero = false, overflowCount = 99, FORCE__className, style, ...props }) {
|
|
569
|
+
function Badge({ appearance = "danger", variant = "counter", size = "md", count = 0, showZero = false, overflowCount = 99, decorative, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, FORCE__className, style, ...props }) {
|
|
570
570
|
if (variant === "counter" && !showZero && !count) return null;
|
|
571
571
|
const getBadgeContent = () => {
|
|
572
572
|
if (variant === "dot") return null;
|
|
573
573
|
const value = Math.max(count, 0);
|
|
574
574
|
return value > overflowCount ? `${overflowCount}+` : value;
|
|
575
575
|
};
|
|
576
|
+
const role = decorative ? void 0 : variant === "dot" ? "img" : "status";
|
|
576
577
|
return /* @__PURE__ */ React$1.createElement("span", {
|
|
578
|
+
"aria-hidden": decorative || void 0,
|
|
579
|
+
"aria-label": decorative ? void 0 : ariaLabel,
|
|
580
|
+
"aria-labelledby": decorative ? void 0 : ariaLabelledBy,
|
|
577
581
|
className: clsx(Badge_module_default.badge, FORCE__className),
|
|
578
582
|
"data-appearance": appearance,
|
|
579
583
|
"data-size": size,
|
|
580
584
|
"data-variant": variant,
|
|
585
|
+
role,
|
|
581
586
|
style,
|
|
582
587
|
...props
|
|
583
588
|
}, getBadgeContent());
|
|
@@ -925,9 +930,11 @@ function Tag({ draggable, color = "default", icon: Icon, children, size = "md",
|
|
|
925
930
|
//#endregion
|
|
926
931
|
//#region src/components/Checkbox/Checkbox.module.css
|
|
927
932
|
var Checkbox_module_default = {
|
|
928
|
-
"base": "capra-Checkbox-module-
|
|
929
|
-
"
|
|
930
|
-
"
|
|
933
|
+
"base": "capra-Checkbox-module-IniPuq-base",
|
|
934
|
+
"inner": "capra-Checkbox-module-IniPuq-inner",
|
|
935
|
+
"input": "capra-Checkbox-module-IniPuq-input",
|
|
936
|
+
"label": "capra-Checkbox-module-IniPuq-label",
|
|
937
|
+
"text": "capra-Checkbox-module-IniPuq-text"
|
|
931
938
|
};
|
|
932
939
|
//#endregion
|
|
933
940
|
//#region src/components/Checkbox/Checkbox.tsx
|
|
@@ -995,6 +1002,27 @@ const Checkbox = React$1.forwardRef((props, ref) => {
|
|
|
995
1002
|
}, children));
|
|
996
1003
|
});
|
|
997
1004
|
Checkbox.displayName = "Checkbox";
|
|
1005
|
+
const RACCheckbox = React$1.forwardRef((props, ref) => {
|
|
1006
|
+
const { indeterminate, disabled, checked, defaultChecked, children, onChange, id, name, value, slot, FORCE__className: classNameOverride } = props;
|
|
1007
|
+
const hasLabel = Boolean(children);
|
|
1008
|
+
const inputRef = React$1.useRef(null);
|
|
1009
|
+
React$1.useImperativeHandle(ref, () => inputRef.current);
|
|
1010
|
+
return /* @__PURE__ */ React$1.createElement(Checkbox$1, {
|
|
1011
|
+
id,
|
|
1012
|
+
name,
|
|
1013
|
+
value: value?.toString(),
|
|
1014
|
+
slot,
|
|
1015
|
+
className: clsx(Checkbox_module_default.base, classNameOverride),
|
|
1016
|
+
isSelected: checked,
|
|
1017
|
+
defaultSelected: defaultChecked,
|
|
1018
|
+
isIndeterminate: indeterminate,
|
|
1019
|
+
isDisabled: disabled,
|
|
1020
|
+
"data-has-label": hasLabel ? "true" : "false",
|
|
1021
|
+
onChange,
|
|
1022
|
+
inputRef
|
|
1023
|
+
}, ({ isIndeterminate, isSelected }) => /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement("div", { className: Checkbox_module_default.input }, /* @__PURE__ */ React$1.createElement("div", { className: Checkbox_module_default.inner }), isIndeterminate ? /* @__PURE__ */ React$1.createElement(IndeterminateIcon, null) : isSelected ? /* @__PURE__ */ React$1.createElement(CheckedIcon, null) : null), /* @__PURE__ */ React$1.createElement("div", { className: Checkbox_module_default.text }, children)));
|
|
1024
|
+
});
|
|
1025
|
+
RACCheckbox.displayName = "RACCheckbox";
|
|
998
1026
|
//#endregion
|
|
999
1027
|
//#region src/components/Collapse/Collapse.module.css
|
|
1000
1028
|
var Collapse_module_default = {
|
|
@@ -1159,12 +1187,12 @@ PasswordField.displayName = "PasswordField";
|
|
|
1159
1187
|
//#endregion
|
|
1160
1188
|
//#region src/components/NumberField/NumberField.module.css
|
|
1161
1189
|
var NumberField_module_default = {
|
|
1162
|
-
"slotAlign": "capra-NumberField-module-
|
|
1163
|
-
"stepButton": "capra-NumberField-module-
|
|
1164
|
-
"stepDivider": "capra-NumberField-module-
|
|
1165
|
-
"stepIcon": "capra-NumberField-module-
|
|
1166
|
-
"stepper": "capra-NumberField-module-
|
|
1167
|
-
"withStepper": "capra-NumberField-module-
|
|
1190
|
+
"slotAlign": "capra-NumberField-module-IscOzq-slotAlign",
|
|
1191
|
+
"stepButton": "capra-NumberField-module-IscOzq-stepButton",
|
|
1192
|
+
"stepDivider": "capra-NumberField-module-IscOzq-stepDivider",
|
|
1193
|
+
"stepIcon": "capra-NumberField-module-IscOzq-stepIcon",
|
|
1194
|
+
"stepper": "capra-NumberField-module-IscOzq-stepper",
|
|
1195
|
+
"withStepper": "capra-NumberField-module-IscOzq-withStepper"
|
|
1168
1196
|
};
|
|
1169
1197
|
//#endregion
|
|
1170
1198
|
//#region src/components/NumberField/NumberField.tsx
|
|
@@ -2296,33 +2324,33 @@ const DatePickerField = DatePickerFieldWithRef;
|
|
|
2296
2324
|
//#endregion
|
|
2297
2325
|
//#region src/components/SelectField/SelectField.module.css
|
|
2298
2326
|
var SelectField_module_default = {
|
|
2299
|
-
"chevron": "capra-SelectField-module-
|
|
2300
|
-
"dropdownPanel": "capra-SelectField-module-
|
|
2301
|
-
"emptyState": "capra-SelectField-module-
|
|
2302
|
-
"errorIndicator": "capra-SelectField-module-
|
|
2303
|
-
"header": "capra-SelectField-module-
|
|
2304
|
-
"item": "capra-SelectField-module-
|
|
2305
|
-
"itemCheck": "capra-SelectField-module-
|
|
2306
|
-
"itemContent": "capra-SelectField-module-
|
|
2307
|
-
"leadingSlot": "capra-SelectField-module-
|
|
2308
|
-
"listbox": "capra-SelectField-module-
|
|
2309
|
-
"multipleOpenButton": "capra-SelectField-module-
|
|
2310
|
-
"multipleTrigger": "capra-SelectField-module-
|
|
2311
|
-
"search": "capra-SelectField-module-
|
|
2312
|
-
"section": "capra-SelectField-module-
|
|
2313
|
-
"singleTrigger": "capra-SelectField-module-
|
|
2314
|
-
"tag": "capra-SelectField-module-
|
|
2315
|
-
"tagGroup": "capra-SelectField-module-
|
|
2316
|
-
"tagIcon": "capra-SelectField-module-
|
|
2317
|
-
"tagLabel": "capra-SelectField-module-
|
|
2318
|
-
"tagList": "capra-SelectField-module-
|
|
2319
|
-
"tagRemove": "capra-SelectField-module-
|
|
2320
|
-
"trailingSlot": "capra-SelectField-module-
|
|
2321
|
-
"triggerShell": "capra-SelectField-module-
|
|
2322
|
-
"value": "capra-SelectField-module-
|
|
2323
|
-
"valueIcon": "capra-SelectField-module-
|
|
2324
|
-
"valueText": "capra-SelectField-module-
|
|
2325
|
-
"warningIndicator": "capra-SelectField-module-
|
|
2327
|
+
"chevron": "capra-SelectField-module-KwnLuW-chevron",
|
|
2328
|
+
"dropdownPanel": "capra-SelectField-module-KwnLuW-dropdownPanel",
|
|
2329
|
+
"emptyState": "capra-SelectField-module-KwnLuW-emptyState",
|
|
2330
|
+
"errorIndicator": "capra-SelectField-module-KwnLuW-errorIndicator",
|
|
2331
|
+
"header": "capra-SelectField-module-KwnLuW-header",
|
|
2332
|
+
"item": "capra-SelectField-module-KwnLuW-item",
|
|
2333
|
+
"itemCheck": "capra-SelectField-module-KwnLuW-itemCheck",
|
|
2334
|
+
"itemContent": "capra-SelectField-module-KwnLuW-itemContent",
|
|
2335
|
+
"leadingSlot": "capra-SelectField-module-KwnLuW-leadingSlot",
|
|
2336
|
+
"listbox": "capra-SelectField-module-KwnLuW-listbox",
|
|
2337
|
+
"multipleOpenButton": "capra-SelectField-module-KwnLuW-multipleOpenButton",
|
|
2338
|
+
"multipleTrigger": "capra-SelectField-module-KwnLuW-multipleTrigger",
|
|
2339
|
+
"search": "capra-SelectField-module-KwnLuW-search",
|
|
2340
|
+
"section": "capra-SelectField-module-KwnLuW-section",
|
|
2341
|
+
"singleTrigger": "capra-SelectField-module-KwnLuW-singleTrigger",
|
|
2342
|
+
"tag": "capra-SelectField-module-KwnLuW-tag",
|
|
2343
|
+
"tagGroup": "capra-SelectField-module-KwnLuW-tagGroup",
|
|
2344
|
+
"tagIcon": "capra-SelectField-module-KwnLuW-tagIcon",
|
|
2345
|
+
"tagLabel": "capra-SelectField-module-KwnLuW-tagLabel",
|
|
2346
|
+
"tagList": "capra-SelectField-module-KwnLuW-tagList",
|
|
2347
|
+
"tagRemove": "capra-SelectField-module-KwnLuW-tagRemove",
|
|
2348
|
+
"trailingSlot": "capra-SelectField-module-KwnLuW-trailingSlot",
|
|
2349
|
+
"triggerShell": "capra-SelectField-module-KwnLuW-triggerShell",
|
|
2350
|
+
"value": "capra-SelectField-module-KwnLuW-value",
|
|
2351
|
+
"valueIcon": "capra-SelectField-module-KwnLuW-valueIcon",
|
|
2352
|
+
"valueText": "capra-SelectField-module-KwnLuW-valueText",
|
|
2353
|
+
"warningIndicator": "capra-SelectField-module-KwnLuW-warningIndicator"
|
|
2326
2354
|
};
|
|
2327
2355
|
//#endregion
|
|
2328
2356
|
//#region src/components/SelectField/SelectField.tsx
|
|
@@ -3664,8 +3692,61 @@ function ButtonLinkWithoutRef({ appearance = "default", as: asComponent, block,
|
|
|
3664
3692
|
*/
|
|
3665
3693
|
const ButtonLink = fixedForwardRef(ButtonLinkWithoutRef);
|
|
3666
3694
|
//#endregion
|
|
3695
|
+
//#region src/components/ToggleButtonGroup/ToggleButtonGroup.module.css
|
|
3696
|
+
var ToggleButtonGroup_module_default = { "base": "capra-ToggleButtonGroup-module-cS5LeW-base" };
|
|
3697
|
+
//#endregion
|
|
3698
|
+
//#region src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
|
|
3699
|
+
function isIconOnlyItem(item) {
|
|
3700
|
+
return !("text" in item);
|
|
3701
|
+
}
|
|
3702
|
+
function renderToggleButtonItem(item, size, groupDisabled) {
|
|
3703
|
+
const isDisabled = groupDisabled || item.disabled;
|
|
3704
|
+
if (isIconOnlyItem(item)) {
|
|
3705
|
+
const Icon = item.icon;
|
|
3706
|
+
return /* @__PURE__ */ React$1.createElement(ToggleButton, {
|
|
3707
|
+
key: item.key,
|
|
3708
|
+
id: item.key,
|
|
3709
|
+
isDisabled,
|
|
3710
|
+
"aria-label": item["aria-label"],
|
|
3711
|
+
className: clsx(Button_module_default.base, Button_module_default.icon),
|
|
3712
|
+
"data-variant": "secondary",
|
|
3713
|
+
"data-appearance": "default",
|
|
3714
|
+
"data-size": size
|
|
3715
|
+
}, /* @__PURE__ */ React$1.createElement(Icon, { size: "sm" }));
|
|
3716
|
+
}
|
|
3717
|
+
const LeadingIcon = item.icon;
|
|
3718
|
+
return /* @__PURE__ */ React$1.createElement(ToggleButton, {
|
|
3719
|
+
key: item.key,
|
|
3720
|
+
id: item.key,
|
|
3721
|
+
isDisabled,
|
|
3722
|
+
"aria-label": item["aria-label"],
|
|
3723
|
+
className: Button_module_default.base,
|
|
3724
|
+
"data-variant": "secondary",
|
|
3725
|
+
"data-appearance": "default",
|
|
3726
|
+
"data-size": size
|
|
3727
|
+
}, LeadingIcon ? /* @__PURE__ */ React$1.createElement("span", { className: Button_module_default.iconLayout }, /* @__PURE__ */ React$1.createElement(LeadingIcon, { size: "sm" })) : null, /* @__PURE__ */ React$1.createElement("span", { className: Button_module_default.textLayout }, /* @__PURE__ */ React$1.createElement(Text, {
|
|
3728
|
+
color: "inherit",
|
|
3729
|
+
variant: "body"
|
|
3730
|
+
}, item.text)));
|
|
3731
|
+
}
|
|
3732
|
+
/**
|
|
3733
|
+
* A group of toggle buttons for choosing one or more options from a set.
|
|
3734
|
+
*/
|
|
3735
|
+
function ToggleButtonGroup({ items, size = "md", disabled = false, selectionMode = "single", selectedKeys, defaultSelectedKeys, onSelectionChange, disallowEmptySelection, FORCE__className: classNameOverride, ...props }) {
|
|
3736
|
+
return /* @__PURE__ */ React$1.createElement(ToggleButtonGroup$1, {
|
|
3737
|
+
...props,
|
|
3738
|
+
isDisabled: disabled,
|
|
3739
|
+
selectionMode,
|
|
3740
|
+
selectedKeys,
|
|
3741
|
+
defaultSelectedKeys,
|
|
3742
|
+
onSelectionChange,
|
|
3743
|
+
disallowEmptySelection,
|
|
3744
|
+
className: clsx(ToggleButtonGroup_module_default.base, classNameOverride)
|
|
3745
|
+
}, items.map((item) => renderToggleButtonItem(item, size, disabled)));
|
|
3746
|
+
}
|
|
3747
|
+
//#endregion
|
|
3667
3748
|
//#region src/components/Link/Link.module.css
|
|
3668
|
-
var Link_module_default = { "base": "capra-Link-module-
|
|
3749
|
+
var Link_module_default = { "base": "capra-Link-module-OvXy7G-base" };
|
|
3669
3750
|
//#endregion
|
|
3670
3751
|
//#region src/components/Link/Link.tsx
|
|
3671
3752
|
function LinkWithoutRef({ as: asComponent, children, isExternal = false, FORCE__className: classNameOverride, ...rest }, ref) {
|
|
@@ -4525,21 +4606,21 @@ const Toast = {
|
|
|
4525
4606
|
//#endregion
|
|
4526
4607
|
//#region src/components/Menu/Menu.module.css
|
|
4527
4608
|
var Menu_module_default = {
|
|
4528
|
-
"divider": "capra-Menu-module-
|
|
4529
|
-
"header": "capra-Menu-module-
|
|
4530
|
-
"list": "capra-Menu-module-
|
|
4531
|
-
"menu": "capra-Menu-module-
|
|
4532
|
-
"menuItem": "capra-Menu-module-
|
|
4533
|
-
"menuItemDescription": "capra-Menu-module-
|
|
4534
|
-
"menuItemLabel": "capra-Menu-module-
|
|
4535
|
-
"menuItemLeadingGutter": "capra-Menu-module-
|
|
4536
|
-
"menuItemListItemShell": "capra-Menu-module-
|
|
4537
|
-
"menuItemShortcut": "capra-Menu-module-
|
|
4538
|
-
"menuItemTrailingGroup": "capra-Menu-module-
|
|
4539
|
-
"menuItemTrailingGutter": "capra-Menu-module-
|
|
4540
|
-
"menuTriggerSlot": "capra-Menu-module-
|
|
4541
|
-
"section": "capra-Menu-module-
|
|
4542
|
-
"slot": "capra-Menu-module-
|
|
4609
|
+
"divider": "capra-Menu-module-eTI_TG-divider",
|
|
4610
|
+
"header": "capra-Menu-module-eTI_TG-header",
|
|
4611
|
+
"list": "capra-Menu-module-eTI_TG-list",
|
|
4612
|
+
"menu": "capra-Menu-module-eTI_TG-menu",
|
|
4613
|
+
"menuItem": "capra-Menu-module-eTI_TG-menuItem",
|
|
4614
|
+
"menuItemDescription": "capra-Menu-module-eTI_TG-menuItemDescription",
|
|
4615
|
+
"menuItemLabel": "capra-Menu-module-eTI_TG-menuItemLabel",
|
|
4616
|
+
"menuItemLeadingGutter": "capra-Menu-module-eTI_TG-menuItemLeadingGutter",
|
|
4617
|
+
"menuItemListItemShell": "capra-Menu-module-eTI_TG-menuItemListItemShell",
|
|
4618
|
+
"menuItemShortcut": "capra-Menu-module-eTI_TG-menuItemShortcut",
|
|
4619
|
+
"menuItemTrailingGroup": "capra-Menu-module-eTI_TG-menuItemTrailingGroup",
|
|
4620
|
+
"menuItemTrailingGutter": "capra-Menu-module-eTI_TG-menuItemTrailingGutter",
|
|
4621
|
+
"menuTriggerSlot": "capra-Menu-module-eTI_TG-menuTriggerSlot",
|
|
4622
|
+
"section": "capra-Menu-module-eTI_TG-section",
|
|
4623
|
+
"slot": "capra-Menu-module-eTI_TG-slot"
|
|
4543
4624
|
};
|
|
4544
4625
|
//#endregion
|
|
4545
4626
|
//#region src/components/Menu/Menu.tsx
|
|
@@ -4623,7 +4704,7 @@ const MenuSection$1 = ({ children, "aria-label": ariaLabel, "aria-labelledby": a
|
|
|
4623
4704
|
}, resolvedChildren));
|
|
4624
4705
|
};
|
|
4625
4706
|
MenuSection$1.displayName = "Menu.Section";
|
|
4626
|
-
const MenuItem$1 = ({ as: Component, label, description, ariaLabel, href, disabled = false, active = false, variant = "default", icon, indent: indentProp, shortcut, parent = false, onPress, onClick, FORCE__className, children, ...rest }) => {
|
|
4707
|
+
const MenuItem$1 = ({ as: Component, label, description, ariaLabel, href, disabled = false, active = false, variant = "default", icon, indent: indentProp, shortcut, parent = false, onPress, onClick, FORCE__className, children, allowItemLineWrap = false, ...rest }) => {
|
|
4627
4708
|
const indentFromSectionHeader = React$1.useContext(MenuSectionIndentContext);
|
|
4628
4709
|
const indent = indentProp !== void 0 ? indentProp : indentFromSectionHeader ? true : false;
|
|
4629
4710
|
const labelContent = children ?? label;
|
|
@@ -4651,6 +4732,7 @@ const MenuItem$1 = ({ as: Component, label, description, ariaLabel, href, disabl
|
|
|
4651
4732
|
"aria-label": ariaLabel,
|
|
4652
4733
|
"aria-current": active ? "page" : void 0,
|
|
4653
4734
|
className: clsx(Menu_module_default.menuItem, FORCE__className),
|
|
4735
|
+
"data-allow-line-wrap": allowItemLineWrap,
|
|
4654
4736
|
"data-variant": variant,
|
|
4655
4737
|
"data-active": active || void 0,
|
|
4656
4738
|
"data-indent": indent || void 0,
|
|
@@ -5363,6 +5445,199 @@ function ArrowSvg() {
|
|
|
5363
5445
|
}));
|
|
5364
5446
|
}
|
|
5365
5447
|
//#endregion
|
|
5448
|
+
//#region src/components/FilterToolbar/FilterToolbar.module.css
|
|
5449
|
+
var FilterToolbar_module_default = { "toolbar": "capra-FilterToolbar-module-1TgfVW-toolbar" };
|
|
5450
|
+
//#endregion
|
|
5451
|
+
//#region src/components/FilterToolbar/FilterToolbar.tsx
|
|
5452
|
+
function FilterToolbar({ filterInputProps, renderActions, renderBulkEditText, renderBulkEditActions, selectedKeys }) {
|
|
5453
|
+
return selectedKeys === "all" || selectedKeys.size > 0 ? /* @__PURE__ */ React$1.createElement("div", {
|
|
5454
|
+
className: FilterToolbar_module_default.toolbar,
|
|
5455
|
+
"data-mode": "bulk-edit"
|
|
5456
|
+
}, /* @__PURE__ */ React$1.createElement("div", null, renderBulkEditText?.()), /* @__PURE__ */ React$1.createElement("div", null, renderBulkEditActions?.())) : /* @__PURE__ */ React$1.createElement("div", { className: FilterToolbar_module_default.toolbar }, /* @__PURE__ */ React$1.createElement("div", null, /* @__PURE__ */ React$1.createElement(TextField, {
|
|
5457
|
+
placeholder: "Filter value",
|
|
5458
|
+
...filterInputProps,
|
|
5459
|
+
leadingSlot: /* @__PURE__ */ React$1.createElement(FilterOutlined, {
|
|
5460
|
+
size: "sm",
|
|
5461
|
+
color: "var(--cds2-color-foreground-subtle)"
|
|
5462
|
+
}),
|
|
5463
|
+
size: "sm"
|
|
5464
|
+
})), /* @__PURE__ */ React$1.createElement("div", null, renderActions?.()));
|
|
5465
|
+
}
|
|
5466
|
+
//#endregion
|
|
5467
|
+
//#region src/components/Table/Table.module.css
|
|
5468
|
+
var Table_module_default = {
|
|
5469
|
+
"base": "capra-Table-module-YRCV0q-base",
|
|
5470
|
+
"cell": "capra-Table-module-YRCV0q-cell",
|
|
5471
|
+
"column": "capra-Table-module-YRCV0q-column",
|
|
5472
|
+
"columnDivider": "capra-Table-module-YRCV0q-columnDivider",
|
|
5473
|
+
"columnHeader": "capra-Table-module-YRCV0q-columnHeader",
|
|
5474
|
+
"columnName": "capra-Table-module-YRCV0q-columnName",
|
|
5475
|
+
"dropIndicator": "capra-Table-module-YRCV0q-dropIndicator",
|
|
5476
|
+
"header": "capra-Table-module-YRCV0q-header",
|
|
5477
|
+
"row": "capra-Table-module-YRCV0q-row",
|
|
5478
|
+
"sortIcons": "capra-Table-module-YRCV0q-sortIcons"
|
|
5479
|
+
};
|
|
5480
|
+
//#endregion
|
|
5481
|
+
//#region src/components/Table/Table.tsx
|
|
5482
|
+
const EMPTY_CELL_PLACEHOLDER = "--";
|
|
5483
|
+
function isEmptyValue(value) {
|
|
5484
|
+
return value === null || value === void 0 || value === "";
|
|
5485
|
+
}
|
|
5486
|
+
function defineColumns(columns) {
|
|
5487
|
+
return columns;
|
|
5488
|
+
}
|
|
5489
|
+
function TableWithoutRef({ FORCE__className: classNameOverride, items, columns, visibleColumns, sortDescriptor, density = "default", appearance = "zebra", onSortChange, selectedKeys, onSelectionChange, isLoading = false, enableDragAndDrop = false, renderActionColumn, ...props }, ref) {
|
|
5490
|
+
const columnsToRender = React$1.useMemo(() => {
|
|
5491
|
+
return visibleColumns.map((id) => columns.find((c) => c.id === id)).filter((c) => c != null);
|
|
5492
|
+
}, [columns, visibleColumns]);
|
|
5493
|
+
const [dndItems, setDndItems] = React$1.useState(items);
|
|
5494
|
+
React$1.useEffect(() => {
|
|
5495
|
+
setDndItems(items);
|
|
5496
|
+
}, [items]);
|
|
5497
|
+
const { dragAndDropHooks } = useDragAndDrop({
|
|
5498
|
+
getItems(keys) {
|
|
5499
|
+
return [...keys].map((key) => ({ "text/plain": String(key) }));
|
|
5500
|
+
},
|
|
5501
|
+
onReorder(e) {
|
|
5502
|
+
setDndItems((prev) => {
|
|
5503
|
+
const movedItems = [...e.keys].map((key) => prev.find((item) => item.id === key));
|
|
5504
|
+
const filtered = prev.filter((item) => !e.keys.has(item.id));
|
|
5505
|
+
const targetIndex = filtered.findIndex((item) => item.id === e.target.key);
|
|
5506
|
+
if (e.target.dropPosition === "before") filtered.splice(targetIndex, 0, ...movedItems);
|
|
5507
|
+
else filtered.splice(targetIndex + 1, 0, ...movedItems);
|
|
5508
|
+
return filtered;
|
|
5509
|
+
});
|
|
5510
|
+
},
|
|
5511
|
+
renderDropIndicator(target) {
|
|
5512
|
+
return /* @__PURE__ */ React$1.createElement(DropIndicator, {
|
|
5513
|
+
target,
|
|
5514
|
+
className: Table_module_default.dropIndicator
|
|
5515
|
+
});
|
|
5516
|
+
}
|
|
5517
|
+
});
|
|
5518
|
+
const skeletonItems = React$1.useMemo(() => Array.from({ length: 5 }, (_, i) => ({ id: `skeleton-${i}` })), []);
|
|
5519
|
+
return /* @__PURE__ */ React$1.createElement(Table$1, {
|
|
5520
|
+
...props,
|
|
5521
|
+
ref,
|
|
5522
|
+
sortDescriptor,
|
|
5523
|
+
selectedKeys,
|
|
5524
|
+
onSelectionChange,
|
|
5525
|
+
className: clsx(Table_module_default.base, classNameOverride),
|
|
5526
|
+
"data-density": density,
|
|
5527
|
+
"data-appearance": appearance,
|
|
5528
|
+
onSortChange,
|
|
5529
|
+
dragAndDropHooks: enableDragAndDrop ? dragAndDropHooks : void 0
|
|
5530
|
+
}, /* @__PURE__ */ React$1.createElement(TableHeader$1, {
|
|
5531
|
+
columns: columnsToRender,
|
|
5532
|
+
className: Table_module_default.header,
|
|
5533
|
+
shouldShowActionColumn: !!renderActionColumn
|
|
5534
|
+
}, (column) => {
|
|
5535
|
+
return /* @__PURE__ */ React$1.createElement(Column$1, {
|
|
5536
|
+
isRowHeader: true,
|
|
5537
|
+
key: column.id,
|
|
5538
|
+
id: column.id,
|
|
5539
|
+
allowsSorting: !enableDragAndDrop && column.allowsSorting,
|
|
5540
|
+
textValue: column.label
|
|
5541
|
+
}, column.label);
|
|
5542
|
+
}), /* @__PURE__ */ React$1.createElement(TableBody, {
|
|
5543
|
+
items: isLoading ? skeletonItems : enableDragAndDrop ? dndItems : items,
|
|
5544
|
+
dependencies: [columnsToRender, isLoading],
|
|
5545
|
+
className: Table_module_default.body
|
|
5546
|
+
}, (_item) => {
|
|
5547
|
+
const item = _item;
|
|
5548
|
+
return /* @__PURE__ */ React$1.createElement(Row$1, {
|
|
5549
|
+
isDisabled: item.isDisabled === true ? true : false,
|
|
5550
|
+
key: item.id,
|
|
5551
|
+
id: item.id,
|
|
5552
|
+
columns: columnsToRender,
|
|
5553
|
+
className: Table_module_default.row,
|
|
5554
|
+
actionColumn: !isLoading && renderActionColumn ? renderActionColumn(item) : void 0
|
|
5555
|
+
}, (column) => {
|
|
5556
|
+
return /* @__PURE__ */ React$1.createElement(Cell$1, {
|
|
5557
|
+
key: column.id,
|
|
5558
|
+
id: `${item.id}__${column.id}`,
|
|
5559
|
+
className: Table_module_default.cell
|
|
5560
|
+
}, isLoading ? /* @__PURE__ */ React$1.createElement(Skeleton, {
|
|
5561
|
+
title: false,
|
|
5562
|
+
paragraph: { rows: 1 },
|
|
5563
|
+
active: true
|
|
5564
|
+
}) : isEmptyValue(item[column.id]) ? /* @__PURE__ */ React$1.createElement("span", null, "--") : column.render ? column.render(item[column.id], item) : /* @__PURE__ */ React$1.createElement("span", null, item[column.id]));
|
|
5565
|
+
});
|
|
5566
|
+
}));
|
|
5567
|
+
}
|
|
5568
|
+
/**
|
|
5569
|
+
* A component for rendering tabular data
|
|
5570
|
+
*/
|
|
5571
|
+
const Table = fixedForwardRef(TableWithoutRef);
|
|
5572
|
+
function Column$1(props) {
|
|
5573
|
+
return /* @__PURE__ */ React$1.createElement(Column, {
|
|
5574
|
+
...props,
|
|
5575
|
+
className: Table_module_default.column
|
|
5576
|
+
}, ({ allowsSorting, sortDirection }) => {
|
|
5577
|
+
return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement("div", { className: Table_module_default.columnHeader }, /* @__PURE__ */ React$1.createElement(Group, {
|
|
5578
|
+
role: "presentation",
|
|
5579
|
+
tabIndex: -1,
|
|
5580
|
+
className: Table_module_default.columnName
|
|
5581
|
+
}, props.children), allowsSorting && (sortDirection ? /* @__PURE__ */ React$1.createElement(SortedIcons, { sortDirection }) : /* @__PURE__ */ React$1.createElement(NonSortedIcons, null)), props.allowsResizing && /* @__PURE__ */ React$1.createElement(ColumnResizer, null)), /* @__PURE__ */ React$1.createElement("div", { className: Table_module_default.columnDivider }));
|
|
5582
|
+
});
|
|
5583
|
+
}
|
|
5584
|
+
function TableHeader$1({ columns, children, shouldShowActionColumn, ...otherProps }) {
|
|
5585
|
+
const { selectionBehavior, selectionMode, allowsDragging } = useTableOptions();
|
|
5586
|
+
return /* @__PURE__ */ React$1.createElement(TableHeader, otherProps, allowsDragging && /* @__PURE__ */ React$1.createElement(Column, {
|
|
5587
|
+
width: 20,
|
|
5588
|
+
minWidth: 20,
|
|
5589
|
+
style: { width: 20 },
|
|
5590
|
+
className: Table_module_default.column
|
|
5591
|
+
}, /* @__PURE__ */ React$1.createElement("div", { className: Table_module_default.columnDivider })), selectionBehavior === "toggle" && /* @__PURE__ */ React$1.createElement(Column, {
|
|
5592
|
+
width: 32,
|
|
5593
|
+
minWidth: 32,
|
|
5594
|
+
style: { width: 32 },
|
|
5595
|
+
className: Table_module_default.column
|
|
5596
|
+
}, selectionMode === "multiple" && /* @__PURE__ */ React$1.createElement(RACCheckbox, { slot: "selection" }), /* @__PURE__ */ React$1.createElement("div", { className: Table_module_default.columnDivider })), /* @__PURE__ */ React$1.createElement(Collection, { items: columns }, children), shouldShowActionColumn && /* @__PURE__ */ React$1.createElement(Column, { className: Table_module_default.column }, "Actions"));
|
|
5597
|
+
}
|
|
5598
|
+
function Row$1({ id, columns, children, actionColumn, ...otherProps }) {
|
|
5599
|
+
const { selectionBehavior, allowsDragging } = useTableOptions();
|
|
5600
|
+
return /* @__PURE__ */ React$1.createElement(Row, {
|
|
5601
|
+
id,
|
|
5602
|
+
...otherProps
|
|
5603
|
+
}, allowsDragging && /* @__PURE__ */ React$1.createElement(Cell$1, {
|
|
5604
|
+
className: Table_module_default.cell,
|
|
5605
|
+
"data-padding": "reduced"
|
|
5606
|
+
}, /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
5607
|
+
slot: "drag",
|
|
5608
|
+
appearance: "neutral",
|
|
5609
|
+
variant: "tertiary",
|
|
5610
|
+
size: "xs",
|
|
5611
|
+
icon: DragGrip,
|
|
5612
|
+
"aria-label": "Drag"
|
|
5613
|
+
})), selectionBehavior === "toggle" && /* @__PURE__ */ React$1.createElement(Cell$1, {
|
|
5614
|
+
className: Table_module_default.cell,
|
|
5615
|
+
"data-padding": "reduced"
|
|
5616
|
+
}, /* @__PURE__ */ React$1.createElement(RACCheckbox, { slot: "selection" })), /* @__PURE__ */ React$1.createElement(Collection, { items: columns }, children), actionColumn && /* @__PURE__ */ React$1.createElement(Cell$1, { className: Table_module_default.cell }, actionColumn));
|
|
5617
|
+
}
|
|
5618
|
+
const INTERACTIVE_ELEMENT_SELECTOR = "a[href], button, input, select, textarea, [role=\"button\"], [role=\"checkbox\"], [role=\"combobox\"], [role=\"link\"], [role=\"slider\"], [role=\"spinbutton\"], [role=\"switch\"], [role=\"textbox\"]";
|
|
5619
|
+
function Cell$1(props) {
|
|
5620
|
+
return /* @__PURE__ */ React$1.createElement(Cell, {
|
|
5621
|
+
...props,
|
|
5622
|
+
onPointerDown: (e) => {
|
|
5623
|
+
if (e.target.closest(INTERACTIVE_ELEMENT_SELECTOR)) e.stopPropagation();
|
|
5624
|
+
}
|
|
5625
|
+
}, composeRenderProps(props.children, (children, { hasChildItems, isTreeColumn }) => /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, isTreeColumn && hasChildItems && /* @__PURE__ */ React$1.createElement(IconButton, {
|
|
5626
|
+
slot: "chevron",
|
|
5627
|
+
icon: ChevronRight,
|
|
5628
|
+
"aria-label": "Chevron"
|
|
5629
|
+
}), children)));
|
|
5630
|
+
}
|
|
5631
|
+
function NonSortedIcons() {
|
|
5632
|
+
return /* @__PURE__ */ React$1.createElement("div", { className: Table_module_default.sortIcons }, /* @__PURE__ */ React$1.createElement(CaretUp, { size: "sm" }), /* @__PURE__ */ React$1.createElement(CaretDown, { size: "sm" }));
|
|
5633
|
+
}
|
|
5634
|
+
function SortedIcons(props) {
|
|
5635
|
+
return /* @__PURE__ */ React$1.createElement("div", {
|
|
5636
|
+
className: Table_module_default.sortIcons,
|
|
5637
|
+
"data-sort-direction": props.sortDirection
|
|
5638
|
+
}, /* @__PURE__ */ React$1.createElement(CaretUp, { size: "sm" }), /* @__PURE__ */ React$1.createElement(CaretDown, { size: "sm" }));
|
|
5639
|
+
}
|
|
5640
|
+
//#endregion
|
|
5366
5641
|
//#region src/components/Tree/Tree.module.css
|
|
5367
5642
|
var Tree_module_default = {
|
|
5368
5643
|
"chevronButton": "capra-Tree-module--hXpBa-chevronButton",
|
|
@@ -5597,4 +5872,4 @@ function Tree({ FORCE__className: classNameOverride, items, selectionMode = "mul
|
|
|
5597
5872
|
}, /* @__PURE__ */ React$1.createElement(Collection, { items }, renderTreeItem)));
|
|
5598
5873
|
}
|
|
5599
5874
|
//#endregion
|
|
5600
|
-
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, SelectField, Skeleton, SkeletonGroup, Spinner, Switch, TabNav, Tag, Text, TextArea, TextField, Toast, Tooltip, TopNav, Tree, VerticalNavigation, VisuallyHidden, submenuPanelClassName, tagColors };
|
|
5875
|
+
export { Alert, Anchor, AutocompleteField, Badge, BadgeLayout, Breadcrumb, Breadcrumbs, Button, ButtonLink, Card, Checkbox, Collapse, CustomTooltipTrigger, DatePickerField, DateRangePickerField, Divider, Drawer, EMPTY_CELL_PLACEHOLDER, EmptyState, FilterToolbar, IconButton, InputRow, Label, Link, ListItem, Menu, Modal, NumberField, Pagination, PasswordField, Pill, Popover, Radio, RadioGroup, RadioTile, Ribbon, RouterProvider, SKELETON_SIZE, SKELETON_SIZE_TOKENS, SelectField, Skeleton, SkeletonGroup, Spinner, Switch, TabNav, Table, Tag, Text, TextArea, TextField, Toast, ToggleButtonGroup, Tooltip, TopNav, Tree, VerticalNavigation, VisuallyHidden, defineColumns, submenuPanelClassName, tagColors };
|