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

package/build-module/index.mjs

@@ -0,0 +1,350 @@
+// packages/components/src/index.ts
+import { SVG, Path, Circle, Polygon, Rect, G, Line, HorizontalRule, BlockQuotation } from "@wordpress/primitives";
+import {
+  default as default2,
+  default as default3
+} from "./alignment-matrix-control/index.mjs";
+import { default as default4, getAnimateClassName } from "./animate/index.mjs";
+import { __unstableMotion, __unstableAnimatePresence } from "./animation/index.mjs";
+import { default as default5 } from "./angle-picker-control/index.mjs";
+import { default as default6, useAutocompleteProps } from "./autocomplete/index.mjs";
+import { default as default7, useBaseControlProps } from "./base-control/index.mjs";
+import {
+  BorderBoxControl,
+  BorderBoxControl as BorderBoxControl2,
+  hasSplitBorders,
+  isDefinedBorder,
+  isEmptyBorder
+} from "./border-box-control/index.mjs";
+import {
+  BorderControl,
+  BorderControl as BorderControl2
+} from "./border-control/index.mjs";
+import {
+  default as default8,
+  default as default9,
+  applyValueToSides
+} from "./box-control/index.mjs";
+import { default as default10 } from "./button/index.mjs";
+import { default as default11 } from "./button-group/index.mjs";
+import { Card, CardBody, CardDivider, CardFooter, CardHeader, CardMedia } from "./card/index.mjs";
+import { default as default12 } from "./checkbox-control/index.mjs";
+import { default as default13 } from "./clipboard-button/index.mjs";
+import { default as default14 } from "./palette-edit/index.mjs";
+import { default as default15 } from "./color-indicator/index.mjs";
+import { default as default16 } from "./color-palette/index.mjs";
+import { ColorPicker } from "./color-picker/index.mjs";
+import { default as default17 } from "./combobox-control/index.mjs";
+import { Composite, CompositeGroup, CompositeItem, useCompositeState } from "./composite/legacy/index.mjs";
+import { Composite as Composite2 } from "./composite/index.mjs";
+import { ConfirmDialog } from "./confirm-dialog/index.mjs";
+import { default as default18 } from "./custom-select-control/index.mjs";
+import { default as default19 } from "./dashicon/index.mjs";
+import { default as default20, DatePicker, TimePicker } from "./date-time/index.mjs";
+import { default as default21 } from "./disabled/index.mjs";
+import { DisclosureContent } from "./disclosure/index.mjs";
+import { Divider } from "./divider/index.mjs";
+import { default as default22 } from "./draggable/index.mjs";
+import { default as default23 } from "./drop-zone/index.mjs";
+import { default as default24 } from "./drop-zone/provider.mjs";
+import { default as default25 } from "./dropdown/index.mjs";
+import { default as default26 } from "./dropdown/dropdown-content-wrapper.mjs";
+import { default as default27 } from "./dropdown-menu/index.mjs";
+import { DuotoneSwatch, DuotonePicker } from "./duotone-picker/index.mjs";
+import { Elevation } from "./elevation/index.mjs";
+import { default as default28 } from "./external-link/index.mjs";
+import { Flex, FlexBlock, FlexItem } from "./flex/index.mjs";
+import { default as default29 } from "./focal-point-picker/index.mjs";
+import { default as default30 } from "./focusable-iframe/index.mjs";
+import { default as default31 } from "./font-size-picker/index.mjs";
+import { default as default32 } from "./form-file-upload/index.mjs";
+import { default as default33 } from "./form-toggle/index.mjs";
+import { default as default34 } from "./form-token-field/index.mjs";
+import { default as default35 } from "./gradient-picker/index.mjs";
+import { default as default36 } from "./custom-gradient-picker/index.mjs";
+import { Grid } from "./grid/index.mjs";
+import { default as default37 } from "./guide/index.mjs";
+import { default as default38 } from "./guide/page.mjs";
+import { Heading } from "./heading/index.mjs";
+import { HStack } from "./h-stack/index.mjs";
+import { default as default39 } from "./icon/index.mjs";
+import { default as default40 } from "./button/deprecated.mjs";
+import { ItemGroup, Item } from "./item-group/index.mjs";
+import { default as default41 } from "./input-control/index.mjs";
+import { default as default42 } from "./input-control/input-prefix-wrapper.mjs";
+import { default as default43 } from "./input-control/input-suffix-wrapper.mjs";
+import { default as default44 } from "./keyboard-shortcuts/index.mjs";
+import { default as default45 } from "./menu-group/index.mjs";
+import { default as default46 } from "./menu-item/index.mjs";
+import { default as default47 } from "./menu-items-choice/index.mjs";
+import { default as default48 } from "./modal/index.mjs";
+import { default as default49 } from "./scroll-lock/index.mjs";
+import { NavigableMenu, TabbableContainer } from "./navigable-container/index.mjs";
+import { default as default50 } from "./navigation/index.mjs";
+import { default as default51 } from "./navigation/back-button/index.mjs";
+import { default as default52 } from "./navigation/group/index.mjs";
+import { default as default53 } from "./navigation/item/index.mjs";
+import { default as default54 } from "./navigation/menu/index.mjs";
+import {
+  NavigatorProvider,
+  NavigatorScreen,
+  NavigatorButton,
+  NavigatorBackButton,
+  NavigatorToParentButton
+} from "./navigator/legacy.mjs";
+import {
+  Navigator,
+  useNavigator,
+  useNavigator as useNavigator2
+} from "./navigator/index.mjs";
+import { default as default55 } from "./notice/index.mjs";
+import { default as default56 } from "./number-control/index.mjs";
+import { default as default57 } from "./notice/list.mjs";
+import { default as default58 } from "./panel/index.mjs";
+import { default as default59 } from "./panel/body.mjs";
+import { default as default60 } from "./panel/header.mjs";
+import { default as default61 } from "./panel/row.mjs";
+import { default as default62 } from "./placeholder/index.mjs";
+import { default as default63 } from "./popover/index.mjs";
+import { default as default64 } from "./progress-bar/index.mjs";
+import { default as default65 } from "./query-controls/index.mjs";
+import { default as default66 } from "./radio-group/radio.mjs";
+import { default as default67 } from "./radio-group/index.mjs";
+import { default as default68 } from "./radio-control/index.mjs";
+import { default as default69 } from "./range-control/index.mjs";
+import { default as default70 } from "./resizable-box/index.mjs";
+import { default as default71 } from "./responsive-wrapper/index.mjs";
+import { default as default72 } from "./sandbox/index.mjs";
+import { default as default73 } from "./search-control/index.mjs";
+import { default as default74 } from "./select-control/index.mjs";
+import { default as default75 } from "./snackbar/index.mjs";
+import { default as default76 } from "./snackbar/list.mjs";
+import { Spacer } from "./spacer/index.mjs";
+import { Scrollable } from "./scrollable/index.mjs";
+import { default as default77 } from "./spinner/index.mjs";
+import { Surface } from "./surface/index.mjs";
+import { default as default78 } from "./tab-panel/index.mjs";
+import { Text } from "./text/index.mjs";
+import { default as default79 } from "./text-control/index.mjs";
+import { default as default80 } from "./textarea-control/index.mjs";
+import { default as default81 } from "./text-highlight/index.mjs";
+import { default as default82 } from "./tip/index.mjs";
+import { default as default83 } from "./toggle-control/index.mjs";
+import { ToggleGroupControl, ToggleGroupControlOption, ToggleGroupControlOptionIcon } from "./toggle-group-control/index.mjs";
+import { Toolbar, ToolbarButton, ToolbarContext, ToolbarDropdownMenu, ToolbarGroup, ToolbarItem } from "./toolbar/index.mjs";
+import { ToolsPanel, ToolsPanelItem, ToolsPanelContext } from "./tools-panel/index.mjs";
+import { default as default84 } from "./tooltip/index.mjs";
+import { default as default85, TreeGridRow, TreeGridCell, TreeGridItem } from "./tree-grid/index.mjs";
+import { default as default86 } from "./tree-select/index.mjs";
+import { Truncate } from "./truncate/index.mjs";
+import { default as default87, useCustomUnits, parseQuantityAndUnitFromRawValue } from "./unit-control/index.mjs";
+import { View } from "./view/index.mjs";
+import { VisuallyHidden } from "./visually-hidden/index.mjs";
+import { VStack } from "./v-stack/index.mjs";
+import { default as default88 } from "./isolated-event-container/index.mjs";
+import { createSlotFill, Slot, Fill, Provider, useSlot, useSlotFills } from "./slot-fill/index.mjs";
+import { default as default89 } from "./style-provider/index.mjs";
+import { ZStack } from "./z-stack/index.mjs";
+import { default as default90, useNavigateRegions } from "./higher-order/navigate-regions/index.mjs";
+import { default as default91 } from "./higher-order/with-constrained-tabbing/index.mjs";
+import { default as default92 } from "./higher-order/with-fallback-styles/index.mjs";
+import { default as default93 } from "./higher-order/with-filters/index.mjs";
+import { default as default94 } from "./higher-order/with-focus-outside/index.mjs";
+import { default as default95, Provider as Provider2 } from "./higher-order/with-focus-return/index.mjs";
+import { default as default96 } from "./higher-order/with-notices/index.mjs";
+import { default as default97 } from "./higher-order/with-spoken-messages/index.mjs";
+import { privateApis } from "./private-apis.mjs";
+export {
+  default3 as AlignmentMatrixControl,
+  default5 as AnglePickerControl,
+  default4 as Animate,
+  default6 as Autocomplete,
+  default7 as BaseControl,
+  BlockQuotation,
+  BorderBoxControl2 as BorderBoxControl,
+  BorderControl2 as BorderControl,
+  default9 as BoxControl,
+  default10 as Button,
+  default11 as ButtonGroup,
+  Card,
+  CardBody,
+  CardDivider,
+  CardFooter,
+  CardHeader,
+  CardMedia,
+  default12 as CheckboxControl,
+  Circle,
+  default13 as ClipboardButton,
+  default15 as ColorIndicator,
+  default16 as ColorPalette,
+  ColorPicker,
+  default17 as ComboboxControl,
+  Composite2 as Composite,
+  default36 as CustomGradientPicker,
+  default18 as CustomSelectControl,
+  default19 as Dashicon,
+  DatePicker,
+  default20 as DateTimePicker,
+  default21 as Disabled,
+  default22 as Draggable,
+  default23 as DropZone,
+  default24 as DropZoneProvider,
+  default25 as Dropdown,
+  default27 as DropdownMenu,
+  DuotonePicker,
+  DuotoneSwatch,
+  default28 as ExternalLink,
+  Fill,
+  Flex,
+  FlexBlock,
+  FlexItem,
+  default29 as FocalPointPicker,
+  Provider2 as FocusReturnProvider,
+  default30 as FocusableIframe,
+  default31 as FontSizePicker,
+  default32 as FormFileUpload,
+  default33 as FormToggle,
+  default34 as FormTokenField,
+  G,
+  default35 as GradientPicker,
+  default37 as Guide,
+  default38 as GuidePage,
+  HorizontalRule,
+  default39 as Icon,
+  default40 as IconButton,
+  default88 as IsolatedEventContainer,
+  default44 as KeyboardShortcuts,
+  Line,
+  default45 as MenuGroup,
+  default46 as MenuItem,
+  default47 as MenuItemsChoice,
+  default48 as Modal,
+  NavigableMenu,
+  Navigator,
+  default55 as Notice,
+  default57 as NoticeList,
+  default58 as Panel,
+  default59 as PanelBody,
+  default60 as PanelHeader,
+  default61 as PanelRow,
+  Path,
+  default62 as Placeholder,
+  Polygon,
+  default63 as Popover,
+  default64 as ProgressBar,
+  default65 as QueryControls,
+  default68 as RadioControl,
+  default69 as RangeControl,
+  Rect,
+  default70 as ResizableBox,
+  default71 as ResponsiveWrapper,
+  SVG,
+  default72 as SandBox,
+  default49 as ScrollLock,
+  default73 as SearchControl,
+  default74 as SelectControl,
+  Slot,
+  Provider as SlotFillProvider,
+  default75 as Snackbar,
+  default76 as SnackbarList,
+  default77 as Spinner,
+  default78 as TabPanel,
+  TabbableContainer,
+  default79 as TextControl,
+  default81 as TextHighlight,
+  default80 as TextareaControl,
+  TimePicker,
+  default82 as Tip,
+  default83 as ToggleControl,
+  Toolbar,
+  ToolbarButton,
+  ToolbarDropdownMenu,
+  ToolbarGroup,
+  ToolbarItem,
+  default84 as Tooltip,
+  default86 as TreeSelect,
+  VisuallyHidden,
+  default2 as __experimentalAlignmentMatrixControl,
+  applyValueToSides as __experimentalApplyValueToSides,
+  BorderBoxControl as __experimentalBorderBoxControl,
+  BorderControl as __experimentalBorderControl,
+  default8 as __experimentalBoxControl,
+  ConfirmDialog as __experimentalConfirmDialog,
+  Divider as __experimentalDivider,
+  default26 as __experimentalDropdownContentWrapper,
+  Elevation as __experimentalElevation,
+  Grid as __experimentalGrid,
+  HStack as __experimentalHStack,
+  hasSplitBorders as __experimentalHasSplitBorders,
+  Heading as __experimentalHeading,
+  default41 as __experimentalInputControl,
+  default42 as __experimentalInputControlPrefixWrapper,
+  default43 as __experimentalInputControlSuffixWrapper,
+  isDefinedBorder as __experimentalIsDefinedBorder,
+  isEmptyBorder as __experimentalIsEmptyBorder,
+  Item as __experimentalItem,
+  ItemGroup as __experimentalItemGroup,
+  default50 as __experimentalNavigation,
+  default51 as __experimentalNavigationBackButton,
+  default52 as __experimentalNavigationGroup,
+  default53 as __experimentalNavigationItem,
+  default54 as __experimentalNavigationMenu,
+  NavigatorBackButton as __experimentalNavigatorBackButton,
+  NavigatorButton as __experimentalNavigatorButton,
+  NavigatorProvider as __experimentalNavigatorProvider,
+  NavigatorScreen as __experimentalNavigatorScreen,
+  NavigatorToParentButton as __experimentalNavigatorToParentButton,
+  default56 as __experimentalNumberControl,
+  default14 as __experimentalPaletteEdit,
+  parseQuantityAndUnitFromRawValue as __experimentalParseQuantityAndUnitFromRawValue,
+  default66 as __experimentalRadio,
+  default67 as __experimentalRadioGroup,
+  Scrollable as __experimentalScrollable,
+  Spacer as __experimentalSpacer,
+  default89 as __experimentalStyleProvider,
+  Surface as __experimentalSurface,
+  Text as __experimentalText,
+  ToggleGroupControl as __experimentalToggleGroupControl,
+  ToggleGroupControlOption as __experimentalToggleGroupControlOption,
+  ToggleGroupControlOptionIcon as __experimentalToggleGroupControlOptionIcon,
+  ToolbarContext as __experimentalToolbarContext,
+  ToolsPanel as __experimentalToolsPanel,
+  ToolsPanelContext as __experimentalToolsPanelContext,
+  ToolsPanelItem as __experimentalToolsPanelItem,
+  default85 as __experimentalTreeGrid,
+  TreeGridCell as __experimentalTreeGridCell,
+  TreeGridItem as __experimentalTreeGridItem,
+  TreeGridRow as __experimentalTreeGridRow,
+  Truncate as __experimentalTruncate,
+  default87 as __experimentalUnitControl,
+  useCustomUnits as __experimentalUseCustomUnits,
+  useNavigator2 as __experimentalUseNavigator,
+  useSlot as __experimentalUseSlot,
+  useSlotFills as __experimentalUseSlotFills,
+  VStack as __experimentalVStack,
+  View as __experimentalView,
+  ZStack as __experimentalZStack,
+  __unstableAnimatePresence,
+  Composite as __unstableComposite,
+  CompositeGroup as __unstableCompositeGroup,
+  CompositeItem as __unstableCompositeItem,
+  DisclosureContent as __unstableDisclosureContent,
+  getAnimateClassName as __unstableGetAnimateClassName,
+  __unstableMotion,
+  useAutocompleteProps as __unstableUseAutocompleteProps,
+  useCompositeState as __unstableUseCompositeState,
+  useNavigateRegions as __unstableUseNavigateRegions,
+  createSlotFill,
+  default90 as navigateRegions,
+  privateApis,
+  useBaseControlProps,
+  useNavigator,
+  default91 as withConstrainedTabbing,
+  default92 as withFallbackStyles,
+  default93 as withFilters,
+  default94 as withFocusOutside,
+  default95 as withFocusReturn,
+  default96 as withNotices,
+  default97 as withSpokenMessages
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/input-control/backdrop.mjs

@@ -0,0 +1,21 @@
+// packages/components/src/input-control/backdrop.tsx
+import { memo } from "@wordpress/element";
+import { BackdropUI } from "./styles/input-control-styles.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+function Backdrop({
+  disabled = false,
+  isBorderless = false
+}) {
+  return /* @__PURE__ */ _jsx(BackdropUI, {
+    "aria-hidden": "true",
+    className: "components-input-control__backdrop",
+    disabled,
+    isBorderless
+  });
+}
+var MemoizedBackdrop = memo(Backdrop);
+var backdrop_default = MemoizedBackdrop;
+export {
+  backdrop_default as default
+};
+//# sourceMappingURL=backdrop.mjs.map

package/build-module/input-control/index.mjs

@@ -0,0 +1,105 @@
+// packages/components/src/input-control/index.tsx
+import clsx from "clsx";
+import { useInstanceId } from "@wordpress/compose";
+import { forwardRef } from "@wordpress/element";
+import InputBase from "./input-base.mjs";
+import InputField from "./input-field.mjs";
+import { space } from "../utils/space.mjs";
+import { useDraft } from "./utils.mjs";
+import BaseControl from "../base-control/index.mjs";
+import { useDeprecated36pxDefaultSizeProp } from "../utils/use-deprecated-props.mjs";
+import { maybeWarnDeprecated36pxSize } from "../utils/deprecated-36px-size.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+var noop = () => {
+};
+function useUniqueId(idProp) {
+  const instanceId = useInstanceId(InputControl);
+  const id = `inspector-input-control-${instanceId}`;
+  return idProp || id;
+}
+function UnforwardedInputControl(props, ref) {
+  const {
+    __next40pxDefaultSize,
+    __shouldNotWarnDeprecated36pxSize,
+    __unstableStateReducer: stateReducer = (state) => state,
+    __unstableInputWidth,
+    className,
+    disabled = false,
+    help,
+    hideLabelFromVision = false,
+    id: idProp,
+    isPressEnterToChange = false,
+    label,
+    labelPosition = "top",
+    onChange = noop,
+    onValidate = noop,
+    onKeyDown = noop,
+    prefix,
+    size = "default",
+    style,
+    suffix,
+    value,
+    ...restProps
+  } = useDeprecated36pxDefaultSizeProp(props);
+  const id = useUniqueId(idProp);
+  const classes = clsx("components-input-control", className);
+  const draftHookProps = useDraft({
+    value,
+    onBlur: restProps.onBlur,
+    onChange
+  });
+  const helpProp = !!help ? {
+    "aria-describedby": `${id}__help`
+  } : {};
+  maybeWarnDeprecated36pxSize({
+    componentName: "InputControl",
+    __next40pxDefaultSize,
+    size,
+    __shouldNotWarnDeprecated36pxSize
+  });
+  return /* @__PURE__ */ _jsx(BaseControl, {
+    className: classes,
+    help,
+    id,
+    children: /* @__PURE__ */ _jsx(InputBase, {
+      __next40pxDefaultSize,
+      __unstableInputWidth,
+      disabled,
+      gap: 3,
+      hideLabelFromVision,
+      id,
+      justify: "left",
+      label,
+      labelPosition,
+      prefix,
+      size,
+      style,
+      suffix,
+      children: /* @__PURE__ */ _jsx(InputField, {
+        ...restProps,
+        ...helpProp,
+        __next40pxDefaultSize,
+        className: "components-input-control__input",
+        disabled,
+        id,
+        isPressEnterToChange,
+        onKeyDown,
+        onValidate,
+        paddingInlineStart: prefix ? space(1) : void 0,
+        paddingInlineEnd: suffix ? space(1) : void 0,
+        ref,
+        size,
+        stateReducer,
+        ...draftHookProps
+      })
+    })
+  });
+}
+var InputControl = forwardRef(UnforwardedInputControl);
+var input_control_default = InputControl;
+export {
+  InputControl,
+  UnforwardedInputControl,
+  input_control_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/input-control/input-base.mjs

@@ -0,0 +1,106 @@
+// packages/components/src/input-control/input-base.tsx
+import { useInstanceId } from "@wordpress/compose";
+import { useMemo } from "@wordpress/element";
+import Backdrop from "./backdrop.mjs";
+import Label from "./label.mjs";
+import { Container, Root, Prefix, Suffix } from "./styles/input-control-styles.mjs";
+import { ContextSystemProvider, contextConnect, useContextSystem } from "../context/index.mjs";
+import { useDeprecated36pxDefaultSizeProp } from "../utils/use-deprecated-props.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function useUniqueId(idProp) {
+  const instanceId = useInstanceId(InputBase);
+  const id = `input-base-control-${instanceId}`;
+  return idProp || id;
+}
+function getUIFlexProps(labelPosition) {
+  const props = {};
+  switch (labelPosition) {
+    case "top":
+      props.direction = "column";
+      props.expanded = false;
+      props.gap = 0;
+      break;
+    case "bottom":
+      props.direction = "column-reverse";
+      props.expanded = false;
+      props.gap = 0;
+      break;
+    case "edge":
+      props.justify = "space-between";
+      break;
+  }
+  return props;
+}
+function InputBase(props, ref) {
+  const {
+    __next40pxDefaultSize,
+    __unstableInputWidth,
+    children,
+    className,
+    disabled = false,
+    hideLabelFromVision = false,
+    labelPosition,
+    id: idProp,
+    isBorderless = false,
+    label,
+    prefix,
+    size = "default",
+    suffix,
+    ...restProps
+  } = useDeprecated36pxDefaultSizeProp(useContextSystem(props, "InputBase"));
+  const id = useUniqueId(idProp);
+  const hideLabel = hideLabelFromVision || !label;
+  const prefixSuffixContextValue = useMemo(() => {
+    return {
+      InputControlPrefixWrapper: {
+        __next40pxDefaultSize,
+        size
+      },
+      InputControlSuffixWrapper: {
+        __next40pxDefaultSize,
+        size
+      }
+    };
+  }, [__next40pxDefaultSize, size]);
+  return (
+    // @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
+    /* @__PURE__ */ _jsxs(Root, {
+      ...restProps,
+      ...getUIFlexProps(labelPosition),
+      className,
+      gap: 2,
+      ref,
+      children: [/* @__PURE__ */ _jsx(Label, {
+        className: "components-input-control__label",
+        hideLabelFromVision,
+        labelPosition,
+        htmlFor: id,
+        children: label
+      }), /* @__PURE__ */ _jsxs(Container, {
+        __unstableInputWidth,
+        className: "components-input-control__container",
+        disabled,
+        hideLabel,
+        labelPosition,
+        children: [/* @__PURE__ */ _jsxs(ContextSystemProvider, {
+          value: prefixSuffixContextValue,
+          children: [prefix && /* @__PURE__ */ _jsx(Prefix, {
+            className: "components-input-control__prefix",
+            children: prefix
+          }), children, suffix && /* @__PURE__ */ _jsx(Suffix, {
+            className: "components-input-control__suffix",
+            children: suffix
+          })]
+        }), /* @__PURE__ */ _jsx(Backdrop, {
+          disabled,
+          isBorderless
+        })]
+      })]
+    })
+  );
+}
+var input_base_default = contextConnect(InputBase, "InputBase");
+export {
+  input_base_default as default
+};
+//# sourceMappingURL=input-base.mjs.map