@inf-monkeys-tech/monkeys-design 0.4.34 → 0.4.35
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/LICENSE +21 -21
- package/README.md +226 -226
- package/dist/components/base/index.d.mts +2 -2
- package/dist/components/base/index.d.ts +2 -2
- package/dist/components/base/index.js +2 -445
- package/dist/components/base/index.js.map +1 -1
- package/dist/components/base/index.mjs +3 -445
- package/dist/components/base/index.mjs.map +1 -1
- package/dist/components/data-explorer/index.js.map +1 -1
- package/dist/components/data-explorer/index.mjs.map +1 -1
- package/dist/components/layout/index.js.map +1 -1
- package/dist/components/layout/index.mjs.map +1 -1
- package/dist/components/login/index.js.map +1 -1
- package/dist/components/login/index.mjs.map +1 -1
- package/dist/components/toast/index.d.mts +75 -0
- package/dist/components/toast/index.d.ts +75 -0
- package/dist/components/toast/index.js +283 -0
- package/dist/components/toast/index.js.map +1 -0
- package/dist/components/toast/index.mjs +273 -0
- package/dist/components/toast/index.mjs.map +1 -0
- package/dist/components/toolbar/index.js.map +1 -1
- package/dist/components/toolbar/index.mjs.map +1 -1
- package/dist/components/workbench/index.d.mts +1 -1
- package/dist/components/workbench/index.d.ts +1 -1
- package/dist/components/workbench/index.js +2 -444
- package/dist/components/workbench/index.js.map +1 -1
- package/dist/components/workbench/index.mjs +2 -444
- package/dist/components/workbench/index.mjs.map +1 -1
- package/dist/icons/oauth/index.js.map +1 -1
- package/dist/icons/oauth/index.mjs.map +1 -1
- package/dist/index.d.mts +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.js +286 -455
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +278 -455
- package/dist/index.mjs.map +1 -1
- package/dist/palette/index.js.map +1 -1
- package/dist/palette/index.mjs.map +1 -1
- package/dist/registry/index.js.map +1 -1
- package/dist/registry/index.mjs.map +1 -1
- package/dist/styles/artist-login.scss +374 -374
- package/dist/styles/global.scss +21 -21
- package/dist/styles/workflow-board.scss +440 -440
- package/dist/styles/workflow-nodes.css +340 -340
- package/dist/{theme-sIoU5-YC.d.ts → theme-CoG9vCPT.d.mts} +2 -4
- package/dist/{theme-Clm5dVb0.d.mts → theme-Cuy60thu.d.ts} +2 -4
- package/dist/theme-system/index.d.mts +1 -1
- package/dist/theme-system/index.d.ts +1 -1
- package/dist/theme-system/index.js +2 -444
- package/dist/theme-system/index.js.map +1 -1
- package/dist/theme-system/index.mjs +2 -444
- package/dist/theme-system/index.mjs.map +1 -1
- package/dist/themes/artist/index.js.map +1 -1
- package/dist/themes/artist/index.mjs.map +1 -1
- package/dist/themes/bsd/index.js.map +1 -1
- package/dist/themes/bsd/index.mjs.map +1 -1
- package/dist/themes/concept/index.js.map +1 -1
- package/dist/themes/concept/index.mjs.map +1 -1
- package/dist/themes/default/index.js.map +1 -1
- package/dist/themes/default/index.mjs.map +1 -1
- package/dist/{types-Bn6PEDsX.d.mts → types-CZALgtez.d.mts} +1 -43
- package/dist/{types-Bn6PEDsX.d.ts → types-CZALgtez.d.ts} +1 -43
- package/package.json +146 -139
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { b as BaseAccordionProps, e as BaseAvatarProps, h as BaseBadgeProps, l as BaseBreadcrumbProps, n as BaseButtonProps, p as BaseCheckboxProps, z as BaseContextMenuProps, s as BaseContextMenuCheckboxItemProps, v as BaseContextMenuContentProps, x as BaseContextMenuItemProps, y as BaseContextMenuLabelProps, A as BaseContextMenuRadioGroupProps, C as BaseContextMenuRadioItemProps, D as BaseContextMenuSeparatorProps, F as BaseContextMenuSubProps, E as BaseContextMenuSubContentProps, G as BaseContextMenuSubTriggerProps, H as BaseContextMenuTriggerProps, L as BaseDescriptionListProps, N as BaseDialogProps, P as BaseDividerProps, T as BaseDropdownMenuProps, U as BaseEmptyStateProps, W as BaseFieldProps, X as BaseInputProps, a2 as BaseLayoutProps, a0 as BaseLayoutPaneProps, a4 as BaseLayoutResizeHandleProps, a7 as BaseLayoutSplitProps, a8 as BaseLoadingStateProps,
|
|
2
|
+
import { b as BaseAccordionProps, e as BaseAvatarProps, h as BaseBadgeProps, l as BaseBreadcrumbProps, n as BaseButtonProps, p as BaseCheckboxProps, z as BaseContextMenuProps, s as BaseContextMenuCheckboxItemProps, v as BaseContextMenuContentProps, x as BaseContextMenuItemProps, y as BaseContextMenuLabelProps, A as BaseContextMenuRadioGroupProps, C as BaseContextMenuRadioItemProps, D as BaseContextMenuSeparatorProps, F as BaseContextMenuSubProps, E as BaseContextMenuSubContentProps, G as BaseContextMenuSubTriggerProps, H as BaseContextMenuTriggerProps, L as BaseDescriptionListProps, N as BaseDialogProps, P as BaseDividerProps, T as BaseDropdownMenuProps, U as BaseEmptyStateProps, W as BaseFieldProps, X as BaseInputProps, a2 as BaseLayoutProps, a0 as BaseLayoutPaneProps, a4 as BaseLayoutResizeHandleProps, a7 as BaseLayoutSplitProps, a8 as BaseLoadingStateProps, aa as BaseNoticeProps, ac as BasePanelProps, ae as BasePaginationProps, ag as BaseProgressProps, aj as BaseRadioGroupProps, ap as BaseSelectProps, an as BaseSectionHeaderProps, as as BaseSegmentedControlProps, au as BaseSkeletonProps, ax as BaseSwitchProps, aV as BaseTableProps, az as BaseTableBodyProps, aB as BaseTableCaptionProps, aD as BaseTableCellProps, aK as BaseTableContainerProps, aM as BaseTableEmptyProps, aP as BaseTableFooterProps, aS as BaseTableHeadProps, aQ as BaseTableHeaderProps, aU as BaseTableLoadingProps, aX as BaseTableRowProps, aO as BaseTableFooterBarProps, b0 as BaseTabsProps, b1 as BaseTextareaProps, b4 as BaseTooltipProps, b6 as BaseToolbarProps, al as BaseResolvedTheme, r as BaseControlTone, c as BaseAppearance } from './types-CZALgtez.mjs';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
|
|
5
5
|
declare function BaseAccordion({ items, value, defaultValue, allowCollapse, appearance, className, classNames, style, onValueChange, id, ...accordionProps }: BaseAccordionProps): react_jsx_runtime.JSX.Element;
|
|
@@ -48,8 +48,6 @@ declare function BaseLayoutSplit({ orientation, primary, secondary, children, re
|
|
|
48
48
|
|
|
49
49
|
declare function BaseLoadingState({ icon, title, description, actions, appearance, className, classNames, style, ...stateProps }: BaseLoadingStateProps): react_jsx_runtime.JSX.Element;
|
|
50
50
|
|
|
51
|
-
declare const BaseMultiSelect: React.ForwardRefExoticComponent<BaseMultiSelectProps & React.RefAttributes<HTMLDivElement>>;
|
|
52
|
-
|
|
53
51
|
declare function BaseNotice({ tone, icon, title, description, actions, children, appearance, className, classNames, style, ...noticeProps }: BaseNoticeProps): react_jsx_runtime.JSX.Element;
|
|
54
52
|
|
|
55
53
|
declare function BasePanel({ as, title, description, media, header, footer, children, interactive, selected, disabled, appearance, className, classNames, style, ...panelProps }: BasePanelProps): react_jsx_runtime.JSX.Element;
|
|
@@ -98,4 +96,4 @@ declare function getBaseBadgeToneClassName(theme: BaseResolvedTheme, tone?: Base
|
|
|
98
96
|
declare function getBaseNoticeToneClassName(theme: BaseResolvedTheme, tone?: BaseControlTone): string;
|
|
99
97
|
declare function getBaseMenuItemToneClassName(theme: BaseResolvedTheme, tone?: BaseControlTone): string;
|
|
100
98
|
|
|
101
|
-
export {
|
|
99
|
+
export { BaseTextarea as $, BaseLayoutResizeHandle as A, BaseAccordion as B, BaseLayoutSplit as C, BaseLoadingState as D, BaseNotice as E, BasePanel as F, BasePagination as G, BaseProgress as H, BaseRadioGroup as I, BaseSelect as J, BaseSectionHeader as K, BaseSegmentedControl as L, BaseSkeleton as M, BaseSwitch as N, BaseTable as O, BaseTableBody as P, BaseTableCaption as Q, BaseTableCell as R, BaseTableContainer as S, BaseTableEmpty as T, BaseTableFooter as U, BaseTableFooterBar as V, BaseTableHead as W, BaseTableHeader as X, BaseTableLoading as Y, BaseTableRow as Z, BaseTabs as _, BaseAvatar as a, BaseTooltip as a0, BaseToolbar as a1, getBaseBadgeToneClassName as a2, getBaseButtonToneClassName as a3, getBaseMenuItemToneClassName as a4, getBaseNoticeToneClassName as a5, resolveBaseAppearance as a6, BaseBadge as b, BaseBreadcrumb as c, BaseButton as d, BaseCheckbox as e, BaseContextMenu as f, BaseContextMenuCheckboxItem as g, BaseContextMenuContent as h, BaseContextMenuItem as i, BaseContextMenuLabel as j, BaseContextMenuRadioGroup as k, BaseContextMenuRadioItem as l, BaseContextMenuSeparator as m, BaseContextMenuSub as n, BaseContextMenuSubContent as o, BaseContextMenuSubTrigger as p, BaseContextMenuTrigger as q, BaseDescriptionList as r, BaseDialog as s, BaseDivider as t, BaseDropdownMenu as u, BaseEmptyState as v, BaseField as w, BaseInput as x, BaseLayout as y, BaseLayoutPane as z };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { b as BaseAccordionProps, e as BaseAvatarProps, h as BaseBadgeProps, l as BaseBreadcrumbProps, n as BaseButtonProps, p as BaseCheckboxProps, z as BaseContextMenuProps, s as BaseContextMenuCheckboxItemProps, v as BaseContextMenuContentProps, x as BaseContextMenuItemProps, y as BaseContextMenuLabelProps, A as BaseContextMenuRadioGroupProps, C as BaseContextMenuRadioItemProps, D as BaseContextMenuSeparatorProps, F as BaseContextMenuSubProps, E as BaseContextMenuSubContentProps, G as BaseContextMenuSubTriggerProps, H as BaseContextMenuTriggerProps, L as BaseDescriptionListProps, N as BaseDialogProps, P as BaseDividerProps, T as BaseDropdownMenuProps, U as BaseEmptyStateProps, W as BaseFieldProps, X as BaseInputProps, a2 as BaseLayoutProps, a0 as BaseLayoutPaneProps, a4 as BaseLayoutResizeHandleProps, a7 as BaseLayoutSplitProps, a8 as BaseLoadingStateProps,
|
|
2
|
+
import { b as BaseAccordionProps, e as BaseAvatarProps, h as BaseBadgeProps, l as BaseBreadcrumbProps, n as BaseButtonProps, p as BaseCheckboxProps, z as BaseContextMenuProps, s as BaseContextMenuCheckboxItemProps, v as BaseContextMenuContentProps, x as BaseContextMenuItemProps, y as BaseContextMenuLabelProps, A as BaseContextMenuRadioGroupProps, C as BaseContextMenuRadioItemProps, D as BaseContextMenuSeparatorProps, F as BaseContextMenuSubProps, E as BaseContextMenuSubContentProps, G as BaseContextMenuSubTriggerProps, H as BaseContextMenuTriggerProps, L as BaseDescriptionListProps, N as BaseDialogProps, P as BaseDividerProps, T as BaseDropdownMenuProps, U as BaseEmptyStateProps, W as BaseFieldProps, X as BaseInputProps, a2 as BaseLayoutProps, a0 as BaseLayoutPaneProps, a4 as BaseLayoutResizeHandleProps, a7 as BaseLayoutSplitProps, a8 as BaseLoadingStateProps, aa as BaseNoticeProps, ac as BasePanelProps, ae as BasePaginationProps, ag as BaseProgressProps, aj as BaseRadioGroupProps, ap as BaseSelectProps, an as BaseSectionHeaderProps, as as BaseSegmentedControlProps, au as BaseSkeletonProps, ax as BaseSwitchProps, aV as BaseTableProps, az as BaseTableBodyProps, aB as BaseTableCaptionProps, aD as BaseTableCellProps, aK as BaseTableContainerProps, aM as BaseTableEmptyProps, aP as BaseTableFooterProps, aS as BaseTableHeadProps, aQ as BaseTableHeaderProps, aU as BaseTableLoadingProps, aX as BaseTableRowProps, aO as BaseTableFooterBarProps, b0 as BaseTabsProps, b1 as BaseTextareaProps, b4 as BaseTooltipProps, b6 as BaseToolbarProps, al as BaseResolvedTheme, r as BaseControlTone, c as BaseAppearance } from './types-CZALgtez.js';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
|
|
5
5
|
declare function BaseAccordion({ items, value, defaultValue, allowCollapse, appearance, className, classNames, style, onValueChange, id, ...accordionProps }: BaseAccordionProps): react_jsx_runtime.JSX.Element;
|
|
@@ -48,8 +48,6 @@ declare function BaseLayoutSplit({ orientation, primary, secondary, children, re
|
|
|
48
48
|
|
|
49
49
|
declare function BaseLoadingState({ icon, title, description, actions, appearance, className, classNames, style, ...stateProps }: BaseLoadingStateProps): react_jsx_runtime.JSX.Element;
|
|
50
50
|
|
|
51
|
-
declare const BaseMultiSelect: React.ForwardRefExoticComponent<BaseMultiSelectProps & React.RefAttributes<HTMLDivElement>>;
|
|
52
|
-
|
|
53
51
|
declare function BaseNotice({ tone, icon, title, description, actions, children, appearance, className, classNames, style, ...noticeProps }: BaseNoticeProps): react_jsx_runtime.JSX.Element;
|
|
54
52
|
|
|
55
53
|
declare function BasePanel({ as, title, description, media, header, footer, children, interactive, selected, disabled, appearance, className, classNames, style, ...panelProps }: BasePanelProps): react_jsx_runtime.JSX.Element;
|
|
@@ -98,4 +96,4 @@ declare function getBaseBadgeToneClassName(theme: BaseResolvedTheme, tone?: Base
|
|
|
98
96
|
declare function getBaseNoticeToneClassName(theme: BaseResolvedTheme, tone?: BaseControlTone): string;
|
|
99
97
|
declare function getBaseMenuItemToneClassName(theme: BaseResolvedTheme, tone?: BaseControlTone): string;
|
|
100
98
|
|
|
101
|
-
export {
|
|
99
|
+
export { BaseTextarea as $, BaseLayoutResizeHandle as A, BaseAccordion as B, BaseLayoutSplit as C, BaseLoadingState as D, BaseNotice as E, BasePanel as F, BasePagination as G, BaseProgress as H, BaseRadioGroup as I, BaseSelect as J, BaseSectionHeader as K, BaseSegmentedControl as L, BaseSkeleton as M, BaseSwitch as N, BaseTable as O, BaseTableBody as P, BaseTableCaption as Q, BaseTableCell as R, BaseTableContainer as S, BaseTableEmpty as T, BaseTableFooter as U, BaseTableFooterBar as V, BaseTableHead as W, BaseTableHeader as X, BaseTableLoading as Y, BaseTableRow as Z, BaseTabs as _, BaseAvatar as a, BaseTooltip as a0, BaseToolbar as a1, getBaseBadgeToneClassName as a2, getBaseButtonToneClassName as a3, getBaseMenuItemToneClassName as a4, getBaseNoticeToneClassName as a5, resolveBaseAppearance as a6, BaseBadge as b, BaseBreadcrumb as c, BaseButton as d, BaseCheckbox as e, BaseContextMenu as f, BaseContextMenuCheckboxItem as g, BaseContextMenuContent as h, BaseContextMenuItem as i, BaseContextMenuLabel as j, BaseContextMenuRadioGroup as k, BaseContextMenuRadioItem as l, BaseContextMenuSeparator as m, BaseContextMenuSub as n, BaseContextMenuSubContent as o, BaseContextMenuSubTrigger as p, BaseContextMenuTrigger as q, BaseDescriptionList as r, BaseDialog as s, BaseDivider as t, BaseDropdownMenu as u, BaseEmptyState as v, BaseField as w, BaseInput as x, BaseLayout as y, BaseLayoutPane as z };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { c as BaseAppearance,
|
|
1
|
+
import { c as BaseAppearance, al as BaseResolvedTheme } from '../types-CZALgtez.mjs';
|
|
2
2
|
import { c as DataExplorerAppearance, Y as DataExplorerResolvedTheme } from '../types-B81dpI1o.mjs';
|
|
3
3
|
import 'react';
|
|
4
4
|
import '@radix-ui/react-context-menu';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { c as BaseAppearance,
|
|
1
|
+
import { c as BaseAppearance, al as BaseResolvedTheme } from '../types-CZALgtez.js';
|
|
2
2
|
import { c as DataExplorerAppearance, Y as DataExplorerResolvedTheme } from '../types-B81dpI1o.js';
|
|
3
3
|
import 'react';
|
|
4
4
|
import '@radix-ui/react-context-menu';
|
|
@@ -9776,448 +9776,6 @@ react.forwardRef(
|
|
|
9776
9776
|
);
|
|
9777
9777
|
}
|
|
9778
9778
|
);
|
|
9779
|
-
function normalizeValues(values) {
|
|
9780
|
-
const nextValues = [];
|
|
9781
|
-
const seen = /* @__PURE__ */ new Set();
|
|
9782
|
-
values?.forEach((value) => {
|
|
9783
|
-
if (seen.has(value)) return;
|
|
9784
|
-
seen.add(value);
|
|
9785
|
-
nextValues.push(value);
|
|
9786
|
-
});
|
|
9787
|
-
return nextValues;
|
|
9788
|
-
}
|
|
9789
|
-
function getNextEnabledIndex(options, currentIndex, direction) {
|
|
9790
|
-
if (!options.length) return -1;
|
|
9791
|
-
const startIndex = currentIndex >= 0 ? currentIndex : 0;
|
|
9792
|
-
for (let offset = 1; offset <= options.length; offset += 1) {
|
|
9793
|
-
const nextIndex = (startIndex + offset * direction + options.length) % options.length;
|
|
9794
|
-
if (!options[nextIndex]?.disabled) {
|
|
9795
|
-
return nextIndex;
|
|
9796
|
-
}
|
|
9797
|
-
}
|
|
9798
|
-
return -1;
|
|
9799
|
-
}
|
|
9800
|
-
function getFirstEnabledIndex(options) {
|
|
9801
|
-
return options.findIndex((option) => !option.disabled);
|
|
9802
|
-
}
|
|
9803
|
-
function getSafeTagCount(maxTagCount, total) {
|
|
9804
|
-
if (maxTagCount === void 0) return total;
|
|
9805
|
-
if (!Number.isFinite(maxTagCount)) return total;
|
|
9806
|
-
return Math.max(0, Math.min(total, Math.floor(maxTagCount)));
|
|
9807
|
-
}
|
|
9808
|
-
function getDefaultRemoveLabel(option) {
|
|
9809
|
-
return `Remove ${option.value}`;
|
|
9810
|
-
}
|
|
9811
|
-
react.forwardRef(
|
|
9812
|
-
function BaseMultiSelect2({
|
|
9813
|
-
options,
|
|
9814
|
-
value,
|
|
9815
|
-
defaultValue,
|
|
9816
|
-
name,
|
|
9817
|
-
placeholder = "Select options",
|
|
9818
|
-
icon,
|
|
9819
|
-
invalid = false,
|
|
9820
|
-
disabled = false,
|
|
9821
|
-
required = false,
|
|
9822
|
-
openForPreview = false,
|
|
9823
|
-
maxTagCount,
|
|
9824
|
-
removeLabel = getDefaultRemoveLabel,
|
|
9825
|
-
emptyLabel = "No options",
|
|
9826
|
-
appearance,
|
|
9827
|
-
className,
|
|
9828
|
-
classNames,
|
|
9829
|
-
style,
|
|
9830
|
-
id,
|
|
9831
|
-
"aria-invalid": nativeAriaInvalid,
|
|
9832
|
-
"aria-label": nativeAriaLabel,
|
|
9833
|
-
"aria-labelledby": nativeAriaLabelledBy,
|
|
9834
|
-
onValueChange,
|
|
9835
|
-
...rootProps
|
|
9836
|
-
}, ref) {
|
|
9837
|
-
const theme = resolveBaseAppearance(appearance);
|
|
9838
|
-
const generatedId = react.useId();
|
|
9839
|
-
const multiSelectId = id ?? generatedId;
|
|
9840
|
-
const controlId = `${multiSelectId}-control`;
|
|
9841
|
-
const listboxId = `${multiSelectId}-listbox`;
|
|
9842
|
-
const rootRef = react.useRef(null);
|
|
9843
|
-
const optionList = options ?? [];
|
|
9844
|
-
const forceOpen = openForPreview;
|
|
9845
|
-
const [uncontrolledOpen, setUncontrolledOpen] = react.useState(false);
|
|
9846
|
-
const open = forceOpen || uncontrolledOpen;
|
|
9847
|
-
const [uncontrolledValue, setUncontrolledValue] = react.useState(
|
|
9848
|
-
() => normalizeValues(defaultValue)
|
|
9849
|
-
);
|
|
9850
|
-
const [activeIndex, setActiveIndex] = react.useState(
|
|
9851
|
-
() => getFirstEnabledIndex(optionList)
|
|
9852
|
-
);
|
|
9853
|
-
const isControlled = value !== void 0;
|
|
9854
|
-
const selectedValues = react.useMemo(
|
|
9855
|
-
() => normalizeValues(isControlled ? value : uncontrolledValue),
|
|
9856
|
-
[isControlled, uncontrolledValue, value]
|
|
9857
|
-
);
|
|
9858
|
-
const selectedValueSet = react.useMemo(
|
|
9859
|
-
() => new Set(selectedValues),
|
|
9860
|
-
[selectedValues]
|
|
9861
|
-
);
|
|
9862
|
-
const optionByValue = react.useMemo(() => {
|
|
9863
|
-
const map = /* @__PURE__ */ new Map();
|
|
9864
|
-
optionList.forEach((option) => {
|
|
9865
|
-
if (!map.has(option.value)) {
|
|
9866
|
-
map.set(option.value, option);
|
|
9867
|
-
}
|
|
9868
|
-
});
|
|
9869
|
-
return map;
|
|
9870
|
-
}, [optionList]);
|
|
9871
|
-
const selectedOptions = react.useMemo(
|
|
9872
|
-
() => selectedValues.map((selectedValue) => optionByValue.get(selectedValue)).filter(
|
|
9873
|
-
(option) => option !== void 0
|
|
9874
|
-
),
|
|
9875
|
-
[optionByValue, selectedValues]
|
|
9876
|
-
);
|
|
9877
|
-
const firstEnabledIndex = react.useMemo(
|
|
9878
|
-
() => getFirstEnabledIndex(optionList),
|
|
9879
|
-
[optionList]
|
|
9880
|
-
);
|
|
9881
|
-
const resolvedActiveIndex = activeIndex >= 0 && !optionList[activeIndex]?.disabled ? activeIndex : firstEnabledIndex;
|
|
9882
|
-
const visibleTagCount = getSafeTagCount(
|
|
9883
|
-
maxTagCount,
|
|
9884
|
-
selectedOptions.length
|
|
9885
|
-
);
|
|
9886
|
-
const visibleOptions = selectedOptions.slice(0, visibleTagCount);
|
|
9887
|
-
const overflowCount = selectedOptions.length - visibleOptions.length;
|
|
9888
|
-
const isPlaceholder = selectedOptions.length === 0;
|
|
9889
|
-
const setRootRef = (node) => {
|
|
9890
|
-
rootRef.current = node;
|
|
9891
|
-
if (typeof ref === "function") {
|
|
9892
|
-
ref(node);
|
|
9893
|
-
} else if (ref) {
|
|
9894
|
-
ref.current = node;
|
|
9895
|
-
}
|
|
9896
|
-
};
|
|
9897
|
-
const setOpen = (nextOpen) => {
|
|
9898
|
-
if (disabled || forceOpen) return;
|
|
9899
|
-
setUncontrolledOpen(nextOpen);
|
|
9900
|
-
if (nextOpen) {
|
|
9901
|
-
setActiveIndex(resolvedActiveIndex);
|
|
9902
|
-
}
|
|
9903
|
-
};
|
|
9904
|
-
react.useEffect(() => {
|
|
9905
|
-
if (!open || forceOpen) return void 0;
|
|
9906
|
-
const handlePointerDown = (event) => {
|
|
9907
|
-
if (!rootRef.current?.contains(event.target)) {
|
|
9908
|
-
setUncontrolledOpen(false);
|
|
9909
|
-
}
|
|
9910
|
-
};
|
|
9911
|
-
document.addEventListener("pointerdown", handlePointerDown);
|
|
9912
|
-
return () => {
|
|
9913
|
-
document.removeEventListener("pointerdown", handlePointerDown);
|
|
9914
|
-
};
|
|
9915
|
-
}, [forceOpen, open]);
|
|
9916
|
-
react.useEffect(() => {
|
|
9917
|
-
if (resolvedActiveIndex >= 0 && resolvedActiveIndex !== activeIndex) {
|
|
9918
|
-
setActiveIndex(resolvedActiveIndex);
|
|
9919
|
-
}
|
|
9920
|
-
}, [activeIndex, resolvedActiveIndex]);
|
|
9921
|
-
const commitValues = (nextValues) => {
|
|
9922
|
-
const normalizedValues = normalizeValues(nextValues);
|
|
9923
|
-
if (!isControlled) {
|
|
9924
|
-
setUncontrolledValue(normalizedValues);
|
|
9925
|
-
}
|
|
9926
|
-
onValueChange?.(normalizedValues);
|
|
9927
|
-
};
|
|
9928
|
-
const toggleOption = (option) => {
|
|
9929
|
-
if (!option || option.disabled || disabled) return;
|
|
9930
|
-
const nextValues = selectedValueSet.has(option.value) ? selectedValues.filter((selectedValue) => selectedValue !== option.value) : [...selectedValues, option.value];
|
|
9931
|
-
commitValues(nextValues);
|
|
9932
|
-
};
|
|
9933
|
-
const removeOption = (option) => {
|
|
9934
|
-
if (disabled) return;
|
|
9935
|
-
commitValues(
|
|
9936
|
-
selectedValues.filter((selectedValue) => selectedValue !== option.value)
|
|
9937
|
-
);
|
|
9938
|
-
};
|
|
9939
|
-
const focusOption = (direction) => {
|
|
9940
|
-
const nextIndex = getNextEnabledIndex(
|
|
9941
|
-
optionList,
|
|
9942
|
-
resolvedActiveIndex,
|
|
9943
|
-
direction
|
|
9944
|
-
);
|
|
9945
|
-
if (nextIndex >= 0) {
|
|
9946
|
-
setActiveIndex(nextIndex);
|
|
9947
|
-
}
|
|
9948
|
-
};
|
|
9949
|
-
const handleKeyDown = (event) => {
|
|
9950
|
-
if (disabled) return;
|
|
9951
|
-
if (event.key === "ArrowDown" || event.key === "ArrowUp") {
|
|
9952
|
-
event.preventDefault();
|
|
9953
|
-
if (!open) {
|
|
9954
|
-
setOpen(true);
|
|
9955
|
-
setActiveIndex(firstEnabledIndex);
|
|
9956
|
-
return;
|
|
9957
|
-
}
|
|
9958
|
-
focusOption(event.key === "ArrowDown" ? 1 : -1);
|
|
9959
|
-
return;
|
|
9960
|
-
}
|
|
9961
|
-
if (event.key === "Home") {
|
|
9962
|
-
event.preventDefault();
|
|
9963
|
-
setOpen(true);
|
|
9964
|
-
setActiveIndex(firstEnabledIndex);
|
|
9965
|
-
return;
|
|
9966
|
-
}
|
|
9967
|
-
if (event.key === "End") {
|
|
9968
|
-
event.preventDefault();
|
|
9969
|
-
setOpen(true);
|
|
9970
|
-
for (let index = optionList.length - 1; index >= 0; index -= 1) {
|
|
9971
|
-
if (!optionList[index]?.disabled) {
|
|
9972
|
-
setActiveIndex(index);
|
|
9973
|
-
break;
|
|
9974
|
-
}
|
|
9975
|
-
}
|
|
9976
|
-
return;
|
|
9977
|
-
}
|
|
9978
|
-
if (event.key === "Enter" || event.key === " ") {
|
|
9979
|
-
event.preventDefault();
|
|
9980
|
-
if (!open) {
|
|
9981
|
-
setOpen(true);
|
|
9982
|
-
return;
|
|
9983
|
-
}
|
|
9984
|
-
toggleOption(optionList[resolvedActiveIndex]);
|
|
9985
|
-
return;
|
|
9986
|
-
}
|
|
9987
|
-
if (event.key === "Escape") {
|
|
9988
|
-
setOpen(false);
|
|
9989
|
-
}
|
|
9990
|
-
};
|
|
9991
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
9992
|
-
"div",
|
|
9993
|
-
{
|
|
9994
|
-
...rootProps,
|
|
9995
|
-
id,
|
|
9996
|
-
ref: setRootRef,
|
|
9997
|
-
className: cn(
|
|
9998
|
-
theme.slots.controlWrapper,
|
|
9999
|
-
"overflow-visible",
|
|
10000
|
-
open && "z-50",
|
|
10001
|
-
invalid && theme.slots.controlInvalid,
|
|
10002
|
-
disabled && theme.slots.controlDisabled,
|
|
10003
|
-
classNames?.root,
|
|
10004
|
-
className
|
|
10005
|
-
),
|
|
10006
|
-
style: {
|
|
10007
|
-
...theme.styles.control,
|
|
10008
|
-
...invalid ? theme.styles.controlInvalid : void 0,
|
|
10009
|
-
...disabled ? theme.styles.controlDisabled : void 0,
|
|
10010
|
-
...style
|
|
10011
|
-
},
|
|
10012
|
-
children: [
|
|
10013
|
-
hasRenderableNode(icon) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(theme.slots.controlIcon, classNames?.icon), children: icon }) : null,
|
|
10014
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10015
|
-
"div",
|
|
10016
|
-
{
|
|
10017
|
-
id: controlId,
|
|
10018
|
-
role: "combobox",
|
|
10019
|
-
tabIndex: disabled ? -1 : 0,
|
|
10020
|
-
"aria-haspopup": "listbox",
|
|
10021
|
-
"aria-expanded": open,
|
|
10022
|
-
"aria-controls": listboxId,
|
|
10023
|
-
"aria-disabled": disabled || void 0,
|
|
10024
|
-
"aria-required": required || void 0,
|
|
10025
|
-
"aria-invalid": nativeAriaInvalid ?? (invalid || void 0),
|
|
10026
|
-
"aria-label": nativeAriaLabel,
|
|
10027
|
-
"aria-labelledby": nativeAriaLabelledBy,
|
|
10028
|
-
className: cn(
|
|
10029
|
-
theme.slots.controlBase,
|
|
10030
|
-
"flex min-h-9 cursor-pointer flex-wrap items-center gap-1.5 py-1.5 pr-9 text-left",
|
|
10031
|
-
disabled && "!cursor-not-allowed",
|
|
10032
|
-
classNames?.control
|
|
10033
|
-
),
|
|
10034
|
-
onClick: () => setOpen(!open),
|
|
10035
|
-
onKeyDown: handleKeyDown,
|
|
10036
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
10037
|
-
"span",
|
|
10038
|
-
{
|
|
10039
|
-
className: cn(
|
|
10040
|
-
"flex min-w-0 flex-1 flex-wrap items-center gap-1.5",
|
|
10041
|
-
classNames?.tagList
|
|
10042
|
-
),
|
|
10043
|
-
children: [
|
|
10044
|
-
visibleOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
10045
|
-
"span",
|
|
10046
|
-
{
|
|
10047
|
-
className: cn(
|
|
10048
|
-
"inline-flex max-w-full items-center gap-1 rounded-full border border-border/70 bg-muted/65 px-2 py-0.5 text-xs font-medium text-foreground",
|
|
10049
|
-
classNames?.tag
|
|
10050
|
-
),
|
|
10051
|
-
children: [
|
|
10052
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10053
|
-
"span",
|
|
10054
|
-
{
|
|
10055
|
-
className: cn(
|
|
10056
|
-
"max-w-40 truncate",
|
|
10057
|
-
classNames?.tagLabel
|
|
10058
|
-
),
|
|
10059
|
-
children: option.label
|
|
10060
|
-
}
|
|
10061
|
-
),
|
|
10062
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10063
|
-
"button",
|
|
10064
|
-
{
|
|
10065
|
-
type: "button",
|
|
10066
|
-
"aria-label": removeLabel(option),
|
|
10067
|
-
disabled,
|
|
10068
|
-
className: cn(
|
|
10069
|
-
"inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-background/80 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:!cursor-not-allowed",
|
|
10070
|
-
classNames?.tagRemove
|
|
10071
|
-
),
|
|
10072
|
-
onClick: (event) => {
|
|
10073
|
-
event.preventDefault();
|
|
10074
|
-
event.stopPropagation();
|
|
10075
|
-
removeOption(option);
|
|
10076
|
-
},
|
|
10077
|
-
onMouseDown: (event) => {
|
|
10078
|
-
event.preventDefault();
|
|
10079
|
-
event.stopPropagation();
|
|
10080
|
-
},
|
|
10081
|
-
onKeyDown: (event) => event.stopPropagation(),
|
|
10082
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "x" })
|
|
10083
|
-
}
|
|
10084
|
-
)
|
|
10085
|
-
]
|
|
10086
|
-
},
|
|
10087
|
-
option.value
|
|
10088
|
-
)),
|
|
10089
|
-
overflowCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
10090
|
-
"span",
|
|
10091
|
-
{
|
|
10092
|
-
className: cn(
|
|
10093
|
-
"inline-flex max-w-full items-center rounded-full border border-border/70 bg-muted/45 px-2 py-0.5 text-xs font-medium text-muted-foreground",
|
|
10094
|
-
classNames?.tag
|
|
10095
|
-
),
|
|
10096
|
-
children: [
|
|
10097
|
-
"+",
|
|
10098
|
-
overflowCount
|
|
10099
|
-
]
|
|
10100
|
-
}
|
|
10101
|
-
) : null,
|
|
10102
|
-
isPlaceholder ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
10103
|
-
"span",
|
|
10104
|
-
{
|
|
10105
|
-
className: cn(
|
|
10106
|
-
"min-w-0 truncate",
|
|
10107
|
-
theme.slots.selectPlaceholder,
|
|
10108
|
-
classNames?.placeholder
|
|
10109
|
-
),
|
|
10110
|
-
children: placeholder
|
|
10111
|
-
}
|
|
10112
|
-
) : null
|
|
10113
|
-
]
|
|
10114
|
-
}
|
|
10115
|
-
)
|
|
10116
|
-
}
|
|
10117
|
-
),
|
|
10118
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10119
|
-
"span",
|
|
10120
|
-
{
|
|
10121
|
-
className: cn(
|
|
10122
|
-
theme.slots.selectChevron,
|
|
10123
|
-
open && "rotate-[225deg]",
|
|
10124
|
-
classNames?.chevron
|
|
10125
|
-
)
|
|
10126
|
-
}
|
|
10127
|
-
),
|
|
10128
|
-
name ? selectedValues.map((selectedValue) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
10129
|
-
"input",
|
|
10130
|
-
{
|
|
10131
|
-
type: "hidden",
|
|
10132
|
-
name,
|
|
10133
|
-
value: selectedValue,
|
|
10134
|
-
className: classNames?.hiddenInput
|
|
10135
|
-
},
|
|
10136
|
-
selectedValue
|
|
10137
|
-
)) : null,
|
|
10138
|
-
open ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
10139
|
-
"div",
|
|
10140
|
-
{
|
|
10141
|
-
id: listboxId,
|
|
10142
|
-
role: "listbox",
|
|
10143
|
-
"aria-multiselectable": "true",
|
|
10144
|
-
"aria-labelledby": controlId,
|
|
10145
|
-
className: cn(theme.slots.selectMenu, classNames?.menu),
|
|
10146
|
-
style: theme.styles.selectMenu,
|
|
10147
|
-
children: optionList.length > 0 ? optionList.map((option, index) => {
|
|
10148
|
-
const selected = selectedValueSet.has(option.value);
|
|
10149
|
-
const active = index === resolvedActiveIndex;
|
|
10150
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
10151
|
-
"button",
|
|
10152
|
-
{
|
|
10153
|
-
type: "button",
|
|
10154
|
-
role: "option",
|
|
10155
|
-
"aria-selected": selected,
|
|
10156
|
-
disabled: option.disabled,
|
|
10157
|
-
className: cn(
|
|
10158
|
-
theme.slots.selectOption,
|
|
10159
|
-
"gap-2",
|
|
10160
|
-
active && theme.slots.selectOptionActive,
|
|
10161
|
-
selected && theme.slots.selectOptionSelected,
|
|
10162
|
-
option.disabled && theme.slots.selectOptionDisabled,
|
|
10163
|
-
classNames?.option
|
|
10164
|
-
),
|
|
10165
|
-
style: {
|
|
10166
|
-
...theme.styles.selectOption,
|
|
10167
|
-
...active ? theme.styles.selectOptionActive : void 0,
|
|
10168
|
-
...selected ? theme.styles.selectOptionSelected : void 0
|
|
10169
|
-
},
|
|
10170
|
-
onMouseEnter: () => {
|
|
10171
|
-
if (!option.disabled) {
|
|
10172
|
-
setActiveIndex(index);
|
|
10173
|
-
}
|
|
10174
|
-
},
|
|
10175
|
-
onMouseDown: (event) => event.preventDefault(),
|
|
10176
|
-
onClick: () => toggleOption(option),
|
|
10177
|
-
children: [
|
|
10178
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10179
|
-
"span",
|
|
10180
|
-
{
|
|
10181
|
-
"aria-hidden": "true",
|
|
10182
|
-
className: cn(
|
|
10183
|
-
"inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-border/70 text-[10px]",
|
|
10184
|
-
selected && "border-primary/40 bg-primary text-primary-foreground",
|
|
10185
|
-
classNames?.optionIndicator
|
|
10186
|
-
),
|
|
10187
|
-
children: selected ? "\u2713" : null
|
|
10188
|
-
}
|
|
10189
|
-
),
|
|
10190
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10191
|
-
"span",
|
|
10192
|
-
{
|
|
10193
|
-
className: cn(
|
|
10194
|
-
"min-w-0 flex-1 truncate",
|
|
10195
|
-
classNames?.optionLabel
|
|
10196
|
-
),
|
|
10197
|
-
children: option.label
|
|
10198
|
-
}
|
|
10199
|
-
)
|
|
10200
|
-
]
|
|
10201
|
-
},
|
|
10202
|
-
option.value
|
|
10203
|
-
);
|
|
10204
|
-
}) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
10205
|
-
"div",
|
|
10206
|
-
{
|
|
10207
|
-
className: cn(
|
|
10208
|
-
"px-2.5 py-2 text-sm text-muted-foreground",
|
|
10209
|
-
classNames?.empty
|
|
10210
|
-
),
|
|
10211
|
-
children: emptyLabel
|
|
10212
|
-
}
|
|
10213
|
-
)
|
|
10214
|
-
}
|
|
10215
|
-
) : null
|
|
10216
|
-
]
|
|
10217
|
-
}
|
|
10218
|
-
);
|
|
10219
|
-
}
|
|
10220
|
-
);
|
|
10221
9779
|
function findOption(options, value) {
|
|
10222
9780
|
if (value === void 0) return void 0;
|
|
10223
9781
|
return options.find((option) => option.value === value);
|
|
@@ -10228,7 +9786,7 @@ function getInitialValue(options, defaultValue) {
|
|
|
10228
9786
|
}
|
|
10229
9787
|
return "";
|
|
10230
9788
|
}
|
|
10231
|
-
function
|
|
9789
|
+
function getNextEnabledIndex(options, currentIndex, direction) {
|
|
10232
9790
|
if (!options.length) return -1;
|
|
10233
9791
|
for (let offset = 1; offset <= options.length; offset += 1) {
|
|
10234
9792
|
const nextIndex = (currentIndex + offset * direction + options.length) % options.length;
|
|
@@ -10330,7 +9888,7 @@ react.forwardRef(
|
|
|
10330
9888
|
};
|
|
10331
9889
|
const focusOption = (direction) => {
|
|
10332
9890
|
const currentIndex = activeIndex >= 0 ? activeIndex : 0;
|
|
10333
|
-
const nextIndex =
|
|
9891
|
+
const nextIndex = getNextEnabledIndex(optionList, currentIndex, direction);
|
|
10334
9892
|
if (nextIndex >= 0) {
|
|
10335
9893
|
commitValue(optionList[nextIndex].value, optionList[nextIndex].disabled);
|
|
10336
9894
|
}
|