polaris-react-extended 13.10.3

package/build/esm/components/Picker/Picker.js

@@ -0,0 +1,166 @@
+import React, { useState, useRef, useCallback, useMemo, isValidElement, createRef } from 'react';
+import { SearchIcon } from '@shopify/polaris-icons';
+import { escapeRegex } from '../../utilities/string.js';
+import { Activator } from './components/Activator/Activator.js';
+import { SearchField } from './components/SearchField/SearchField.js';
+import { Popover } from '../Popover/Popover.js';
+import { Box } from '../Box/Box.js';
+import { ComboboxTextFieldContext, ComboboxListboxContext, ComboboxListboxOptionContext } from '../../utilities/combobox/context.js';
+import { Icon } from '../Icon/Icon.js';
+import { Listbox } from '../Listbox/Listbox.js';
+
+const FILTER_REGEX = value => new RegExp(value, 'i');
+const QUERY_REGEX = value => new RegExp(`^${escapeRegex(value)}$`, 'i');
+function Picker({
+  activator,
+  allowMultiple,
+  searchField,
+  options = [],
+  willLoadMoreOptions,
+  height,
+  addAction,
+  onScrolledToBottom,
+  onClose,
+  ...listboxProps
+}) {
+  const activatorRef = /*#__PURE__*/createRef();
+  const [activeItems, setActiveItems] = useState([]);
+  const [popoverActive, setPopoverActive] = useState(false);
+  const [activeOptionId, setActiveOptionId] = useState();
+  const [textFieldLabelId, setTextFieldLabelId] = useState();
+  const [listboxId, setListboxId] = useState();
+  const [query, setQuery] = useState('');
+  const filteredOptions = useRef(options);
+  const shouldOpen = !popoverActive;
+  const handleClose = useCallback(() => {
+    setPopoverActive(false);
+    onClose?.();
+    activatorRef.current?.focus();
+  }, [activatorRef, onClose]);
+  const handleOpen = useCallback(() => {
+    setPopoverActive(true);
+    filteredOptions.current = options;
+  }, [options]);
+  const handleFocus = useCallback(() => {
+    if (shouldOpen) handleOpen();
+  }, [shouldOpen, handleOpen]);
+  const handleChange = useCallback(() => {
+    if (shouldOpen) handleOpen();
+  }, [shouldOpen, handleOpen]);
+  const handleBlur = useCallback(() => {
+    if (popoverActive) {
+      handleClose();
+      setQuery('');
+    }
+  }, [popoverActive, handleClose]);
+  const textFieldContextValue = useMemo(() => ({
+    activeOptionId,
+    expanded: popoverActive,
+    listboxId,
+    setTextFieldLabelId,
+    onTextFieldFocus: handleFocus,
+    onTextFieldChange: handleChange,
+    onTextFieldBlur: handleBlur
+  }), [activeOptionId, popoverActive, listboxId, setTextFieldLabelId, handleFocus, handleChange, handleBlur]);
+  const listboxOptionContextValue = useMemo(() => ({
+    allowMultiple
+  }), [allowMultiple]);
+  const listboxContextValue = useMemo(() => ({
+    listboxId,
+    textFieldLabelId,
+    textFieldFocused: popoverActive,
+    willLoadMoreOptions,
+    setActiveOptionId,
+    setListboxId,
+    onKeyToBottom: onScrolledToBottom
+  }), [listboxId, textFieldLabelId, popoverActive, willLoadMoreOptions, setActiveOptionId, setListboxId, onScrolledToBottom]);
+  const updateText = useCallback(value => {
+    setQuery(value);
+    if (value === '') {
+      filteredOptions.current = options;
+      return;
+    }
+    const resultOptions = options?.filter(option => FILTER_REGEX(value).exec(reactChildrenText(option.children)));
+    filteredOptions.current = resultOptions ?? [];
+  }, [options]);
+  const handleSelect = useCallback(selected => {
+    setQuery('');
+    updateText('');
+    listboxProps.onSelect?.(selected);
+    if (!filteredOptions.current.some(option => option.value === selected)) {
+      filteredOptions.current = [...filteredOptions.current, {
+        value: selected,
+        children: selected
+      }];
+    }
+    if (!allowMultiple) {
+      handleClose();
+      setActiveItems([selected]);
+      return;
+    }
+    setActiveItems(selectedOptions => {
+      return activeItems.includes(selected) ? selectedOptions.filter(option => option !== selected) : [...selectedOptions, selected];
+    });
+  }, [updateText, listboxProps, allowMultiple, handleClose, activeItems]);
+  const showList = options.length > 0 || query !== '';
+  const firstSelectedOption = reactChildrenText(options.find(option => option.value === activeItems?.[0])?.children);
+  const queryMatchesExistingOption = options.some(option => {
+    const matcher = QUERY_REGEX(query);
+    return reactChildrenText(option.children).match(matcher);
+  });
+  return /*#__PURE__*/React.createElement(Popover, {
+    activator: /*#__PURE__*/React.createElement(Activator, Object.assign({}, activator, {
+      onClick: handleOpen,
+      selected: firstSelectedOption || '',
+      placeholder: activator.placeholder,
+      ref: activatorRef
+    })),
+    active: popoverActive,
+    autofocusTarget: "none",
+    onClose: handleClose,
+    preferredPosition: "cover",
+    preventFocusOnClose: true
+  }, /*#__PURE__*/React.createElement(Popover.Pane, {
+    onScrolledToBottom: onScrolledToBottom,
+    height: height
+  }, searchField ? /*#__PURE__*/React.createElement(Box, {
+    paddingBlockStart: "200",
+    paddingBlockEnd: "100",
+    paddingInline: "200",
+    borderBlockEndWidth: "025",
+    borderColor: "border",
+    minHeight: showList ? undefined : '58px'
+  }, /*#__PURE__*/React.createElement(ComboboxTextFieldContext.Provider, {
+    value: textFieldContextValue
+  }, /*#__PURE__*/React.createElement(SearchField, Object.assign({}, searchField, {
+    value: query,
+    onChange: value => {
+      updateText(value);
+      searchField.onChange?.(value, searchField.id ?? '');
+    },
+    prefix: /*#__PURE__*/React.createElement(Icon, {
+      source: SearchIcon
+    }),
+    labelHidden: true,
+    focused: popoverActive
+  })))) : null, showList && /*#__PURE__*/React.createElement(ComboboxListboxContext.Provider, {
+    value: listboxContextValue
+  }, /*#__PURE__*/React.createElement(ComboboxListboxOptionContext.Provider, {
+    value: listboxOptionContextValue
+  }, /*#__PURE__*/React.createElement(Box, {
+    paddingBlock: "200"
+  }, /*#__PURE__*/React.createElement(Listbox, Object.assign({}, listboxProps, {
+    onSelect: handleSelect
+  }), filteredOptions.current?.map(option => /*#__PURE__*/React.createElement(Listbox.Option, Object.assign({
+    key: option.value,
+    selected: activeItems.some(item => item === option.value)
+  }, option))), addAction && query !== '' && !queryMatchesExistingOption ? /*#__PURE__*/React.createElement(Listbox.Action, Object.assign({}, addAction, {
+    value: query
+  })) : null))))));
+}
+const reactChildrenText = children => {
+  if (typeof children === 'string') return children;
+  return /*#__PURE__*/isValidElement(children) ? reactChildrenText(children?.props?.children) : '';
+};
+
+export { Picker };

package/build/esm/components/Picker/components/Activator/Activator.css.js

@@ -0,0 +1,6 @@
+var styles = {
+  "Activator": "Polaris-Activator",
+  "disabled": "Polaris-Activator--disabled"
+};
+
+export { styles as default };

package/build/esm/components/Picker/components/Activator/Activator.js

@@ -0,0 +1,42 @@
+import { SelectIcon } from '@shopify/polaris-icons';
+import React, { forwardRef } from 'react';
+import { classNames } from '../../../../utilities/css.js';
+import styles from './Activator.css.js';
+import { BlockStack } from '../../../BlockStack/BlockStack.js';
+import { Text } from '../../../Text/Text.js';
+import { Icon } from '../../../Icon/Icon.js';
+
+const Activator = /*#__PURE__*/forwardRef(({
+  disabled,
+  label,
+  placeholder,
+  selected,
+  onClick
+}, ref) => {
+  return /*#__PURE__*/React.createElement("button", {
+    ref: ref,
+    disabled: disabled,
+    onClick: onClick,
+    className: classNames(styles.Activator, disabled && styles.disabled),
+    type: "button"
+  }, /*#__PURE__*/React.createElement(BlockStack, {
+    as: "span",
+    gap: "100"
+  }, label && /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "bodySm",
+    alignment: "start",
+    tone: "subdued"
+  }, label), (selected !== '' || placeholder) && /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    variant: "bodyMd",
+    alignment: "start",
+    tone: selected ? undefined : 'subdued'
+  }, selected || placeholder)), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
+    tone: "subdued",
+    source: SelectIcon
+  })));
+});
+Activator.displayName = 'Activator';
+
+export { Activator };

package/build/esm/components/Picker/components/SearchField/SearchField.css.js

@@ -0,0 +1,5 @@
+var styles = {
+  "SearchField": "Polaris-SearchField"
+};
+
+export { styles as default };

package/build/esm/components/Picker/components/SearchField/SearchField.js

@@ -0,0 +1,84 @@
+import React, { useId, useMemo, useEffect, useCallback } from 'react';
+import styles from './SearchField.css.js';
+import { useComboboxTextField } from '../../../../utilities/combobox/hooks.js';
+import { labelID, Label } from '../../../Label/Label.js';
+import { InlineStack } from '../../../InlineStack/InlineStack.js';
+import { Text } from '../../../Text/Text.js';
+
+function SearchField({
+  value,
+  id: idProp,
+  type = 'text',
+  onFocus,
+  onBlur,
+  onChange,
+  label,
+  prefix,
+  placeholder,
+  focused
+}) {
+  const inputRef = React.useRef(null);
+  const comboboxTextFieldContext = useComboboxTextField();
+  const {
+    activeOptionId,
+    listboxId,
+    setTextFieldFocused,
+    setTextFieldLabelId,
+    onTextFieldFocus,
+    onTextFieldChange,
+    onTextFieldBlur
+  } = comboboxTextFieldContext;
+  const uniqueId = useId();
+  const textFieldId = useMemo(() => idProp || uniqueId, [uniqueId, idProp]);
+  const labelId = useMemo(() => labelID(idProp || uniqueId), [uniqueId, idProp]);
+  useEffect(() => {
+    if (setTextFieldLabelId) setTextFieldLabelId(labelId);
+  }, [labelId, setTextFieldLabelId]);
+  const handleFocus = useCallback(event => {
+    if (onFocus) onFocus(event);
+    if (onTextFieldFocus) onTextFieldFocus();
+    if (setTextFieldFocused) setTextFieldFocused(true);
+  }, [onFocus, onTextFieldFocus, setTextFieldFocused]);
+  const handleBlur = useCallback(event => {
+    if (onBlur) onBlur(event);
+    if (onTextFieldBlur) onTextFieldBlur();
+    if (setTextFieldFocused) setTextFieldFocused(false);
+  }, [onBlur, onTextFieldBlur, setTextFieldFocused]);
+  const handleChange = useCallback((value, id) => {
+    if (onChange) onChange(value, id);
+    if (onTextFieldChange) onTextFieldChange(value);
+  }, [onChange, onTextFieldChange]);
+  if (focused && document.activeElement !== inputRef.current) {
+    inputRef.current?.focus();
+  }
+  return /*#__PURE__*/React.createElement(InlineStack, {
+    gap: "100",
+    blockAlign: "center"
+  }, /*#__PURE__*/React.createElement(Label, {
+    id: textFieldId
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    visuallyHidden: true
+  }, label), /*#__PURE__*/React.createElement("span", null, prefix)), /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
+    id: textFieldId,
+    className: styles.SearchField,
+    value: value,
+    type: type,
+    role: "combobox",
+    placeholder: placeholder,
+    autoComplete: "off",
+    "aria-activedescendant": activeOptionId,
+    "aria-haspopup": "listbox",
+    "aria-autocomplete": "list",
+    "aria-expanded": "true",
+    "aria-controls": listboxId,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onChange: ({
+      target
+    }) => handleChange(target.value, textFieldId)
+  }));
+}
+
+export { SearchField };

package/build/esm/components/PolarisTestProvider/PolarisTestProvider.js

@@ -0,0 +1,91 @@
+import React, { useMemo, StrictMode, Fragment } from 'react';
+import { themeNameDefault } from '@shopify/polaris-tokens';
+import { merge } from '../../utilities/merge.js';
+import { ThemeNameContext, ThemeContext, getTheme } from '../../utilities/use-theme.js';
+import { I18n } from '../../utilities/i18n/I18n.js';
+import { ScrollLockManager } from '../../utilities/scroll-lock-manager/scroll-lock-manager.js';
+import { StickyManager } from '../../utilities/sticky-manager/sticky-manager.js';
+import { FeaturesContext } from '../../utilities/features/context.js';
+import { I18nContext } from '../../utilities/i18n/context.js';
+import { ScrollLockManagerContext } from '../../utilities/scroll-lock-manager/context.js';
+import { StickyManagerContext } from '../../utilities/sticky-manager/context.js';
+import { LinkContext } from '../../utilities/link/context.js';
+import { MediaQueryContext } from '../../utilities/media-query/context.js';
+import { PortalsManager } from '../PortalsManager/PortalsManager.js';
+import { FocusManager } from '../FocusManager/FocusManager.js';
+import { EphemeralPresenceManager } from '../EphemeralPresenceManager/EphemeralPresenceManager.js';
+import { FrameContext } from '../../utilities/frame/context.js';
+
+/**
+ * When writing a custom mounting function `mountWithAppContext(node, options)`
+ * this is the type of the options object. These values are customizable when
+ * you call the app
+ */
+
+const defaultMediaQuery = {
+  isNavigationCollapsed: false
+};
+function PolarisTestProvider({
+  strict,
+  children,
+  i18n,
+  link,
+  mediaQuery,
+  features = {},
+  frame,
+  theme: themeName = themeNameDefault
+}) {
+  const Wrapper = strict ? StrictMode : Fragment;
+  const intl = useMemo(() => new I18n(i18n || {}), [i18n]);
+  const scrollLockManager = useMemo(() => new ScrollLockManager(), []);
+  const stickyManager = useMemo(() => new StickyManager(), []);
+  const mergedFrame = createFrameContext(frame);
+  const mergedMediaQuery = merge(defaultMediaQuery, mediaQuery);
+  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ThemeNameContext.Provider, {
+    value: themeName
+  }, /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: getTheme(themeName)
+  }, /*#__PURE__*/React.createElement(FeaturesContext.Provider, {
+    value: features
+  }, /*#__PURE__*/React.createElement(I18nContext.Provider, {
+    value: intl
+  }, /*#__PURE__*/React.createElement(ScrollLockManagerContext.Provider, {
+    value: scrollLockManager
+  }, /*#__PURE__*/React.createElement(StickyManagerContext.Provider, {
+    value: stickyManager
+  }, /*#__PURE__*/React.createElement(LinkContext.Provider, {
+    value: link
+  }, /*#__PURE__*/React.createElement(MediaQueryContext.Provider, {
+    value: mergedMediaQuery
+  }, /*#__PURE__*/React.createElement(PortalsManager, null, /*#__PURE__*/React.createElement(FocusManager, null, /*#__PURE__*/React.createElement(EphemeralPresenceManager, null, /*#__PURE__*/React.createElement(FrameContext.Provider, {
+    value: mergedFrame
+  }, children)))))))))))));
+}
+function noop() {}
+function createFrameContext({
+  logo = undefined,
+  showToast = noop,
+  hideToast = noop,
+  toastMessages = [],
+  setContextualSaveBar = noop,
+  removeContextualSaveBar = noop,
+  contextualSaveBarVisible = false,
+  contextualSaveBarProps = {},
+  startLoading = noop,
+  stopLoading = noop
+} = {}) {
+  return {
+    logo,
+    showToast,
+    hideToast,
+    toastMessages,
+    setContextualSaveBar,
+    removeContextualSaveBar,
+    contextualSaveBarVisible,
+    contextualSaveBarProps,
+    startLoading,
+    stopLoading
+  };
+}
+
+export { PolarisTestProvider };

package/build/esm/components/Popover/Popover.css.js

@@ -0,0 +1,25 @@
+var styles = {
+  "Popover": "Polaris-Popover",
+  "PopoverOverlay": "Polaris-Popover__PopoverOverlay",
+  "PopoverOverlay-noAnimation": "Polaris-Popover__PopoverOverlay--noAnimation",
+  "PopoverOverlay-entering": "Polaris-Popover__PopoverOverlay--entering",
+  "PopoverOverlay-open": "Polaris-Popover__PopoverOverlay--open",
+  "measuring": "Polaris-Popover--measuring",
+  "PopoverOverlay-exiting": "Polaris-Popover__PopoverOverlay--exiting",
+  "fullWidth": "Polaris-Popover--fullWidth",
+  "Content": "Polaris-Popover__Content",
+  "positionedAbove": "Polaris-Popover--positionedAbove",
+  "positionedCover": "Polaris-Popover--positionedCover",
+  "ContentContainer": "Polaris-Popover__ContentContainer",
+  "Content-fullHeight": "Polaris-Popover__Content--fullHeight",
+  "Content-fluidContent": "Polaris-Popover__Content--fluidContent",
+  "Pane": "Polaris-Popover__Pane",
+  "Pane-fixed": "Polaris-Popover__Pane--fixed",
+  "Pane-subdued": "Polaris-Popover__Pane--subdued",
+  "Pane-captureOverscroll": "Polaris-Popover__Pane--captureOverscroll",
+  "Section": "Polaris-Popover__Section",
+  "FocusTracker": "Polaris-Popover__FocusTracker",
+  "PopoverOverlay-hideOnPrint": "Polaris-Popover__PopoverOverlay--hideOnPrint"
+};
+
+export { styles as default };

package/build/esm/components/Popover/Popover.js

@@ -0,0 +1,145 @@
+import React, { forwardRef, useState, useRef, useId, useImperativeHandle, useCallback, useEffect, Children } from 'react';
+import { findFirstFocusableNodeIncludingDisabled, focusNextFocusableNode } from '../../utilities/focus.js';
+import { portal } from '../shared.js';
+import { setActivatorAttributes } from './set-activator-attributes.js';
+import { PopoverCloseSource, PopoverOverlay } from './components/PopoverOverlay/PopoverOverlay.js';
+import { Pane } from './components/Pane/Pane.js';
+import { Section } from './components/Section/Section.js';
+import { Portal } from '../Portal/Portal.js';
+
+// TypeScript can't generate types that correctly infer the typing of
+// subcomponents so explicitly state the subcomponents in the type definition.
+// Letting this be implicit works in this project but fails in projects that use
+// generated *.d.ts files.
+
+const PopoverComponent = /*#__PURE__*/forwardRef(function Popover({
+  activatorWrapper = 'div',
+  children,
+  onClose,
+  activator,
+  preventFocusOnClose,
+  active,
+  fixed,
+  ariaHaspopup,
+  preferInputActivator = true,
+  zIndexOverride,
+  ...rest
+}, ref) {
+  const [isDisplayed, setIsDisplay] = useState(false);
+  const [activatorNode, setActivatorNode] = useState();
+  const overlayRef = useRef(null);
+  const activatorContainer = useRef(null);
+  const WrapperComponent = activatorWrapper;
+  const id = useId();
+  function forceUpdatePosition() {
+    overlayRef.current?.forceUpdatePosition();
+  }
+  const handleClose = source => {
+    onClose(source);
+    if (activatorContainer.current == null || preventFocusOnClose) {
+      return;
+    }
+    if (source === PopoverCloseSource.FocusOut && activatorNode) {
+      const focusableActivator = findFirstFocusableNodeIncludingDisabled(activatorNode) || findFirstFocusableNodeIncludingDisabled(activatorContainer.current) || activatorContainer.current;
+      if (!focusNextFocusableNode(focusableActivator, isInPortal)) {
+        focusableActivator.focus();
+      }
+    } else if (source === PopoverCloseSource.EscapeKeypress && activatorNode) {
+      const focusableActivator = findFirstFocusableNodeIncludingDisabled(activatorNode) || findFirstFocusableNodeIncludingDisabled(activatorContainer.current) || activatorContainer.current;
+      if (focusableActivator) {
+        focusableActivator.focus();
+      } else {
+        focusNextFocusableNode(focusableActivator, isInPortal);
+      }
+    }
+  };
+  useImperativeHandle(ref, () => {
+    return {
+      forceUpdatePosition,
+      close: (target = 'activator') => {
+        const source = target === 'activator' ? PopoverCloseSource.EscapeKeypress : PopoverCloseSource.FocusOut;
+        handleClose(source);
+      }
+    };
+  });
+  const setAccessibilityAttributes = useCallback(() => {
+    if (activatorContainer.current == null) {
+      return;
+    }
+    const firstFocusable = findFirstFocusableNodeIncludingDisabled(activatorContainer.current);
+    const focusableActivator = firstFocusable || activatorContainer.current;
+    const activatorDisabled = 'disabled' in focusableActivator && Boolean(focusableActivator.disabled);
+    setActivatorAttributes(focusableActivator, {
+      id,
+      active,
+      ariaHaspopup,
+      activatorDisabled
+    });
+  }, [id, active, ariaHaspopup]);
+  useEffect(() => {
+    function setDisplayState() {
+      /**
+       * This is a workaround to prevent rendering the Popover when the content is moved into
+       * a React portal that hasn't been rendered. We don't want to render the Popover in this
+       * case because the auto-focus logic will break. We wait until the activatorContainer is
+       * displayed, which is when it has an offsetParent, or if the activatorContainer is the
+       * body, if it has a clientWidth bigger than 0.
+       * See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
+       */
+
+      setIsDisplay(Boolean(activatorContainer.current && (activatorContainer.current.offsetParent !== null || activatorContainer.current === activatorContainer.current.ownerDocument.body && activatorContainer.current.clientWidth > 0)));
+    }
+    if (!activatorContainer.current) {
+      return;
+    }
+    const observer = new ResizeObserver(setDisplayState);
+    observer.observe(activatorContainer.current);
+    setDisplayState();
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  useEffect(() => {
+    if (!activatorNode && activatorContainer.current) {
+      setActivatorNode(activatorContainer.current.firstElementChild);
+    } else if (activatorNode && activatorContainer.current && !activatorContainer.current.contains(activatorNode)) {
+      setActivatorNode(activatorContainer.current.firstElementChild);
+    }
+    setAccessibilityAttributes();
+  }, [activatorNode, setAccessibilityAttributes]);
+  useEffect(() => {
+    if (activatorNode && activatorContainer.current) {
+      setActivatorNode(activatorContainer.current.firstElementChild);
+    }
+    setAccessibilityAttributes();
+  }, [activatorNode, setAccessibilityAttributes]);
+  const portal = activatorNode && isDisplayed ? /*#__PURE__*/React.createElement(Portal, {
+    idPrefix: "popover"
+  }, /*#__PURE__*/React.createElement(PopoverOverlay, Object.assign({
+    ref: overlayRef,
+    id: id,
+    activator: activatorNode,
+    preferInputActivator: preferInputActivator,
+    onClose: handleClose,
+    active: active,
+    fixed: fixed,
+    zIndexOverride: zIndexOverride
+  }, rest), children)) : null;
+  return /*#__PURE__*/React.createElement(WrapperComponent, {
+    ref: activatorContainer
+  }, Children.only(activator), portal);
+});
+function isInPortal(element) {
+  let parentElement = element.parentElement;
+  while (parentElement) {
+    if (parentElement.matches(portal.selector)) return false;
+    parentElement = parentElement.parentElement;
+  }
+  return true;
+}
+const Popover = Object.assign(PopoverComponent, {
+  Pane,
+  Section
+});
+
+export { Popover, PopoverCloseSource };

package/build/esm/components/Popover/components/Pane/Pane.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { classNames } from '../../../../utilities/css.js';
+import { wrapWithComponent } from '../../../../utilities/components.js';
+import styles from '../../Popover.css.js';
+import { Section } from '../Section/Section.js';
+import { Scrollable } from '../../../Scrollable/Scrollable.js';
+
+function Pane({
+  captureOverscroll = false,
+  fixed,
+  sectioned,
+  children,
+  height,
+  maxHeight,
+  minHeight,
+  subdued,
+  onScrolledToBottom
+}) {
+  const className = classNames(styles.Pane, fixed && styles['Pane-fixed'], subdued && styles['Pane-subdued'], captureOverscroll && styles['Pane-captureOverscroll']);
+  const content = sectioned ? wrapWithComponent(children, Section, {}) : children;
+  const style = {
+    height,
+    maxHeight,
+    minHeight
+  };
+  return fixed ? /*#__PURE__*/React.createElement("div", {
+    style: style,
+    className: className
+  }, content) : /*#__PURE__*/React.createElement(Scrollable, {
+    shadow: true,
+    className: className,
+    style: style,
+    onScrolledToBottom: onScrolledToBottom,
+    scrollbarWidth: "thin"
+  }, content);
+}
+
+export { Pane };