@keboola/design 4.1.1 → 4.1.2

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.
Files changed (8) hide show
  1. package/dist/index.cjs +58 -23
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +6 -4
  4. package/dist/index.d.ts +6 -4
  5. package/dist/index.js +58 -23
  6. package/dist/index.js.map +1 -1
  7. package/dist/styles.css +1 -1
  8. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -13392,28 +13392,52 @@ var PageHeaderDetail = ({
13392
13392
  primaryAction,
13393
13393
  secondaryAction,
13394
13394
  headerNav,
13395
+ fullWidthDescription = false,
13395
13396
  ...props
13396
- }) => /* @__PURE__ */ jsxRuntime.jsxs("header", { ref, className: cn("tw-flex tw-w-full tw-flex-col tw-gap-4", className), ...props, children: [
13397
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-items-center tw-justify-between tw-gap-4", children: [
13398
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-min-w-0 tw-flex-1", children: breadcrumbs }),
13399
- overflowActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-flex tw-shrink-0 tw-items-center tw-gap-2", children: overflowActions })
13400
- ] }),
13401
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-flex-wrap tw-items-start tw-justify-between tw-gap-x-4 tw-gap-y-3", children: [
13402
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-min-w-64 tw-flex-1 tw-flex-col tw-gap-2 tw-pr-2", children: [
13403
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: titleRowClass, children: [
13404
- titleIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-flex tw-shrink-0 tw-items-center", children: titleIcon }),
13405
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: compact ? titleCompactClass : titleClass, children: title }),
13406
- badges && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgesClass, children: badges })
13407
- ] }),
13408
- description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: descriptionClass, children: description })
13409
- ] }),
13410
- (primaryAction || secondaryAction) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-ml-auto tw-flex tw-flex-wrap tw-items-center tw-justify-end tw-gap-2", children: [
13411
- secondaryAction,
13412
- primaryAction
13413
- ] })
13414
- ] }),
13415
- headerNav
13416
- ] });
13397
+ }) => {
13398
+ const titleRow = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(titleRowClass, "tw-min-w-64 tw-flex-1 tw-pr-2"), children: [
13399
+ titleIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-flex tw-shrink-0 tw-items-center", children: titleIcon }),
13400
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: compact ? titleCompactClass : titleClass, children: title }),
13401
+ badges && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgesClass, children: badges })
13402
+ ] });
13403
+ const actions = (primaryAction || secondaryAction) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-ml-auto tw-flex tw-flex-wrap tw-items-center tw-justify-end tw-gap-2", children: [
13404
+ secondaryAction,
13405
+ primaryAction
13406
+ ] });
13407
+ const descriptionNode = description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: descriptionClass, children: description });
13408
+ return /* @__PURE__ */ jsxRuntime.jsxs(
13409
+ "header",
13410
+ {
13411
+ ref,
13412
+ className: cn("tw-flex tw-w-full tw-flex-col tw-gap-4", className),
13413
+ ...props,
13414
+ children: [
13415
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-items-center tw-justify-between tw-gap-4", children: [
13416
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-min-w-0 tw-flex-1", children: breadcrumbs }),
13417
+ overflowActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-flex tw-shrink-0 tw-items-center tw-gap-2", children: overflowActions })
13418
+ ] }),
13419
+ fullWidthDescription ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-flex-col tw-gap-2", children: [
13420
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-flex-wrap tw-items-start tw-justify-between tw-gap-x-4 tw-gap-y-3", children: [
13421
+ titleRow,
13422
+ actions
13423
+ ] }),
13424
+ descriptionNode
13425
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-flex-wrap tw-items-start tw-justify-between tw-gap-x-4 tw-gap-y-3", children: [
13426
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-min-w-64 tw-flex-1 tw-flex-col tw-gap-2 tw-pr-2", children: [
13427
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: titleRowClass, children: [
13428
+ titleIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-flex tw-shrink-0 tw-items-center", children: titleIcon }),
13429
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: compact ? titleCompactClass : titleClass, children: title }),
13430
+ badges && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgesClass, children: badges })
13431
+ ] }),
13432
+ descriptionNode
13433
+ ] }),
13434
+ actions
13435
+ ] }),
13436
+ headerNav
13437
+ ]
13438
+ }
13439
+ );
13440
+ };
13417
13441
  var PageHeaderIndex = ({
13418
13442
  ref,
13419
13443
  className,
@@ -13423,9 +13447,11 @@ var PageHeaderIndex = ({
13423
13447
  documentation,
13424
13448
  action,
13425
13449
  headerNav,
13450
+ fullWidthDescription = false,
13426
13451
  ...props
13427
13452
  }) => {
13428
13453
  const subtitle = metadata ?? description;
13454
+ const hasActions = Boolean(documentation || action);
13429
13455
  return /* @__PURE__ */ jsxRuntime.jsxs(
13430
13456
  "header",
13431
13457
  {
@@ -13433,12 +13459,21 @@ var PageHeaderIndex = ({
13433
13459
  className: cn("tw-flex tw-w-full tw-flex-col tw-gap-4", className),
13434
13460
  ...props,
13435
13461
  children: [
13436
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-4", children: [
13462
+ fullWidthDescription ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-flex-col tw-gap-2", children: [
13463
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-flex-wrap tw-items-start tw-justify-between tw-gap-x-4 tw-gap-y-3", children: [
13464
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(titleRowClass, "tw-min-w-64 tw-flex-1 tw-pr-2"), children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: titleClass, children: title }) }),
13465
+ hasActions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-ml-auto tw-flex tw-flex-wrap tw-items-center tw-justify-end tw-gap-2", children: [
13466
+ documentation,
13467
+ action
13468
+ ] })
13469
+ ] }),
13470
+ subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: descriptionClass, children: subtitle })
13471
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-4", children: [
13437
13472
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-gap-2 tw-pr-2", children: [
13438
13473
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleRowClass, children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: titleClass, children: title }) }),
13439
13474
  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: descriptionClass, children: subtitle })
13440
13475
  ] }),
13441
- (documentation || action) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-shrink-0 tw-items-center tw-gap-2", children: [
13476
+ hasActions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-shrink-0 tw-items-center tw-gap-2", children: [
13442
13477
  documentation,
13443
13478
  action
13444
13479
  ] })