@keboola/design 11.6.1 → 11.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/AGENTS.md +16 -1
- package/CHANGELOG.md +86 -0
- package/COMPONENT-API.md +47 -46
- package/README.md +1 -1
- package/dist/{AIKit-CQxVwyAk.js → AIKit-ELIsegJz.js} +550 -103
- package/dist/AIKit-ELIsegJz.js.map +1 -0
- package/dist/{Alert-C4Y9IwMI.js → Alert-BsIM_oFK.js} +2 -2
- package/dist/{Alert-C4Y9IwMI.js.map → Alert-BsIM_oFK.js.map} +1 -1
- package/dist/{BrandEditor-CS9P4r2p.js → BrandEditor-BsTBM3s6.js} +4 -4
- package/dist/{BrandEditor-CS9P4r2p.js.map → BrandEditor-BsTBM3s6.js.map} +1 -1
- package/dist/{Breadcrumb-D1id7YXd.js → Breadcrumb-xqEUxfwn.js} +2 -2
- package/dist/{Breadcrumb-D1id7YXd.js.map → Breadcrumb-xqEUxfwn.js.map} +1 -1
- package/dist/{Checkbox-Bqr6zXcW.js → Checkbox-Dq5fPNrO.js} +2 -2
- package/dist/{Checkbox-Bqr6zXcW.js.map → Checkbox-Dq5fPNrO.js.map} +1 -1
- package/dist/{Clipboard-C2YBRfD8.js → Clipboard-BZitKiSA.js} +2 -2
- package/dist/{Clipboard-C2YBRfD8.js.map → Clipboard-BZitKiSA.js.map} +1 -1
- package/dist/{ClipboardButton-CrljClL1.js → ClipboardButton-KHQnPEh_.js} +2 -2
- package/dist/{ClipboardButton-CrljClL1.js.map → ClipboardButton-KHQnPEh_.js.map} +1 -1
- package/dist/{CodeEditor-C9AS8Ch0.js → CodeEditor-BJKJXA0c.js} +4 -4
- package/dist/{CodeEditor-C9AS8Ch0.js.map → CodeEditor-BJKJXA0c.js.map} +1 -1
- package/dist/{ColorInput-Dg87lKcR.js → ColorInput-Bj3dfPFA.js} +3 -3
- package/dist/{ColorInput-Dg87lKcR.js.map → ColorInput-Bj3dfPFA.js.map} +1 -1
- package/dist/{ColorModeSwitch-CsWLiTBX.js → ColorModeSwitch-CWt-DZGC.js} +2 -2
- package/dist/{ColorModeSwitch-CsWLiTBX.js.map → ColorModeSwitch-CWt-DZGC.js.map} +1 -1
- package/dist/{Combobox-BfanUAqY.js → Combobox-D8PrEqTG.js} +3 -3
- package/dist/{Combobox-BfanUAqY.js.map → Combobox-D8PrEqTG.js.map} +1 -1
- package/dist/{Command-CqxoI_De.js → Command-BDU3C1gg.js} +2 -2
- package/dist/{Command-CqxoI_De.js.map → Command-BDU3C1gg.js.map} +1 -1
- package/dist/{CopyField-Rx9HPTbJ.js → CopyField-BHRQUyuF.js} +2 -2
- package/dist/{CopyField-Rx9HPTbJ.js.map → CopyField-BHRQUyuF.js.map} +1 -1
- package/dist/{DateInput-DpifECUQ.js → DateInput-B6N8g0ra.js} +3 -3
- package/dist/{DateInput-DpifECUQ.js.map → DateInput-B6N8g0ra.js.map} +1 -1
- package/dist/{DateRangeInput-9MIw7P6L.js → DateRangeInput-7M9Z4cVO.js} +3 -3
- package/dist/{DateRangeInput-9MIw7P6L.js.map → DateRangeInput-7M9Z4cVO.js.map} +1 -1
- package/dist/{DropdownMenu-CASr-jgl.js → DropdownMenu-CgVwhDvl.js} +9 -4
- package/dist/DropdownMenu-CgVwhDvl.js.map +1 -0
- package/dist/{FieldItem-DtPTzNef.js → FieldItem-DZGIdiXE.js} +3 -3
- package/dist/{FieldItem-DtPTzNef.js.map → FieldItem-DZGIdiXE.js.map} +1 -1
- package/dist/{Form-DAaatlBk.js → Form-CcK7dRrC.js} +5 -5
- package/dist/{Form-DAaatlBk.js.map → Form-CcK7dRrC.js.map} +1 -1
- package/dist/{FormGroup-Bl8JmnzJ.js → FormGroup-DR_gZ25-.js} +3 -3
- package/dist/{FormGroup-Bl8JmnzJ.js.map → FormGroup-DR_gZ25-.js.map} +1 -1
- package/dist/{InputGroup-DcZRlVnN.js → InputGroup-Do8K2hvD.js} +2 -1
- package/dist/InputGroup-Do8K2hvD.js.map +1 -0
- package/dist/{Kbd-D1Azcc4g.js → Kbd-LCFMumoq.js} +2 -2
- package/dist/{Kbd-D1Azcc4g.js.map → Kbd-LCFMumoq.js.map} +1 -1
- package/dist/{MermaidDiagram-CujFxVzk.js → MermaidDiagram-ZG0iiDV_.js} +2 -2
- package/dist/{MermaidDiagram-CujFxVzk.js.map → MermaidDiagram-ZG0iiDV_.js.map} +1 -1
- package/dist/{Modal-Coj-H02o.js → Modal-I3VWk2oo.js} +2 -2
- package/dist/{Modal-Coj-H02o.js.map → Modal-I3VWk2oo.js.map} +1 -1
- package/dist/{ModalTitle-C76ke2eo.js → ModalTitle-CeLM_mX9.js} +2 -2
- package/dist/ModalTitle-CeLM_mX9.js.map +1 -0
- package/dist/{MultiActionButtonGroup-CNNoBQbv.js → MultiActionButtonGroup-CYZ8IgSf.js} +2 -2
- package/dist/{MultiActionButtonGroup-CNNoBQbv.js.map → MultiActionButtonGroup-CYZ8IgSf.js.map} +1 -1
- package/dist/{RadioGroup-CUBsuP7r.js → RadioGroup-Byc2mym4.js} +2 -2
- package/dist/{RadioGroup-CUBsuP7r.js.map → RadioGroup-Byc2mym4.js.map} +1 -1
- package/dist/{Search-DVpJuzr9.js → Search-Dhig_hPD.js} +2 -2
- package/dist/{Search-DVpJuzr9.js.map → Search-Dhig_hPD.js.map} +1 -1
- package/dist/{SearchInput-Q85p8Ews.js → SearchInput-92r2bkA7.js} +3 -3
- package/dist/{SearchInput-Q85p8Ews.js.map → SearchInput-92r2bkA7.js.map} +1 -1
- package/dist/{SectionNav-mpmSM3OC.js → SectionNav-CNLJsiVG.js} +3 -3
- package/dist/{SectionNav-mpmSM3OC.js.map → SectionNav-CNLJsiVG.js.map} +1 -1
- package/dist/{Sheet-Chf0kX1E.js → Sheet-OparjIi-.js} +2 -2
- package/dist/{Sheet-Chf0kX1E.js.map → Sheet-OparjIi-.js.map} +1 -1
- package/dist/{Sidebar-CTWsHZhF.js → Sidebar-CLEbBtNY.js} +190 -25
- package/dist/Sidebar-CLEbBtNY.js.map +1 -0
- package/dist/{Slider-Bv0B6lI0.js → Slider-DLclvRws.js} +2 -2
- package/dist/{Slider-Bv0B6lI0.js.map → Slider-DLclvRws.js.map} +1 -1
- package/dist/{TextInput-DiEMxVF6.js → TextInput-CFTf4Cz1.js} +5 -4
- package/dist/TextInput-CFTf4Cz1.js.map +1 -0
- package/dist/{ThemeProvider-BI6JWBdJ.js → ThemeProvider-DAmNn9Sd.js} +2 -2
- package/dist/{ThemeProvider-BI6JWBdJ.js.map → ThemeProvider-DAmNn9Sd.js.map} +1 -1
- package/dist/{Timeline-BG5Xogxh.js → Timeline-C8-wnRRr.js} +2 -2
- package/dist/{Timeline-BG5Xogxh.js.map → Timeline-C8-wnRRr.js.map} +1 -1
- package/dist/{ZoomableSvg-U_VH3QRO.js → ZoomableSvg-BZlk3PFJ.js} +3 -3
- package/dist/{ZoomableSvg-U_VH3QRO.js.map → ZoomableSvg-BZlk3PFJ.js.map} +1 -1
- package/dist/editors.js +2 -2
- package/dist/flint.js +1 -1
- package/dist/index.d.ts +900 -561
- package/dist/index.js +36 -34
- package/dist/internal/blocks/AIKit.js +2 -2
- package/dist/internal/blocks/BrandEditor.js +1 -1
- package/dist/internal/blocks/ChipEditor.js +137 -0
- package/dist/internal/blocks/ChipEditor.js.map +1 -0
- package/dist/internal/blocks/ClipboardButton.js +1 -1
- package/dist/internal/blocks/ColorInput.js +1 -1
- package/dist/internal/blocks/ColorModeSwitch.js +1 -1
- package/dist/internal/blocks/Command.js +1 -1
- package/dist/internal/blocks/CopyField.js +1 -1
- package/dist/internal/blocks/DateInput.js +1 -1
- package/dist/internal/blocks/DateRangeInput.js +1 -1
- package/dist/internal/blocks/ExportMenu.js +2 -2
- package/dist/internal/blocks/Form/connectors/MultiComboboxField.js +1 -1
- package/dist/internal/blocks/Form.js +1 -1
- package/dist/internal/blocks/FormGroup.js +1 -1
- package/dist/internal/blocks/MultiActionButtonGroup.js +1 -1
- package/dist/internal/blocks/MultiCombobox.js +18 -28
- package/dist/internal/blocks/MultiCombobox.js.map +1 -1
- package/dist/internal/blocks/NumberInput.js +1 -1
- package/dist/internal/blocks/PasswordInput.js +2 -2
- package/dist/internal/blocks/SearchInput.js +1 -1
- package/dist/internal/blocks/SearchInputWithNavigation.js +2 -2
- package/dist/internal/blocks/SectionNav.js +1 -1
- package/dist/internal/blocks/SplitButton.js +1 -1
- package/dist/internal/blocks/TextInput.js +1 -1
- package/dist/internal/blocks/Textarea.js +1 -1
- package/dist/internal/blocks/TimeInput.js +2 -2
- package/dist/internal/components/Alert.js +1 -1
- package/dist/internal/components/Avatar.js +1 -1
- package/dist/internal/components/Breadcrumb.js +1 -1
- package/dist/internal/components/Checkbox.js +1 -1
- package/dist/internal/components/Clipboard.js +1 -1
- package/dist/internal/components/CollapsiblePanel.js +1 -1
- package/dist/internal/components/Combobox.js +1 -1
- package/dist/internal/components/DropdownMenu.js +1 -1
- package/dist/internal/components/InputGroup.js +1 -1
- package/dist/internal/components/Kbd.js +1 -1
- package/dist/internal/components/Modal.js +1 -1
- package/dist/internal/components/RadioGroup.js +1 -1
- package/dist/internal/components/Search.js +1 -1
- package/dist/internal/components/Sheet.js +1 -1
- package/dist/internal/components/Sidebar.js +1 -1
- package/dist/internal/components/Slider.js +1 -1
- package/dist/internal/components/StatusDot.js +67 -0
- package/dist/internal/components/StatusDot.js.map +1 -0
- package/dist/internal/components/ThemeProvider.js +1 -1
- package/dist/internal/components/Timeline.js +1 -1
- package/dist/internal/components/Tooltip.js +2 -2
- package/dist/internal/components/Truncated.js +1 -1
- package/dist/internal/components/ZoomableSvg.js +1 -1
- package/dist/internal/hooks/useScrollbarPosition.js +1 -1
- package/dist/internal/utils/mergeRefs.js +27 -9
- package/dist/internal/utils/mergeRefs.js.map +1 -1
- package/dist/internal/utils.js +2 -2
- package/dist/markdown-editor.js +5 -5
- package/dist/mermaid.js +1 -1
- package/dist/rjsf.js +9 -9
- package/dist/styles.css +1 -1
- package/dist/testing.js +1 -1
- package/dist/useElement-BK3AAiIf.js +24 -0
- package/dist/useElement-BK3AAiIf.js.map +1 -0
- package/dist/{utils-DnkrFYqY.js → utils-BW4AE8VP.js} +31 -3
- package/dist/utils-BW4AE8VP.js.map +1 -0
- package/package.json +2 -1
- package/dist/AIKit-CQxVwyAk.js.map +0 -1
- package/dist/DropdownMenu-CASr-jgl.js.map +0 -1
- package/dist/InputGroup-DcZRlVnN.js.map +0 -1
- package/dist/ModalTitle-C76ke2eo.js.map +0 -1
- package/dist/Sidebar-CTWsHZhF.js.map +0 -1
- package/dist/TextInput-DiEMxVF6.js.map +0 -1
- package/dist/useElement-DkF6esWL.js +0 -15
- package/dist/useElement-DkF6esWL.js.map +0 -1
- package/dist/utils-DnkrFYqY.js.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,75 +1,77 @@
|
|
|
1
1
|
import { cn } from "./classNames-BzrkDnOD.js";
|
|
2
|
-
import { Tooltip, TooltipProvider, copyToClipboard, isMac } from "./utils-
|
|
2
|
+
import { HINT_UNDERLINE_CLASS_NAME, Tooltip, TooltipProvider, copyToClipboard, isMac } from "./utils-BW4AE8VP.js";
|
|
3
3
|
import { DEFAULT_BRAND_ID, DEFAULT_COLOR_SCHEME } from "./defaults-i_xG2F_1.js";
|
|
4
4
|
import { ArgoDesignContext, useArgoDesign, useTheme } from "./context-D7X470dy.js";
|
|
5
5
|
import { findLiteralMatches, hasLiteralMatch } from "./findLiteralMatches-BGBw8Vbl.js";
|
|
6
6
|
import { mergeRefs } from "./internal/utils/mergeRefs.js";
|
|
7
7
|
import { Button, ButtonInline, argoVariants } from "./Button-DsRrU5F1.js";
|
|
8
8
|
import { ButtonGroup } from "./internal/components/ButtonGroup.js";
|
|
9
|
-
import { DropdownMenu } from "./DropdownMenu-
|
|
9
|
+
import { DropdownMenu } from "./DropdownMenu-CgVwhDvl.js";
|
|
10
10
|
import { ScrollArea, ScrollBar } from "./internal/components/ScrollArea.js";
|
|
11
11
|
import { SplitButton } from "./internal/blocks/SplitButton.js";
|
|
12
|
-
import { MultiActionButtonGroup } from "./MultiActionButtonGroup-
|
|
12
|
+
import { MultiActionButtonGroup } from "./MultiActionButtonGroup-CYZ8IgSf.js";
|
|
13
13
|
import { Toggle } from "./internal/components/Toggle.js";
|
|
14
14
|
import { ToggleGroup } from "./ToggleGroup-Cy_10Mvu.js";
|
|
15
|
-
import { Clipboard } from "./Clipboard-
|
|
16
|
-
import { ClipboardButton, ClipboardInline } from "./ClipboardButton-
|
|
15
|
+
import { Clipboard } from "./Clipboard-BZitKiSA.js";
|
|
16
|
+
import { ClipboardButton, ClipboardInline } from "./ClipboardButton-KHQnPEh_.js";
|
|
17
17
|
import { ExportMenu } from "./internal/blocks/ExportMenu.js";
|
|
18
|
-
import { CopyField } from "./CopyField-
|
|
18
|
+
import { CopyField } from "./CopyField-BHRQUyuF.js";
|
|
19
19
|
import { Label } from "./internal/components/Label.js";
|
|
20
20
|
import { MicrosoftButton } from "./internal/blocks/MicrosoftButton.js";
|
|
21
21
|
import { GoogleButton } from "./internal/blocks/GoogleButton.js";
|
|
22
22
|
import { Link } from "./internal/components/Link.js";
|
|
23
23
|
import { AlertModal } from "./AlertModal-BGJdaRRj.js";
|
|
24
|
-
import { Modal } from "./Modal-
|
|
24
|
+
import { Modal } from "./Modal-I3VWk2oo.js";
|
|
25
25
|
import { Separator } from "./internal/components/Separator.js";
|
|
26
26
|
import { FullScreenModal, FullScreenModalBody, FullScreenModalHeader } from "./FullScreenModal-CN9nAs72.js";
|
|
27
27
|
import { Truncated } from "./internal/components/Truncated.js";
|
|
28
|
-
import { Sheet } from "./Sheet-
|
|
28
|
+
import { Sheet } from "./Sheet-OparjIi-.js";
|
|
29
29
|
import { useStableCallback } from "./internal/hooks/useStableCallback.js";
|
|
30
30
|
import { Popover } from "./Popover-BEbQrC_P.js";
|
|
31
31
|
import { Popconfirm } from "./Popconfirm-5pBzT_HQ.js";
|
|
32
32
|
import { HoverCard } from "./HoverCard-B9ZMJxjn.js";
|
|
33
|
-
import { Command, CommandGroup, CommandInput, CommandItem, CommandList, defaultFilter, useCommandState } from "./Command-
|
|
34
|
-
import { InputGroup } from "./InputGroup-
|
|
35
|
-
import { TextInput } from "./TextInput-
|
|
33
|
+
import { Command, CommandGroup, CommandInput, CommandItem, CommandList, defaultFilter, useCommandState } from "./Command-BDU3C1gg.js";
|
|
34
|
+
import { InputGroup } from "./InputGroup-Do8K2hvD.js";
|
|
35
|
+
import { TextInput } from "./TextInput-CFTf4Cz1.js";
|
|
36
36
|
import { SpotlightBackdrop, useTargetRect } from "./internal/components/SpotlightBackdrop.js";
|
|
37
37
|
import { Calendar } from "./Calendar-cG5NIJ4O.js";
|
|
38
38
|
import { DatePicker } from "./DatePicker-nA8YdE84.js";
|
|
39
39
|
import { TimePicker } from "./TimePicker-BGeqc-Ed.js";
|
|
40
40
|
import { DateRangePicker } from "./DateRangePicker-DjSUFjh4.js";
|
|
41
41
|
import { Switch } from "./Switch-B0WdGSjz.js";
|
|
42
|
-
import { RadioGroup } from "./RadioGroup-
|
|
43
|
-
import { Slider } from "./Slider-
|
|
44
|
-
import { Search, SearchForm } from "./Search-
|
|
42
|
+
import { RadioGroup } from "./RadioGroup-Byc2mym4.js";
|
|
43
|
+
import { Slider } from "./Slider-DLclvRws.js";
|
|
44
|
+
import { Search, SearchForm } from "./Search-Dhig_hPD.js";
|
|
45
45
|
import { Select } from "./Select-DV3Hak_l.js";
|
|
46
|
-
import { Checkbox } from "./Checkbox-
|
|
47
|
-
import { Combobox, filterByWords, matchByWords, namedLabel, withBlankValues } from "./Combobox-
|
|
46
|
+
import { Checkbox } from "./Checkbox-Dq5fPNrO.js";
|
|
47
|
+
import { Combobox, filterByWords, matchByWords, namedLabel, withBlankValues } from "./Combobox-D8PrEqTG.js";
|
|
48
48
|
import { Badge } from "./Badge-o5jURtpB.js";
|
|
49
49
|
import { MultiCombobox } from "./internal/blocks/MultiCombobox.js";
|
|
50
|
-
import { FormGroup } from "./FormGroup-
|
|
51
|
-
import { ColorInput } from "./ColorInput-
|
|
50
|
+
import { FormGroup } from "./FormGroup-DR_gZ25-.js";
|
|
51
|
+
import { ColorInput } from "./ColorInput-Bj3dfPFA.js";
|
|
52
52
|
import { HelpBlock } from "./internal/components/HelpBlock.js";
|
|
53
53
|
import { NumberInput } from "./internal/blocks/NumberInput.js";
|
|
54
54
|
import { Textarea } from "./internal/blocks/Textarea.js";
|
|
55
55
|
import { MultiComboboxField } from "./internal/blocks/Form/connectors/MultiComboboxField.js";
|
|
56
|
+
import { ChipEditor } from "./internal/blocks/ChipEditor.js";
|
|
56
57
|
import { AutoSaveTextarea } from "./AutoSaveTextarea-BeuWuszr.js";
|
|
57
|
-
import { ColorModeSwitch } from "./ColorModeSwitch-
|
|
58
|
-
import { DateInput } from "./DateInput-
|
|
58
|
+
import { ColorModeSwitch } from "./ColorModeSwitch-CWt-DZGC.js";
|
|
59
|
+
import { DateInput } from "./DateInput-B6N8g0ra.js";
|
|
59
60
|
import { PasswordInput } from "./internal/blocks/PasswordInput.js";
|
|
60
61
|
import { TimeInput } from "./internal/blocks/TimeInput.js";
|
|
61
|
-
import { DateRangeInput } from "./DateRangeInput-
|
|
62
|
+
import { DateRangeInput } from "./DateRangeInput-7M9Z4cVO.js";
|
|
62
63
|
import { OtpInput, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "./OtpInput-CbbymqYs.js";
|
|
63
|
-
import { SearchInput } from "./SearchInput-
|
|
64
|
+
import { SearchInput } from "./SearchInput-92r2bkA7.js";
|
|
64
65
|
import { SearchInputWithNavigation } from "./internal/blocks/SearchInputWithNavigation.js";
|
|
65
66
|
import { FileUpload, useFileDropTarget, useFileUploadRejections } from "./FileUpload-DYQCTGjU.js";
|
|
66
|
-
import { AnswerActions, AnswerSummary, CollapsibleStepHeader, DIAGRAM_LANGUAGES, InlineStepDetail, InlineStepLabel, Markdown, MarkdownTable, MessageBubble, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageStats, UsageStatsRing, clampPercentage, formatPercentage } from "./AIKit-
|
|
67
|
+
import { AnswerActions, AnswerSummary, ChatInlineIcon, CollapsibleStepHeader, DIAGRAM_LANGUAGES, InlineStepDetail, InlineStepGroup, InlineStepLabel, Markdown, MarkdownTable, MessageBubble, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageBar, UsageStats, UsageStatsRing, clampPercentage, formatPercentage, getChatInlineIconName } from "./AIKit-ELIsegJz.js";
|
|
67
68
|
import { Table, tableAriaSort } from "./Table-CvYuTuNU.js";
|
|
68
69
|
import { Skeleton } from "./internal/components/Skeleton/Skeleton.js";
|
|
69
70
|
import { DiagramSkeleton } from "./internal/blocks/DiagramShared/DiagramSkeleton.js";
|
|
70
71
|
import { Progress } from "./internal/components/Progress.js";
|
|
71
72
|
import { Collapsible } from "./Collapsible-BQXWEOBC.js";
|
|
72
|
-
import { Alert } from "./Alert-
|
|
73
|
+
import { Alert } from "./Alert-BsIM_oFK.js";
|
|
74
|
+
import { StatusDot, statusDotVariants } from "./internal/components/StatusDot.js";
|
|
73
75
|
import { toast } from "./toast-DIC0iNRf.js";
|
|
74
76
|
import { Toaster, useNotification } from "./Toast-Dr6Uw7ao.js";
|
|
75
77
|
import { EmptySearchContent } from "./internal/components/EmptySearchContent.js";
|
|
@@ -81,26 +83,26 @@ import { SkeletonList } from "./internal/components/Skeleton/SkeletonList.js";
|
|
|
81
83
|
import { DotsLoader } from "./internal/components/DotsLoader.js";
|
|
82
84
|
import { CollapsiblePanel } from "./internal/components/CollapsiblePanel.js";
|
|
83
85
|
import { PanelWithDetails } from "./internal/components/PanelWithDetails.js";
|
|
84
|
-
import { ThemeProvider, ThemeScope, brandSchema, exampleCustomer, keboola, keboolaLegacySidebar, keboolaLegacyTopnav, useThemeScopeContainer } from "./ThemeProvider-
|
|
86
|
+
import { ThemeProvider, ThemeScope, brandSchema, exampleCustomer, keboola, keboolaLegacySidebar, keboolaLegacyTopnav, useThemeScopeContainer } from "./ThemeProvider-DAmNn9Sd.js";
|
|
85
87
|
import { AppShell, appShellSlotSelector } from "./AppShell-DRgJxpXW.js";
|
|
86
88
|
import { BrandLogo } from "./BrandLogo-CoKBk4MI.js";
|
|
87
89
|
import { AuthLayout } from "./internal/blocks/AuthLayout.js";
|
|
88
90
|
import { PageLayout } from "./PageLayout-DSVM-ASz.js";
|
|
89
91
|
import { PageHeader } from "./PageHeader-Q3IpCnQd.js";
|
|
90
92
|
import { PageToolbar } from "./PageToolbar-BKVJiDAL.js";
|
|
91
|
-
import { SectionNav } from "./SectionNav-
|
|
93
|
+
import { SectionNav } from "./SectionNav-CNLJsiVG.js";
|
|
92
94
|
import { ResizableHandle, ResizablePanel, ResizablePanelGroup, useDefaultLayout } from "./Resizable-D3vYToZH.js";
|
|
93
|
-
import { Sidebar, SidebarProvider, useOptionalSidebar, useSidebar } from "./Sidebar-
|
|
95
|
+
import { Sidebar, SidebarProvider, useOptionalSidebar, useSidebar } from "./Sidebar-CLEbBtNY.js";
|
|
94
96
|
import { useScrollbarPosition } from "./internal/hooks/useScrollbarPosition.js";
|
|
95
97
|
import { Navbar } from "./Navbar-Liy1TPI7.js";
|
|
96
98
|
import { DEFAULT_WORKBENCH_BAR_HEIGHT_IN_REM, DEFAULT_WORKBENCH_PANEL_HEIGHT_IN_PX, MIN_WORKBENCH_PANEL_HEIGHT_IN_PX, Workbench, useWorkbench } from "./Workbench-UR2FBC7I.js";
|
|
97
|
-
import { Breadcrumb } from "./Breadcrumb-
|
|
99
|
+
import { Breadcrumb } from "./Breadcrumb-xqEUxfwn.js";
|
|
98
100
|
import { Tabs, TabsContent } from "./Tabs-eB974xJf.js";
|
|
99
101
|
import { Stepper } from "./Stepper-C8sm9ZFM.js";
|
|
100
|
-
import { Timeline } from "./Timeline-
|
|
102
|
+
import { Timeline } from "./Timeline-C8-wnRRr.js";
|
|
101
103
|
import { Avatar } from "./internal/components/Avatar.js";
|
|
102
104
|
import { MarkedText } from "./MarkedText-DNGEUVWc.js";
|
|
103
|
-
import { Kbd, kbdVariants, keys } from "./Kbd-
|
|
105
|
+
import { Kbd, kbdVariants, keys } from "./Kbd-LCFMumoq.js";
|
|
104
106
|
import { Pagination } from "./Pagination-C_b7Xhey.js";
|
|
105
107
|
import { DiffType, DiffView, computeDiffRows, computeLineInformation } from "./DiffView-ppTIzh2h.js";
|
|
106
108
|
import { PaneHeader } from "./internal/components/MergeEditor/PaneHeader.js";
|
|
@@ -109,9 +111,9 @@ import { useMergeDiff } from "./useMergeDiff-CvowEXJ1.js";
|
|
|
109
111
|
import { DashboardHero } from "./internal/blocks/DashboardHero.js";
|
|
110
112
|
import { StatCard, StatCardGrid } from "./internal/blocks/StatCard.js";
|
|
111
113
|
import { ChartPanel } from "./internal/blocks/ChartPanel.js";
|
|
112
|
-
import { setServerFieldErrors, setSubmitError, useAppForm, withForm } from "./Form-
|
|
114
|
+
import { setServerFieldErrors, setSubmitError, useAppForm, withForm } from "./Form-CcK7dRrC.js";
|
|
113
115
|
import { useAutosizeInput } from "./internal/hooks/useAutosizeInput.js";
|
|
114
|
-
import { ZoomableSvg, svgToPngBlob, toSvgFileContent } from "./ZoomableSvg-
|
|
115
|
-
import { BrandEditor, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, channelsToHex, contrastRatio, hexToChannels, wcagLevel } from "./BrandEditor-
|
|
116
|
+
import { ZoomableSvg, svgToPngBlob, toSvgFileContent } from "./ZoomableSvg-BZlk3PFJ.js";
|
|
117
|
+
import { BrandEditor, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, channelsToHex, contrastRatio, hexToChannels, wcagLevel } from "./BrandEditor-BsTBM3s6.js";
|
|
116
118
|
import { Slot } from "@radix-ui/react-slot";
|
|
117
|
-
export { Alert, AlertModal, AnswerActions, AnswerSummary, AppShell, ArgoDesignContext, AuthLayout, AutoSaveTextarea, Avatar, Badge, BrandEditor, BrandLogo, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, Card, ChartPanel, Checkbox, Clipboard, ClipboardButton, ClipboardInline, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, ColorModeSwitch, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, CopyField, DEFAULT_COLOR_SCHEME, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, DEFAULT_BRAND_ID as DEFAULT_KEBOOLA_BRAND_ID, DEFAULT_WORKBENCH_BAR_HEIGHT_IN_REM, DEFAULT_WORKBENCH_PANEL_HEIGHT_IN_PX, DIAGRAM_LANGUAGES, DashboardHero, DateInput, DatePicker, DateRangeInput, DateRangePicker, DiagramSkeleton, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, ExportMenu, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, GoogleButton, HelpBlock, HoverCard, InlineStepDetail, InlineStepLabel, InputGroup, Kbd, Label, Link, MIN_WORKBENCH_PANEL_HEIGHT_IN_PX, Markdown, MarkdownTable, MarkedText, MessageBubble, MicrosoftButton, Modal, MultiActionButtonGroup, MultiCombobox, MultiComboboxField, Navbar, NumberInput, OtpInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, SectionNav, Select, Separator, Sheet, Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, Slot, SplitButton, SpotlightBackdrop, StatCard, StatCardGrid, Stepper, SuggestedPrompt, Switch, Table, Tabs, TabsContent, TextInput, Textarea, ThemeProvider, ThemeScope, ThinkingIndicator, TimeInput, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, Tooltip, TooltipProvider, Truncated, UsageStats, UsageStatsRing, Workbench, ZoomableSvg, appShellSlotSelector, argoVariants, brandSchema, channelsToHex, clampPercentage, cn, computeDiffRows, computeLineInformation, contrastRatio, copyToClipboard, defaultFilter, exampleCustomer, filterByWords, findLiteralMatches, formatPercentage, hasLiteralMatch, hexToChannels, isMac, kbdVariants, keboola, keboolaLegacySidebar, keboolaLegacyTopnav, keys, matchByWords, mergeRefs, namedLabel, setServerFieldErrors, setSubmitError, svgToPngBlob, tableAriaSort, toSvgFileContent, toast, useAppForm, useArgoDesign, useAutosizeInput, useCommandState, useDefaultLayout, useFileDropTarget, useFileUploadRejections, useMergeDiff, useNotification, useOptionalSidebar, useScrollbarPosition, useSidebar, useStableCallback, useTargetRect, useTheme, useThemeScopeContainer, useWorkbench, wcagLevel, withBlankValues, withForm };
|
|
119
|
+
export { Alert, AlertModal, AnswerActions, AnswerSummary, AppShell, ArgoDesignContext, AuthLayout, AutoSaveTextarea, Avatar, Badge, BrandEditor, BrandLogo, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, Card, ChartPanel, ChatInlineIcon, Checkbox, ChipEditor, Clipboard, ClipboardButton, ClipboardInline, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, ColorModeSwitch, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, CopyField, DEFAULT_COLOR_SCHEME, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, DEFAULT_BRAND_ID as DEFAULT_KEBOOLA_BRAND_ID, DEFAULT_WORKBENCH_BAR_HEIGHT_IN_REM, DEFAULT_WORKBENCH_PANEL_HEIGHT_IN_PX, DIAGRAM_LANGUAGES, DashboardHero, DateInput, DatePicker, DateRangeInput, DateRangePicker, DiagramSkeleton, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, ExportMenu, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, GoogleButton, HINT_UNDERLINE_CLASS_NAME, HelpBlock, HoverCard, InlineStepDetail, InlineStepGroup, InlineStepLabel, InputGroup, Kbd, Label, Link, MIN_WORKBENCH_PANEL_HEIGHT_IN_PX, Markdown, MarkdownTable, MarkedText, MessageBubble, MicrosoftButton, Modal, MultiActionButtonGroup, MultiCombobox, MultiComboboxField, Navbar, NumberInput, OtpInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, SectionNav, Select, Separator, Sheet, Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, Slot, SplitButton, SpotlightBackdrop, StatCard, StatCardGrid, StatusDot, Stepper, SuggestedPrompt, Switch, Table, Tabs, TabsContent, TextInput, Textarea, ThemeProvider, ThemeScope, ThinkingIndicator, TimeInput, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, Tooltip, TooltipProvider, Truncated, UsageBar, UsageStats, UsageStatsRing, Workbench, ZoomableSvg, appShellSlotSelector, argoVariants, brandSchema, channelsToHex, clampPercentage, cn, computeDiffRows, computeLineInformation, contrastRatio, copyToClipboard, defaultFilter, exampleCustomer, filterByWords, findLiteralMatches, formatPercentage, getChatInlineIconName, hasLiteralMatch, hexToChannels, isMac, kbdVariants, keboola, keboolaLegacySidebar, keboolaLegacyTopnav, keys, matchByWords, mergeRefs, namedLabel, setServerFieldErrors, setSubmitError, statusDotVariants, svgToPngBlob, tableAriaSort, toSvgFileContent, toast, useAppForm, useArgoDesign, useAutosizeInput, useCommandState, useDefaultLayout, useFileDropTarget, useFileUploadRejections, useMergeDiff, useNotification, useOptionalSidebar, useScrollbarPosition, useSidebar, useStableCallback, useTargetRect, useTheme, useThemeScopeContainer, useWorkbench, wcagLevel, withBlankValues, withForm };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { AnswerActions, AnswerSummary, CollapsibleStepHeader, DIAGRAM_LANGUAGES, InlineStepDetail, InlineStepLabel, Markdown, MarkdownTable, MessageBubble, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageStats, UsageStatsRing, clampPercentage, formatPercentage } from "../../AIKit-
|
|
2
|
-
export { AnswerActions, AnswerSummary, CollapsibleStepHeader, DIAGRAM_LANGUAGES, InlineStepDetail, InlineStepLabel, Markdown, MarkdownTable, MessageBubble, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageStats, UsageStatsRing, clampPercentage, formatPercentage };
|
|
1
|
+
import { AnswerActions, AnswerSummary, ChatInlineIcon, CollapsibleStepHeader, DIAGRAM_LANGUAGES, InlineStepDetail, InlineStepGroup, InlineStepLabel, Markdown, MarkdownTable, MessageBubble, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageBar, UsageStats, UsageStatsRing, clampPercentage, formatPercentage, getChatInlineIconName } from "../../AIKit-ELIsegJz.js";
|
|
2
|
+
export { AnswerActions, AnswerSummary, ChatInlineIcon, CollapsibleStepHeader, DIAGRAM_LANGUAGES, InlineStepDetail, InlineStepGroup, InlineStepLabel, Markdown, MarkdownTable, MessageBubble, PlanApproval, PlanRewritingIndicator, PromptInput, Question, QuestionBlock, SuggestedPrompt, ThinkingIndicator, ToolCallApproval, ToolCallChip, ToolCallStatusHeader, UsageBar, UsageStats, UsageStatsRing, clampPercentage, formatPercentage, getChatInlineIconName };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { BrandEditor, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, channelsToHex, contrastRatio, hexToChannels, wcagLevel } from "../../BrandEditor-
|
|
1
|
+
import { BrandEditor, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, channelsToHex, contrastRatio, hexToChannels, wcagLevel } from "../../BrandEditor-BsTBM3s6.js";
|
|
2
2
|
export { BrandEditor, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, channelsToHex, contrastRatio, hexToChannels, wcagLevel };
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import { splitEntry } from "../../utils-BW4AE8VP.js";
|
|
2
|
+
import { useArgoDesign } from "../../context-D7X470dy.js";
|
|
3
|
+
import { mergeRefs } from "../utils/mergeRefs.js";
|
|
4
|
+
import { X } from "../../icons-Cek151jC.js";
|
|
5
|
+
import { InputGroup } from "../../InputGroup-Do8K2hvD.js";
|
|
6
|
+
import { useControllableState } from "../../useControllableState-M6494mCT.js";
|
|
7
|
+
import { Badge } from "../../Badge-o5jURtpB.js";
|
|
8
|
+
import { useRef, useState } from "react";
|
|
9
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
|
+
//#region src/blocks/ChipEditor/ChipEditor.tsx
|
|
11
|
+
const defaultRemoveLabel = (value) => `Remove ${value}`;
|
|
12
|
+
const sameValue = (a, b) => a.toLowerCase() === b.toLowerCase();
|
|
13
|
+
/**
|
|
14
|
+
* Free-text token editor — type a value, press Enter, it becomes a removable chip.
|
|
15
|
+
*
|
|
16
|
+
* **When to use:** a list of strings the user writes rather than picks — tags, feature flags,
|
|
17
|
+
* column names, permitted email domains. It is the one chip editor on the platform, so an app
|
|
18
|
+
* never rebuilds the input-plus-chips row itself.
|
|
19
|
+
* **When NOT to use:** when the values come from a known list use `MultiCombobox` (with
|
|
20
|
+
* `allowCreate` when the list is open-ended) — a searchable popup beats blind typing. A list the
|
|
21
|
+
* user cannot edit is a row of plain `Badge`s.
|
|
22
|
+
* **Composition:** wrap in a `FormGroup` for a label and error state, or pass `state="error"` /
|
|
23
|
+
* `aria-invalid` directly. Values are compared case-insensitively, so one already held is never
|
|
24
|
+
* added twice.
|
|
25
|
+
*/
|
|
26
|
+
const ChipEditor = ({ ref: forwardedRef, value: valueProp, defaultValue, onValueChange, separator = ",", canAdd, chipColor, removeLabel = defaultRemoveLabel, testId, state = "default", sizing = "default", variant, focusVariant = "default", className, disabled = false, readOnly = false, onChange, onBlur, onKeyDown, ...inputProps }) => {
|
|
27
|
+
const renderArgo = useArgoDesign();
|
|
28
|
+
const inputRef = useRef(null);
|
|
29
|
+
const [query, setQuery] = useState("");
|
|
30
|
+
const [values, setValues] = useControllableState({
|
|
31
|
+
prop: valueProp,
|
|
32
|
+
defaultProp: defaultValue ?? [],
|
|
33
|
+
onChange: onValueChange
|
|
34
|
+
});
|
|
35
|
+
const isEditable = !disabled && !readOnly;
|
|
36
|
+
/**
|
|
37
|
+
* Turns typed text into chips, and answers whether the text is spent.
|
|
38
|
+
*
|
|
39
|
+
* - The split runs first, so one entry can add several values.
|
|
40
|
+
* - A value already held adds nothing, but the text is still spent — the user's intent is
|
|
41
|
+
* satisfied by the chip that is already there.
|
|
42
|
+
* - A value `canAdd` rejects is the one case the text survives: the field still shows what the
|
|
43
|
+
* user has to fix.
|
|
44
|
+
*/
|
|
45
|
+
const commit = (entry) => {
|
|
46
|
+
const parts = splitEntry(entry, separator).map((part) => part.trim()).filter((part) => part !== "");
|
|
47
|
+
const accepted = parts.filter((part) => canAdd?.(part) ?? true);
|
|
48
|
+
const added = accepted.filter((part, index) => !values.some((held) => sameValue(held, part)) && accepted.findIndex((other) => sameValue(other, part)) === index);
|
|
49
|
+
if (added.length > 0) setValues([...values, ...added]);
|
|
50
|
+
return { isSpent: accepted.length === parts.length };
|
|
51
|
+
};
|
|
52
|
+
const commitAndClear = (entry) => {
|
|
53
|
+
if (commit(entry).isSpent) setQuery("");
|
|
54
|
+
};
|
|
55
|
+
const handleChange = (event) => {
|
|
56
|
+
onChange?.(event);
|
|
57
|
+
const next = event.target.value;
|
|
58
|
+
if (typeof separator === "string" && next.includes(separator)) {
|
|
59
|
+
const cut = next.lastIndexOf(separator);
|
|
60
|
+
commit(next.slice(0, cut));
|
|
61
|
+
setQuery(next.slice(cut + separator.length));
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
setQuery(next);
|
|
65
|
+
};
|
|
66
|
+
const handleKeyDown = (event) => {
|
|
67
|
+
onKeyDown?.(event);
|
|
68
|
+
if (event.defaultPrevented) return;
|
|
69
|
+
if (event.key === "Enter") {
|
|
70
|
+
event.preventDefault();
|
|
71
|
+
commitAndClear(query);
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
if (event.key === "Backspace" && query === "" && values.length > 0) {
|
|
75
|
+
setValues(values.slice(0, -1));
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
if (event.key === "Escape" && query !== "") {
|
|
79
|
+
event.preventDefault();
|
|
80
|
+
event.stopPropagation();
|
|
81
|
+
setQuery("");
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
const handleBlur = (event) => {
|
|
85
|
+
onBlur?.(event);
|
|
86
|
+
commitAndClear(query);
|
|
87
|
+
};
|
|
88
|
+
const removeAt = (index) => {
|
|
89
|
+
setValues(values.filter((_, position) => position !== index));
|
|
90
|
+
inputRef.current?.focus();
|
|
91
|
+
};
|
|
92
|
+
return /* @__PURE__ */ jsxs(InputGroup, {
|
|
93
|
+
state,
|
|
94
|
+
variant,
|
|
95
|
+
sizing,
|
|
96
|
+
focusVariant,
|
|
97
|
+
className,
|
|
98
|
+
"data-testid": testId,
|
|
99
|
+
children: [/* @__PURE__ */ jsx(InputGroup.Addon, {
|
|
100
|
+
align: "block-start",
|
|
101
|
+
className: "tw:flex-wrap",
|
|
102
|
+
role: "list",
|
|
103
|
+
children: values.map((value, index) => /* @__PURE__ */ jsxs(Badge.Root, {
|
|
104
|
+
role: "listitem",
|
|
105
|
+
color: chipColor,
|
|
106
|
+
variant: renderArgo ? "pill" : "default",
|
|
107
|
+
className: "tw:max-w-40",
|
|
108
|
+
children: [/* @__PURE__ */ jsx(Badge.Label, {
|
|
109
|
+
title: value,
|
|
110
|
+
children: value
|
|
111
|
+
}), isEditable && /* @__PURE__ */ jsx(Badge.Addon, {
|
|
112
|
+
variant: "inline",
|
|
113
|
+
align: "inline-end",
|
|
114
|
+
children: /* @__PURE__ */ jsx(Badge.Button, {
|
|
115
|
+
"aria-label": removeLabel(value),
|
|
116
|
+
onClick: () => removeAt(index),
|
|
117
|
+
children: /* @__PURE__ */ jsx(X, { className: "tw:size-3" })
|
|
118
|
+
})
|
|
119
|
+
})]
|
|
120
|
+
}, value))
|
|
121
|
+
}), /* @__PURE__ */ jsx(InputGroup.Input, {
|
|
122
|
+
...inputProps,
|
|
123
|
+
ref: mergeRefs(forwardedRef ?? null, inputRef),
|
|
124
|
+
type: "text",
|
|
125
|
+
value: query,
|
|
126
|
+
disabled,
|
|
127
|
+
readOnly,
|
|
128
|
+
onChange: handleChange,
|
|
129
|
+
onKeyDown: handleKeyDown,
|
|
130
|
+
onBlur: handleBlur
|
|
131
|
+
})]
|
|
132
|
+
});
|
|
133
|
+
};
|
|
134
|
+
//#endregion
|
|
135
|
+
export { ChipEditor };
|
|
136
|
+
|
|
137
|
+
//# sourceMappingURL=ChipEditor.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChipEditor.js","names":[],"sources":["../../../src/blocks/ChipEditor/ChipEditor.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport type { ChangeEvent, ComponentProps, ComponentRef, FocusEvent, KeyboardEvent } from 'react';\n\nimport { Badge } from '../../components/Badge';\nimport { InputGroup } from '../../components/InputGroup';\nimport { useArgoDesign } from '../../components/ThemeProvider/context';\nimport { useControllableState } from '../../hooks/useControllableState';\nimport { X } from '../../icons';\nimport { DEFAULT_ENTRY_SEPARATOR, mergeRefs, splitEntry } from '../../utils';\n\ntype InputGroupProps = Pick<\n ComponentProps<typeof InputGroup>,\n 'variant' | 'focusVariant' | 'sizing' | 'state'\n>;\n\ntype BadgeColor = ComponentProps<typeof Badge>['color'];\n\ntype OwnProps = {\n value?: string[];\n defaultValue?: string[];\n /** Called with the whole next list whenever a value is added or removed. */\n onValueChange?: (value: string[]) => void;\n /**\n * Splits one committed entry into several values — the same split as `MultiCombobox`'s\n * `createSeparator`, so a pasted list becomes one chip per value rather than a chip literally\n * named `id1, id2, id3`. `null` for a value that can itself contain the separator.\n */\n separator?: string | RegExp | null;\n /**\n * Gates each value, after the split and before it becomes a chip.\n *\n * - Reach for it when the value has a **format** the user must get right — an identifier, an\n * email, a domain.\n * - A pasted list keeps the values that pass and drops the rest, so one bad value never costs\n * the good ones.\n */\n canAdd?: (value: string) => boolean;\n /** The chip colour. Decorative — it categorises values, it does not encode their state. */\n chipColor?: BadgeColor;\n /** Names each remove button for a screen reader. */\n removeLabel?: (value: string) => string;\n testId?: string;\n};\n\nexport type Props = InputGroupProps &\n OwnProps &\n Omit<ComponentProps<'input'>, 'value' | 'defaultValue' | 'type' | 'prefix'>;\n\nconst defaultRemoveLabel = (value: string) => `Remove ${value}`;\n\nconst sameValue = (a: string, b: string) => a.toLowerCase() === b.toLowerCase();\n\n/**\n * Free-text token editor — type a value, press Enter, it becomes a removable chip.\n *\n * **When to use:** a list of strings the user writes rather than picks — tags, feature flags,\n * column names, permitted email domains. It is the one chip editor on the platform, so an app\n * never rebuilds the input-plus-chips row itself.\n * **When NOT to use:** when the values come from a known list use `MultiCombobox` (with\n * `allowCreate` when the list is open-ended) — a searchable popup beats blind typing. A list the\n * user cannot edit is a row of plain `Badge`s.\n * **Composition:** wrap in a `FormGroup` for a label and error state, or pass `state=\"error\"` /\n * `aria-invalid` directly. Values are compared case-insensitively, so one already held is never\n * added twice.\n */\nexport const ChipEditor = ({\n ref: forwardedRef,\n value: valueProp,\n defaultValue,\n onValueChange,\n separator = DEFAULT_ENTRY_SEPARATOR,\n canAdd,\n chipColor,\n removeLabel = defaultRemoveLabel,\n testId,\n state = 'default',\n sizing = 'default',\n variant,\n focusVariant = 'default',\n className,\n disabled = false,\n readOnly = false,\n onChange,\n onBlur,\n onKeyDown,\n ...inputProps\n}: Props) => {\n const renderArgo = useArgoDesign();\n const inputRef = useRef<ComponentRef<'input'>>(null);\n const [query, setQuery] = useState('');\n\n const [values, setValues] = useControllableState<string[]>({\n prop: valueProp,\n defaultProp: defaultValue ?? [],\n onChange: onValueChange,\n });\n\n const isEditable = !disabled && !readOnly;\n\n /**\n * Turns typed text into chips, and answers whether the text is spent.\n *\n * - The split runs first, so one entry can add several values.\n * - A value already held adds nothing, but the text is still spent — the user's intent is\n * satisfied by the chip that is already there.\n * - A value `canAdd` rejects is the one case the text survives: the field still shows what the\n * user has to fix.\n */\n const commit = (entry: string): { isSpent: boolean } => {\n const parts = splitEntry(entry, separator)\n .map((part) => part.trim())\n .filter((part) => part !== '');\n\n const accepted = parts.filter((part) => canAdd?.(part) ?? true);\n const added = accepted.filter(\n (part, index) =>\n !values.some((held) => sameValue(held, part)) &&\n accepted.findIndex((other) => sameValue(other, part)) === index,\n );\n\n if (added.length > 0) setValues([...values, ...added]);\n\n return { isSpent: accepted.length === parts.length };\n };\n\n const commitAndClear = (entry: string) => {\n if (commit(entry).isSpent) setQuery('');\n };\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n onChange?.(event);\n const next = event.target.value;\n\n // Typing (or pasting) the separator ends a value on the spot. Everything up to the last one\n // commits; the fragment after it stays in the field, because the user may still be typing it.\n // A `RegExp` separator has no character to look for, so only a string one does this.\n if (typeof separator === 'string' && next.includes(separator)) {\n const cut = next.lastIndexOf(separator);\n commit(next.slice(0, cut));\n setQuery(next.slice(cut + separator.length));\n return;\n }\n\n setQuery(next);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n if (event.defaultPrevented) return;\n\n if (event.key === 'Enter') {\n // Always prevented: Enter in a field that takes several values means \"add this one\", never\n // \"submit the form it happens to sit in\".\n event.preventDefault();\n commitAndClear(query);\n return;\n }\n\n if (event.key === 'Backspace' && query === '' && values.length > 0) {\n setValues(values.slice(0, -1));\n return;\n }\n\n if (event.key === 'Escape' && query !== '') {\n // Only while there is text to discard — an empty field lets Escape reach whatever overlay\n // the editor sits in.\n event.preventDefault();\n event.stopPropagation();\n setQuery('');\n }\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n onBlur?.(event);\n // A value typed and then clicked away from is a value the user meant to add — dropping it\n // silently is what every hand-rolled chip row got wrong.\n commitAndClear(query);\n };\n\n const removeAt = (index: number) => {\n setValues(values.filter((_, position) => position !== index));\n inputRef.current?.focus();\n };\n\n return (\n <InputGroup\n state={state}\n variant={variant}\n sizing={sizing}\n focusVariant={focusVariant}\n className={className}\n data-testid={testId}\n >\n <InputGroup.Addon align=\"block-start\" className=\"tw:flex-wrap\" role=\"list\">\n {values.map((value, index) => (\n <Badge.Root\n key={value}\n role=\"listitem\"\n color={chipColor}\n variant={renderArgo ? 'pill' : 'default'}\n className=\"tw:max-w-40\"\n >\n {/* Same cap and the same `title` as a `MultiCombobox` chip — the two chip rows are the\n same object to a user, so they truncate at the same width. */}\n <Badge.Label title={value}>{value}</Badge.Label>\n {isEditable && (\n <Badge.Addon variant=\"inline\" align=\"inline-end\">\n <Badge.Button aria-label={removeLabel(value)} onClick={() => removeAt(index)}>\n <X className=\"tw:size-3\" />\n </Badge.Button>\n </Badge.Addon>\n )}\n </Badge.Root>\n ))}\n </InputGroup.Addon>\n\n <InputGroup.Input\n {...inputProps}\n ref={mergeRefs(forwardedRef ?? null, inputRef)}\n type=\"text\"\n value={query}\n disabled={disabled}\n readOnly={readOnly}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n />\n </InputGroup>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { ClipboardButton, ClipboardInline } from "../../ClipboardButton-
|
|
1
|
+
import { ClipboardButton, ClipboardInline } from "../../ClipboardButton-KHQnPEh_.js";
|
|
2
2
|
export { ClipboardButton, ClipboardInline };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { ColorInput } from "../../ColorInput-
|
|
1
|
+
import { ColorInput } from "../../ColorInput-Bj3dfPFA.js";
|
|
2
2
|
export { ColorInput };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { ColorModeSwitch } from "../../ColorModeSwitch-
|
|
1
|
+
import { ColorModeSwitch } from "../../ColorModeSwitch-CWt-DZGC.js";
|
|
2
2
|
export { ColorModeSwitch };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { Command, CommandGroup, CommandInput, CommandItem, CommandList, defaultFilter, useCommandState } from "../../Command-
|
|
1
|
+
import { Command, CommandGroup, CommandInput, CommandItem, CommandList, defaultFilter, useCommandState } from "../../Command-BDU3C1gg.js";
|
|
2
2
|
export { Command, CommandGroup, CommandInput, CommandItem, CommandList, defaultFilter, useCommandState };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { CopyField } from "../../CopyField-
|
|
1
|
+
import { CopyField } from "../../CopyField-BHRQUyuF.js";
|
|
2
2
|
export { CopyField };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { DateInput } from "../../DateInput-
|
|
1
|
+
import { DateInput } from "../../DateInput-B6N8g0ra.js";
|
|
2
2
|
export { DateInput };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { DateRangeInput } from "../../DateRangeInput-
|
|
1
|
+
import { DateRangeInput } from "../../DateRangeInput-7M9Z4cVO.js";
|
|
2
2
|
export { DateRangeInput };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { Tooltip } from "../../utils-
|
|
1
|
+
import { Tooltip } from "../../utils-BW4AE8VP.js";
|
|
2
2
|
import { Download } from "../../icons-Cek151jC.js";
|
|
3
3
|
import { Button } from "../../Button-DsRrU5F1.js";
|
|
4
|
-
import { DropdownMenu } from "../../DropdownMenu-
|
|
4
|
+
import { DropdownMenu } from "../../DropdownMenu-CgVwhDvl.js";
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
//#region src/blocks/ExportMenu/ExportMenu.tsx
|
|
7
7
|
/**
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { MultiCombobox } from "../../MultiCombobox.js";
|
|
2
|
-
import { FieldItem, useFieldContext } from "../../../../FieldItem-
|
|
2
|
+
import { FieldItem, useFieldContext } from "../../../../FieldItem-DZGIdiXE.js";
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
//#region src/blocks/Form/connectors/MultiComboboxField.tsx
|
|
5
5
|
/**
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { setServerFieldErrors, setSubmitError, useAppForm, withForm } from "../../Form-
|
|
1
|
+
import { setServerFieldErrors, setSubmitError, useAppForm, withForm } from "../../Form-CcK7dRrC.js";
|
|
2
2
|
export { setServerFieldErrors, setSubmitError, useAppForm, withForm };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { FormGroup } from "../../FormGroup-
|
|
1
|
+
import { FormGroup } from "../../FormGroup-DR_gZ25-.js";
|
|
2
2
|
export { FormGroup };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { MultiActionButtonGroup } from "../../MultiActionButtonGroup-
|
|
1
|
+
import { MultiActionButtonGroup } from "../../MultiActionButtonGroup-CYZ8IgSf.js";
|
|
2
2
|
export { MultiActionButtonGroup };
|
|
@@ -1,36 +1,17 @@
|
|
|
1
|
+
import { splitEntry } from "../../utils-BW4AE8VP.js";
|
|
1
2
|
import { useArgoDesign } from "../../context-D7X470dy.js";
|
|
2
3
|
import { ChevronDown, Plus, X } from "../../icons-Cek151jC.js";
|
|
3
|
-
import { InputGroup } from "../../InputGroup-
|
|
4
|
-
import { Combobox as Combobox$1, createCreatableItem, defaultGroupToLabel, defaultItemToDisabled, defaultItemToIcon, defaultItemToLabel, defaultQueryToCreateLabel, defaultToCreateValue, isCreatableItem, isGroupItem, isGroupItems, isSelectAllItem, namedLabel, sanitizeTypedInput, selectAllItem, toItemEquality, toLabel, useQueryReporter } from "../../Combobox-
|
|
4
|
+
import { InputGroup } from "../../InputGroup-Do8K2hvD.js";
|
|
5
|
+
import { Combobox as Combobox$1, createCreatableItem, defaultGroupToLabel, defaultItemToDisabled, defaultItemToIcon, defaultItemToLabel, defaultQueryToCreateLabel, defaultToCreateValue, isCreatableItem, isGroupItem, isGroupItems, isSelectAllItem, namedLabel, sanitizeTypedInput, selectAllItem, toItemEquality, toLabel, useQueryReporter } from "../../Combobox-D8PrEqTG.js";
|
|
5
6
|
import { Fragment, useMemo, useState } from "react";
|
|
6
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
8
|
import { Combobox } from "@base-ui/react/combobox";
|
|
8
9
|
//#region src/blocks/MultiCombobox/MultiCombobox.tsx
|
|
9
10
|
/**
|
|
10
|
-
* The strings one creatable entry stands for.
|
|
11
|
-
*
|
|
12
|
-
* - `id1, id2,` is two values: the blanks a stray separator leaves are dropped.
|
|
13
|
-
* - A repeat collapses to its first occurrence, case-insensitively, as everything the control
|
|
14
|
-
* matches by display string does — one entry cannot add the same value twice.
|
|
15
|
-
* - A `null` separator yields the entry itself.
|
|
16
|
-
*/
|
|
17
|
-
const DEFAULT_CREATE_SEPARATOR = ",";
|
|
18
|
-
/**
|
|
19
11
|
* How the create row lists the values it adds: each separated by the entry's own separator, then
|
|
20
12
|
* a space. A `RegExp` stands for many strings, so the default separator stands in for it.
|
|
21
13
|
*/
|
|
22
|
-
const joinCreateParts = (parts, separator) => parts.join(`${typeof separator === "string" ? separator :
|
|
23
|
-
const splitCreateEntry = (entry, separator) => {
|
|
24
|
-
if (separator === null) return [entry];
|
|
25
|
-
const seen = /* @__PURE__ */ new Set();
|
|
26
|
-
return entry.split(separator).map((part) => part.trim()).filter((part) => {
|
|
27
|
-
if (part === "") return false;
|
|
28
|
-
const key = part.toLowerCase();
|
|
29
|
-
if (seen.has(key)) return false;
|
|
30
|
-
seen.add(key);
|
|
31
|
-
return true;
|
|
32
|
-
});
|
|
33
|
-
};
|
|
14
|
+
const joinCreateParts = (parts, separator) => parts.join(`${typeof separator === "string" ? separator : ","} `);
|
|
34
15
|
/**
|
|
35
16
|
* Multi-selection combobox with chip display and search. Built on Base UI Combobox.
|
|
36
17
|
*
|
|
@@ -45,10 +26,20 @@ const splitCreateEntry = (entry, separator) => {
|
|
|
45
26
|
* @see RECIPES.md#creatable-multi-combobox — for free-form-plus-enumerated patterns
|
|
46
27
|
* @see RECIPES.md#filter-toolbar — for combining multi-select with other filter chips
|
|
47
28
|
*/
|
|
48
|
-
const MultiCombobox = ({ items: _itemsProp, value: _valueProp, defaultValue, onValueChange, itemToStringLabel, itemToStringValue, disabled, filter: filterProp, isItemEqualToValue: isItemEqualToValueProp, inputRef, variant, sizing, focusVariant, state, placeholder, allowClear = true, id, name, onBlur, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, className, allowSelectAll = false, empty = "No items", indicator, inputValueSanitizer, onQueryChange, allowCreate, canCreate, queryToCreateValue, queryToCreateLabel = defaultQueryToCreateLabel, createSeparator =
|
|
29
|
+
const MultiCombobox = ({ items: _itemsProp, value: _valueProp, defaultValue, onValueChange, itemToStringLabel, itemToStringValue, disabled, filter: filterProp, isItemEqualToValue: isItemEqualToValueProp, inputRef, variant, sizing, focusVariant, state, placeholder, allowClear = true, id, name, onBlur, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, className, allowSelectAll = false, empty = "No items", indicator, inputValueSanitizer, onQueryChange, allowCreate, canCreate, queryToCreateValue, queryToCreateLabel = defaultQueryToCreateLabel, createSeparator = ",", itemToDisabled = defaultItemToDisabled, itemToLabel: itemToLabelProp, itemToIcon = defaultItemToIcon, groupToLabel = defaultGroupToLabel, itemToChipLabel, itemToChipColor, pinnedChipLabels, renderChips, maxVisible = 3 }) => {
|
|
49
30
|
const itemsProp = _itemsProp ?? [];
|
|
50
31
|
const valueProp = _valueProp ?? [];
|
|
51
|
-
const
|
|
32
|
+
const itemToString = (item) => itemToStringLabel?.(item) ?? toLabel(item);
|
|
33
|
+
/**
|
|
34
|
+
* The node a row or a chip shows for an item.
|
|
35
|
+
*
|
|
36
|
+
* - `itemToStringLabel` is a projection, not a display accessor, so a blank it returns still
|
|
37
|
+
* needs naming — rows and chips are where a blank value would otherwise render as nothing.
|
|
38
|
+
* - It reads through `itemToString`, so an item the projection has no answer for falls back to
|
|
39
|
+
* the item's own string: Base UI reports the outgoing selection for the render after `items`
|
|
40
|
+
* and `itemToStringLabel` change together.
|
|
41
|
+
*/
|
|
42
|
+
const itemToLabel = itemToLabelProp ?? (itemToStringLabel ? (item) => namedLabel(itemToString(item)) : defaultItemToLabel);
|
|
52
43
|
const chipVariant = useArgoDesign() ? "pill" : "default";
|
|
53
44
|
const [inputValue, setInputValue] = useState("");
|
|
54
45
|
const [createdItems, setCreatedItems] = useState([]);
|
|
@@ -69,9 +60,8 @@ const MultiCombobox = ({ items: _itemsProp, value: _valueProp, defaultValue, onV
|
|
|
69
60
|
value: valueProp
|
|
70
61
|
});
|
|
71
62
|
const itemsWithSelectAllItem = hasSelectAllRow ? [selectAllItem, ...baseItems] : baseItems;
|
|
72
|
-
const itemToString = (item) => itemToStringLabel?.(item) ?? toLabel(item);
|
|
73
63
|
const labelKey = (item) => itemToString(item).toLowerCase();
|
|
74
|
-
const createParts = !allowCreate || disabled || !query ? [] :
|
|
64
|
+
const createParts = !allowCreate || disabled || !query ? [] : splitEntry(query, createSeparator);
|
|
75
65
|
const selectedKeys = /* @__PURE__ */ new Set();
|
|
76
66
|
if (createParts.length > 0) for (const item of valueProp) selectedKeys.add(labelKey(item));
|
|
77
67
|
const itemKeys = /* @__PURE__ */ new Set();
|
|
@@ -107,7 +97,7 @@ const MultiCombobox = ({ items: _itemsProp, value: _valueProp, defaultValue, onV
|
|
|
107
97
|
return defaultFilter.contains(item, query, itemToString);
|
|
108
98
|
};
|
|
109
99
|
const isItemEqualToValue = useMemo(() => toItemEquality(isItemEqualToValueProp), [isItemEqualToValueProp]);
|
|
110
|
-
const wrappedItemToStringLabel = !allowCreate ? itemToStringLabel : (item) => isCreatableItem(item) ? item.value : itemToString(item);
|
|
100
|
+
const wrappedItemToStringLabel = !allowCreate ? itemToStringLabel && itemToString : (item) => isCreatableItem(item) ? item.value : itemToString(item);
|
|
111
101
|
const wrappedItemToStringValue = !allowCreate || !itemToStringValue ? itemToStringValue : (item) => isCreatableItem(item) ? item.value : itemToStringValue(item);
|
|
112
102
|
const value = isAllSelected ? [...valueProp, selectAllItem] : valueProp;
|
|
113
103
|
const handleInputValueChange = (next, { reason }) => {
|