@bitrise/bitkit-v2 0.3.397-beta.2557 → 0.3.398-beta.2560
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
CHANGED
|
@@ -138,7 +138,7 @@ Bitkit components use consistent prop names across the library:
|
|
|
138
138
|
- **Three dialog components, one shell** — pick by intent, never reach for low-level dialog primitives (there are none exported):
|
|
139
139
|
- `BitkitDialog` — header (title + close) + body (`children`) + footer. The body is the dialog's `children`. The footer is two slot props: `footerButtons` (action buttons, auto-wrapped in the standard right-aligned row — no manual wrapper) and `footerContent` (arbitrary content rendered raw, e.g. an inline `BitkitAlert`). Both can be combined (content first, then buttons); omit both for a passive dialog with no footer.
|
|
140
140
|
- `BitkitFormDialog` — same API as `BitkitDialog`, but the whole content is a `<form>`, so a `type="submit"` button in `footerButtons` submits natively. On top of the shared dialog props it takes `onSubmit` (correctly typed as `FormEvent<HTMLFormElement>`) and `noValidate`, and nothing else off the native `<form>`.
|
|
141
|
-
- `BitkitStepsDialog` — a multi-step dialog. Pass `BitkitStepsDialog.Step` children (each with `label` for the steps header, `title`/`description` for the step body). It owns the step state and auto-renders the steps header; build the step navigation with the `useStepsDialog()` hook (`{ step, setStep, next, prev, goTo, isFirst, isLast, totalSteps }`) and pass it as `footerButtons`, which the dialog lays out with the leading action opposite the step navigation. `footerContent` still renders raw above it. Controlled via `step`/`onStepChange`, or uncontrolled via `defaultStep`.
|
|
141
|
+
- `BitkitStepsDialog` — a multi-step dialog. Pass `BitkitStepsDialog.Step` children (each with `label` for the steps header, `title`/`description` for the step body). It owns the step state and auto-renders the steps header; build the step navigation with the `useStepsDialog()` hook (`{ step, setStep, next, prev, goTo, isFirst, isLast, totalSteps }`) and pass it as `footerButtons`, which the dialog lays out with the leading action opposite the step navigation. A wizard with no leading action just passes the one navigation group and it stays on the right, so never add `marginInlineStart`, `width` or a `justifyContent` at the call site. `footerContent` still renders raw above it. Controlled via `step`/`onStepChange`, or uncontrolled via `defaultStep`.
|
|
142
142
|
- All three expose `.ActionTrigger` (a thin re-export of Chakra's `Dialog.ActionTrigger`): wrap a footer button in it to close the dialog on click — the default way to dismiss a trigger-based (uncontrolled) dialog without wiring `open` state.
|
|
143
143
|
```tsx
|
|
144
144
|
<BitkitDialog footerButtons={<><Button variant="secondary">Cancel</Button><Button variant="primary">Save</Button></>} open={open} onOpenChange={…} title="Title">Body</BitkitDialog>
|
|
@@ -16,6 +16,7 @@ export type BitkitStepsDialogProps = {
|
|
|
16
16
|
/**
|
|
17
17
|
* The step navigation, built with `useStepsDialog()`. Pass the buttons themselves: the dialog lays
|
|
18
18
|
* them out the way the design asks for, leading action on the left, the step navigation opposite.
|
|
19
|
+
* A footer with no leading action passes a single group, which stays on the right.
|
|
19
20
|
*/
|
|
20
21
|
footerButtons?: ReactNode;
|
|
21
22
|
/** Arbitrary content rendered raw inside the footer, above `footerButtons` (e.g. a `BitkitAlert`). */
|
|
@@ -50,6 +50,7 @@ var BitkitStepsDialog = ({ children, defaultStep = 0, dismissible = true, initia
|
|
|
50
50
|
onOpenChange?.(details);
|
|
51
51
|
};
|
|
52
52
|
const footerNav = footerButtons && /* @__PURE__ */ jsx(Box, {
|
|
53
|
+
css: { "& > :only-child": { marginInlineStart: "auto" } },
|
|
53
54
|
display: "flex",
|
|
54
55
|
justifyContent: "space-between",
|
|
55
56
|
width: "100%",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitStepsDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitStepsDialog.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Dialog } from '@chakra-ui/react/dialog';\nimport { type ReactElement, type ReactNode, useCallback, useMemo, useState } from 'react';\n\nimport { type BitkitDataAttributes } from '../../utilities/dataAttributes';\nimport { flattenChildren } from '../../utilities/flattenChildren';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitSteps from '../BitkitSteps/BitkitSteps';\nimport BitkitStepsDialogStep, { type BitkitStepsDialogStepProps } from './BitkitStepsDialogStep';\nimport DialogInner from './DialogInner';\nimport DialogShell, { type DialogShellProps } from './DialogShell';\nimport { StepsDialogProvider } from './StepsDialogContext';\n\nexport { useStepsDialog } from './StepsDialogContext';\n\nexport type BitkitStepsDialogProps = {\n /** `BitkitStepsDialog.Step` children, one per step. */\n children: ReactNode;\n /** Initial step when uncontrolled. Resets to this when the dialog closes. */\n defaultStep?: number;\n /** Set to `false` to remove every dismiss route that skips a decision: no close button, no ESC. */\n dismissible?: boolean;\n /** Element to focus when the dialog opens, instead of the first focusable one. */\n initialFocusEl?: DialogShellProps['initialFocusEl'];\n /**\n * The step navigation, built with `useStepsDialog()`. Pass the buttons themselves: the dialog lays\n * them out the way the design asks for, leading action on the left, the step navigation opposite.\n */\n footerButtons?: ReactNode;\n /** Arbitrary content rendered raw inside the footer, above `footerButtons` (e.g. a `BitkitAlert`). */\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 /**\n * `loading` locks the dialog while a background action runs: the close button stays in place but\n * disabled, and ESC is blocked. Use it alongside the footer button's own `state=\"loading\"`.\n */\n state?: 'loading';\n /** Controlled active step. Omit for uncontrolled (see `defaultStep`). */\n step?: number;\n title: ReactNode;\n trigger?: ReactNode;\n variant?: 'overflowContent';\n // Data attributes are forwarded to the element carrying `role=\"dialog\"`, and nothing else is —\n // style props, `className` and `id` don't pass through.\n} & BitkitDataAttributes;\n\n/**\n * A dialog that walks through a sequence of `BitkitStepsDialog.Step` children. It owns the step\n * state, auto-renders the steps header, and shows only the active step's body. The consumer builds\n * the step navigation with the `useStepsDialog()` hook and passes it in as `footerButtons`.\n */\nconst BitkitStepsDialog = ({\n children,\n defaultStep = 0,\n dismissible = true,\n initialFocusEl,\n footerButtons,\n footerContent,\n headerLabel,\n maxHeight,\n onExitComplete,\n onOpenChange,\n onStepChange,\n open,\n preventScroll,\n scrollBehavior,\n showScrollGradient,\n size,\n state,\n step: stepProp,\n title,\n trigger,\n variant,\n ...dataAttributes\n}: BitkitStepsDialogProps) => {\n const [internalStep, setInternalStep] = useState(defaultStep);\n const isControlled = stepProp !== undefined;\n const rawStep = (isControlled ? stepProp : internalStep) ?? 0;\n const steps = flattenChildren(children).filter(\n (child): child is ReactElement<BitkitStepsDialogStepProps> => child.type === BitkitStepsDialogStep,\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 // The design splits this row: the leading action sits opposite the step navigation. Laying it out\n // here rather than in `DialogInner` keeps the shared action block right-aligned for every other\n // dialog, and keeps the split off every call site.\n const footerNav = footerButtons && (\n <Box display=\"flex\"
|
|
1
|
+
{"version":3,"file":"BitkitStepsDialog.js","names":[],"sources":["../../../lib/components/BitkitDialog/BitkitStepsDialog.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Dialog } from '@chakra-ui/react/dialog';\nimport { type ReactElement, type ReactNode, useCallback, useMemo, useState } from 'react';\n\nimport { type BitkitDataAttributes } from '../../utilities/dataAttributes';\nimport { flattenChildren } from '../../utilities/flattenChildren';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitSteps from '../BitkitSteps/BitkitSteps';\nimport BitkitStepsDialogStep, { type BitkitStepsDialogStepProps } from './BitkitStepsDialogStep';\nimport DialogInner from './DialogInner';\nimport DialogShell, { type DialogShellProps } from './DialogShell';\nimport { StepsDialogProvider } from './StepsDialogContext';\n\nexport { useStepsDialog } from './StepsDialogContext';\n\nexport type BitkitStepsDialogProps = {\n /** `BitkitStepsDialog.Step` children, one per step. */\n children: ReactNode;\n /** Initial step when uncontrolled. Resets to this when the dialog closes. */\n defaultStep?: number;\n /** Set to `false` to remove every dismiss route that skips a decision: no close button, no ESC. */\n dismissible?: boolean;\n /** Element to focus when the dialog opens, instead of the first focusable one. */\n initialFocusEl?: DialogShellProps['initialFocusEl'];\n /**\n * The step navigation, built with `useStepsDialog()`. Pass the buttons themselves: the dialog lays\n * them out the way the design asks for, leading action on the left, the step navigation opposite.\n * A footer with no leading action passes a single group, which stays on the right.\n */\n footerButtons?: ReactNode;\n /** Arbitrary content rendered raw inside the footer, above `footerButtons` (e.g. a `BitkitAlert`). */\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 /**\n * `loading` locks the dialog while a background action runs: the close button stays in place but\n * disabled, and ESC is blocked. Use it alongside the footer button's own `state=\"loading\"`.\n */\n state?: 'loading';\n /** Controlled active step. Omit for uncontrolled (see `defaultStep`). */\n step?: number;\n title: ReactNode;\n trigger?: ReactNode;\n variant?: 'overflowContent';\n // Data attributes are forwarded to the element carrying `role=\"dialog\"`, and nothing else is —\n // style props, `className` and `id` don't pass through.\n} & BitkitDataAttributes;\n\n/**\n * A dialog that walks through a sequence of `BitkitStepsDialog.Step` children. It owns the step\n * state, auto-renders the steps header, and shows only the active step's body. The consumer builds\n * the step navigation with the `useStepsDialog()` hook and passes it in as `footerButtons`.\n */\nconst BitkitStepsDialog = ({\n children,\n defaultStep = 0,\n dismissible = true,\n initialFocusEl,\n footerButtons,\n footerContent,\n headerLabel,\n maxHeight,\n onExitComplete,\n onOpenChange,\n onStepChange,\n open,\n preventScroll,\n scrollBehavior,\n showScrollGradient,\n size,\n state,\n step: stepProp,\n title,\n trigger,\n variant,\n ...dataAttributes\n}: BitkitStepsDialogProps) => {\n const [internalStep, setInternalStep] = useState(defaultStep);\n const isControlled = stepProp !== undefined;\n const rawStep = (isControlled ? stepProp : internalStep) ?? 0;\n const steps = flattenChildren(children).filter(\n (child): child is ReactElement<BitkitStepsDialogStepProps> => child.type === BitkitStepsDialogStep,\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 // The design splits this row: the leading action sits opposite the step navigation. Laying it out\n // here rather than in `DialogInner` keeps the shared action block right-aligned for every other\n // dialog, and keeps the split off every call site. A footer with no leading action passes a single\n // group, which `space-between` would park at the start, so that case is pushed back to the end. It\n // has to be a selector rather than a prop: `footerButtons` is one element rendering a fragment, so\n // the component cannot count what it will produce.\n const footerNav = footerButtons && (\n <Box\n css={{ '& > :only-child': { marginInlineStart: 'auto' } }}\n display=\"flex\"\n justifyContent=\"space-between\"\n width=\"100%\"\n >\n {footerButtons}\n </Box>\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 <StepsDialogProvider value={ctx}>\n <DialogShell\n dismissible={dismissible}\n initialFocusEl={initialFocusEl}\n onExitComplete={onExitComplete}\n onOpenChange={handleOpenChange}\n open={open}\n preventScroll={preventScroll}\n scrollBehavior={scrollBehavior}\n size={size}\n state={state}\n trigger={trigger}\n variant={variant}\n >\n <Dialog.Content aria-busy={state === 'loading' || undefined} maxHeight={maxHeight} {...dataAttributes}>\n <DialogInner\n dismissible={dismissible}\n footerButtons={footerNav}\n footerContent={footerContent}\n headerExtra={stepsHeader}\n headerLabel={headerLabel}\n scrollBehavior={scrollBehavior}\n showScrollGradient={showScrollGradient}\n state={state}\n title={title}\n variant={variant}\n >\n {steps[step]}\n </DialogInner>\n </Dialog.Content>\n </DialogShell>\n </StepsDialogProvider>\n );\n};\n\nBitkitStepsDialog.displayName = 'BitkitStepsDialog';\n\nexport default withSubComponents(BitkitStepsDialog, {\n ActionTrigger: Dialog.ActionTrigger,\n Step: BitkitStepsDialogStep,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AA8DA,IAAM,qBAAqB,EACzB,UACA,cAAc,GACd,cAAc,MACd,gBACA,eACA,eACA,aACA,WACA,gBACA,cACA,cACA,MACA,eACA,gBACA,oBACA,MACA,OACA,MAAM,UACN,OACA,SACA,SACA,GAAG,qBACyB;CAC5B,MAAM,CAAC,cAAc,mBAAmB,SAAS,WAAW;CAC5D,MAAM,eAAe,aAAa,KAAA;CAClC,MAAM,WAAW,eAAe,WAAW,iBAAiB;CAC5D,MAAM,QAAQ,gBAAgB,QAAQ,CAAC,CAAC,QACrC,UAA6D,MAAM,SAAS,qBAC/E;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;CAQA,MAAM,YAAY,iBAChB,oBAAC,KAAD;EACE,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,OAAO,EAAE;EACxD,SAAQ;EACR,gBAAe;EACf,OAAM;EAEL,UAAA;CACE,CAAA;CAGP,MAAM,cACJ,oBAAC,qBAAD;EAAmB;EAChB,UAAA,MAAM,KAAK,OAAO,UACjB,oBAAC,oBAAY,MAAb,EAA8B,OAAO,MAAM,MAAM,MAAQ,GAAlC,KAAkC,CAC1D;CACU,CAAA;CAGf,OACE,oBAAC,qBAAD;EAAqB,OAAO;EAC1B,UAAA,oBAAC,aAAD;GACe;GACG;GACA;GAChB,cAAc;GACR;GACS;GACC;GACV;GACC;GACE;GACA;GAET,UAAA,oBAAC,OAAO,SAAR;IAAgB,aAAW,UAAU,aAAa,KAAA;IAAsB;IAAW,GAAI;IACrF,UAAA,oBAAC,aAAD;KACe;KACb,eAAe;KACA;KACf,aAAa;KACA;KACG;KACI;KACb;KACA;KACE;KAER,UAAA,MAAM;IACI,CAAA;GACC,CAAA;EACL,CAAA;CACM,CAAA;AAEzB;AAEA,kBAAkB,cAAc;AAEhC,IAAA,4BAAe,kBAAkB,mBAAmB;CAClD,eAAe,OAAO;CACtB,MAAM;AACR,CAAC"}
|