@wordpress/components 31.0.1-next.8fd3f8831.0 → 32.0.0

package/build-module/tools-panel/tools-panel/index.mjs

@@ -0,0 +1,8 @@
+// packages/components/src/tools-panel/tools-panel/index.ts
+import { default as default2 } from "./component.mjs";
+import { useToolsPanel } from "./hook.mjs";
+export {
+  default2 as default,
+  useToolsPanel
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/tools-panel/tools-panel-header/component.mjs

@@ -0,0 +1,183 @@
+// packages/components/src/tools-panel/tools-panel-header/component.tsx
+import { speak } from "@wordpress/a11y";
+import { check, moreVertical, plus } from "@wordpress/icons";
+import { __, _x, sprintf } from "@wordpress/i18n";
+import DropdownMenu from "../../dropdown-menu/index.mjs";
+import MenuGroup from "../../menu-group/index.mjs";
+import MenuItem from "../../menu-item/index.mjs";
+import { HStack } from "../../h-stack/index.mjs";
+import { Heading } from "../../heading/index.mjs";
+import { useToolsPanelHeader } from "./hook.mjs";
+import { contextConnect } from "../../context/index.mjs";
+import { ResetLabel } from "../styles.mjs";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var DefaultControlsGroup = ({
+  itemClassName,
+  items,
+  toggleItem
+}) => {
+  if (!items.length) {
+    return null;
+  }
+  const resetSuffix = /* @__PURE__ */ _jsx(ResetLabel, {
+    "aria-hidden": true,
+    children: __("Reset")
+  });
+  return /* @__PURE__ */ _jsx(_Fragment, {
+    children: items.map(([label, hasValue]) => {
+      if (hasValue) {
+        return /* @__PURE__ */ _jsx(MenuItem, {
+          className: itemClassName,
+          role: "menuitem",
+          label: sprintf(
+            // translators: %s: The name of the control being reset e.g. "Padding".
+            __("Reset %s"),
+            label
+          ),
+          onClick: () => {
+            toggleItem(label);
+            speak(sprintf(
+              // translators: %s: The name of the control being reset e.g. "Padding".
+              __("%s reset to default"),
+              label
+            ), "assertive");
+          },
+          suffix: resetSuffix,
+          children: label
+        }, label);
+      }
+      return /* @__PURE__ */ _jsx(MenuItem, {
+        icon: check,
+        className: itemClassName,
+        role: "menuitemcheckbox",
+        isSelected: true,
+        "aria-disabled": true,
+        children: label
+      }, label);
+    })
+  });
+};
+var OptionalControlsGroup = ({
+  items,
+  toggleItem
+}) => {
+  if (!items.length) {
+    return null;
+  }
+  return /* @__PURE__ */ _jsx(_Fragment, {
+    children: items.map(([label, isSelected]) => {
+      const itemLabel = isSelected ? sprintf(
+        // translators: %s: The name of the control being hidden and reset e.g. "Padding".
+        __("Hide and reset %s"),
+        label
+      ) : sprintf(
+        // translators: %s: The name of the control to display e.g. "Padding".
+        _x("Show %s", "input control"),
+        label
+      );
+      return /* @__PURE__ */ _jsx(MenuItem, {
+        icon: isSelected ? check : null,
+        isSelected,
+        label: itemLabel,
+        onClick: () => {
+          if (isSelected) {
+            speak(sprintf(
+              // translators: %s: The name of the control being reset e.g. "Padding".
+              __("%s hidden and reset to default"),
+              label
+            ), "assertive");
+          } else {
+            speak(sprintf(
+              // translators: %s: The name of the control being reset e.g. "Padding".
+              __("%s is now visible"),
+              label
+            ), "assertive");
+          }
+          toggleItem(label);
+        },
+        role: "menuitemcheckbox",
+        children: label
+      }, label);
+    })
+  });
+};
+var ToolsPanelHeader = (props, forwardedRef) => {
+  const {
+    areAllOptionalControlsHidden,
+    defaultControlsItemClassName,
+    dropdownMenuClassName,
+    hasMenuItems,
+    headingClassName,
+    headingLevel = 2,
+    label: labelText,
+    menuItems,
+    resetAll,
+    toggleItem,
+    dropdownMenuProps,
+    ...headerProps
+  } = useToolsPanelHeader(props);
+  if (!labelText) {
+    return null;
+  }
+  const defaultItems = Object.entries(menuItems?.default || {});
+  const optionalItems = Object.entries(menuItems?.optional || {});
+  const dropDownMenuIcon = areAllOptionalControlsHidden ? plus : moreVertical;
+  const dropDownMenuLabelText = sprintf(
+    // translators: %s: The name of the tool e.g. "Color" or "Typography".
+    _x("%s options", "Button label to reveal tool panel options"),
+    labelText
+  );
+  const dropdownMenuDescriptionText = areAllOptionalControlsHidden ? __("All options are currently hidden") : void 0;
+  const canResetAll = [...defaultItems, ...optionalItems].some(([, isSelected]) => isSelected);
+  return /* @__PURE__ */ _jsxs(HStack, {
+    ...headerProps,
+    ref: forwardedRef,
+    children: [/* @__PURE__ */ _jsx(Heading, {
+      level: headingLevel,
+      className: headingClassName,
+      children: labelText
+    }), hasMenuItems && /* @__PURE__ */ _jsx(DropdownMenu, {
+      ...dropdownMenuProps,
+      icon: dropDownMenuIcon,
+      label: dropDownMenuLabelText,
+      menuProps: {
+        className: dropdownMenuClassName
+      },
+      toggleProps: {
+        size: "small",
+        description: dropdownMenuDescriptionText
+      },
+      children: () => /* @__PURE__ */ _jsxs(_Fragment, {
+        children: [/* @__PURE__ */ _jsxs(MenuGroup, {
+          label: labelText,
+          children: [/* @__PURE__ */ _jsx(DefaultControlsGroup, {
+            items: defaultItems,
+            toggleItem,
+            itemClassName: defaultControlsItemClassName
+          }), /* @__PURE__ */ _jsx(OptionalControlsGroup, {
+            items: optionalItems,
+            toggleItem
+          })]
+        }), /* @__PURE__ */ _jsx(MenuGroup, {
+          children: /* @__PURE__ */ _jsx(MenuItem, {
+            "aria-disabled": !canResetAll,
+            variant: "tertiary",
+            onClick: () => {
+              if (canResetAll) {
+                resetAll();
+                speak(__("All options reset"), "assertive");
+              }
+            },
+            children: __("Reset all")
+          })
+        })]
+      })
+    })]
+  });
+};
+var ConnectedToolsPanelHeader = contextConnect(ToolsPanelHeader, "ToolsPanelHeader");
+var component_default = ConnectedToolsPanelHeader;
+export {
+  component_default as default
+};
+//# sourceMappingURL=component.mjs.map

package/build-module/tools-panel/tools-panel-header/hook.mjs

@@ -0,0 +1,46 @@
+// packages/components/src/tools-panel/tools-panel-header/hook.ts
+import { useMemo } from "@wordpress/element";
+import * as styles from "../styles.mjs";
+import { useToolsPanelContext } from "../context.mjs";
+import { useContextSystem } from "../../context/index.mjs";
+import { useCx } from "../../utils/hooks/use-cx.mjs";
+function useToolsPanelHeader(props) {
+  const {
+    className,
+    headingLevel = 2,
+    ...otherProps
+  } = useContextSystem(props, "ToolsPanelHeader");
+  const cx = useCx();
+  const classes = useMemo(() => {
+    return cx(styles.ToolsPanelHeader, className);
+  }, [className, cx]);
+  const dropdownMenuClassName = useMemo(() => {
+    return cx(styles.DropdownMenu);
+  }, [cx]);
+  const headingClassName = useMemo(() => {
+    return cx(styles.ToolsPanelHeading);
+  }, [cx]);
+  const defaultControlsItemClassName = useMemo(() => {
+    return cx(styles.DefaultControlsItem);
+  }, [cx]);
+  const {
+    menuItems,
+    hasMenuItems,
+    areAllOptionalControlsHidden
+  } = useToolsPanelContext();
+  return {
+    ...otherProps,
+    areAllOptionalControlsHidden,
+    defaultControlsItemClassName,
+    dropdownMenuClassName,
+    hasMenuItems,
+    headingClassName,
+    headingLevel,
+    menuItems,
+    className: classes
+  };
+}
+export {
+  useToolsPanelHeader
+};
+//# sourceMappingURL=hook.mjs.map

package/build-module/tools-panel/tools-panel-header/index.mjs

@@ -0,0 +1,6 @@
+// packages/components/src/tools-panel/tools-panel-header/index.ts
+import { default as default2 } from "./component.mjs";
+export {
+  default2 as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/tools-panel/tools-panel-item/component.mjs

@@ -0,0 +1,31 @@
+// packages/components/src/tools-panel/tools-panel-item/component.tsx
+import { useToolsPanelItem } from "./hook.mjs";
+import { View } from "../../view/index.mjs";
+import { contextConnect } from "../../context/index.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+var UnconnectedToolsPanelItem = (props, forwardedRef) => {
+  const {
+    children,
+    isShown,
+    shouldRenderPlaceholder,
+    ...toolsPanelItemProps
+  } = useToolsPanelItem(props);
+  if (!isShown) {
+    return shouldRenderPlaceholder ? /* @__PURE__ */ _jsx(View, {
+      ...toolsPanelItemProps,
+      ref: forwardedRef
+    }) : null;
+  }
+  return /* @__PURE__ */ _jsx(View, {
+    ...toolsPanelItemProps,
+    ref: forwardedRef,
+    children
+  });
+};
+var ToolsPanelItem = contextConnect(UnconnectedToolsPanelItem, "ToolsPanelItem");
+var component_default = ToolsPanelItem;
+export {
+  ToolsPanelItem,
+  component_default as default
+};
+//# sourceMappingURL=component.mjs.map

package/build-module/tools-panel/tools-panel-item/hook.mjs

@@ -0,0 +1,106 @@
+// packages/components/src/tools-panel/tools-panel-item/hook.ts
+import { usePrevious } from "@wordpress/compose";
+import { useCallback, useEffect, useLayoutEffect, useMemo } from "@wordpress/element";
+import * as styles from "../styles.mjs";
+import { useToolsPanelContext } from "../context.mjs";
+import { useContextSystem } from "../../context/index.mjs";
+import { useCx } from "../../utils/hooks/use-cx.mjs";
+var noop = () => {
+};
+function useToolsPanelItem(props) {
+  const {
+    className,
+    hasValue,
+    isShownByDefault = false,
+    label,
+    panelId,
+    resetAllFilter = noop,
+    onDeselect,
+    onSelect,
+    ...otherProps
+  } = useContextSystem(props, "ToolsPanelItem");
+  const {
+    panelId: currentPanelId,
+    menuItems,
+    registerResetAllFilter,
+    deregisterResetAllFilter,
+    registerPanelItem,
+    deregisterPanelItem,
+    flagItemCustomization,
+    isResetting,
+    shouldRenderPlaceholderItems: shouldRenderPlaceholder,
+    firstDisplayedItem,
+    lastDisplayedItem,
+    __experimentalFirstVisibleItemClass,
+    __experimentalLastVisibleItemClass
+  } = useToolsPanelContext();
+  const hasValueCallback = useCallback(hasValue, [panelId]);
+  const resetAllFilterCallback = useCallback(resetAllFilter, [panelId]);
+  const previousPanelId = usePrevious(currentPanelId);
+  const hasMatchingPanel = currentPanelId === panelId || currentPanelId === null;
+  useLayoutEffect(() => {
+    if (hasMatchingPanel && previousPanelId !== null) {
+      registerPanelItem({
+        hasValue: hasValueCallback,
+        isShownByDefault,
+        label,
+        panelId
+      });
+    }
+    return () => {
+      if (previousPanelId === null && !!currentPanelId || currentPanelId === panelId) {
+        deregisterPanelItem(label);
+      }
+    };
+  }, [currentPanelId, hasMatchingPanel, isShownByDefault, label, hasValueCallback, panelId, previousPanelId, registerPanelItem, deregisterPanelItem]);
+  useEffect(() => {
+    if (hasMatchingPanel) {
+      registerResetAllFilter(resetAllFilterCallback);
+    }
+    return () => {
+      if (hasMatchingPanel) {
+        deregisterResetAllFilter(resetAllFilterCallback);
+      }
+    };
+  }, [registerResetAllFilter, deregisterResetAllFilter, resetAllFilterCallback, hasMatchingPanel]);
+  const menuGroup = isShownByDefault ? "default" : "optional";
+  const isMenuItemChecked = menuItems?.[menuGroup]?.[label];
+  const wasMenuItemChecked = usePrevious(isMenuItemChecked);
+  const isRegistered = menuItems?.[menuGroup]?.[label] !== void 0;
+  const isValueSet = hasValue();
+  useEffect(() => {
+    if (!isShownByDefault && !isValueSet) {
+      return;
+    }
+    flagItemCustomization(isValueSet, label, menuGroup);
+  }, [isValueSet, menuGroup, label, flagItemCustomization, isShownByDefault]);
+  useEffect(() => {
+    if (!isRegistered || isResetting || !hasMatchingPanel) {
+      return;
+    }
+    if (isMenuItemChecked && !isValueSet && !wasMenuItemChecked) {
+      onSelect?.();
+    }
+    if (!isMenuItemChecked && isValueSet && wasMenuItemChecked) {
+      onDeselect?.();
+    }
+  }, [hasMatchingPanel, isMenuItemChecked, isRegistered, isResetting, isValueSet, wasMenuItemChecked, onSelect, onDeselect]);
+  const isShown = isShownByDefault ? menuItems?.[menuGroup]?.[label] !== void 0 : isMenuItemChecked;
+  const cx = useCx();
+  const classes = useMemo(() => {
+    const shouldApplyPlaceholderStyles = shouldRenderPlaceholder && !isShown;
+    const firstItemStyle = firstDisplayedItem === label && __experimentalFirstVisibleItemClass;
+    const lastItemStyle = lastDisplayedItem === label && __experimentalLastVisibleItemClass;
+    return cx(styles.ToolsPanelItem, shouldApplyPlaceholderStyles && styles.ToolsPanelItemPlaceholder, !shouldApplyPlaceholderStyles && className, firstItemStyle, lastItemStyle);
+  }, [isShown, shouldRenderPlaceholder, className, cx, firstDisplayedItem, lastDisplayedItem, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass, label]);
+  return {
+    ...otherProps,
+    isShown,
+    shouldRenderPlaceholder,
+    className: classes
+  };
+}
+export {
+  useToolsPanelItem
+};
+//# sourceMappingURL=hook.mjs.map

package/build-module/tools-panel/tools-panel-item/index.mjs

@@ -0,0 +1,8 @@
+// packages/components/src/tools-panel/tools-panel-item/index.ts
+import { default as default2 } from "./component.mjs";
+import { useToolsPanelItem } from "./hook.mjs";
+export {
+  default2 as default,
+  useToolsPanelItem
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/tools-panel/types.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=types.mjs.map

package/build-module/tooltip/index.mjs

@@ -0,0 +1,98 @@
+// packages/components/src/tooltip/index.tsx
+import * as Ariakit from "@ariakit/react";
+import clsx from "clsx";
+import { useInstanceId } from "@wordpress/compose";
+import { Children, useContext, createContext, forwardRef, cloneElement } from "@wordpress/element";
+import deprecated from "@wordpress/deprecated";
+import Shortcut from "../shortcut/index.mjs";
+import { positionToPlacement } from "../popover/utils.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var TooltipInternalContext = createContext({
+  isNestedInTooltip: false
+});
+TooltipInternalContext.displayName = "TooltipInternalContext";
+var TOOLTIP_DELAY = 700;
+var CONTEXT_VALUE = {
+  isNestedInTooltip: true
+};
+function UnforwardedTooltip(props, ref) {
+  const {
+    children,
+    className,
+    delay = TOOLTIP_DELAY,
+    hideOnClick = true,
+    placement,
+    position,
+    shortcut,
+    text,
+    ...restProps
+  } = props;
+  const {
+    isNestedInTooltip
+  } = useContext(TooltipInternalContext);
+  const baseId = useInstanceId(Tooltip2, "tooltip");
+  const describedById = text || shortcut ? baseId : void 0;
+  const isOnlyChild = Children.count(children) === 1;
+  if (!isOnlyChild) {
+    if ("development" === process.env.NODE_ENV) {
+      console.error("wp-components.Tooltip should be called with only a single child element.");
+    }
+  }
+  let computedPlacement;
+  if (placement !== void 0) {
+    computedPlacement = placement;
+  } else if (position !== void 0) {
+    computedPlacement = positionToPlacement(position);
+    deprecated("`position` prop in wp.components.tooltip", {
+      since: "6.4",
+      alternative: "`placement` prop"
+    });
+  }
+  computedPlacement = computedPlacement || "bottom";
+  const tooltipStore = Ariakit.useTooltipStore({
+    placement: computedPlacement,
+    showTimeout: delay
+  });
+  const mounted = Ariakit.useStoreState(tooltipStore, "mounted");
+  if (isNestedInTooltip) {
+    return isOnlyChild ? /* @__PURE__ */ _jsx(Ariakit.Role, {
+      ...restProps,
+      render: children
+    }) : children;
+  }
+  function addDescribedById(element) {
+    return describedById && mounted && element.props["aria-describedby"] === void 0 && element.props["aria-label"] !== text ? cloneElement(element, {
+      "aria-describedby": describedById
+    }) : element;
+  }
+  return /* @__PURE__ */ _jsxs(TooltipInternalContext.Provider, {
+    value: CONTEXT_VALUE,
+    children: [/* @__PURE__ */ _jsx(Ariakit.TooltipAnchor, {
+      onClick: hideOnClick ? tooltipStore.hide : void 0,
+      store: tooltipStore,
+      render: isOnlyChild ? addDescribedById(children) : void 0,
+      ref,
+      children: isOnlyChild ? void 0 : children
+    }), isOnlyChild && (text || shortcut) && /* @__PURE__ */ _jsxs(Ariakit.Tooltip, {
+      ...restProps,
+      className: clsx("components-tooltip", className),
+      unmountOnHide: true,
+      gutter: 4,
+      id: describedById,
+      overflowPadding: 0.5,
+      store: tooltipStore,
+      children: [text, shortcut && /* @__PURE__ */ _jsx(Shortcut, {
+        className: text ? "components-tooltip__shortcut" : "",
+        shortcut
+      })]
+    })]
+  });
+}
+var Tooltip2 = forwardRef(UnforwardedTooltip);
+var tooltip_default = Tooltip2;
+export {
+  TOOLTIP_DELAY,
+  Tooltip2 as Tooltip,
+  tooltip_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/tooltip/types.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=types.mjs.map

package/build-module/tree-grid/cell.mjs

@@ -0,0 +1,30 @@
+// packages/components/src/tree-grid/cell.tsx
+import { forwardRef } from "@wordpress/element";
+import TreeGridItem from "./item.mjs";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+function UnforwardedTreeGridCell({
+  children,
+  withoutGridItem = false,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ _jsx("td", {
+    ...props,
+    role: "gridcell",
+    children: withoutGridItem ? /* @__PURE__ */ _jsx(_Fragment, {
+      children: typeof children === "function" ? children({
+        ...props,
+        ref
+      }) : children
+    }) : /* @__PURE__ */ _jsx(TreeGridItem, {
+      ref,
+      children
+    })
+  });
+}
+var TreeGridCell = forwardRef(UnforwardedTreeGridCell);
+var cell_default = TreeGridCell;
+export {
+  TreeGridCell,
+  cell_default as default
+};
+//# sourceMappingURL=cell.mjs.map