@sipesistemas/polaris 1.2.4 → 1.4.0

package/build/cjs/components/ActionList/ActionList.js

@@ -52,7 +52,7 @@ function ActionList({
       actionRole: actionRole,
       onActionAnyItem: onActionAnyItem,
       isFirst: index === 0
-    }, typeof section.title === 'string' ? section.title : index) : null;
+    }, typeof section.title === 'string' && section.title ? section.title : index) : null;
   });
   const handleFocusPreviousItem = evt => {
     evt.preventDefault();

package/build/cjs/components/DropDown/DropDown.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "Activator": "Polaris-DropDown__Activator"
+};
+
+exports.default = styles;

package/build/cjs/components/DropDown/DropDown.js

@@ -0,0 +1,293 @@
+'use strict';
+
+var polarisIcons = require('@shopify/polaris-icons');
+var react = require('react');
+var DropDown_module = require('./DropDown.css.js');
+var jsxRuntime = require('react/jsx-runtime');
+var EmptySearchResult = require('../EmptySearchResult/EmptySearchResult.js');
+var hooks = require('../../utilities/i18n/hooks.js');
+var TextField = require('../TextField/TextField.js');
+var Icon = require('../Icon/Icon.js');
+var utils = require('../Button/utils.js');
+var Listbox = require('../Listbox/Listbox.js');
+var Popover = require('../Popover/Popover.js');
+var Box = require('../Box/Box.js');
+var Scrollable = require('../Scrollable/Scrollable.js');
+
+function getValueByPath(obj, path) {
+  return path.split('.').reduce((acc, part) => acc?.[part], obj);
+}
+
+/** Resolves the activator text for an option, falling back to its `label` when there is no `object` */
+function resolveOptionLabel(option, selectedLabelKey) {
+  if (!option) return '';
+  if (selectedLabelKey && option.object !== undefined) {
+    const value = getValueByPath(option.object, selectedLabelKey);
+    if (typeof value === 'string') return value;
+  }
+  return typeof option.label === 'string' ? option.label : '';
+}
+const SCROLLABLE_HEIGHT = 292;
+function DropDownBase({
+  loading,
+  loadingMore,
+  options,
+  value,
+  onChange,
+  onBlur,
+  emptyStateTitle = '',
+  emptyStateDescription,
+  onQueryChange,
+  selectedLabelKey,
+  label,
+  labelHidden,
+  searchable = true,
+  placeholder,
+  disabled,
+  requiredIndicator,
+  helpText,
+  error,
+  allowClear,
+  onScrolledToBottom,
+  suffixAction
+}) {
+  const i18n = hooks.useI18n();
+  const [query, setQuery] = react.useState('');
+  const [popoverActive, setPopoverActive] = react.useState(false);
+  const [activeOptionId, setActiveOptionId] = react.useState();
+  // pagination/search can drop the selected option from `options`; the cache keeps its label visible
+  const [cachedSelection, setCachedSelection] = react.useState(null);
+  // clicking the clear button bubbles to TextField's container, which focuses the input
+  const skipNextFocusOpen = react.useRef(false);
+  const listboxId = react.useId();
+  const selectedValue = value ?? '';
+  const selected = selectedValue ? [selectedValue] : [];
+  // when the parent does not control filtering, narrow the options by the query ourselves
+  const filteredOptions = react.useMemo(() => {
+    if (onQueryChange || !query) return options;
+    const needle = query.toLowerCase();
+    return options.filter(option => resolveOptionLabel(option, selectedLabelKey).toLowerCase().includes(needle));
+  }, [options, query, onQueryChange, selectedLabelKey]);
+  const togglePopoverActive = react.useCallback(() => {
+    setPopoverActive(active => !active);
+    setQuery('');
+    onQueryChange?.('');
+  }, [onQueryChange]);
+  react.useEffect(() => {
+    function handleEsc(event) {
+      if (event.key === 'Escape') setPopoverActive(false);
+    }
+    document.addEventListener('keydown', handleEsc);
+    return () => document.removeEventListener('keydown', handleEsc);
+  }, []);
+
+  // keep the cache in sync while the selected option is loaded, so its label survives (and stays
+  // fresh) if pagination later drops the option from `options`
+  react.useEffect(() => {
+    if (!selectedValue) return;
+    const loadedOption = options.find(option => option.value === selectedValue);
+    if (!loadedOption) return;
+    const label = resolveOptionLabel(loadedOption, selectedLabelKey);
+    if (label && (cachedSelection?.value !== selectedValue || cachedSelection.label !== label)) {
+      setCachedSelection({
+        value: selectedValue,
+        label
+      });
+    }
+  }, [selectedValue, options, selectedLabelKey, cachedSelection]);
+  const textSelectedItem = react.useMemo(() => {
+    if (!selectedValue) return '';
+    const selectedItem = options.find(option => option.value === selectedValue);
+    const resolved = resolveOptionLabel(selectedItem, selectedLabelKey);
+    if (resolved) return resolved;
+    return cachedSelection?.value === selectedValue ? cachedSelection.label : '';
+  }, [selectedValue, options, selectedLabelKey, cachedSelection]);
+  const handleSelectionClear = react.useCallback(() => {
+    setCachedSelection(null);
+    onChange?.('');
+    if (requiredIndicator) {
+      setPopoverActive(true);
+    } else {
+      skipNextFocusOpen.current = true;
+    }
+  }, [onChange, requiredIndicator]);
+  const handleActivatorFocus = react.useCallback(() => {
+    if (disabled) return;
+    if (skipNextFocusOpen.current) {
+      skipNextFocusOpen.current = false;
+      return;
+    }
+    setPopoverActive(true);
+  }, [disabled]);
+
+  // when the clear button is visible it replaces the caret, so they don't pile up
+  const showClearButton = Boolean(allowClear) && textSelectedItem !== '';
+  const activator = /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: DropDown_module.default.Activator,
+    children: /*#__PURE__*/jsxRuntime.jsx(TextField.TextField, {
+      label: label,
+      labelHidden: labelHidden,
+      placeholder: placeholder,
+      autoComplete: "off",
+      value: textSelectedItem,
+      disabled: disabled,
+      requiredIndicator: requiredIndicator,
+      helpText: helpText,
+      error: error,
+      clearButton: showClearButton,
+      onClearButtonClick: handleSelectionClear,
+      onFocus: handleActivatorFocus,
+      onBlur: onBlur,
+      suffix: showClearButton ? undefined : /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+        source: polarisIcons.CaretDownIcon
+      }),
+      connectedRight: suffixAction ? utils.buttonFrom(suffixAction) : undefined
+    })
+  });
+
+  // the selected option keeps its natural position in the list; if it is absent from the loaded
+  // `options` (e.g. pagination/search reset) it simply isn't listed, while the activator still
+  // shows its label via the cache
+  const optionsMarkup = react.useMemo(() => {
+    if (loading || filteredOptions.length === 0) return null;
+    return filteredOptions.map(option => {
+      const isSelected = selected.includes(option.value);
+      return /*#__PURE__*/jsxRuntime.jsx(Listbox.Listbox.Option, {
+        value: option.value,
+        selected: isSelected,
+        children: /*#__PURE__*/jsxRuntime.jsx(Listbox.Listbox.TextOption, {
+          selected: isSelected,
+          children: option.label
+        })
+      }, option.value);
+    });
+  }, [loading, filteredOptions, selected]);
+  const loadingMarkup = loading ? /*#__PURE__*/jsxRuntime.jsx(Listbox.Listbox.Loading, {
+    accessibilityLabel: i18n.translate('Polaris.DropDown.loadingAccessibilityLabel')
+  }) : null;
+  const loadingMoreMarkup = loadingMore ? /*#__PURE__*/jsxRuntime.jsx(Listbox.Listbox.Loading, {
+    accessibilityLabel: i18n.translate('Polaris.DropDown.loadingMoreAccessibilityLabel')
+  }) : null;
+  const noResultsMarkup = !loading && filteredOptions.length === 0 ? /*#__PURE__*/jsxRuntime.jsx(EmptySearchResult.EmptySearchResult, {
+    title: emptyStateTitle || (query ? i18n.translate('Polaris.DropDown.noResultsFoundFor', {
+      query
+    }) : i18n.translate('Polaris.DropDown.noResultsFound')),
+    description: emptyStateDescription
+  }) : null;
+  const updateSelection = react.useCallback(newSelection => {
+    const option = options.find(({
+      value: optionValue
+    }) => optionValue === newSelection);
+    const label = resolveOptionLabel(option, selectedLabelKey);
+    if (label) {
+      setCachedSelection({
+        value: newSelection,
+        label
+      });
+    } else if (cachedSelection?.value !== newSelection) {
+      // re-selecting the cached option (absent from `options`) must keep its cached label
+      setCachedSelection(null);
+    }
+    onChange?.(newSelection);
+    setQuery('');
+    onQueryChange?.('');
+    setPopoverActive(false);
+  }, [options, selectedLabelKey, cachedSelection, onChange, onQueryChange]);
+  const handleActiveOptionChange = react.useCallback((_value, domId) => {
+    setActiveOptionId(domId);
+  }, []);
+  const handleQueryClear = react.useCallback(() => {
+    setQuery('');
+    onQueryChange?.('');
+  }, [onQueryChange]);
+  return /*#__PURE__*/jsxRuntime.jsx(Popover.Popover, {
+    activator: activator,
+    active: popoverActive,
+    onClose: togglePopoverActive,
+    fullWidth: true,
+    autofocusTarget: "first-node",
+    preferInputActivator: false,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Popover.Popover.Pane, {
+      fixed: true,
+      children: [searchable ? /*#__PURE__*/jsxRuntime.jsx(Box.Box, {
+        padding: "300",
+        children: /*#__PURE__*/jsxRuntime.jsx(TextField.TextField, {
+          prefix: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+            source: polarisIcons.SearchIcon
+          }),
+          label: "",
+          labelHidden: true,
+          autoComplete: "off",
+          placeholder: i18n.translate('Polaris.DropDown.searchPlaceholder'),
+          clearButton: true,
+          ariaActiveDescendant: activeOptionId,
+          ariaControls: listboxId,
+          value: query,
+          onChange: value => {
+            onQueryChange?.(value);
+            setQuery(value);
+          },
+          onClearButtonClick: handleQueryClear
+        })
+      }) : null, /*#__PURE__*/jsxRuntime.jsx(Scrollable.Scrollable, {
+        style: {
+          position: 'relative',
+          maxHeight: SCROLLABLE_HEIGHT,
+          // without the search field above, the list needs its own top padding
+          padding: searchable ? '0 0 var(--p-space-200)' : 'var(--p-space-200) 0',
+          borderBottomLeftRadius: 'var(--p-border-radius-200)',
+          borderBottomRightRadius: 'var(--p-border-radius-200)'
+        },
+        horizontal: false,
+        onScrolledToBottom: onScrolledToBottom,
+        children: /*#__PURE__*/jsxRuntime.jsxs(Listbox.Listbox, {
+          enableKeyboardControl: true,
+          autoSelection: selected.length > 0 ? Listbox.AutoSelection.FirstSelected : Listbox.AutoSelection.None,
+          customListId: listboxId,
+          onSelect: updateSelection,
+          onActiveOptionChange: handleActiveOptionChange,
+          children: [optionsMarkup, loadingMarkup, loadingMoreMarkup, noResultsMarkup]
+        })
+      })]
+    })
+  });
+}
+// react-hook-form is an optional peer dependency: only pull it in when the form-aware mode is used
+const LazyDropDownField = /*#__PURE__*/react.lazy(() => Promise.resolve().then(function () { return require('./DropDownField.js'); }).then(module => ({
+  default: module.DropDownField
+})));
+
+/**
+ * A searchable single-select dropdown. Works standalone via `value`/`onChange`, or as a form-aware
+ * field by passing `name` (and optionally `control`) to integrate with react-hook-form.
+ */
+function DropDown(props) {
+  if (props.name != null) {
+    const {
+      name,
+      control,
+      rules,
+      defaultValue,
+      ...baseProps
+    } = props;
+    return /*#__PURE__*/jsxRuntime.jsx(react.Suspense, {
+      fallback: /*#__PURE__*/jsxRuntime.jsx(DropDownBase, {
+        ...baseProps,
+        disabled: true
+      }),
+      children: /*#__PURE__*/jsxRuntime.jsx(LazyDropDownField, {
+        name: name,
+        control: control,
+        rules: rules,
+        defaultValue: defaultValue,
+        ...baseProps
+      })
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(DropDownBase, {
+    ...props
+  });
+}
+
+exports.DropDown = DropDown;
+exports.DropDownBase = DropDownBase;

package/build/cjs/components/DropDown/DropDownField.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var reactHookForm = require('react-hook-form');
+var DropDown = require('./DropDown.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function DropDownField({
+  name,
+  control,
+  rules,
+  defaultValue = '',
+  error,
+  ...rest
+}) {
+  const {
+    field,
+    fieldState
+  } = reactHookForm.useController({
+    name,
+    control,
+    rules,
+    defaultValue
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(DropDown.DropDownBase, {
+    ...rest,
+    value: field.value,
+    onChange: field.onChange,
+    onBlur: field.onBlur,
+    error: fieldState.error?.message ?? error
+  });
+}
+
+exports.DropDownField = DropDownField;

package/build/cjs/components/Filters/components/FiltersBar/FiltersBar.js

@@ -75,11 +75,17 @@ function FiltersBar({
       togglePopoverActive();
     }, 0);
   };
-  const filterToActionItem = filter => ({
-    ...filter,
-    content: filter.label,
-    onAction: onFilterClick(filter)
-  });
+  const filterToActionItem = filter => {
+    const {
+      key: _filterKey,
+      ...rest
+    } = filter;
+    return {
+      ...rest,
+      content: filter.label,
+      onAction: onFilterClick(filter)
+    };
+  };
   const unpinnedFilters = filters.filter(filter => !pinnedFilters.some(({
     key
   }) => key === filter.key));

package/build/cjs/components/IndexTable/IndexTable.css.js

@@ -96,7 +96,14 @@ var styles = {
   "HeaderWrapper": "Polaris-IndexTable__HeaderWrapper",
   "StickyTable-condensed": "Polaris-IndexTable__StickyTable--condensed",
   "StickyTableHeader-condensed": "Polaris-IndexTable__StickyTableHeader--condensed",
-  "ScrollBarContent": "Polaris-IndexTable__ScrollBarContent"
+  "ScrollBarContent": "Polaris-IndexTable__ScrollBarContent",
+  "TableHeading-reorder": "Polaris-IndexTable__TableHeading--reorder",
+  "TableCellDragHandle": "Polaris-IndexTable__TableCellDragHandle",
+  "DragHandle": "Polaris-IndexTable__DragHandle",
+  "DragHandleIcon": "Polaris-IndexTable__DragHandleIcon",
+  "TableRow-reorderable": "Polaris-IndexTable__TableRow--reorderable",
+  "TableRow-dragging": "Polaris-IndexTable__TableRow--dragging",
+  "TableRow-dropTarget": "Polaris-IndexTable__TableRow--dropTarget"
 };
 
 exports.default = styles;

package/build/cjs/components/IndexTable/IndexTable.js

@@ -12,7 +12,6 @@ var IndexProvider = require('../IndexProvider/IndexProvider.js');
 var Row = require('./components/Row/Row.js');
 var types = require('../../utilities/index-provider/types.js');
 var utilities = require('./utilities/utilities.js');
-var EmptySearchResult = require('../EmptySearchResult/EmptySearchResult.js');
 var ScrollContainer = require('./components/ScrollContainer/ScrollContainer.js');
 var BulkActions = require('../BulkActions/BulkActions.js');
 var Cell = require('./components/Cell/Cell.js');
@@ -20,9 +19,11 @@ var hooks = require('../../utilities/index-provider/hooks.js');
 var hooks$1 = require('../../utilities/i18n/hooks.js');
 var Spinner = require('../Spinner/Spinner.js');
 var AfterInitialMount = require('../AfterInitialMount/AfterInitialMount.js');
+var EmptySearchResult = require('../EmptySearchResult/EmptySearchResult.js');
 var Pagination = require('../Pagination/Pagination.js');
-var Checkbox = require('../Checkbox/Checkbox.js');
+var context = require('../../utilities/index-table/context.js');
 var Text = require('../Text/Text.js');
+var Checkbox = require('../Checkbox/Checkbox.js');
 var LegacyStack = require('../LegacyStack/LegacyStack.js');
 var Badge = require('../Badge/Badge.js');
 var UnstyledButton = require('../UnstyledButton/UnstyledButton.js');
@@ -49,6 +50,7 @@ function IndexTableBase({
   sortToggleLabels,
   hasZebraStriping,
   pagination,
+  onReorder,
   ...restProps
 }) {
   const {
@@ -66,6 +68,34 @@ function IndexTableBase({
   } = hooks.useIndexValue();
   const handleSelectionChange = hooks.useIndexSelectionChange();
   const i18n = hooks$1.useI18n();
+  const reorderable = typeof onReorder === 'function';
+  const [draggingPosition, setDraggingPosition] = react.useState(null);
+  const [dropPosition, setDropPosition] = react.useState(null);
+  const handleReorderDragStart = react.useCallback(position => {
+    setDraggingPosition(position);
+  }, []);
+  const handleReorderDragEnter = react.useCallback(position => {
+    setDropPosition(position);
+  }, []);
+  const resetReorderState = react.useCallback(() => {
+    setDraggingPosition(null);
+    setDropPosition(null);
+  }, []);
+  const handleReorderDrop = react.useCallback(() => {
+    if (draggingPosition !== null && dropPosition !== null && draggingPosition !== dropPosition) {
+      onReorder?.(draggingPosition, dropPosition);
+    }
+    resetReorderState();
+  }, [draggingPosition, dropPosition, onReorder, resetReorderState]);
+  const reorderContextValue = react.useMemo(() => ({
+    reorderable,
+    draggingPosition,
+    dropPosition,
+    onDragStart: handleReorderDragStart,
+    onDragEnter: handleReorderDragEnter,
+    onDrop: handleReorderDrop,
+    onDragEnd: resetReorderState
+  }), [reorderable, draggingPosition, dropPosition, handleReorderDragStart, handleReorderDragEnter, handleReorderDrop, resetReorderState]);
   const {
     value: hasMoreLeftColumns,
     toggle: toggleHasMoreLeftColumns
@@ -391,7 +421,8 @@ function IndexTableBase({
       ...pagination
     })
   }) : null;
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+  return /*#__PURE__*/jsxRuntime.jsx(context.RowReorderContext.Provider, {
+    value: reorderContextValue,
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: IndexTable_module.default.IndexTable,
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -416,16 +447,33 @@ function IndexTableBase({
       ...tagProps,
       children: renderHeadingContent(heading, index)
     }, getHeadingKey(heading));
-    if (index !== 0 || !selectable) {
+    if (index !== 0 || !selectable && !reorderable) {
       return headingContent;
     }
-    const checkboxClassName = css.classNames(IndexTable_module.default.TableHeading, hasSortable && IndexTable_module.default['TableHeading-sortable'], index === 0 && IndexTable_module.default['TableHeading-first']);
-    const checkboxContent = /*#__PURE__*/jsxRuntime.jsx(Tag, {
-      className: checkboxClassName,
-      ...tagProps,
-      children: renderCheckboxContent()
-    }, `${heading}-${index}`);
-    return [checkboxContent, headingContent];
+    const leadingHeadings = [];
+
+    // Omits `data-index-table-heading` so this column is excluded from the
+    // column index math used by sticky columns and sort handling.
+    if (reorderable) {
+      leadingHeadings.push(/*#__PURE__*/jsxRuntime.jsx(Tag, {
+        className: css.classNames(IndexTable_module.default.TableHeading, IndexTable_module.default['TableHeading-reorder']),
+        children: /*#__PURE__*/jsxRuntime.jsx(Text.Text, {
+          as: "span",
+          variant: "bodySm",
+          visuallyHidden: true,
+          children: i18n.translate('Polaris.IndexTable.reorderColumnHeader')
+        })
+      }, "reorder-heading"));
+    }
+    if (selectable) {
+      const checkboxClassName = css.classNames(IndexTable_module.default.TableHeading, hasSortable && IndexTable_module.default['TableHeading-sortable'], index === 0 && IndexTable_module.default['TableHeading-first']);
+      leadingHeadings.push(/*#__PURE__*/jsxRuntime.jsx(Tag, {
+        className: checkboxClassName,
+        ...tagProps,
+        children: renderCheckboxContent()
+      }, `${heading}-${index}`));
+    }
+    return [...leadingHeadings, headingContent];
   }
   function renderCheckboxContent() {
     return /*#__PURE__*/jsxRuntime.jsx("div", {

package/build/cjs/components/IndexTable/components/Row/Row.js

@@ -1,15 +1,19 @@
 'use strict';
 
+var polarisIcons = require('@shopify/polaris-icons');
 var react = require('react');
 var css = require('../../../../utilities/css.js');
 var useToggle = require('../../../../utilities/use-toggle.js');
 var IndexTable_module = require('../../IndexTable.css.js');
 var jsxRuntime = require('react/jsx-runtime');
-var hooks = require('../../../../utilities/index-provider/hooks.js');
-var types = require('../../../../utilities/index-provider/types.js');
+var hooks$1 = require('../../../../utilities/index-provider/hooks.js');
 var context = require('../../../../utilities/index-table/context.js');
+var types = require('../../../../utilities/index-provider/types.js');
 var Cell = require('../Cell/Cell.js');
 var Checkbox = require('../Checkbox/Checkbox.js');
+var hooks = require('../../../../utilities/i18n/hooks.js');
+var Icon = require('../../../Icon/Icon.js');
+var Text = require('../../../Text/Text.js');
 
 const Row = /*#__PURE__*/react.memo(function Row({
   children,
@@ -25,18 +29,44 @@ const Row = /*#__PURE__*/react.memo(function Row({
   onNavigation,
   onClick
 }) {
+  const i18n = hooks.useI18n();
   const {
     selectable: tableIsSelectable,
     selectMode,
     condensed
-  } = hooks.useIndexRow();
+  } = hooks$1.useIndexRow();
+  const {
+    resourceName
+  } = hooks$1.useIndexValue();
   const rowIsSelectable = tableIsSelectable && !hideSelectable;
-  const onSelectionChange = hooks.useIndexSelectionChange();
+  const onSelectionChange = hooks$1.useIndexSelectionChange();
   const {
     value: hovered,
     setTrue: setHoverIn,
     setFalse: setHoverOut
   } = useToggle.useToggle(false);
+  const reorder = react.useContext(context.RowReorderContext);
+  const reorderable = Boolean(reorder?.reorderable) && rowType === 'data';
+  const isDragging = reorderable && reorder?.draggingPosition === position;
+  const isDropTarget = reorderable && reorder?.dropPosition === position && reorder?.draggingPosition !== position;
+  const handleDragStart = react.useCallback(event => {
+    event.dataTransfer.effectAllowed = 'move';
+    reorder?.onDragStart(position);
+  }, [reorder, position]);
+  const handleDragEnter = react.useCallback(() => {
+    reorder?.onDragEnter(position);
+  }, [reorder, position]);
+  const handleDragOver = react.useCallback(event => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  }, []);
+  const handleDrop = react.useCallback(event => {
+    event.preventDefault();
+    reorder?.onDrop();
+  }, [reorder]);
+  const handleDragEnd = react.useCallback(() => {
+    reorder?.onDragEnd();
+  }, [reorder]);
   const handleInteraction = react.useCallback(event => {
     event.stopPropagation();
     let selectionType = types.SelectionType.Single;
@@ -66,7 +96,7 @@ const Row = /*#__PURE__*/react.memo(function Row({
       primaryLinkElement.current = el;
     }
   }, []);
-  const rowClassName = css.classNames(IndexTable_module.default.TableRow, rowType === 'subheader' && IndexTable_module.default['TableRow-subheader'], rowType === 'child' && IndexTable_module.default['TableRow-child'], rowIsSelectable && condensed && IndexTable_module.default.condensedRow, selected && IndexTable_module.default['TableRow-selected'], hovered && !condensed && IndexTable_module.default['TableRow-hovered'], disabled && IndexTable_module.default['TableRow-disabled'], tone && IndexTable_module.default[css.variationName('tone', tone)], !rowIsSelectable && !onClick && !primaryLinkElement.current && IndexTable_module.default['TableRow-unclickable']);
+  const rowClassName = css.classNames(IndexTable_module.default.TableRow, rowType === 'subheader' && IndexTable_module.default['TableRow-subheader'], rowType === 'child' && IndexTable_module.default['TableRow-child'], rowIsSelectable && condensed && IndexTable_module.default.condensedRow, selected && IndexTable_module.default['TableRow-selected'], hovered && !condensed && IndexTable_module.default['TableRow-hovered'], disabled && IndexTable_module.default['TableRow-disabled'], tone && IndexTable_module.default[css.variationName('tone', tone)], reorderable && IndexTable_module.default['TableRow-reorderable'], isDragging && IndexTable_module.default['TableRow-dragging'], isDropTarget && IndexTable_module.default['TableRow-dropTarget'], !rowIsSelectable && !onClick && !primaryLinkElement.current && IndexTable_module.default['TableRow-unclickable']);
   let handleRowClick;
   if (!disabled && rowIsSelectable || onClick || primaryLinkElement.current) {
     handleRowClick = event => {
@@ -105,6 +135,35 @@ const Row = /*#__PURE__*/react.memo(function Row({
   const checkboxMarkup = hideSelectable ? /*#__PURE__*/jsxRuntime.jsx(Cell.Cell, {}) : /*#__PURE__*/jsxRuntime.jsx(Checkbox.Checkbox, {
     accessibilityLabel: accessibilityLabel
   });
+  const dragHandleMarkup = reorderable ? /*#__PURE__*/jsxRuntime.jsx("td", {
+    className: IndexTable_module.default.TableCellDragHandle,
+    onClick: stopPropagation,
+    children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: IndexTable_module.default.DragHandle,
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: IndexTable_module.default.DragHandleIcon,
+        "aria-hidden": "true",
+        children: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+          source: polarisIcons.DragHandleIcon,
+          tone: "subdued"
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(Text.Text, {
+        as: "span",
+        visuallyHidden: true,
+        children: i18n.translate('Polaris.IndexTable.reorderAccessibilityLabel', {
+          resourceName: resourceName.singular
+        })
+      })]
+    })
+  }) : null;
+  const reorderProps = reorderable ? {
+    draggable: true,
+    onDragStart: handleDragStart,
+    onDragEnter: handleDragEnter,
+    onDragOver: handleDragOver,
+    onDrop: handleDrop,
+    onDragEnd: handleDragEnd
+  } : {};
   return /*#__PURE__*/jsxRuntime.jsx(context.RowContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/jsxRuntime.jsx(context.RowHoveredContext.Provider, {
@@ -116,10 +175,14 @@ const Row = /*#__PURE__*/react.memo(function Row({
         onMouseLeave: setHoverOut,
         onClick: handleRowClick,
         ref: tableRowCallbackRef,
-        children: [tableIsSelectable ? checkboxMarkup : null, children]
+        ...reorderProps,
+        children: [dragHandleMarkup, tableIsSelectable ? checkboxMarkup : null, children]
       }, id)
     })
   });
 });
+function stopPropagation(event) {
+  event.stopPropagation();
+}
 
 exports.Row = Row;

package/build/cjs/components/Pagination/Pagination.js

@@ -29,15 +29,18 @@ function Pagination({
   accessibilityLabel,
   accessibilityLabels,
   label,
-  type = 'page'
+  type = 'page',
+  direction = 'horizontal'
 }) {
   const i18n = hooks.useI18n();
   const node = /*#__PURE__*/react.createRef();
   const navLabel = accessibilityLabel || i18n.translate('Polaris.Pagination.pagination');
   const previousLabel = accessibilityLabels?.previous || i18n.translate('Polaris.Pagination.previous');
   const nextLabel = accessibilityLabels?.next || i18n.translate('Polaris.Pagination.next');
+  const previousIcon = direction === 'vertical' ? polarisIcons.ChevronUpIcon : polarisIcons.ChevronLeftIcon;
+  const nextIcon = direction === 'vertical' ? polarisIcons.ChevronDownIcon : polarisIcons.ChevronRightIcon;
   const prev = /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
-    icon: polarisIcons.ChevronLeftIcon,
+    icon: previousIcon,
     accessibilityLabel: previousLabel,
     url: previousURL,
     onClick: onPrevious,
@@ -51,7 +54,7 @@ function Pagination({
     children: prev
   }) : prev;
   const next = /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
-    icon: polarisIcons.ChevronRightIcon,
+    icon: nextIcon,
     accessibilityLabel: nextLabel,
     url: nextURL,
     onClick: onNext,