"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/block-editor/src/components/child-layout-control/index.js
var child_layout_control_exports = {};
__export(child_layout_control_exports, {
  childLayoutOrientation: () => childLayoutOrientation,
  default: () => ChildLayoutControl
});
module.exports = __toCommonJS(child_layout_control_exports);
var import_components = require("@wordpress/components");
var import_i18n = require("@wordpress/i18n");
var import_element = require("@wordpress/element");
var import_data = require("@wordpress/data");
var import_use_get_number_of_blocks_before_cell = require("../grid/use-get-number-of-blocks-before-cell.cjs");
var import_store = require("../../store/index.cjs");
var import_use_settings = require("../use-settings/index.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
var FLEX_CHILD_LAYOUT_VALUES = {
  fit: "fit",
  grow: "fill",
  max: "fixed",
  fixed: "fixedNoShrink"
};
var FLEX_SIZE_VALUES = [
  FLEX_CHILD_LAYOUT_VALUES.max,
  FLEX_CHILD_LAYOUT_VALUES.fixed
];
function isFlexSizeValue(value) {
  return FLEX_SIZE_VALUES.includes(value);
}
function maxSizeLabel(parentLayout) {
  const { orientation = "horizontal" } = parentLayout ?? {};
  return orientation === "horizontal" ? (0, import_i18n._x)("Max", "Block with maximum width in flex layout") : (0, import_i18n._x)("Max", "Block with maximum height in flex layout");
}
function helpText(flexControlValue, parentLayout) {
  const { orientation = "horizontal" } = parentLayout ?? {};
  if (flexControlValue === FLEX_CHILD_LAYOUT_VALUES.grow) {
    return (0, import_i18n.__)("Stretch to fill available space.");
  }
  if (flexControlValue === FLEX_CHILD_LAYOUT_VALUES.max && orientation === "horizontal") {
    return (0, import_i18n.__)("Specify a maximum width.");
  } else if (flexControlValue === FLEX_CHILD_LAYOUT_VALUES.max) {
    return (0, import_i18n.__)("Specify a maximum height.");
  }
  if (flexControlValue === FLEX_CHILD_LAYOUT_VALUES.fixed && orientation === "horizontal") {
    return (0, import_i18n.__)("Specify a fixed width.");
  } else if (flexControlValue === FLEX_CHILD_LAYOUT_VALUES.fixed) {
    return (0, import_i18n.__)("Specify a fixed height.");
  }
  return (0, import_i18n.__)("Fit contents.");
}
function ChildLayoutControl({
  value: childLayout = {},
  onChange,
  parentLayout,
  isShownByDefault,
  panelId,
  showGridSpanDefaults = true
}) {
  const {
    type: parentType,
    default: { type: defaultParentType = "default" } = {}
  } = parentLayout ?? {};
  const parentLayoutType = parentType || defaultParentType;
  if (parentLayoutType === "flex") {
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      FlexControls,
      {
        childLayout,
        onChange,
        parentLayout,
        isShownByDefault,
        panelId
      }
    );
  } else if (parentLayoutType === "grid") {
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      GridControls,
      {
        childLayout,
        onChange,
        parentLayout,
        isShownByDefault,
        panelId,
        showGridSpanDefaults
      }
    );
  }
  return null;
}
function FlexControls({
  childLayout,
  onChange,
  parentLayout,
  isShownByDefault,
  panelId
}) {
  const { selfStretch, flexSize } = childLayout;
  const { orientation = "horizontal" } = parentLayout ?? {};
  const flexControlValue = selfStretch || FLEX_CHILD_LAYOUT_VALUES.fit;
  const hasFlexSizeValue = isFlexSizeValue(flexControlValue);
  const hasFlexValue = () => !!selfStretch;
  const flexResetLabel = orientation === "horizontal" ? (0, import_i18n.__)("Width") : (0, import_i18n.__)("Height");
  const [availableUnits] = (0, import_use_settings.useSettings)("spacing.units");
  const units = (0, import_components.__experimentalUseCustomUnits)({
    availableUnits: availableUnits || [
      "%",
      "px",
      "em",
      "rem",
      "vh",
      "vw"
    ]
  });
  const resetFlex = () => {
    onChange({
      selfStretch: void 0,
      flexSize: void 0
    });
  };
  (0, import_element.useEffect)(() => {
    if (isFlexSizeValue(selfStretch) && !flexSize) {
      onChange({
        ...childLayout,
        selfStretch: FLEX_CHILD_LAYOUT_VALUES.fit
      });
    }
  }, []);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    import_components.__experimentalVStack,
    {
      as: import_components.__experimentalToolsPanelItem,
      spacing: 2,
      hasValue: hasFlexValue,
      label: flexResetLabel,
      onDeselect: resetFlex,
      isShownByDefault,
      panelId,
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
          import_components.__experimentalToggleGroupControl,
          {
            size: "__unstable-large",
            label: childLayoutOrientation(parentLayout),
            value: flexControlValue,
            help: helpText(flexControlValue, parentLayout),
            onChange: (value) => {
              const newFlexSize = isFlexSizeValue(value) ? flexSize : null;
              onChange({
                selfStretch: value,
                flexSize: newFlexSize
              });
            },
            isBlock: true,
            children: [
              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                import_components.__experimentalToggleGroupControlOption,
                {
                  value: FLEX_CHILD_LAYOUT_VALUES.fit,
                  label: (0, import_i18n._x)(
                    "Fit",
                    "Intrinsic block width in flex layout"
                  )
                },
                FLEX_CHILD_LAYOUT_VALUES.fit
              ),
              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                import_components.__experimentalToggleGroupControlOption,
                {
                  value: FLEX_CHILD_LAYOUT_VALUES.grow,
                  label: (0, import_i18n._x)(
                    "Grow",
                    "Block with expanding width in flex layout"
                  )
                },
                FLEX_CHILD_LAYOUT_VALUES.grow
              ),
              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                import_components.__experimentalToggleGroupControlOption,
                {
                  value: FLEX_CHILD_LAYOUT_VALUES.max,
                  label: maxSizeLabel(parentLayout)
                },
                FLEX_CHILD_LAYOUT_VALUES.max
              ),
              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                import_components.__experimentalToggleGroupControlOption,
                {
                  value: FLEX_CHILD_LAYOUT_VALUES.fixed,
                  label: (0, import_i18n._x)(
                    "Fixed",
                    "Block with fixed width in flex layout"
                  )
                },
                FLEX_CHILD_LAYOUT_VALUES.fixed
              )
            ]
          }
        ),
        hasFlexSizeValue && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.__experimentalUnitControl,
          {
            size: "__unstable-large",
            units,
            onChange: (value) => {
              onChange({
                selfStretch: flexControlValue,
                flexSize: value
              });
            },
            value: flexSize,
            min: 0,
            label: flexResetLabel,
            hideLabelFromVision: true
          }
        )
      ]
    }
  );
}
function childLayoutOrientation(parentLayout) {
  const { orientation = "horizontal" } = parentLayout ?? {};
  return orientation === "horizontal" ? (0, import_i18n.__)("Width") : (0, import_i18n.__)("Height");
}
function GridControls({
  childLayout,
  onChange,
  parentLayout,
  isShownByDefault,
  panelId,
  showGridSpanDefaults
}) {
  const { columnStart, rowStart, columnSpan, rowSpan } = childLayout;
  const { columnCount, rowCount } = parentLayout ?? {};
  const rootClientId = (0, import_data.useSelect)(
    (select) => select(import_store.store).getBlockRootClientId(panelId)
  );
  const { moveBlocksToPosition, __unstableMarkNextChangeAsNotPersistent } = (0, import_data.useDispatch)(import_store.store);
  const getNumberOfBlocksBeforeCell = (0, import_use_get_number_of_blocks_before_cell.useGetNumberOfBlocksBeforeCell)(
    rootClientId,
    columnCount || 3
  );
  const hasStartValue = () => !!columnStart || !!rowStart;
  const hasSpanValue = () => !!columnSpan || !!rowSpan;
  const resetGridStarts = () => {
    onChange({
      columnStart: void 0,
      rowStart: void 0
    });
  };
  const resetGridSpans = () => {
    onChange({
      columnSpan: void 0,
      rowSpan: void 0
    });
  };
  const maxColumnSpan = columnCount ? columnCount - (columnStart ?? 1) + 1 : void 0;
  const maxRowSpan = window.__experimentalEnableGridInteractivity && rowCount ? rowCount - (rowStart ?? 1) + 1 : void 0;
  const columnSpanValue = columnSpan ?? (showGridSpanDefaults ? 1 : void 0);
  const rowSpanValue = rowSpan ?? (showGridSpanDefaults ? 1 : void 0);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
      import_components.Flex,
      {
        as: import_components.__experimentalToolsPanelItem,
        hasValue: hasSpanValue,
        label: (0, import_i18n.__)("Grid span"),
        onDeselect: resetGridSpans,
        isShownByDefault,
        panelId,
        children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { style: { width: "50%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            import_components.__experimentalInputControl,
            {
              size: "__unstable-large",
              label: (0, import_i18n.__)("Column span"),
              type: "number",
              onChange: (value) => {
                const newColumnSpan = value === "" ? 1 : parseInt(value, 10);
                const constrainedValue = maxColumnSpan ? Math.min(newColumnSpan, maxColumnSpan) : newColumnSpan;
                onChange({
                  columnStart,
                  rowStart,
                  rowSpan,
                  columnSpan: constrainedValue
                });
              },
              value: columnSpanValue,
              min: 1,
              max: maxColumnSpan
            }
          ) }),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { style: { width: "50%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            import_components.__experimentalInputControl,
            {
              size: "__unstable-large",
              label: (0, import_i18n.__)("Row span"),
              type: "number",
              onChange: (value) => {
                const newRowSpan = value === "" ? 1 : parseInt(value, 10);
                const constrainedValue = maxRowSpan ? Math.min(newRowSpan, maxRowSpan) : newRowSpan;
                onChange({
                  columnStart,
                  rowStart,
                  columnSpan,
                  rowSpan: constrainedValue
                });
              },
              value: rowSpanValue,
              min: 1,
              max: maxRowSpan
            }
          ) })
        ]
      }
    ),
    window.__experimentalEnableGridInteractivity && // Use Flex with an explicit width on the FlexItem instead of HStack to
    // work around an issue in webkit where inputs with a max attribute are
    // sized incorrectly.
    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
      import_components.Flex,
      {
        as: import_components.__experimentalToolsPanelItem,
        hasValue: hasStartValue,
        label: (0, import_i18n.__)("Grid placement"),
        onDeselect: resetGridStarts,
        isShownByDefault: false,
        panelId,
        children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { style: { width: "50%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            import_components.__experimentalInputControl,
            {
              size: "__unstable-large",
              label: (0, import_i18n.__)("Column"),
              type: "number",
              onChange: (value) => {
                const newColumnStart = value === "" ? 1 : parseInt(value, 10);
                onChange({
                  columnStart: newColumnStart,
                  rowStart,
                  columnSpan,
                  rowSpan
                });
                __unstableMarkNextChangeAsNotPersistent();
                moveBlocksToPosition(
                  [panelId],
                  rootClientId,
                  rootClientId,
                  getNumberOfBlocksBeforeCell(
                    newColumnStart,
                    rowStart
                  )
                );
              },
              value: columnStart ?? 1,
              min: 1,
              max: columnCount ? columnCount - (columnSpan ?? 1) + 1 : void 0
            }
          ) }),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { style: { width: "50%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            import_components.__experimentalInputControl,
            {
              size: "__unstable-large",
              label: (0, import_i18n.__)("Row"),
              type: "number",
              onChange: (value) => {
                const newRowStart = value === "" ? 1 : parseInt(value, 10);
                onChange({
                  columnStart,
                  rowStart: newRowStart,
                  columnSpan,
                  rowSpan
                });
                __unstableMarkNextChangeAsNotPersistent();
                moveBlocksToPosition(
                  [panelId],
                  rootClientId,
                  rootClientId,
                  getNumberOfBlocksBeforeCell(
                    columnStart,
                    newRowStart
                  )
                );
              },
              value: rowStart ?? 1,
              min: 1,
              max: rowCount ? rowCount - (rowSpan ?? 1) + 1 : void 0
            }
          ) })
        ]
      }
    )
  ] });
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  childLayoutOrientation
});
//# sourceMappingURL=index.cjs.map
