"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/block-editor/src/hooks/position.js
var position_exports = {};
__export(position_exports, {
  PositionPanelPure: () => PositionPanelPure,
  default: () => position_default,
  getPositionCSS: () => getPositionCSS,
  hasFixedPositionSupport: () => hasFixedPositionSupport,
  hasPositionSupport: () => hasPositionSupport,
  hasPositionValue: () => hasPositionValue,
  hasStickyOrFixedPositionValue: () => hasStickyOrFixedPositionValue,
  hasStickyPositionSupport: () => hasStickyPositionSupport,
  resetPosition: () => resetPosition,
  useIsPositionDisabled: () => useIsPositionDisabled
});
module.exports = __toCommonJS(position_exports);
var import_clsx = __toESM(require("clsx"));
var import_i18n = require("@wordpress/i18n");
var import_blocks = require("@wordpress/blocks");
var import_components = require("@wordpress/components");
var import_compose = require("@wordpress/compose");
var import_data = require("@wordpress/data");
var import_element = require("@wordpress/element");
var import_use_settings = require("../components/use-settings");
var import_inspector_controls = __toESM(require("../components/inspector-controls"));
var import_use_block_display_information = __toESM(require("../components/use-block-display-information"));
var import_utils = require("./utils");
var import_store = require("../store");
var import_jsx_runtime = require("react/jsx-runtime");
var POSITION_SUPPORT_KEY = "position";
var DEFAULT_OPTION = {
  key: "default",
  value: "",
  name: (0, import_i18n.__)("Default")
};
var STICKY_OPTION = {
  key: "sticky",
  value: "sticky",
  name: (0, import_i18n._x)("Sticky", "Name for the value of the CSS position property"),
  hint: (0, import_i18n.__)(
    "The block will stick to the top of the window instead of scrolling."
  )
};
var FIXED_OPTION = {
  key: "fixed",
  value: "fixed",
  name: (0, import_i18n._x)("Fixed", "Name for the value of the CSS position property"),
  hint: (0, import_i18n.__)("The block will not move when the page is scrolled.")
};
var POSITION_SIDES = ["top", "right", "bottom", "left"];
var VALID_POSITION_TYPES = ["sticky", "fixed"];
function getPositionCSS({ selector, style }) {
  let output = "";
  const { type: positionType } = style?.position || {};
  if (!VALID_POSITION_TYPES.includes(positionType)) {
    return output;
  }
  output += `${selector} {`;
  output += `position: ${positionType};`;
  POSITION_SIDES.forEach((side) => {
    if (style?.position?.[side] !== void 0) {
      output += `${side}: ${style.position[side]};`;
    }
  });
  if (positionType === "sticky" || positionType === "fixed") {
    output += `z-index: 10`;
  }
  output += `}`;
  return output;
}
function hasStickyPositionSupport(blockType) {
  const support = (0, import_blocks.getBlockSupport)(blockType, POSITION_SUPPORT_KEY);
  return !!(true === support || support?.sticky);
}
function hasFixedPositionSupport(blockType) {
  const support = (0, import_blocks.getBlockSupport)(blockType, POSITION_SUPPORT_KEY);
  return !!(true === support || support?.fixed);
}
function hasPositionSupport(blockType) {
  const support = (0, import_blocks.getBlockSupport)(blockType, POSITION_SUPPORT_KEY);
  return !!support;
}
function hasPositionValue(props) {
  return props.attributes.style?.position?.type !== void 0;
}
function hasStickyOrFixedPositionValue(attributes) {
  const positionType = attributes?.style?.position?.type;
  return positionType === "sticky" || positionType === "fixed";
}
function resetPosition({ attributes = {}, setAttributes }) {
  const { style = {} } = attributes;
  setAttributes({
    style: (0, import_utils.cleanEmptyObject)({
      ...style,
      position: {
        ...style?.position,
        type: void 0,
        top: void 0,
        right: void 0,
        bottom: void 0,
        left: void 0
      }
    })
  });
}
function useIsPositionDisabled({ name: blockName } = {}) {
  const [allowFixed, allowSticky] = (0, import_use_settings.useSettings)(
    "position.fixed",
    "position.sticky"
  );
  const isDisabled = !allowFixed && !allowSticky;
  return !hasPositionSupport(blockName) || isDisabled;
}
function PositionPanelPure({
  style = {},
  clientId,
  name: blockName,
  setAttributes
}) {
  const allowFixed = hasFixedPositionSupport(blockName);
  const allowSticky = hasStickyPositionSupport(blockName);
  const value = style?.position?.type;
  const { firstParentClientId } = (0, import_data.useSelect)(
    (select) => {
      const { getBlockParents } = select(import_store.store);
      const parents = getBlockParents(clientId);
      return { firstParentClientId: parents[parents.length - 1] };
    },
    [clientId]
  );
  const blockInformation = (0, import_use_block_display_information.default)(firstParentClientId);
  const stickyHelpText = allowSticky && value === STICKY_OPTION.value && blockInformation ? (0, import_i18n.sprintf)(
    /* translators: %s: the name of the parent block. */
    (0, import_i18n.__)(
      "The block will stick to the scrollable area of the parent %s block."
    ),
    blockInformation.title
  ) : null;
  const options = (0, import_element.useMemo)(() => {
    const availableOptions = [DEFAULT_OPTION];
    if (allowSticky || value === STICKY_OPTION.value) {
      availableOptions.push(STICKY_OPTION);
    }
    if (allowFixed || value === FIXED_OPTION.value) {
      availableOptions.push(FIXED_OPTION);
    }
    return availableOptions;
  }, [allowFixed, allowSticky, value]);
  const onChangeType = (next) => {
    const placementValue = "0px";
    const newStyle = {
      ...style,
      position: {
        ...style?.position,
        type: next,
        top: next === "sticky" || next === "fixed" ? placementValue : void 0
      }
    };
    setAttributes({
      style: (0, import_utils.cleanEmptyObject)(newStyle)
    });
  };
  const selectedOption = value ? options.find((option) => option.value === value) || DEFAULT_OPTION : DEFAULT_OPTION;
  return import_element.Platform.select({
    web: options.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_inspector_controls.default, { group: "position", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_components.BaseControl,
      {
        __nextHasNoMarginBottom: true,
        help: stickyHelpText,
        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.CustomSelectControl,
          {
            __next40pxDefaultSize: true,
            label: (0, import_i18n.__)("Position"),
            hideLabelFromVision: true,
            describedBy: (0, import_i18n.sprintf)(
              // translators: %s: Currently selected position.
              (0, import_i18n.__)("Currently selected position: %s"),
              selectedOption.name
            ),
            options,
            value: selectedOption,
            onChange: ({ selectedItem }) => {
              onChangeType(selectedItem.value);
            },
            size: "__unstable-large"
          }
        )
      }
    ) }) : null,
    native: null
  });
}
var position_default = {
  edit: function Edit(props) {
    const isPositionDisabled = useIsPositionDisabled(props);
    if (isPositionDisabled) {
      return null;
    }
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PositionPanelPure, { ...props });
  },
  useBlockProps,
  attributeKeys: ["style"],
  hasSupport(name) {
    return (0, import_blocks.hasBlockSupport)(name, POSITION_SUPPORT_KEY);
  }
};
var POSITION_BLOCK_PROPS_REFERENCE = {};
function useBlockProps({ name, style }) {
  const hasPositionBlockSupport = (0, import_blocks.hasBlockSupport)(
    name,
    POSITION_SUPPORT_KEY
  );
  const isPositionDisabled = useIsPositionDisabled({ name });
  const allowPositionStyles = hasPositionBlockSupport && !isPositionDisabled;
  const id = (0, import_compose.useInstanceId)(POSITION_BLOCK_PROPS_REFERENCE);
  const positionSelector = `.wp-container-${id}.wp-container-${id}`;
  let css;
  if (allowPositionStyles) {
    css = getPositionCSS({
      selector: positionSelector,
      style
    }) || "";
  }
  const className = (0, import_clsx.default)({
    [`wp-container-${id}`]: allowPositionStyles && !!css,
    // Only attach a container class if there is generated CSS to be attached.
    [`is-position-${style?.position?.type}`]: allowPositionStyles && !!css && !!style?.position?.type
  });
  (0, import_utils.useStyleOverride)({ css });
  return { className };
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  PositionPanelPure,
  getPositionCSS,
  hasFixedPositionSupport,
  hasPositionSupport,
  hasPositionValue,
  hasStickyOrFixedPositionValue,
  hasStickyPositionSupport,
  resetPosition,
  useIsPositionDisabled
});
//# sourceMappingURL=position.js.map
