@sipesistemas/polaris 1.3.0 → 1.4.1

package/build/cjs/components/{SearchableSelect/SearchableSelect.css.js → DropDown/DropDown.css.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var styles = {
-  "Activator": "Polaris-SearchableSelect__Activator"
+  "Activator": "Polaris-DropDown__Activator"
 };
 
 exports.default = styles;

package/build/cjs/components/{SearchableSelect/SearchableSelect.js → DropDown/DropDown.js}

@@ -2,13 +2,14 @@
 
 var polarisIcons = require('@shopify/polaris-icons');
 var react = require('react');
-var SearchableSelect_module = require('./SearchableSelect.css.js');
+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 EmptySearchResult = require('../EmptySearchResult/EmptySearchResult.js');
 var Popover = require('../Popover/Popover.js');
 var Box = require('../Box/Box.js');
 var Scrollable = require('../Scrollable/Scrollable.js');
@@ -16,26 +17,39 @@ 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 SearchableSelect({
+function DropDownBase({
   loading,
   loadingMore,
   options,
-  selected,
-  onSelect,
+  value,
+  onChange,
+  onBlur,
   emptyStateTitle = '',
   emptyStateDescription,
   onQueryChange,
   selectedLabelKey,
   label,
+  labelHidden,
+  searchable = true,
   placeholder,
   disabled,
   requiredIndicator,
   helpText,
   error,
-  pinSelected = true,
   allowClear,
-  onScrolledToBottom
+  onScrolledToBottom,
+  suffixAction
 }) {
   const i18n = hooks.useI18n();
   const [query, setQuery] = react.useState('');
@@ -46,10 +60,18 @@ function SearchableSelect({
   // 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?.('');
   }, [onQueryChange]);
   react.useEffect(() => {
     function handleEsc(event) {
@@ -62,32 +84,33 @@ function SearchableSelect({
   // 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 (selected.length < 1) return;
-    const loadedOption = options.find(option => option.value === selected[0]);
-    const label = getValueByPath(loadedOption?.object, selectedLabelKey);
-    if (typeof label === 'string' && (cachedSelection?.value !== selected[0] || cachedSelection.label !== label)) {
+    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: selected[0],
+        value: selectedValue,
         label
       });
     }
-  }, [selected, options, selectedLabelKey, cachedSelection]);
+  }, [selectedValue, options, selectedLabelKey, cachedSelection]);
   const textSelectedItem = react.useMemo(() => {
-    if (selected.length < 1) return '';
-    const selectedItem = options.find(option => option.value === selected[0]);
-    const value = getValueByPath(selectedItem?.object, selectedLabelKey);
-    if (typeof value === 'string') return value;
-    return cachedSelection?.value === selected[0] ? cachedSelection.label : '';
-  }, [selected, options, selectedLabelKey, cachedSelection]);
+    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);
-    onSelect([]);
+    onChange?.('');
     if (requiredIndicator) {
       setPopoverActive(true);
     } else {
       skipNextFocusOpen.current = true;
     }
-  }, [onSelect, requiredIndicator]);
+  }, [onChange, requiredIndicator]);
   const handleActivatorFocus = react.useCallback(() => {
     if (disabled) return;
     if (skipNextFocusOpen.current) {
@@ -96,10 +119,14 @@ function SearchableSelect({
     }
     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: SearchableSelect_module.default.Activator,
+    className: DropDown_module.default.Activator,
     children: /*#__PURE__*/jsxRuntime.jsx(TextField.TextField, {
       label: label,
+      labelHidden: labelHidden,
       placeholder: placeholder,
       autoComplete: "off",
       value: textSelectedItem,
@@ -107,38 +134,25 @@ function SearchableSelect({
       requiredIndicator: requiredIndicator,
       helpText: helpText,
       error: error,
-      clearButton: allowClear && textSelectedItem !== '',
+      role: "combobox",
+      ariaExpanded: popoverActive,
+      clearButton: showClearButton,
       onClearButtonClick: handleSelectionClear,
       onFocus: handleActivatorFocus,
-      suffix: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+      onBlur: onBlur,
+      suffix: showClearButton ? undefined : /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
         source: polarisIcons.CaretDownIcon
-      })
+      }),
+      connectedRight: suffixAction ? utils.buttonFrom(suffixAction) : undefined
     })
   });
-  const pinnedSelectedOption = react.useMemo(() => {
-    if (query || selected.length < 1) return null;
-    const loadedOption = options.find(option => option.value === selected[0]);
-    if (loadedOption) {
-      return pinSelected ? {
-        value: loadedOption.value,
-        label: loadedOption.label
-      } : null;
-    }
-    return cachedSelection?.value === selected[0] ? cachedSelection : null;
-  }, [query, selected, options, cachedSelection, pinSelected]);
+
+  // 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) return null;
-    const listOptions = pinnedSelectedOption ? options.filter(option => option.value !== pinnedSelectedOption.value) : options;
-    if (listOptions.length === 0 && !pinnedSelectedOption) return null;
-    const pinnedMarkup = pinnedSelectedOption ? /*#__PURE__*/jsxRuntime.jsx(Listbox.Listbox.Option, {
-      value: pinnedSelectedOption.value,
-      selected: true,
-      children: /*#__PURE__*/jsxRuntime.jsx(Listbox.Listbox.TextOption, {
-        selected: true,
-        children: pinnedSelectedOption.label
-      })
-    }, pinnedSelectedOption.value) : null;
-    return [pinnedMarkup, ...listOptions.map(option => {
+    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,
@@ -148,45 +162,45 @@ function SearchableSelect({
           children: option.label
         })
       }, option.value);
-    })];
-  }, [loading, options, selected, pinnedSelectedOption]);
+    });
+  }, [loading, filteredOptions, selected]);
   const loadingMarkup = loading ? /*#__PURE__*/jsxRuntime.jsx(Listbox.Listbox.Loading, {
-    accessibilityLabel: i18n.translate('Polaris.SearchableSelect.loadingAccessibilityLabel')
+    accessibilityLabel: i18n.translate('Polaris.DropDown.loadingAccessibilityLabel')
   }) : null;
   const loadingMoreMarkup = loadingMore ? /*#__PURE__*/jsxRuntime.jsx(Listbox.Listbox.Loading, {
-    accessibilityLabel: i18n.translate('Polaris.SearchableSelect.loadingMoreAccessibilityLabel')
+    accessibilityLabel: i18n.translate('Polaris.DropDown.loadingMoreAccessibilityLabel')
   }) : null;
-  const noResultsMarkup = !loading && options.length === 0 && !pinnedSelectedOption ? /*#__PURE__*/jsxRuntime.jsx(EmptySearchResult.EmptySearchResult, {
-    title: emptyStateTitle,
-    description: emptyStateDescription ?? (query ? i18n.translate('Polaris.SearchableSelect.noResultsFoundFor', {
+  const noResultsMarkup = !loading && filteredOptions.length === 0 ? /*#__PURE__*/jsxRuntime.jsx(EmptySearchResult.EmptySearchResult, {
+    title: emptyStateTitle || (query ? i18n.translate('Polaris.DropDown.noResultsFoundFor', {
       query
-    }) : i18n.translate('Polaris.SearchableSelect.noResultsFound'))
+    }) : i18n.translate('Polaris.DropDown.noResultsFound')),
+    description: emptyStateDescription
   }) : null;
   const updateSelection = react.useCallback(newSelection => {
     const option = options.find(({
-      value
-    }) => value === newSelection);
-    const label = getValueByPath(option?.object, selectedLabelKey);
-    if (typeof label === 'string') {
+      value: optionValue
+    }) => optionValue === newSelection);
+    const label = resolveOptionLabel(option, selectedLabelKey);
+    if (label) {
       setCachedSelection({
         value: newSelection,
         label
       });
     } else if (cachedSelection?.value !== newSelection) {
-      // re-selecting the pinned option (absent from `options`) must keep its cached label
+      // re-selecting the cached option (absent from `options`) must keep its cached label
       setCachedSelection(null);
     }
-    onSelect([newSelection]);
+    onChange?.(newSelection);
     setQuery('');
-    onQueryChange('');
+    onQueryChange?.('');
     setPopoverActive(false);
-  }, [options, selectedLabelKey, cachedSelection, onSelect, onQueryChange]);
+  }, [options, selectedLabelKey, cachedSelection, onChange, onQueryChange]);
   const handleActiveOptionChange = react.useCallback((_value, domId) => {
     setActiveOptionId(domId);
   }, []);
   const handleQueryClear = react.useCallback(() => {
     setQuery('');
-    onQueryChange('');
+    onQueryChange?.('');
   }, [onQueryChange]);
   return /*#__PURE__*/jsxRuntime.jsx(Popover.Popover, {
     activator: activator,
@@ -197,7 +211,7 @@ function SearchableSelect({
     preferInputActivator: false,
     children: /*#__PURE__*/jsxRuntime.jsxs(Popover.Popover.Pane, {
       fixed: true,
-      children: [/*#__PURE__*/jsxRuntime.jsx(Box.Box, {
+      children: [searchable ? /*#__PURE__*/jsxRuntime.jsx(Box.Box, {
         padding: "300",
         children: /*#__PURE__*/jsxRuntime.jsx(TextField.TextField, {
           prefix: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
@@ -206,22 +220,23 @@ function SearchableSelect({
           label: "",
           labelHidden: true,
           autoComplete: "off",
-          placeholder: i18n.translate('Polaris.SearchableSelect.searchPlaceholder'),
+          placeholder: i18n.translate('Polaris.DropDown.searchPlaceholder'),
           clearButton: true,
           ariaActiveDescendant: activeOptionId,
           ariaControls: listboxId,
           value: query,
           onChange: value => {
-            onQueryChange(value);
+            onQueryChange?.(value);
             setQuery(value);
           },
           onClearButtonClick: handleQueryClear
         })
-      }), /*#__PURE__*/jsxRuntime.jsx(Scrollable.Scrollable, {
+      }) : null, /*#__PURE__*/jsxRuntime.jsx(Scrollable.Scrollable, {
         style: {
           position: 'relative',
           maxHeight: SCROLLABLE_HEIGHT,
-          padding: '0 0 var(--p-space-200)',
+          // 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)'
         },
@@ -239,5 +254,42 @@ function SearchableSelect({
     })
   });
 }
+// 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.SearchableSelect = SearchableSelect;
+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/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;