@bitrise/bitkit-v2 0.3.267-beta.1792 → 0.3.268
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 +2 -15
- package/dist/components/BitkitDialog/BitkitDialog.d.ts +16 -3
- package/dist/components/BitkitDialog/BitkitDialog.js +46 -23
- package/dist/components/BitkitDialog/BitkitDialog.js.map +1 -1
- package/dist/components/BitkitDialog/BitkitDialogBody.d.ts +9 -0
- package/dist/components/BitkitDialog/{DialogBodyContext.js → BitkitDialogBody.js} +12 -11
- package/dist/components/BitkitDialog/BitkitDialogBody.js.map +1 -0
- package/dist/components/BitkitDialog/BitkitDialogButtons.d.ts +4 -0
- package/dist/components/BitkitDialog/BitkitDialogButtons.js +17 -0
- package/dist/components/BitkitDialog/BitkitDialogButtons.js.map +1 -0
- package/dist/components/BitkitDialog/BitkitDialogContent.d.ts +27 -0
- package/dist/components/BitkitDialog/BitkitDialogContent.js +57 -0
- package/dist/components/BitkitDialog/BitkitDialogContent.js.map +1 -0
- package/dist/components/BitkitDialog/BitkitDialogFormContent.d.ts +6 -0
- package/dist/components/BitkitDialog/BitkitDialogFormContent.js +30 -0
- package/dist/components/BitkitDialog/BitkitDialogFormContent.js.map +1 -0
- package/dist/components/BitkitDialog/BitkitDialogHeader.d.ts +9 -0
- package/dist/components/BitkitDialog/BitkitDialogHeader.js +8 -0
- package/dist/components/BitkitDialog/BitkitDialogHeader.js.map +1 -0
- package/dist/components/BitkitDialog/BitkitDialogRoot.d.ts +6 -0
- package/dist/components/BitkitDialog/BitkitDialogRoot.js +12 -0
- package/dist/components/BitkitDialog/BitkitDialogRoot.js.map +1 -0
- package/dist/components/BitkitDialog/BitkitDialogStep.d.ts +11 -0
- package/dist/components/BitkitDialog/{BitkitStepperDialogStep.js → BitkitDialogStep.js} +9 -9
- package/dist/components/BitkitDialog/BitkitDialogStep.js.map +1 -0
- package/dist/components/BitkitDialog/BitkitDialogStepContext.d.ts +5 -0
- package/dist/components/BitkitDialog/BitkitDialogStepContext.js +7 -0
- package/dist/components/BitkitDialog/BitkitDialogStepContext.js.map +1 -0
- package/dist/components/BitkitOverflowContent/BitkitOverflowContent.js +2 -1
- package/dist/components/BitkitOverflowContent/BitkitOverflowContent.js.map +1 -1
- package/dist/components/index.d.ts +7 -3
- package/dist/main.js +9 -5
- package/dist/theme/slot-recipes/Dialog.recipe.d.ts +2 -16
- package/dist/theme/slot-recipes/Dialog.recipe.js +1 -13
- package/dist/theme/slot-recipes/Dialog.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/MarkdownCard.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/index.d.ts +3 -17
- package/package.json +1 -1
- package/dist/components/BitkitDialog/BitkitFormDialog.d.ts +0 -9
- package/dist/components/BitkitDialog/BitkitFormDialog.js +0 -53
- package/dist/components/BitkitDialog/BitkitFormDialog.js.map +0 -1
- package/dist/components/BitkitDialog/BitkitStepperDialog.d.ts +0 -46
- package/dist/components/BitkitDialog/BitkitStepperDialog.js +0 -91
- package/dist/components/BitkitDialog/BitkitStepperDialog.js.map +0 -1
- package/dist/components/BitkitDialog/BitkitStepperDialogStep.d.ts +0 -20
- package/dist/components/BitkitDialog/BitkitStepperDialogStep.js.map +0 -1
- package/dist/components/BitkitDialog/DialogBodyContext.d.ts +0 -12
- package/dist/components/BitkitDialog/DialogBodyContext.js.map +0 -1
- package/dist/components/BitkitDialog/DialogInner.d.ts +0 -25
- package/dist/components/BitkitDialog/DialogInner.js +0 -66
- package/dist/components/BitkitDialog/DialogInner.js.map +0 -1
- package/dist/components/BitkitDialog/DialogShell.d.ts +0 -24
- package/dist/components/BitkitDialog/DialogShell.js +0 -32
- package/dist/components/BitkitDialog/DialogShell.js.map +0 -1
- package/dist/components/BitkitDialog/StepperContext.d.ts +0 -16
- package/dist/components/BitkitDialog/StepperContext.js +0 -11
- package/dist/components/BitkitDialog/StepperContext.js.map +0 -1
package/dist/main.js
CHANGED
|
@@ -309,11 +309,14 @@ import BitkitField from "./components/BitkitField/BitkitField.js";
|
|
|
309
309
|
import BitkitCombobox_default from "./components/BitkitCombobox/BitkitCombobox.js";
|
|
310
310
|
import BitkitDataWidget from "./components/BitkitDataWidget/BitkitDataWidget.js";
|
|
311
311
|
import BitkitDefinitionTooltip from "./components/BitkitDefinitionTooltip/BitkitDefinitionTooltip.js";
|
|
312
|
+
import BitkitDialogStep from "./components/BitkitDialog/BitkitDialogStep.js";
|
|
313
|
+
import BitkitDialogBody from "./components/BitkitDialog/BitkitDialogBody.js";
|
|
314
|
+
import BitkitDialogButtons from "./components/BitkitDialog/BitkitDialogButtons.js";
|
|
315
|
+
import BitkitDialogContent from "./components/BitkitDialog/BitkitDialogContent.js";
|
|
316
|
+
import BitkitDialogFormContent from "./components/BitkitDialog/BitkitDialogFormContent.js";
|
|
317
|
+
import BitkitDialogHeader from "./components/BitkitDialog/BitkitDialogHeader.js";
|
|
318
|
+
import BitkitDialogRoot from "./components/BitkitDialog/BitkitDialogRoot.js";
|
|
312
319
|
import BitkitDialog_default from "./components/BitkitDialog/BitkitDialog.js";
|
|
313
|
-
import BitkitFormDialog_default from "./components/BitkitDialog/BitkitFormDialog.js";
|
|
314
|
-
import BitkitSteps_default from "./components/BitkitSteps/BitkitSteps.js";
|
|
315
|
-
import { useStepperDialog } from "./components/BitkitDialog/StepperContext.js";
|
|
316
|
-
import BitkitStepperDialog_default from "./components/BitkitDialog/BitkitStepperDialog.js";
|
|
317
320
|
import BitkitDraggableCard from "./components/BitkitDraggableCard/BitkitDraggableCard.js";
|
|
318
321
|
import BitkitDrawer from "./components/BitkitDrawer/BitkitDrawer.js";
|
|
319
322
|
import BitkitEmptyState from "./components/BitkitEmptyState/BitkitEmptyState.js";
|
|
@@ -352,6 +355,7 @@ import BitkitSidebar_default from "./components/BitkitSidebar/BitkitSidebar.js";
|
|
|
352
355
|
import BitkitSpinner from "./components/BitkitSpinner/BitkitSpinner.js";
|
|
353
356
|
import BitkitSplitButton_default from "./components/BitkitSplitButton/BitkitSplitButton.js";
|
|
354
357
|
import BitkitStat from "./components/BitkitStat/BitkitStat.js";
|
|
358
|
+
import BitkitSteps_default from "./components/BitkitSteps/BitkitSteps.js";
|
|
355
359
|
import BitkitStepsCard_default from "./components/BitkitStepsCard/BitkitStepsCard.js";
|
|
356
360
|
import BitkitSwitch from "./components/BitkitSwitch/BitkitSwitch.js";
|
|
357
361
|
import BitkitExpandableRow from "./components/BitkitTable/BitkitExpandableRow.js";
|
|
@@ -366,4 +370,4 @@ import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeVie
|
|
|
366
370
|
import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.js";
|
|
367
371
|
import bitkitTheme from "./theme/index.js";
|
|
368
372
|
import Provider from "./providers/BitkitProvider.js";
|
|
369
|
-
export { BitkitAccordion, BitkitActionBar, BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput,
|
|
373
|
+
export { BitkitAccordion, BitkitActionBar, BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDialogBody, BitkitDialogButtons, BitkitDialogContent, BitkitDialogFormContent, BitkitDialogHeader, BitkitDialogRoot, BitkitDialogStep, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitGroupHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, rem, useResponsive };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const dialogSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "label" | "title" | "trigger" | "positioner" | "closeTrigger" | "description" | "
|
|
1
|
+
declare const dialogSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "label" | "title" | "trigger" | "positioner" | "closeTrigger" | "description" | "stepTitleGroup" | "stepTitle" | "stepDescription" | "scrollBody" | "scrollGradient" | "scrollButton" | "stepHeader" | "backdrop", {
|
|
2
2
|
scrollBehavior: {
|
|
3
3
|
inside: {
|
|
4
4
|
body: {
|
|
@@ -12,21 +12,7 @@ declare const dialogSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
|
|
|
12
12
|
overflow: "hidden";
|
|
13
13
|
};
|
|
14
14
|
};
|
|
15
|
-
outside: {
|
|
16
|
-
positioner: {
|
|
17
|
-
overflow: "auto";
|
|
18
|
-
paddingBlock: {
|
|
19
|
-
base: number;
|
|
20
|
-
tablet: "10vh";
|
|
21
|
-
};
|
|
22
|
-
};
|
|
23
|
-
content: {
|
|
24
|
-
marginBlock: {
|
|
25
|
-
base: number;
|
|
26
|
-
tablet: "auto";
|
|
27
|
-
};
|
|
28
|
-
};
|
|
29
|
-
};
|
|
15
|
+
outside: {};
|
|
30
16
|
};
|
|
31
17
|
size: {
|
|
32
18
|
full: {
|
|
@@ -161,19 +161,7 @@ var dialogSlotRecipe = defineSlotRecipe({
|
|
|
161
161
|
overflow: "hidden"
|
|
162
162
|
}
|
|
163
163
|
},
|
|
164
|
-
outside: {
|
|
165
|
-
positioner: {
|
|
166
|
-
overflow: "auto",
|
|
167
|
-
paddingBlock: {
|
|
168
|
-
base: 0,
|
|
169
|
-
tablet: "10vh"
|
|
170
|
-
}
|
|
171
|
-
},
|
|
172
|
-
content: { marginBlock: {
|
|
173
|
-
base: 0,
|
|
174
|
-
tablet: "auto"
|
|
175
|
-
} }
|
|
176
|
-
}
|
|
164
|
+
outside: {}
|
|
177
165
|
},
|
|
178
166
|
size: {
|
|
179
167
|
full: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Dialog.recipe.ts"],"sourcesContent":["import { dialogAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst dialogSlotRecipe = defineSlotRecipe({\n className: 'dialog',\n slots: [\n ...dialogAnatomy.keys(),\n 'label',\n 'scrollBody',\n 'scrollButton',\n 'scrollGradient',\n 'stepDescription',\n 'stepHeader',\n 'stepTitle',\n 'stepTitleGroup',\n ] as const,\n base: {\n backdrop: {\n background: 'utilities/overlay',\n position: 'fixed',\n inset: 0,\n zIndex: 'dialogOverlay',\n _open: {\n animationStyle: 'fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationStyle: 'fade-out',\n animationDuration: 'moderate',\n },\n },\n positioner: {\n alignItems: { base: 'flex-start', tablet: 'center' },\n display: 'flex',\n height: '100dvh',\n justifyContent: 'center',\n left: 0,\n position: 'fixed',\n top: 0,\n width: '100dvw',\n zIndex: 'dialog',\n },\n content: {\n background: 'background/primary',\n borderRadius: { base: 0, tablet: '8' },\n boxShadow: 'elevation/lg',\n display: 'flex',\n flexDirection: 'column',\n outline: 'none',\n position: 'relative',\n _open: {\n animationStyle: 'scale-fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationStyle: 'scale-fade-out',\n animationDuration: 'faster',\n },\n },\n header: {\n display: 'flex',\n flexDirection: 'column',\n gap: '48',\n paddingBlock: '24',\n paddingInline: '32',\n position: 'relative',\n },\n title: {\n color: 'text/primary',\n paddingInlineEnd: '48',\n textStyle: 'comp/dialog/title',\n },\n description: {\n color: 'text/body',\n textStyle: 'body/lg/regular',\n },\n label: {\n color: 'text/secondary',\n textStyle: 'comp/dialog/label',\n },\n body: {\n display: 'flex',\n flex: '1',\n flexDirection: 'column',\n gap: '24',\n paddingInline: '32',\n _last: {\n paddingBlockEnd: '48',\n },\n },\n scrollBody: {\n display: 'flex',\n flexDirection: 'column',\n minHeight: 0,\n position: 'relative',\n _last: {\n paddingBlockEnd: '48',\n },\n },\n footer: {\n paddingBlockEnd: '32',\n paddingBlockStart: '24',\n paddingInline: '32',\n },\n closeTrigger: {\n insetEnd: '24',\n position: 'absolute',\n top: '24',\n },\n scrollButton: {\n alignItems: 'center',\n alignSelf: 'center',\n background: 'background/primary',\n borderColor: 'border/minimal',\n borderRadius: '100%',\n borderWidth: '1',\n bottom: '16',\n boxShadow: 'elevation/lg',\n cursor: 'pointer',\n display: 'flex',\n height: '32',\n justifyContent: 'center',\n position: 'absolute',\n width: '32',\n },\n stepDescription: {\n color: 'text/secondary',\n textStyle: 'body/md/regular',\n },\n stepHeader: {\n overflowY: 'auto',\n },\n stepTitle: {\n color: 'text/primary',\n textStyle: 'heading/h3',\n },\n stepTitleGroup: {\n display: 'flex',\n flexDirection: 'column',\n gap: '4',\n },\n scrollGradient: {\n background: 'linear-gradient(0deg, {colors.neutral.100} 0%, transparent 100%)',\n bottom: 48,\n height: '32',\n pointerEvents: 'none',\n position: 'absolute',\n width: '100%',\n },\n },\n variants: {\n scrollBehavior: {\n inside: {\n body: {\n overflowY: 'auto',\n _last: {\n paddingBlockEnd: 0, // override base _last: scrollBody slot handles padding instead\n },\n },\n content: {\n maxHeight: 'calc(100dvh - 96px)',\n overflow: 'hidden',\n },\n },\n outside: {
|
|
1
|
+
{"version":3,"file":"Dialog.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Dialog.recipe.ts"],"sourcesContent":["import { dialogAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst dialogSlotRecipe = defineSlotRecipe({\n className: 'dialog',\n slots: [\n ...dialogAnatomy.keys(),\n 'label',\n 'scrollBody',\n 'scrollButton',\n 'scrollGradient',\n 'stepDescription',\n 'stepHeader',\n 'stepTitle',\n 'stepTitleGroup',\n ] as const,\n base: {\n backdrop: {\n background: 'utilities/overlay',\n position: 'fixed',\n inset: 0,\n zIndex: 'dialogOverlay',\n _open: {\n animationStyle: 'fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationStyle: 'fade-out',\n animationDuration: 'moderate',\n },\n },\n positioner: {\n alignItems: { base: 'flex-start', tablet: 'center' },\n display: 'flex',\n height: '100dvh',\n justifyContent: 'center',\n left: 0,\n position: 'fixed',\n top: 0,\n width: '100dvw',\n zIndex: 'dialog',\n },\n content: {\n background: 'background/primary',\n borderRadius: { base: 0, tablet: '8' },\n boxShadow: 'elevation/lg',\n display: 'flex',\n flexDirection: 'column',\n outline: 'none',\n position: 'relative',\n _open: {\n animationStyle: 'scale-fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationStyle: 'scale-fade-out',\n animationDuration: 'faster',\n },\n },\n header: {\n display: 'flex',\n flexDirection: 'column',\n gap: '48',\n paddingBlock: '24',\n paddingInline: '32',\n position: 'relative',\n },\n title: {\n color: 'text/primary',\n paddingInlineEnd: '48',\n textStyle: 'comp/dialog/title',\n },\n description: {\n color: 'text/body',\n textStyle: 'body/lg/regular',\n },\n label: {\n color: 'text/secondary',\n textStyle: 'comp/dialog/label',\n },\n body: {\n display: 'flex',\n flex: '1',\n flexDirection: 'column',\n gap: '24',\n paddingInline: '32',\n _last: {\n paddingBlockEnd: '48',\n },\n },\n scrollBody: {\n display: 'flex',\n flexDirection: 'column',\n minHeight: 0,\n position: 'relative',\n _last: {\n paddingBlockEnd: '48',\n },\n },\n footer: {\n paddingBlockEnd: '32',\n paddingBlockStart: '24',\n paddingInline: '32',\n },\n closeTrigger: {\n insetEnd: '24',\n position: 'absolute',\n top: '24',\n },\n scrollButton: {\n alignItems: 'center',\n alignSelf: 'center',\n background: 'background/primary',\n borderColor: 'border/minimal',\n borderRadius: '100%',\n borderWidth: '1',\n bottom: '16',\n boxShadow: 'elevation/lg',\n cursor: 'pointer',\n display: 'flex',\n height: '32',\n justifyContent: 'center',\n position: 'absolute',\n width: '32',\n },\n stepDescription: {\n color: 'text/secondary',\n textStyle: 'body/md/regular',\n },\n stepHeader: {\n overflowY: 'auto',\n },\n stepTitle: {\n color: 'text/primary',\n textStyle: 'heading/h3',\n },\n stepTitleGroup: {\n display: 'flex',\n flexDirection: 'column',\n gap: '4',\n },\n scrollGradient: {\n background: 'linear-gradient(0deg, {colors.neutral.100} 0%, transparent 100%)',\n bottom: 48,\n height: '32',\n pointerEvents: 'none',\n position: 'absolute',\n width: '100%',\n },\n },\n variants: {\n scrollBehavior: {\n inside: {\n body: {\n overflowY: 'auto',\n _last: {\n paddingBlockEnd: 0, // override base _last: scrollBody slot handles padding instead\n },\n },\n content: {\n maxHeight: 'calc(100dvh - 96px)',\n overflow: 'hidden',\n },\n },\n outside: {},\n },\n size: {\n full: {\n body: {\n minHeight: 0,\n overflowY: 'auto',\n },\n content: {\n borderRadius: '8',\n height: '100%',\n maxHeight: '100%',\n maxWidth: '100%',\n overflow: 'hidden',\n width: '100%',\n },\n positioner: {\n padding: '32',\n },\n },\n lg: {\n content: {\n width: { base: '100%', tablet: rem(800) },\n },\n },\n md: {\n content: {\n width: { base: '100%', tablet: rem(640) },\n },\n },\n sm: {\n content: {\n width: { base: '100%', tablet: rem(480) },\n },\n },\n },\n variant: {\n overflowContent: {\n content: {\n maxHeight: 'calc(100dvh - 48px)',\n overflow: 'hidden',\n },\n header: {\n gap: '8',\n paddingBlockEnd: '8',\n paddingBlockStart: '16',\n paddingInline: '16',\n },\n title: {\n paddingInlineEnd: '32',\n textStyle: 'heading/h4',\n },\n body: {\n overflowY: 'auto',\n paddingBlockEnd: '8',\n paddingInline: '16',\n _last: {\n paddingBlockEnd: 0,\n },\n },\n scrollBody: {\n _last: {\n paddingBlockEnd: '16',\n },\n },\n footer: {\n paddingBlockEnd: '16',\n paddingBlockStart: 0,\n paddingInline: '16',\n },\n closeTrigger: {\n insetEnd: '12',\n top: '12',\n },\n scrollGradient: {\n bottom: '16',\n },\n scrollButton: {\n bottom: '8',\n },\n },\n },\n },\n defaultVariants: {\n scrollBehavior: 'outside',\n size: 'md',\n },\n});\n\nexport default dialogSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,mBAAmB,iBAAiB;CACxC,WAAW;CACX,OAAO;EACL,GAAG,cAAc,KAAK;EACtB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ,UAAU;GACR,YAAY;GACZ,UAAU;GACV,OAAO;GACP,QAAQ;GACR,OAAO;IACL,gBAAgB;IAChB,mBAAmB;GACrB;GACA,SAAS;IACP,gBAAgB;IAChB,mBAAmB;GACrB;EACF;EACA,YAAY;GACV,YAAY;IAAE,MAAM;IAAc,QAAQ;GAAS;GACnD,SAAS;GACT,QAAQ;GACR,gBAAgB;GAChB,MAAM;GACN,UAAU;GACV,KAAK;GACL,OAAO;GACP,QAAQ;EACV;EACA,SAAS;GACP,YAAY;GACZ,cAAc;IAAE,MAAM;IAAG,QAAQ;GAAI;GACrC,WAAW;GACX,SAAS;GACT,eAAe;GACf,SAAS;GACT,UAAU;GACV,OAAO;IACL,gBAAgB;IAChB,mBAAmB;GACrB;GACA,SAAS;IACP,gBAAgB;IAChB,mBAAmB;GACrB;EACF;EACA,QAAQ;GACN,SAAS;GACT,eAAe;GACf,KAAK;GACL,cAAc;GACd,eAAe;GACf,UAAU;EACZ;EACA,OAAO;GACL,OAAO;GACP,kBAAkB;GAClB,WAAW;EACb;EACA,aAAa;GACX,OAAO;GACP,WAAW;EACb;EACA,OAAO;GACL,OAAO;GACP,WAAW;EACb;EACA,MAAM;GACJ,SAAS;GACT,MAAM;GACN,eAAe;GACf,KAAK;GACL,eAAe;GACf,OAAO,EACL,iBAAiB,KACnB;EACF;EACA,YAAY;GACV,SAAS;GACT,eAAe;GACf,WAAW;GACX,UAAU;GACV,OAAO,EACL,iBAAiB,KACnB;EACF;EACA,QAAQ;GACN,iBAAiB;GACjB,mBAAmB;GACnB,eAAe;EACjB;EACA,cAAc;GACZ,UAAU;GACV,UAAU;GACV,KAAK;EACP;EACA,cAAc;GACZ,YAAY;GACZ,WAAW;GACX,YAAY;GACZ,aAAa;GACb,cAAc;GACd,aAAa;GACb,QAAQ;GACR,WAAW;GACX,QAAQ;GACR,SAAS;GACT,QAAQ;GACR,gBAAgB;GAChB,UAAU;GACV,OAAO;EACT;EACA,iBAAiB;GACf,OAAO;GACP,WAAW;EACb;EACA,YAAY,EACV,WAAW,OACb;EACA,WAAW;GACT,OAAO;GACP,WAAW;EACb;EACA,gBAAgB;GACd,SAAS;GACT,eAAe;GACf,KAAK;EACP;EACA,gBAAgB;GACd,YAAY;GACZ,QAAQ;GACR,QAAQ;GACR,eAAe;GACf,UAAU;GACV,OAAO;EACT;CACF;CACA,UAAU;EACR,gBAAgB;GACd,QAAQ;IACN,MAAM;KACJ,WAAW;KACX,OAAO,EACL,iBAAiB,EACnB;IACF;IACA,SAAS;KACP,WAAW;KACX,UAAU;IACZ;GACF;GACA,SAAS,CAAC;EACZ;EACA,MAAM;GACJ,MAAM;IACJ,MAAM;KACJ,WAAW;KACX,WAAW;IACb;IACA,SAAS;KACP,cAAc;KACd,QAAQ;KACR,WAAW;KACX,UAAU;KACV,UAAU;KACV,OAAO;IACT;IACA,YAAY,EACV,SAAS,KACX;GACF;GACA,IAAI,EACF,SAAS,EACP,OAAO;IAAE,MAAM;IAAQ,QAAQ,IAAI,GAAG;GAAE,EAC1C,EACF;GACA,IAAI,EACF,SAAS,EACP,OAAO;IAAE,MAAM;IAAQ,QAAQ,IAAI,GAAG;GAAE,EAC1C,EACF;GACA,IAAI,EACF,SAAS,EACP,OAAO;IAAE,MAAM;IAAQ,QAAQ,IAAI,GAAG;GAAE,EAC1C,EACF;EACF;EACA,SAAS,EACP,iBAAiB;GACf,SAAS;IACP,WAAW;IACX,UAAU;GACZ;GACA,QAAQ;IACN,KAAK;IACL,iBAAiB;IACjB,mBAAmB;IACnB,eAAe;GACjB;GACA,OAAO;IACL,kBAAkB;IAClB,WAAW;GACb;GACA,MAAM;IACJ,WAAW;IACX,iBAAiB;IACjB,eAAe;IACf,OAAO,EACL,iBAAiB,EACnB;GACF;GACA,YAAY,EACV,OAAO,EACL,iBAAiB,KACnB,EACF;GACA,QAAQ;IACN,iBAAiB;IACjB,mBAAmB;IACnB,eAAe;GACjB;GACA,cAAc;IACZ,UAAU;IACV,KAAK;GACP;GACA,gBAAgB,EACd,QAAQ,KACV;GACA,cAAc,EACZ,QAAQ,IACV;EACF,EACF;CACF;CACA,iBAAiB;EACf,gBAAgB;EAChB,MAAM;CACR;AACF,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const markdownCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "root" | "description" | "
|
|
1
|
+
declare const markdownCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "root" | "description" | "iconBar" | "gradient" | "footerButtons", {
|
|
2
2
|
status: {
|
|
3
3
|
info: {
|
|
4
4
|
iconBar: {
|
|
@@ -674,7 +674,7 @@ declare const slotRecipes: {
|
|
|
674
674
|
};
|
|
675
675
|
};
|
|
676
676
|
}>;
|
|
677
|
-
dialog: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "label" | "title" | "trigger" | "positioner" | "closeTrigger" | "description" | "
|
|
677
|
+
dialog: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "label" | "title" | "trigger" | "positioner" | "closeTrigger" | "description" | "stepTitleGroup" | "stepTitle" | "stepDescription" | "scrollBody" | "scrollGradient" | "scrollButton" | "stepHeader" | "backdrop", {
|
|
678
678
|
scrollBehavior: {
|
|
679
679
|
inside: {
|
|
680
680
|
body: {
|
|
@@ -688,21 +688,7 @@ declare const slotRecipes: {
|
|
|
688
688
|
overflow: "hidden";
|
|
689
689
|
};
|
|
690
690
|
};
|
|
691
|
-
outside: {
|
|
692
|
-
positioner: {
|
|
693
|
-
overflow: "auto";
|
|
694
|
-
paddingBlock: {
|
|
695
|
-
base: number;
|
|
696
|
-
tablet: "10vh";
|
|
697
|
-
};
|
|
698
|
-
};
|
|
699
|
-
content: {
|
|
700
|
-
marginBlock: {
|
|
701
|
-
base: number;
|
|
702
|
-
tablet: "auto";
|
|
703
|
-
};
|
|
704
|
-
};
|
|
705
|
-
};
|
|
691
|
+
outside: {};
|
|
706
692
|
};
|
|
707
693
|
size: {
|
|
708
694
|
full: {
|
|
@@ -1061,7 +1047,7 @@ declare const slotRecipes: {
|
|
|
1061
1047
|
};
|
|
1062
1048
|
};
|
|
1063
1049
|
}>;
|
|
1064
|
-
markdownCard: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "root" | "description" | "
|
|
1050
|
+
markdownCard: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "root" | "description" | "iconBar" | "gradient" | "footerButtons", {
|
|
1065
1051
|
status: {
|
|
1066
1052
|
info: {
|
|
1067
1053
|
iconBar: {
|
package/package.json
CHANGED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { Dialog } from '@chakra-ui/react/dialog';
|
|
2
|
-
import { ComponentPropsWithoutRef } from 'react';
|
|
3
|
-
import { BitkitDialogProps } from './BitkitDialog';
|
|
4
|
-
export interface BitkitFormDialogProps extends BitkitDialogProps, Omit<ComponentPropsWithoutRef<'form'>, keyof BitkitDialogProps> {
|
|
5
|
-
}
|
|
6
|
-
declare const _default: import('react').ForwardRefExoticComponent<BitkitFormDialogProps & import('react').RefAttributes<HTMLFormElement>> & {
|
|
7
|
-
ActionTrigger: import('react').ForwardRefExoticComponent<Dialog.ActionTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
8
|
-
};
|
|
9
|
-
export default _default;
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import { withSubComponents } from "../../utilities/withSubComponents.js";
|
|
2
|
-
import DialogInner from "./DialogInner.js";
|
|
3
|
-
import DialogShell from "./DialogShell.js";
|
|
4
|
-
import { chakra } from "@chakra-ui/react/styled-system";
|
|
5
|
-
import { forwardRef } from "react";
|
|
6
|
-
import { jsx } from "react/jsx-runtime";
|
|
7
|
-
import { Dialog } from "@chakra-ui/react/dialog";
|
|
8
|
-
//#region lib/components/BitkitDialog/BitkitFormDialog.tsx
|
|
9
|
-
/**
|
|
10
|
-
* A dialog whose entire content is a `<form>`, so a `type="submit"` button in the footer submits
|
|
11
|
-
* natively. Exposes native form attributes (`onSubmit`, `method`, `noValidate`, …) alongside the
|
|
12
|
-
* standard dialog props. Like the other dialog overlays it owns its own layout — it intentionally
|
|
13
|
-
* does NOT accept Chakra style props (`width`, `padding`, …), which would override the `size` variant.
|
|
14
|
-
*/
|
|
15
|
-
var BitkitFormDialog = forwardRef((props, ref) => {
|
|
16
|
-
const { children, closable = true, footerButtons, footerContent, headerLabel, maxHeight, onExitComplete, onOpenChange, open, preventScroll, scrollBehavior, showScrollGradient, size, title, trigger, variant, ...formProps } = props;
|
|
17
|
-
return /* @__PURE__ */ jsx(DialogShell, {
|
|
18
|
-
closable,
|
|
19
|
-
onExitComplete,
|
|
20
|
-
onOpenChange,
|
|
21
|
-
open,
|
|
22
|
-
preventScroll,
|
|
23
|
-
scrollBehavior,
|
|
24
|
-
size,
|
|
25
|
-
trigger,
|
|
26
|
-
variant,
|
|
27
|
-
children: /* @__PURE__ */ jsx(Dialog.Content, {
|
|
28
|
-
asChild: true,
|
|
29
|
-
maxHeight,
|
|
30
|
-
children: /* @__PURE__ */ jsx(chakra.form, {
|
|
31
|
-
ref,
|
|
32
|
-
...formProps,
|
|
33
|
-
children: /* @__PURE__ */ jsx(DialogInner, {
|
|
34
|
-
closable,
|
|
35
|
-
footerButtons,
|
|
36
|
-
footerContent,
|
|
37
|
-
headerLabel,
|
|
38
|
-
scrollBehavior,
|
|
39
|
-
showScrollGradient,
|
|
40
|
-
title,
|
|
41
|
-
variant,
|
|
42
|
-
children
|
|
43
|
-
})
|
|
44
|
-
})
|
|
45
|
-
})
|
|
46
|
-
});
|
|
47
|
-
});
|
|
48
|
-
BitkitFormDialog.displayName = "BitkitFormDialog";
|
|
49
|
-
var BitkitFormDialog_default = withSubComponents(BitkitFormDialog, { ActionTrigger: Dialog.ActionTrigger });
|
|
50
|
-
//#endregion
|
|
51
|
-
export { BitkitFormDialog_default as default };
|
|
52
|
-
|
|
53
|
-
//# sourceMappingURL=BitkitFormDialog.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitFormDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitFormDialog.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type ComponentPropsWithoutRef, forwardRef } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { type BitkitDialogProps } from './BitkitDialog';\nimport DialogInner from './DialogInner';\nimport DialogShell from './DialogShell';\n\nexport interface BitkitFormDialogProps\n extends BitkitDialogProps, Omit<ComponentPropsWithoutRef<'form'>, keyof BitkitDialogProps> {}\n\n/**\n * A dialog whose entire content is a `<form>`, so a `type=\"submit\"` button in the footer submits\n * natively. Exposes native form attributes (`onSubmit`, `method`, `noValidate`, …) alongside the\n * standard dialog props. Like the other dialog overlays it owns its own layout — it intentionally\n * does NOT accept Chakra style props (`width`, `padding`, …), which would override the `size` variant.\n */\nconst BitkitFormDialog = forwardRef<HTMLFormElement, BitkitFormDialogProps>((props, ref) => {\n const {\n children,\n closable = true,\n footerButtons,\n footerContent,\n headerLabel,\n maxHeight,\n onExitComplete,\n onOpenChange,\n open,\n preventScroll,\n scrollBehavior,\n showScrollGradient,\n size,\n title,\n trigger,\n variant,\n ...formProps\n } = props;\n\n return (\n <DialogShell\n closable={closable}\n onExitComplete={onExitComplete}\n onOpenChange={onOpenChange}\n open={open}\n preventScroll={preventScroll}\n scrollBehavior={scrollBehavior}\n size={size}\n trigger={trigger}\n variant={variant}\n >\n <Dialog.Content asChild maxHeight={maxHeight}>\n <chakra.form ref={ref} {...formProps}>\n <DialogInner\n closable={closable}\n footerButtons={footerButtons}\n footerContent={footerContent}\n headerLabel={headerLabel}\n scrollBehavior={scrollBehavior}\n showScrollGradient={showScrollGradient}\n title={title}\n variant={variant}\n >\n {children}\n </DialogInner>\n </chakra.form>\n </Dialog.Content>\n </DialogShell>\n );\n});\n\nBitkitFormDialog.displayName = 'BitkitFormDialog';\n\nexport default withSubComponents(BitkitFormDialog, { ActionTrigger: Dialog.ActionTrigger });\n"],"mappings":";;;;;;;;;;;;;;AAkBA,IAAM,mBAAmB,YAAoD,OAAO,QAAQ;CAC1F,MAAM,EACJ,UACA,WAAW,MACX,eACA,eACA,aACA,WACA,gBACA,cACA,MACA,eACA,gBACA,oBACA,MACA,OACA,SACA,SACA,GAAG,cACD;CAEJ,OACE,oBAAC,aAAD;EACY;EACM;EACF;EACR;EACS;EACC;EACV;EACG;EACA;YAET,oBAAC,OAAO,SAAR;GAAgB,SAAA;GAAmB;aACjC,oBAAC,OAAO,MAAR;IAAkB;IAAK,GAAI;cACzB,oBAAC,aAAD;KACY;KACK;KACA;KACF;KACG;KACI;KACb;KACE;KAER;IACU,CAAA;GACF,CAAA;EACC,CAAA;CACL,CAAA;AAEjB,CAAC;AAED,iBAAiB,cAAc;AAE/B,IAAA,2BAAe,kBAAkB,kBAAkB,EAAE,eAAe,OAAO,cAAc,CAAC"}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { Dialog } from '@chakra-ui/react/dialog';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
3
|
-
import { BitkitStepperDialogStepProps } from './BitkitStepperDialogStep';
|
|
4
|
-
export { useStepperDialog } from './StepperContext';
|
|
5
|
-
export interface BitkitStepperDialogProps {
|
|
6
|
-
/** `BitkitStepperDialog.Step` children, one per step. */
|
|
7
|
-
children: ReactNode;
|
|
8
|
-
closable?: boolean;
|
|
9
|
-
/** Initial step when uncontrolled. Resets to this when the dialog closes. */
|
|
10
|
-
defaultStep?: number;
|
|
11
|
-
/**
|
|
12
|
-
* Footer content rendered raw. Stepper footers are space-between (Cancel left, Prev/Next right),
|
|
13
|
-
* so build the nav row here with `useStepperDialog()` — there is no `footerButtons` slot, which
|
|
14
|
-
* would force right-alignment.
|
|
15
|
-
*/
|
|
16
|
-
footerContent?: ReactNode;
|
|
17
|
-
headerLabel?: string;
|
|
18
|
-
maxHeight?: string;
|
|
19
|
-
onExitComplete?: () => void;
|
|
20
|
-
onOpenChange?: (details: {
|
|
21
|
-
open: boolean;
|
|
22
|
-
}) => void;
|
|
23
|
-
/** Called whenever the active step changes (controlled or uncontrolled). */
|
|
24
|
-
onStepChange?: (step: number) => void;
|
|
25
|
-
open?: boolean;
|
|
26
|
-
preventScroll?: boolean;
|
|
27
|
-
scrollBehavior?: 'inside' | 'outside';
|
|
28
|
-
showScrollGradient?: boolean;
|
|
29
|
-
size?: 'sm' | 'md' | 'lg' | 'full';
|
|
30
|
-
/** Controlled active step. Omit for uncontrolled (see `defaultStep`). */
|
|
31
|
-
step?: number;
|
|
32
|
-
title: ReactNode;
|
|
33
|
-
trigger?: ReactNode;
|
|
34
|
-
variant?: 'overflowContent';
|
|
35
|
-
}
|
|
36
|
-
declare const _default: {
|
|
37
|
-
({ children, closable, defaultStep, footerContent, headerLabel, maxHeight, onExitComplete, onOpenChange, onStepChange, open, preventScroll, scrollBehavior, showScrollGradient, size, step: stepProp, title, trigger, variant, }: BitkitStepperDialogProps): import("react").JSX.Element;
|
|
38
|
-
displayName: string;
|
|
39
|
-
} & {
|
|
40
|
-
ActionTrigger: import('react').ForwardRefExoticComponent<Dialog.ActionTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
41
|
-
Step: {
|
|
42
|
-
({ children, description, title }: BitkitStepperDialogStepProps): import("react").JSX.Element;
|
|
43
|
-
displayName: string;
|
|
44
|
-
};
|
|
45
|
-
};
|
|
46
|
-
export default _default;
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import { withSubComponents } from "../../utilities/withSubComponents.js";
|
|
2
|
-
import DialogInner from "./DialogInner.js";
|
|
3
|
-
import DialogShell from "./DialogShell.js";
|
|
4
|
-
import BitkitSteps_default from "../BitkitSteps/BitkitSteps.js";
|
|
5
|
-
import BitkitStepperDialogStep from "./BitkitStepperDialogStep.js";
|
|
6
|
-
import { StepperDialogProvider } from "./StepperContext.js";
|
|
7
|
-
import { Children, isValidElement, useCallback, useMemo, useState } from "react";
|
|
8
|
-
import { jsx } from "react/jsx-runtime";
|
|
9
|
-
import { Dialog } from "@chakra-ui/react/dialog";
|
|
10
|
-
//#region lib/components/BitkitDialog/BitkitStepperDialog.tsx
|
|
11
|
-
/**
|
|
12
|
-
* A dialog that walks through a sequence of `BitkitStepperDialog.Step` children. It owns the step
|
|
13
|
-
* state, auto-renders the steps header, and shows only the active step's body. Footer navigation is
|
|
14
|
-
* wired by the consumer through the `useStepperDialog()` hook.
|
|
15
|
-
*/
|
|
16
|
-
var BitkitStepperDialog = ({ children, closable = true, defaultStep = 0, footerContent, headerLabel, maxHeight, onExitComplete, onOpenChange, onStepChange, open, preventScroll, scrollBehavior, showScrollGradient, size, step: stepProp, title, trigger, variant }) => {
|
|
17
|
-
const [internalStep, setInternalStep] = useState(defaultStep);
|
|
18
|
-
const isControlled = stepProp !== void 0;
|
|
19
|
-
const rawStep = (isControlled ? stepProp : internalStep) ?? 0;
|
|
20
|
-
const steps = Children.toArray(children).filter((child) => isValidElement(child) && child.type === BitkitStepperDialogStep);
|
|
21
|
-
const totalSteps = steps.length;
|
|
22
|
-
const step = Math.max(0, Math.min(rawStep, Math.max(0, totalSteps - 1)));
|
|
23
|
-
const setStep = useCallback((next) => {
|
|
24
|
-
const clamped = Math.max(0, Math.min(next, totalSteps - 1));
|
|
25
|
-
if (!isControlled) setInternalStep(clamped);
|
|
26
|
-
onStepChange?.(clamped);
|
|
27
|
-
}, [
|
|
28
|
-
isControlled,
|
|
29
|
-
onStepChange,
|
|
30
|
-
totalSteps
|
|
31
|
-
]);
|
|
32
|
-
const ctx = useMemo(() => ({
|
|
33
|
-
goTo: setStep,
|
|
34
|
-
isFirst: step === 0,
|
|
35
|
-
isLast: step === totalSteps - 1,
|
|
36
|
-
next: () => setStep(step + 1),
|
|
37
|
-
prev: () => setStep(step - 1),
|
|
38
|
-
setStep,
|
|
39
|
-
step,
|
|
40
|
-
totalSteps
|
|
41
|
-
}), [
|
|
42
|
-
setStep,
|
|
43
|
-
step,
|
|
44
|
-
totalSteps
|
|
45
|
-
]);
|
|
46
|
-
const handleOpenChange = (details) => {
|
|
47
|
-
if (!details.open && !isControlled) setInternalStep(defaultStep);
|
|
48
|
-
onOpenChange?.(details);
|
|
49
|
-
};
|
|
50
|
-
const stepsHeader = /* @__PURE__ */ jsx(BitkitSteps_default, {
|
|
51
|
-
step,
|
|
52
|
-
children: steps.map((child, index) => /* @__PURE__ */ jsx(BitkitSteps_default.Item, { label: child.props.label }, index))
|
|
53
|
-
});
|
|
54
|
-
return /* @__PURE__ */ jsx(StepperDialogProvider, {
|
|
55
|
-
value: ctx,
|
|
56
|
-
children: /* @__PURE__ */ jsx(DialogShell, {
|
|
57
|
-
closable,
|
|
58
|
-
onExitComplete,
|
|
59
|
-
onOpenChange: handleOpenChange,
|
|
60
|
-
open,
|
|
61
|
-
preventScroll,
|
|
62
|
-
scrollBehavior,
|
|
63
|
-
size,
|
|
64
|
-
trigger,
|
|
65
|
-
variant,
|
|
66
|
-
children: /* @__PURE__ */ jsx(Dialog.Content, {
|
|
67
|
-
maxHeight,
|
|
68
|
-
children: /* @__PURE__ */ jsx(DialogInner, {
|
|
69
|
-
closable,
|
|
70
|
-
footerContent,
|
|
71
|
-
headerExtra: stepsHeader,
|
|
72
|
-
headerLabel,
|
|
73
|
-
scrollBehavior,
|
|
74
|
-
showScrollGradient,
|
|
75
|
-
title,
|
|
76
|
-
variant,
|
|
77
|
-
children: steps[step]
|
|
78
|
-
})
|
|
79
|
-
})
|
|
80
|
-
})
|
|
81
|
-
});
|
|
82
|
-
};
|
|
83
|
-
BitkitStepperDialog.displayName = "BitkitStepperDialog";
|
|
84
|
-
var BitkitStepperDialog_default = withSubComponents(BitkitStepperDialog, {
|
|
85
|
-
ActionTrigger: Dialog.ActionTrigger,
|
|
86
|
-
Step: BitkitStepperDialogStep
|
|
87
|
-
});
|
|
88
|
-
//#endregion
|
|
89
|
-
export { BitkitStepperDialog_default as default };
|
|
90
|
-
|
|
91
|
-
//# sourceMappingURL=BitkitStepperDialog.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitStepperDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitStepperDialog.tsx"],"sourcesContent":["import { Dialog } from '@chakra-ui/react/dialog';\nimport { Children, isValidElement, type ReactElement, type ReactNode, useCallback, useMemo, useState } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitSteps from '../BitkitSteps/BitkitSteps';\nimport BitkitStepperDialogStep, { type BitkitStepperDialogStepProps } from './BitkitStepperDialogStep';\nimport DialogInner from './DialogInner';\nimport DialogShell from './DialogShell';\nimport { StepperDialogProvider } from './StepperContext';\n\nexport { useStepperDialog } from './StepperContext';\n\nexport interface BitkitStepperDialogProps {\n /** `BitkitStepperDialog.Step` children, one per step. */\n children: ReactNode;\n closable?: boolean;\n /** Initial step when uncontrolled. Resets to this when the dialog closes. */\n defaultStep?: number;\n /**\n * Footer content rendered raw. Stepper footers are space-between (Cancel left, Prev/Next right),\n * so build the nav row here with `useStepperDialog()` — there is no `footerButtons` slot, which\n * would force right-alignment.\n */\n footerContent?: ReactNode;\n headerLabel?: string;\n maxHeight?: string;\n onExitComplete?: () => void;\n onOpenChange?: (details: { open: boolean }) => void;\n /** Called whenever the active step changes (controlled or uncontrolled). */\n onStepChange?: (step: number) => void;\n open?: boolean;\n preventScroll?: boolean;\n scrollBehavior?: 'inside' | 'outside';\n showScrollGradient?: boolean;\n size?: 'sm' | 'md' | 'lg' | 'full';\n /** Controlled active step. Omit for uncontrolled (see `defaultStep`). */\n step?: number;\n title: ReactNode;\n trigger?: ReactNode;\n variant?: 'overflowContent';\n}\n\n/**\n * A dialog that walks through a sequence of `BitkitStepperDialog.Step` children. It owns the step\n * state, auto-renders the steps header, and shows only the active step's body. Footer navigation is\n * wired by the consumer through the `useStepperDialog()` hook.\n */\nconst BitkitStepperDialog = ({\n children,\n closable = true,\n defaultStep = 0,\n footerContent,\n headerLabel,\n maxHeight,\n onExitComplete,\n onOpenChange,\n onStepChange,\n open,\n preventScroll,\n scrollBehavior,\n showScrollGradient,\n size,\n step: stepProp,\n title,\n trigger,\n variant,\n}: BitkitStepperDialogProps) => {\n const [internalStep, setInternalStep] = useState(defaultStep);\n const isControlled = stepProp !== undefined;\n const rawStep = (isControlled ? stepProp : internalStep) ?? 0;\n const steps = Children.toArray(children).filter(\n (child): child is ReactElement<BitkitStepperDialogStepProps> =>\n isValidElement(child) && child.type === BitkitStepperDialogStep,\n );\n const totalSteps = steps.length;\n const step = Math.max(0, Math.min(rawStep, Math.max(0, totalSteps - 1)));\n\n const setStep = useCallback(\n (next: number) => {\n const clamped = Math.max(0, Math.min(next, totalSteps - 1));\n if (!isControlled) setInternalStep(clamped);\n onStepChange?.(clamped);\n },\n [isControlled, onStepChange, totalSteps],\n );\n\n const ctx = useMemo(\n () => ({\n goTo: setStep,\n isFirst: step === 0,\n isLast: step === totalSteps - 1,\n next: () => setStep(step + 1),\n prev: () => setStep(step - 1),\n setStep,\n step,\n totalSteps,\n }),\n [setStep, step, totalSteps],\n );\n\n const handleOpenChange = (details: { open: boolean }) => {\n if (!details.open && !isControlled) setInternalStep(defaultStep);\n onOpenChange?.(details);\n };\n\n const stepsHeader = (\n <BitkitSteps step={step}>\n {steps.map((child, index) => (\n <BitkitSteps.Item key={index} label={child.props.label} />\n ))}\n </BitkitSteps>\n );\n\n return (\n <StepperDialogProvider value={ctx}>\n <DialogShell\n closable={closable}\n onExitComplete={onExitComplete}\n onOpenChange={handleOpenChange}\n open={open}\n preventScroll={preventScroll}\n scrollBehavior={scrollBehavior}\n size={size}\n trigger={trigger}\n variant={variant}\n >\n <Dialog.Content maxHeight={maxHeight}>\n <DialogInner\n closable={closable}\n footerContent={footerContent}\n headerExtra={stepsHeader}\n headerLabel={headerLabel}\n scrollBehavior={scrollBehavior}\n showScrollGradient={showScrollGradient}\n title={title}\n variant={variant}\n >\n {steps[step]}\n </DialogInner>\n </Dialog.Content>\n </DialogShell>\n </StepperDialogProvider>\n );\n};\n\nBitkitStepperDialog.displayName = 'BitkitStepperDialog';\n\nexport default withSubComponents(BitkitStepperDialog, {\n ActionTrigger: Dialog.ActionTrigger,\n Step: BitkitStepperDialogStep,\n});\n"],"mappings":";;;;;;;;;;;;;;;AA+CA,IAAM,uBAAuB,EAC3B,UACA,WAAW,MACX,cAAc,GACd,eACA,aACA,WACA,gBACA,cACA,cACA,MACA,eACA,gBACA,oBACA,MACA,MAAM,UACN,OACA,SACA,cAC8B;CAC9B,MAAM,CAAC,cAAc,mBAAmB,SAAS,WAAW;CAC5D,MAAM,eAAe,aAAa,KAAA;CAClC,MAAM,WAAW,eAAe,WAAW,iBAAiB;CAC5D,MAAM,QAAQ,SAAS,QAAQ,QAAQ,EAAE,QACtC,UACC,eAAe,KAAK,KAAK,MAAM,SAAS,uBAC5C;CACA,MAAM,aAAa,MAAM;CACzB,MAAM,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,SAAS,KAAK,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC;CAEvE,MAAM,UAAU,aACb,SAAiB;EAChB,MAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,aAAa,CAAC,CAAC;EAC1D,IAAI,CAAC,cAAc,gBAAgB,OAAO;EAC1C,eAAe,OAAO;CACxB,GACA;EAAC;EAAc;EAAc;CAAU,CACzC;CAEA,MAAM,MAAM,eACH;EACL,MAAM;EACN,SAAS,SAAS;EAClB,QAAQ,SAAS,aAAa;EAC9B,YAAY,QAAQ,OAAO,CAAC;EAC5B,YAAY,QAAQ,OAAO,CAAC;EAC5B;EACA;EACA;CACF,IACA;EAAC;EAAS;EAAM;CAAU,CAC5B;CAEA,MAAM,oBAAoB,YAA+B;EACvD,IAAI,CAAC,QAAQ,QAAQ,CAAC,cAAc,gBAAgB,WAAW;EAC/D,eAAe,OAAO;CACxB;CAEA,MAAM,cACJ,oBAAC,qBAAD;EAAmB;YAChB,MAAM,KAAK,OAAO,UACjB,oBAAC,oBAAY,MAAb,EAA8B,OAAO,MAAM,MAAM,MAAQ,GAAlC,KAAkC,CAC1D;CACU,CAAA;CAGf,OACE,oBAAC,uBAAD;EAAuB,OAAO;YAC5B,oBAAC,aAAD;GACY;GACM;GAChB,cAAc;GACR;GACS;GACC;GACV;GACG;GACA;aAET,oBAAC,OAAO,SAAR;IAA2B;cACzB,oBAAC,aAAD;KACY;KACK;KACf,aAAa;KACA;KACG;KACI;KACb;KACE;eAER,MAAM;IACI,CAAA;GACC,CAAA;EACL,CAAA;CACQ,CAAA;AAE3B;AAEA,oBAAoB,cAAc;AAElC,IAAA,8BAAe,kBAAkB,qBAAqB;CACpD,eAAe,OAAO;CACtB,MAAM;AACR,CAAC"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
export interface BitkitStepperDialogStepProps {
|
|
3
|
-
/** Body content for this step. */
|
|
4
|
-
children?: ReactNode;
|
|
5
|
-
/** Optional subtitle shown under the step's body title. */
|
|
6
|
-
description?: string;
|
|
7
|
-
/** Short label shown in the steps header. */
|
|
8
|
-
label: string;
|
|
9
|
-
/** Heading shown at the top of the step's body. */
|
|
10
|
-
title: string;
|
|
11
|
-
}
|
|
12
|
-
/**
|
|
13
|
-
* A single step of a {@link BitkitStepperDialog}. Renders its `title`/`description` typography
|
|
14
|
-
* followed by `children`. The parent only mounts the active step, so this never self-gates.
|
|
15
|
-
*/
|
|
16
|
-
declare const BitkitStepperDialogStep: {
|
|
17
|
-
({ children, description, title }: BitkitStepperDialogStepProps): import("react").JSX.Element;
|
|
18
|
-
displayName: string;
|
|
19
|
-
};
|
|
20
|
-
export default BitkitStepperDialogStep;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitStepperDialogStep.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitStepperDialogStep.tsx"],"sourcesContent":["import { useDialogStyles } from '@chakra-ui/react/dialog';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type ReactNode } from 'react';\n\nexport interface BitkitStepperDialogStepProps {\n /** Body content for this step. */\n children?: ReactNode;\n /** Optional subtitle shown under the step's body title. */\n description?: string;\n /** Short label shown in the steps header. */\n label: string;\n /** Heading shown at the top of the step's body. */\n title: string;\n}\n\n/**\n * A single step of a {@link BitkitStepperDialog}. Renders its `title`/`description` typography\n * followed by `children`. The parent only mounts the active step, so this never self-gates.\n */\nconst BitkitStepperDialogStep = ({ children, description, title }: BitkitStepperDialogStepProps) => {\n const styles = useDialogStyles();\n\n return (\n <>\n <chakra.div css={styles.stepTitleGroup}>\n <chakra.p css={styles.stepTitle}>{title}</chakra.p>\n {description && <chakra.p css={styles.stepDescription}>{description}</chakra.p>}\n </chakra.div>\n {children}\n </>\n );\n};\n\nBitkitStepperDialogStep.displayName = 'BitkitStepperDialogStep';\n\nexport default BitkitStepperDialogStep;\n"],"mappings":";;;;;;;;AAmBA,IAAM,2BAA2B,EAAE,UAAU,aAAa,YAA0C;CAClG,MAAM,SAAS,gBAAgB;CAE/B,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAO,KAAR;EAAY,KAAK,OAAO;YAAxB,CACE,oBAAC,OAAO,GAAR;GAAU,KAAK,OAAO;aAAY;EAAgB,CAAA,GACjD,eAAe,oBAAC,OAAO,GAAR;GAAU,KAAK,OAAO;aAAkB;EAAsB,CAAA,CACpE;KACX,QACD,EAAA,CAAA;AAEN;AAEA,wBAAwB,cAAc"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { Dialog } from '@chakra-ui/react/dialog';
|
|
2
|
-
interface DialogBodyContextValue {
|
|
3
|
-
scrollBehavior: 'inside' | 'outside';
|
|
4
|
-
showScrollGradient: boolean;
|
|
5
|
-
}
|
|
6
|
-
export declare const DialogBodyContext: import('react').Context<DialogBodyContextValue>;
|
|
7
|
-
/**
|
|
8
|
-
* Scroll-aware dialog body. Reads {@link DialogBodyContext} to decide whether the body scrolls
|
|
9
|
-
* internally (`inside` → scroll button + optional gradient) or the whole dialog scrolls (`outside`).
|
|
10
|
-
*/
|
|
11
|
-
declare const DialogBody: ({ children, ...rest }: Dialog.BodyProps) => import("react").JSX.Element;
|
|
12
|
-
export default DialogBody;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogBodyContext.js","names":[],"sources":["../../../lib/components/BitkitDialog/DialogBodyContext.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Dialog, useDialogContext, useDialogStyles } from '@chakra-ui/react/dialog';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';\n\nimport { IconArrowDown } from '../../icons';\n\ninterface DialogBodyContextValue {\n scrollBehavior: 'inside' | 'outside';\n showScrollGradient: boolean;\n}\n\nexport const DialogBodyContext = createContext<DialogBodyContextValue>({\n scrollBehavior: 'outside',\n showScrollGradient: true,\n});\n\nconst ScrollableDialogBody = ({ children, ...props }: Dialog.BodyProps) => {\n const { showScrollGradient } = useContext(DialogBodyContext);\n const styles = useDialogStyles();\n const { open } = useDialogContext();\n const contentRef = useRef<HTMLDivElement>(null);\n const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);\n\n const updateScrollButtonVisibility = useCallback(() => {\n const content = contentRef.current;\n if (!content) {\n setIsScrollButtonVisible(false);\n return;\n }\n const didScrollToBottom = content.scrollTop >= content.scrollHeight - content.offsetHeight - 1;\n setIsScrollButtonVisible(!didScrollToBottom);\n }, []);\n\n useEffect(() => {\n const content = contentRef.current;\n if (!open || !content) return;\n\n content.addEventListener('scroll', updateScrollButtonVisibility);\n const resizeObserver = new ResizeObserver(updateScrollButtonVisibility);\n resizeObserver.observe(content);\n\n return () => {\n content.removeEventListener('scroll', updateScrollButtonVisibility);\n resizeObserver.disconnect();\n };\n }, [open, updateScrollButtonVisibility]);\n\n return (\n <Box css={styles.scrollBody}>\n <Dialog.Body ref={contentRef} {...props}>\n {children}\n </Dialog.Body>\n {isScrollButtonVisible && (\n <>\n {showScrollGradient && <Box css={styles.scrollGradient} />}\n <chakra.button\n aria-label=\"Scroll to bottom\"\n css={styles.scrollButton}\n type=\"button\"\n onClick={() => {\n contentRef.current?.scrollTo({ top: contentRef.current.scrollHeight, behavior: 'smooth' });\n }}\n >\n <IconArrowDown color=\"icon/tertiary\" size=\"16\" />\n </chakra.button>\n </>\n )}\n </Box>\n );\n};\n\n/**\n * Scroll-aware dialog body. Reads {@link DialogBodyContext} to decide whether the body scrolls\n * internally (`inside` → scroll button + optional gradient) or the whole dialog scrolls (`outside`).\n */\nconst DialogBody = ({ children, ...rest }: Dialog.BodyProps) => {\n const { scrollBehavior } = useContext(DialogBodyContext);\n\n if (scrollBehavior === 'inside') {\n return <ScrollableDialogBody {...rest}>{children}</ScrollableDialogBody>;\n }\n return <Dialog.Body {...rest}>{children}</Dialog.Body>;\n};\n\nexport default DialogBody;\n"],"mappings":";;;;;;;AAYA,IAAa,oBAAoB,cAAsC;CACrE,gBAAgB;CAChB,oBAAoB;AACtB,CAAC;AAED,IAAM,wBAAwB,EAAE,UAAU,GAAG,YAA8B;CACzE,MAAM,EAAE,uBAAuB,WAAW,iBAAiB;CAC3D,MAAM,SAAS,gBAAgB;CAC/B,MAAM,EAAE,SAAS,iBAAiB;CAClC,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,KAAK;CAExE,MAAM,+BAA+B,kBAAkB;EACrD,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;GACZ,yBAAyB,KAAK;GAC9B;EACF;EAEA,yBAAyB,EADC,QAAQ,aAAa,QAAQ,eAAe,QAAQ,eAAe,EAClD;CAC7C,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,QAAQ,CAAC,SAAS;EAEvB,QAAQ,iBAAiB,UAAU,4BAA4B;EAC/D,MAAM,iBAAiB,IAAI,eAAe,4BAA4B;EACtE,eAAe,QAAQ,OAAO;EAE9B,aAAa;GACX,QAAQ,oBAAoB,UAAU,4BAA4B;GAClE,eAAe,WAAW;EAC5B;CACF,GAAG,CAAC,MAAM,4BAA4B,CAAC;CAEvC,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;YAAjB,CACE,oBAAC,OAAO,MAAR;GAAa,KAAK;GAAY,GAAI;GAC/B;EACU,CAAA,GACZ,yBACC,qBAAA,YAAA,EAAA,UAAA,CACG,sBAAsB,oBAAC,KAAD,EAAK,KAAK,OAAO,eAAiB,CAAA,GACzD,oBAAC,OAAO,QAAR;GACE,cAAW;GACX,KAAK,OAAO;GACZ,MAAK;GACL,eAAe;IACb,WAAW,SAAS,SAAS;KAAE,KAAK,WAAW,QAAQ;KAAc,UAAU;IAAS,CAAC;GAC3F;aAEA,oBAAC,eAAD;IAAe,OAAM;IAAgB,MAAK;GAAM,CAAA;EACnC,CAAA,CACf,EAAA,CAAA,CAED;;AAET;;;;;AAMA,IAAM,cAAc,EAAE,UAAU,GAAG,WAA6B;CAC9D,MAAM,EAAE,mBAAmB,WAAW,iBAAiB;CAEvD,IAAI,mBAAmB,UACrB,OAAO,oBAAC,sBAAD;EAAsB,GAAI;EAAO;CAA+B,CAAA;CAEzE,OAAO,oBAAC,OAAO,MAAR;EAAa,GAAI;EAAO;CAAsB,CAAA;AACvD"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
export interface DialogInnerProps {
|
|
3
|
-
/** Body content. */
|
|
4
|
-
children?: ReactNode;
|
|
5
|
-
closable?: boolean;
|
|
6
|
-
/** Action buttons, auto-wrapped in the standard right-aligned button row inside the footer. */
|
|
7
|
-
footerButtons?: ReactNode;
|
|
8
|
-
/** Arbitrary content rendered raw inside the footer, before any `footerButtons`. */
|
|
9
|
-
footerContent?: ReactNode;
|
|
10
|
-
/** Extra header content below the title (e.g. the stepper's steps header). */
|
|
11
|
-
headerExtra?: ReactNode;
|
|
12
|
-
headerLabel?: string;
|
|
13
|
-
scrollBehavior?: 'inside' | 'outside';
|
|
14
|
-
showScrollGradient?: boolean;
|
|
15
|
-
title: ReactNode;
|
|
16
|
-
variant?: 'overflowContent';
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* Header + body + footer rendered inside a `Dialog.Content`. Shared by every Bitkit dialog
|
|
20
|
-
* flavour. Footer rules: `footerContent` renders raw; `footerButtons` is auto-wrapped in the
|
|
21
|
-
* standard right-aligned button row; both render in the same `Dialog.Footer` (content first); if
|
|
22
|
-
* neither is set, no footer renders.
|
|
23
|
-
*/
|
|
24
|
-
declare const DialogInner: ({ children, closable, footerButtons, footerContent, headerExtra, headerLabel, scrollBehavior: scrollBehaviorProp, showScrollGradient, title, variant, }: DialogInnerProps) => import("react").JSX.Element;
|
|
25
|
-
export default DialogInner;
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
|
|
2
|
-
import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
|
|
3
|
-
import DialogBody, { DialogBodyContext } from "./DialogBodyContext.js";
|
|
4
|
-
import { Box } from "@chakra-ui/react/box";
|
|
5
|
-
import { chakra } from "@chakra-ui/react/styled-system";
|
|
6
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
import { Dialog, useDialogStyles } from "@chakra-ui/react/dialog";
|
|
8
|
-
//#region lib/components/BitkitDialog/DialogInner.tsx
|
|
9
|
-
var PORTAL_DISABLED = { disablePortal: true };
|
|
10
|
-
/**
|
|
11
|
-
* Header + body + footer rendered inside a `Dialog.Content`. Shared by every Bitkit dialog
|
|
12
|
-
* flavour. Footer rules: `footerContent` renders raw; `footerButtons` is auto-wrapped in the
|
|
13
|
-
* standard right-aligned button row; both render in the same `Dialog.Footer` (content first); if
|
|
14
|
-
* neither is set, no footer renders.
|
|
15
|
-
*/
|
|
16
|
-
var DialogInner = ({ children, closable = true, footerButtons, footerContent, headerExtra, headerLabel, scrollBehavior: scrollBehaviorProp = "outside", showScrollGradient = true, title, variant }) => {
|
|
17
|
-
const scrollBehavior = variant === "overflowContent" ? "inside" : scrollBehaviorProp;
|
|
18
|
-
const styles = useDialogStyles();
|
|
19
|
-
const hasFooter = !!footerContent || !!footerButtons;
|
|
20
|
-
return /* @__PURE__ */ jsx(BitkitPortalContext.Provider, {
|
|
21
|
-
value: PORTAL_DISABLED,
|
|
22
|
-
children: /* @__PURE__ */ jsxs(DialogBodyContext.Provider, {
|
|
23
|
-
value: {
|
|
24
|
-
scrollBehavior,
|
|
25
|
-
showScrollGradient
|
|
26
|
-
},
|
|
27
|
-
children: [
|
|
28
|
-
/* @__PURE__ */ jsxs(Dialog.Header, { children: [
|
|
29
|
-
/* @__PURE__ */ jsxs(Box, {
|
|
30
|
-
display: "flex",
|
|
31
|
-
flexDirection: "column",
|
|
32
|
-
gap: "4",
|
|
33
|
-
children: [headerLabel && /* @__PURE__ */ jsx(chakra.p, {
|
|
34
|
-
css: styles.label,
|
|
35
|
-
children: headerLabel
|
|
36
|
-
}), /* @__PURE__ */ jsx(Dialog.Title, { children: title })]
|
|
37
|
-
}),
|
|
38
|
-
!!headerExtra && /* @__PURE__ */ jsx(Box, {
|
|
39
|
-
css: styles.stepHeader,
|
|
40
|
-
children: headerExtra
|
|
41
|
-
}),
|
|
42
|
-
/* @__PURE__ */ jsx(Dialog.CloseTrigger, {
|
|
43
|
-
asChild: true,
|
|
44
|
-
children: /* @__PURE__ */ jsx(BitkitCloseButton, {
|
|
45
|
-
disabled: !closable,
|
|
46
|
-
size: variant === "overflowContent" ? "xs" : "md",
|
|
47
|
-
type: "button"
|
|
48
|
-
})
|
|
49
|
-
})
|
|
50
|
-
] }),
|
|
51
|
-
/* @__PURE__ */ jsx(DialogBody, { children }),
|
|
52
|
-
hasFooter && /* @__PURE__ */ jsxs(Dialog.Footer, { children: [footerContent, footerButtons && /* @__PURE__ */ jsx(Box, {
|
|
53
|
-
display: "flex",
|
|
54
|
-
gap: "16",
|
|
55
|
-
justifyContent: "flex-end",
|
|
56
|
-
paddingBlockStart: "24",
|
|
57
|
-
children: footerButtons
|
|
58
|
-
})] })
|
|
59
|
-
]
|
|
60
|
-
})
|
|
61
|
-
});
|
|
62
|
-
};
|
|
63
|
-
//#endregion
|
|
64
|
-
export { DialogInner as default };
|
|
65
|
-
|
|
66
|
-
//# sourceMappingURL=DialogInner.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DialogInner.js","names":[],"sources":["../../../lib/components/BitkitDialog/DialogInner.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Dialog, useDialogStyles } from '@chakra-ui/react/dialog';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type ReactNode } from 'react';\n\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport DialogBody, { DialogBodyContext } from './DialogBodyContext';\n\nconst PORTAL_DISABLED = { disablePortal: true };\n\nexport interface DialogInnerProps {\n /** Body content. */\n children?: ReactNode;\n closable?: boolean;\n /** Action buttons, auto-wrapped in the standard right-aligned button row inside the footer. */\n footerButtons?: ReactNode;\n /** Arbitrary content rendered raw inside the footer, before any `footerButtons`. */\n footerContent?: ReactNode;\n /** Extra header content below the title (e.g. the stepper's steps header). */\n headerExtra?: ReactNode;\n headerLabel?: string;\n scrollBehavior?: 'inside' | 'outside';\n showScrollGradient?: boolean;\n title: ReactNode;\n variant?: 'overflowContent';\n}\n\n/**\n * Header + body + footer rendered inside a `Dialog.Content`. Shared by every Bitkit dialog\n * flavour. Footer rules: `footerContent` renders raw; `footerButtons` is auto-wrapped in the\n * standard right-aligned button row; both render in the same `Dialog.Footer` (content first); if\n * neither is set, no footer renders.\n */\nconst DialogInner = ({\n children,\n closable = true,\n footerButtons,\n footerContent,\n headerExtra,\n headerLabel,\n scrollBehavior: scrollBehaviorProp = 'outside',\n showScrollGradient = true,\n title,\n variant,\n}: DialogInnerProps) => {\n const scrollBehavior = variant === 'overflowContent' ? 'inside' : scrollBehaviorProp;\n const styles = useDialogStyles();\n const hasFooter = !!footerContent || !!footerButtons;\n\n return (\n <BitkitPortalContext.Provider value={PORTAL_DISABLED}>\n <DialogBodyContext.Provider value={{ scrollBehavior, showScrollGradient }}>\n <Dialog.Header>\n <Box display=\"flex\" flexDirection=\"column\" gap=\"4\">\n {headerLabel && <chakra.p css={styles.label}>{headerLabel}</chakra.p>}\n <Dialog.Title>{title}</Dialog.Title>\n </Box>\n {!!headerExtra && <Box css={styles.stepHeader}>{headerExtra}</Box>}\n <Dialog.CloseTrigger asChild>\n <BitkitCloseButton disabled={!closable} size={variant === 'overflowContent' ? 'xs' : 'md'} type=\"button\" />\n </Dialog.CloseTrigger>\n </Dialog.Header>\n <DialogBody>{children}</DialogBody>\n {hasFooter && (\n <Dialog.Footer>\n {footerContent}\n {footerButtons && (\n <Box display=\"flex\" gap=\"16\" justifyContent=\"flex-end\" paddingBlockStart=\"24\">\n {footerButtons}\n </Box>\n )}\n </Dialog.Footer>\n )}\n </DialogBodyContext.Provider>\n </BitkitPortalContext.Provider>\n );\n};\n\nexport default DialogInner;\n"],"mappings":";;;;;;;;AASA,IAAM,kBAAkB,EAAE,eAAe,KAAK;;;;;;;AAyB9C,IAAM,eAAe,EACnB,UACA,WAAW,MACX,eACA,eACA,aACA,aACA,gBAAgB,qBAAqB,WACrC,qBAAqB,MACrB,OACA,cACsB;CACtB,MAAM,iBAAiB,YAAY,oBAAoB,WAAW;CAClE,MAAM,SAAS,gBAAgB;CAC/B,MAAM,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAAC;CAEvC,OACE,oBAAC,oBAAoB,UAArB;EAA8B,OAAO;YACnC,qBAAC,kBAAkB,UAAnB;GAA4B,OAAO;IAAE;IAAgB;GAAmB;aAAxE;IACE,qBAAC,OAAO,QAAR,EAAA,UAAA;KACE,qBAAC,KAAD;MAAK,SAAQ;MAAO,eAAc;MAAS,KAAI;gBAA/C,CACG,eAAe,oBAAC,OAAO,GAAR;OAAU,KAAK,OAAO;iBAAQ;MAAsB,CAAA,GACpE,oBAAC,OAAO,OAAR,EAAA,UAAe,MAAoB,CAAA,CAChC;;KACJ,CAAC,CAAC,eAAe,oBAAC,KAAD;MAAK,KAAK,OAAO;gBAAa;KAAiB,CAAA;KACjE,oBAAC,OAAO,cAAR;MAAqB,SAAA;gBACnB,oBAAC,mBAAD;OAAmB,UAAU,CAAC;OAAU,MAAM,YAAY,oBAAoB,OAAO;OAAM,MAAK;MAAU,CAAA;KACvF,CAAA;IACR,EAAA,CAAA;IACf,oBAAC,YAAD,EAAa,SAAqB,CAAA;IACjC,aACC,qBAAC,OAAO,QAAR,EAAA,UAAA,CACG,eACA,iBACC,oBAAC,KAAD;KAAK,SAAQ;KAAO,KAAI;KAAK,gBAAe;KAAW,mBAAkB;eACtE;IACE,CAAA,CAEM,EAAA,CAAA;GAES;;CACA,CAAA;AAElC"}
|