@cloudscape-design/components-themeable 3.0.976 → 3.0.978

package/lib/internal/template/internal/components/drag-handle/hooks/use-drag-handle-interaction-state.js

@@ -0,0 +1,259 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect, useReducer, useRef } from 'react';
+export function calculateNextState(state, action) {
+    switch (action.type) {
+        case 'POINTER_DOWN': {
+            const { nativeEvent, metadata } = action.payload;
+            return {
+                value: 'dnd-start',
+                eventData: nativeEvent,
+                metadata,
+            };
+        }
+        case 'POINTER_MOVE': {
+            const { nativeEvent } = action.payload;
+            if (state.value === 'dnd-start' || state.value === 'dnd-active') {
+                return Object.assign(Object.assign({}, state), { value: 'dnd-active', eventData: nativeEvent });
+            }
+            return state;
+        }
+        case 'POINTER_UP': {
+            if (state.value === 'dnd-start' || state.value === 'dnd-active') {
+                const dndSubStateBeforeUp = state.value;
+                if (dndSubStateBeforeUp === 'dnd-start') {
+                    return {
+                        value: 'uap-action-start',
+                        metadata: state.metadata, // Preserve metadata when transitioning from dnd-start to uap-action-start
+                    };
+                }
+                else {
+                    return {
+                        value: 'dnd-end',
+                        eventData: state.eventData,
+                    };
+                }
+            }
+            return state;
+        }
+        case 'POINTER_CANCEL': {
+            if (state.value === 'dnd-start' || state.value === 'dnd-active') {
+                return {
+                    value: 'dnd-end',
+                };
+            }
+            return state;
+        }
+        case 'KEY_DOWN': {
+            const { key, metadata } = action.payload;
+            if (key === 'Enter' || key === ' ') {
+                if (state.value === null || state.value === 'uap-action-end' || state.value === 'dnd-end') {
+                    return {
+                        value: 'uap-action-start',
+                        metadata,
+                    };
+                }
+                else if (state.value === 'uap-action-start') {
+                    return {
+                        value: 'uap-action-end',
+                    };
+                }
+                else if (state.value === 'dnd-start' || state.value === 'dnd-active') {
+                    return {
+                        value: 'uap-action-start',
+                        metadata,
+                    };
+                }
+            }
+            else if (key === 'Escape') {
+                if (state.value === 'uap-action-start') {
+                    return {
+                        value: 'uap-action-end',
+                    };
+                }
+            }
+            return state;
+        }
+        case 'FOCUS':
+            return state;
+        case 'BLUR':
+            if (state.value === 'uap-action-start') {
+                return {
+                    value: 'uap-action-end',
+                };
+            }
+            return state;
+        default:
+            throw new Error(`The given action type [${action.type}] is not supported.`);
+    }
+}
+export function getCallbacksForTransition(prevState, nextState) {
+    const callbacks = [];
+    // Transitions from dnd-start or dnd-active to any other state
+    if ((prevState.value === 'dnd-start' || prevState.value === 'dnd-active') &&
+        nextState.value !== 'dnd-start' &&
+        nextState.value !== 'dnd-active') {
+        callbacks.push({ type: 'onDndEnd' });
+    }
+    // From uap-action-start to uap-action-end directly
+    if (prevState.value === 'uap-action-start' && nextState.value === 'uap-action-end') {
+        callbacks.push({ type: 'onUapActionEnd' });
+    }
+    // Transitions to dnd-start
+    if (nextState.value === 'dnd-start') {
+        callbacks.push({
+            type: 'onDndStart',
+            payload: nextState.eventData,
+            metadata: nextState.metadata,
+        });
+    }
+    // Transitions to dnd-active
+    if (nextState.value === 'dnd-active' && prevState.value === 'dnd-start') {
+        callbacks.push({
+            type: 'onDndActive',
+            payload: nextState.eventData,
+        });
+    }
+    // Transitions to uap-action-start
+    if (nextState.value === 'uap-action-start') {
+        callbacks.push({
+            type: 'onUapActionStart',
+            metadata: nextState.metadata,
+        });
+    }
+    return callbacks;
+}
+function interactionReducer(state, action) {
+    const nextState = calculateNextState(state, action);
+    // Special handling for POINTER_MOVE to always trigger onDndActive callback
+    if (action.type === 'POINTER_MOVE' && action.payload.nativeEvent) {
+        const transitionCallbacks = getCallbacksForTransition(state, nextState);
+        // Check if there's already an onDndActive callback from the transition
+        const hasOnDndActiveCallback = transitionCallbacks.some(callback => callback.type === 'onDndActive');
+        const callbacks = hasOnDndActiveCallback
+            ? transitionCallbacks
+            : [...transitionCallbacks, { type: 'onDndActive', payload: action.payload.nativeEvent }];
+        return Object.assign(Object.assign({}, nextState), { transitionCallbacks: callbacks });
+    }
+    // Return current state if state didn't change
+    const isDndState = (state) => {
+        return state.value === 'dnd-start' || state.value === 'dnd-active' || state.value === 'dnd-end';
+    };
+    if (nextState.value === state.value) {
+        if (isDndState(nextState) && isDndState(state)) {
+            if (nextState.eventData === state.eventData) {
+                return state;
+            }
+        }
+        else {
+            return state;
+        }
+    }
+    const callbacks = getCallbacksForTransition(state, nextState);
+    return Object.assign(Object.assign({}, nextState), { transitionCallbacks: callbacks.length > 0 ? callbacks : undefined });
+}
+function useStateLogger(state, isEnabled) {
+    const prevStateRef = useRef(state);
+    useEffect(() => {
+        if (state.value !== prevStateRef.current.value && isEnabled) {
+            console.log(`State transition: ${prevStateRef.current.value} -> ${state.value}`, {
+                prevState: prevStateRef.current,
+                nextState: state,
+            });
+        }
+        prevStateRef.current = state;
+    }, [state, isEnabled]);
+}
+function useCallbackHandler(pendingCallbacks, props, dispatch) {
+    useEffect(() => {
+        if (!(pendingCallbacks === null || pendingCallbacks === void 0 ? void 0 : pendingCallbacks.length)) {
+            return;
+        }
+        pendingCallbacks.forEach(callback => {
+            var _a, _b, _c, _d, _e;
+            switch (callback.type) {
+                case 'onDndStart':
+                    (_a = props.onDndStartAction) === null || _a === void 0 ? void 0 : _a.call(props, callback.payload, callback.metadata);
+                    break;
+                case 'onDndActive':
+                    (_b = props.onDndActiveAction) === null || _b === void 0 ? void 0 : _b.call(props, callback.payload);
+                    break;
+                case 'onDndEnd':
+                    (_c = props.onDndEndAction) === null || _c === void 0 ? void 0 : _c.call(props);
+                    break;
+                case 'onUapActionStart':
+                    (_d = props.onUapActionStartAction) === null || _d === void 0 ? void 0 : _d.call(props, callback.metadata);
+                    break;
+                case 'onUapActionEnd':
+                    (_e = props.onUapActionEndAction) === null || _e === void 0 ? void 0 : _e.call(props);
+                    break;
+            }
+        });
+    }, [pendingCallbacks, props, dispatch]);
+}
+/**
+ * Manages interaction states for drag handle components.
+ *
+ * The hook implements a state machine for drag handles that supports:
+ * - Pointer-based drag-and-drop (DnD) interactions
+ * - Keyboard-based universal access pattern (UAP) interactions
+ * - State transitions with appropriate callbacks
+ * - Metadata passing between states
+ *
+ * States:
+ * - null: Idle state with no active interaction
+ * - dnd-start: Initial pointer down, beginning of potential drag
+ * - dnd-active: Active dragging with pointer movement
+ * - dnd-end: Completed drag operation
+ * - uap-action-start: Keyboard/accessibility action initiated
+ * - uap-action-end: Keyboard/accessibility action completed
+ */
+export default function useDragHandleInteractionState(props = {}, options = { debug: false }) {
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    const [interaction, dispatch] = useReducer((interactionReducer), { value: null });
+    useStateLogger(interaction, options.debug);
+    useCallbackHandler(interaction.transitionCallbacks, propsRef.current, dispatch);
+    return {
+        interaction,
+        processPointerDown: (event, metadata) => {
+            dispatch({
+                type: 'POINTER_DOWN',
+                payload: { nativeEvent: event, metadata },
+            });
+        },
+        processPointerMove: (event) => {
+            dispatch({
+                type: 'POINTER_MOVE',
+                payload: { nativeEvent: event },
+            });
+        },
+        processPointerUp: (event) => {
+            dispatch({
+                type: 'POINTER_UP',
+                payload: { nativeEvent: event },
+            });
+        },
+        processPointerCancel: () => {
+            dispatch({
+                type: 'POINTER_CANCEL',
+            });
+        },
+        processKeyDown: (event, metadata) => {
+            const key = event.key;
+            if (key === 'Enter' || key === 'Escape' || key === ' ') {
+                dispatch({
+                    type: 'KEY_DOWN',
+                    payload: { key, metadata },
+                });
+            }
+        },
+        processFocus: () => {
+            dispatch({ type: 'FOCUS' });
+        },
+        processBlur: () => {
+            dispatch({ type: 'BLUR' });
+        },
+    };
+}
+//# sourceMappingURL=use-drag-handle-interaction-state.js.map

package/lib/internal/template/internal/components/drag-handle/hooks/use-drag-handle-interaction-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-drag-handle-interaction-state.js","sourceRoot":"","sources":["../../../../../../src/internal/components/drag-handle/hooks/use-drag-handle-interaction-state.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\nimport { useEffect, useReducer, useRef } from 'react';\n\nimport type {\n  Action,\n  DragHandleInteractionState,\n  StateTransitionCallbacks,\n  UseDragHandleInteractionStateProps,\n} from './interfaces';\n\nexport { UseDragHandleInteractionStateProps };\n\nexport function calculateNextState<T = void>(\n  state: DragHandleInteractionState<T>,\n  action: Action<T>\n): DragHandleInteractionState<T> {\n  switch (action.type) {\n    case 'POINTER_DOWN': {\n      const { nativeEvent, metadata } = action.payload;\n      return {\n        value: 'dnd-start',\n        eventData: nativeEvent,\n        metadata,\n      };\n    }\n\n    case 'POINTER_MOVE': {\n      const { nativeEvent } = action.payload;\n      if (state.value === 'dnd-start' || state.value === 'dnd-active') {\n        return {\n          ...state,\n          value: 'dnd-active',\n          eventData: nativeEvent,\n        };\n      }\n      return state;\n    }\n\n    case 'POINTER_UP': {\n      if (state.value === 'dnd-start' || state.value === 'dnd-active') {\n        const dndSubStateBeforeUp = state.value;\n        if (dndSubStateBeforeUp === 'dnd-start') {\n          return {\n            value: 'uap-action-start',\n            metadata: state.metadata, // Preserve metadata when transitioning from dnd-start to uap-action-start\n          };\n        } else {\n          return {\n            value: 'dnd-end',\n            eventData: state.eventData,\n          };\n        }\n      }\n      return state;\n    }\n\n    case 'POINTER_CANCEL': {\n      if (state.value === 'dnd-start' || state.value === 'dnd-active') {\n        return {\n          value: 'dnd-end',\n        };\n      }\n      return state;\n    }\n\n    case 'KEY_DOWN': {\n      const { key, metadata } = action.payload;\n\n      if (key === 'Enter' || key === ' ') {\n        if (state.value === null || state.value === 'uap-action-end' || state.value === 'dnd-end') {\n          return {\n            value: 'uap-action-start',\n            metadata,\n          };\n        } else if (state.value === 'uap-action-start') {\n          return {\n            value: 'uap-action-end',\n          };\n        } else if (state.value === 'dnd-start' || state.value === 'dnd-active') {\n          return {\n            value: 'uap-action-start',\n            metadata,\n          };\n        }\n      } else if (key === 'Escape') {\n        if (state.value === 'uap-action-start') {\n          return {\n            value: 'uap-action-end',\n          };\n        }\n      }\n      return state;\n    }\n\n    case 'FOCUS':\n      return state;\n\n    case 'BLUR':\n      if (state.value === 'uap-action-start') {\n        return {\n          value: 'uap-action-end',\n        };\n      }\n      return state;\n\n    default:\n      throw new Error(`The given action type [${action.type}] is not supported.`);\n  }\n}\n\nexport function getCallbacksForTransition<T = void>(\n  prevState: DragHandleInteractionState<T>,\n  nextState: DragHandleInteractionState<T>\n): StateTransitionCallbacks<T>[] {\n  const callbacks: StateTransitionCallbacks<T>[] = [];\n\n  // Transitions from dnd-start or dnd-active to any other state\n  if (\n    (prevState.value === 'dnd-start' || prevState.value === 'dnd-active') &&\n    nextState.value !== 'dnd-start' &&\n    nextState.value !== 'dnd-active'\n  ) {\n    callbacks.push({ type: 'onDndEnd' });\n  }\n\n  // From uap-action-start to uap-action-end directly\n  if (prevState.value === 'uap-action-start' && nextState.value === 'uap-action-end') {\n    callbacks.push({ type: 'onUapActionEnd' });\n  }\n\n  // Transitions to dnd-start\n  if (nextState.value === 'dnd-start') {\n    callbacks.push({\n      type: 'onDndStart',\n      payload: nextState.eventData!,\n      metadata: nextState.metadata,\n    });\n  }\n\n  // Transitions to dnd-active\n  if (nextState.value === 'dnd-active' && prevState.value === 'dnd-start') {\n    callbacks.push({\n      type: 'onDndActive',\n      payload: nextState.eventData!,\n    });\n  }\n\n  // Transitions to uap-action-start\n  if (nextState.value === 'uap-action-start') {\n    callbacks.push({\n      type: 'onUapActionStart',\n      metadata: nextState.metadata,\n    });\n  }\n\n  return callbacks;\n}\n\nfunction interactionReducer<T = void>(\n  state: DragHandleInteractionState<T>,\n  action: Action<T>\n): DragHandleInteractionState<T> {\n  const nextState = calculateNextState(state, action);\n\n  // Special handling for POINTER_MOVE to always trigger onDndActive callback\n  if (action.type === 'POINTER_MOVE' && action.payload.nativeEvent) {\n    const transitionCallbacks = getCallbacksForTransition(state, nextState);\n    // Check if there's already an onDndActive callback from the transition\n    const hasOnDndActiveCallback = transitionCallbacks.some(callback => callback.type === 'onDndActive');\n    const callbacks = hasOnDndActiveCallback\n      ? transitionCallbacks\n      : [...transitionCallbacks, { type: 'onDndActive' as const, payload: action.payload.nativeEvent }];\n\n    return {\n      ...nextState,\n      transitionCallbacks: callbacks,\n    };\n  }\n\n  // Return current state if state didn't change\n  const isDndState = (state: DragHandleInteractionState<T>) => {\n    return state.value === 'dnd-start' || state.value === 'dnd-active' || state.value === 'dnd-end';\n  };\n  if (nextState.value === state.value) {\n    if (isDndState(nextState) && isDndState(state)) {\n      if (nextState.eventData === state.eventData) {\n        return state;\n      }\n    } else {\n      return state;\n    }\n  }\n\n  const callbacks = getCallbacksForTransition(state, nextState);\n  return {\n    ...nextState,\n    transitionCallbacks: callbacks.length > 0 ? callbacks : undefined,\n  };\n}\n\nfunction useStateLogger<T = void>(state: DragHandleInteractionState<T>, isEnabled: boolean) {\n  const prevStateRef = useRef<DragHandleInteractionState<T>>(state);\n  useEffect(() => {\n    if (state.value !== prevStateRef.current.value && isEnabled) {\n      console.log(`State transition: ${prevStateRef.current.value} -> ${state.value}`, {\n        prevState: prevStateRef.current,\n        nextState: state,\n      });\n    }\n    prevStateRef.current = state;\n  }, [state, isEnabled]);\n}\n\nfunction useCallbackHandler<T = void>(\n  pendingCallbacks: StateTransitionCallbacks<T>[] | undefined,\n  props: UseDragHandleInteractionStateProps<T>,\n  dispatch: React.Dispatch<Action<T>>\n) {\n  useEffect(() => {\n    if (!pendingCallbacks?.length) {\n      return;\n    }\n    pendingCallbacks.forEach(callback => {\n      switch (callback.type) {\n        case 'onDndStart':\n          props.onDndStartAction?.(callback.payload, callback.metadata);\n          break;\n        case 'onDndActive':\n          props.onDndActiveAction?.(callback.payload);\n          break;\n        case 'onDndEnd':\n          props.onDndEndAction?.();\n          break;\n        case 'onUapActionStart':\n          props.onUapActionStartAction?.(callback.metadata);\n          break;\n        case 'onUapActionEnd':\n          props.onUapActionEndAction?.();\n          break;\n      }\n    });\n  }, [pendingCallbacks, props, dispatch]);\n}\n\n/**\n * Manages interaction states for drag handle components.\n *\n * The hook implements a state machine for drag handles that supports:\n * - Pointer-based drag-and-drop (DnD) interactions\n * - Keyboard-based universal access pattern (UAP) interactions\n * - State transitions with appropriate callbacks\n * - Metadata passing between states\n *\n * States:\n * - null: Idle state with no active interaction\n * - dnd-start: Initial pointer down, beginning of potential drag\n * - dnd-active: Active dragging with pointer movement\n * - dnd-end: Completed drag operation\n * - uap-action-start: Keyboard/accessibility action initiated\n * - uap-action-end: Keyboard/accessibility action completed\n */\nexport default function useDragHandleInteractionState<T = void>(\n  props: UseDragHandleInteractionStateProps<T> = {},\n  options = { debug: false }\n) {\n  const propsRef = useRef<UseDragHandleInteractionStateProps<T>>(props);\n  propsRef.current = props;\n\n  const [interaction, dispatch] = useReducer(interactionReducer<T>, { value: null } as DragHandleInteractionState<T>);\n  useStateLogger(interaction, options.debug);\n  useCallbackHandler(interaction.transitionCallbacks, propsRef.current, dispatch);\n  return {\n    interaction,\n    processPointerDown: (event: PointerEvent, metadata?: T) => {\n      dispatch({\n        type: 'POINTER_DOWN',\n        payload: { nativeEvent: event, metadata },\n      });\n    },\n    processPointerMove: (event: PointerEvent) => {\n      dispatch({\n        type: 'POINTER_MOVE',\n        payload: { nativeEvent: event },\n      });\n    },\n    processPointerUp: (event: PointerEvent) => {\n      dispatch({\n        type: 'POINTER_UP',\n        payload: { nativeEvent: event },\n      });\n    },\n    processPointerCancel: () => {\n      dispatch({\n        type: 'POINTER_CANCEL',\n      });\n    },\n    processKeyDown: (event: React.KeyboardEvent<Element>, metadata?: T) => {\n      const key = event.key;\n      if (key === 'Enter' || key === 'Escape' || key === ' ') {\n        dispatch({\n          type: 'KEY_DOWN',\n          payload: { key, metadata },\n        });\n      }\n    },\n    processFocus: () => {\n      dispatch({ type: 'FOCUS' });\n    },\n    processBlur: () => {\n      dispatch({ type: 'BLUR' });\n    },\n  };\n}\n"]}

package/lib/internal/template/internal/components/drag-handle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,QAAA,MAAM,kBAAkB,iFA6CvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,QAAA,MAAM,kBAAkB,iFA+CvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/internal/template/internal/components/drag-handle/index.js

@@ -6,9 +6,9 @@ import { getBaseProps } from '../../base-component';
 import DragHandleWrapper from '../drag-handle-wrapper';
 import DragHandleButton from './button';
 const InternalDragHandle = forwardRef((_a, ref) => {
-    var { variant, size, ariaLabel, ariaLabelledBy, ariaDescribedby, tooltipText, ariaValue, disabled, directions = {}, onPointerDown, onKeyDown, onDirectionClick, triggerMode } = _a, rest = __rest(_a, ["variant", "size", "ariaLabel", "ariaLabelledBy", "ariaDescribedby", "tooltipText", "ariaValue", "disabled", "directions", "onPointerDown", "onKeyDown", "onDirectionClick", "triggerMode"]);
+    var { variant, size, ariaLabel, ariaLabelledBy, ariaDescribedby, tooltipText, ariaValue, disabled, directions = {}, onPointerDown, onKeyDown, onDirectionClick, triggerMode, initialShowButtons } = _a, rest = __rest(_a, ["variant", "size", "ariaLabel", "ariaLabelledBy", "ariaDescribedby", "tooltipText", "ariaValue", "disabled", "directions", "onPointerDown", "onKeyDown", "onDirectionClick", "triggerMode", "initialShowButtons"]);
     const baseProps = getBaseProps(rest);
-    return (React.createElement(DragHandleWrapper, { directions: !disabled ? directions : {}, tooltipText: tooltipText, onDirectionClick: onDirectionClick, triggerMode: triggerMode },
+    return (React.createElement(DragHandleWrapper, { directions: !disabled ? directions : {}, tooltipText: tooltipText, onDirectionClick: onDirectionClick, triggerMode: triggerMode, initialShowButtons: initialShowButtons },
         React.createElement(DragHandleButton, { ref: ref, className: baseProps.className, variant: variant, size: size, ariaLabel: ariaLabel, ariaLabelledBy: ariaLabelledBy, ariaDescribedby: ariaDescribedby, ariaValue: ariaValue, disabled: disabled, onPointerDown: onPointerDown, onKeyDown: onKeyDown })));
 });
 export default InternalDragHandle;

package/lib/internal/template/internal/components/drag-handle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,gBAAgB,MAAM,UAAU,CAAC;AAKxC,MAAM,kBAAkB,GAAG,UAAU,CACnC,CACE,EAekB,EAClB,GAAuB,EACvB,EAAE;QAjBF,EACE,OAAO,EACP,IAAI,EACJ,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EACX,SAAS,EACT,QAAQ,EACR,UAAU,GAAG,EAAE,EACf,aAAa,EACb,SAAS,EACT,gBAAgB,EAChB,WAAW,OAEK,EADb,IAAI,cAdT,4LAeC,CADQ;IAIT,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,OAAO,CACL,oBAAC,iBAAiB,IAChB,UAAU,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EACvC,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW;QAExB,oBAAC,gBAAgB,IACf,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,SAAS,EAC9B,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,GACpB,CACgB,CACrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef } from 'react';\n\nimport { getBaseProps } from '../../base-component';\nimport DragHandleWrapper from '../drag-handle-wrapper';\nimport DragHandleButton from './button';\nimport { DragHandleProps } from './interfaces';\n\nexport { DragHandleProps };\n\nconst InternalDragHandle = forwardRef(\n  (\n    {\n      variant,\n      size,\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedby,\n      tooltipText,\n      ariaValue,\n      disabled,\n      directions = {},\n      onPointerDown,\n      onKeyDown,\n      onDirectionClick,\n      triggerMode,\n      ...rest\n    }: DragHandleProps,\n    ref: React.Ref<Element>\n  ) => {\n    const baseProps = getBaseProps(rest);\n\n    return (\n      <DragHandleWrapper\n        directions={!disabled ? directions : {}}\n        tooltipText={tooltipText}\n        onDirectionClick={onDirectionClick}\n        triggerMode={triggerMode}\n      >\n        <DragHandleButton\n          ref={ref}\n          className={baseProps.className}\n          variant={variant}\n          size={size}\n          ariaLabel={ariaLabel}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedby={ariaDescribedby}\n          ariaValue={ariaValue}\n          disabled={disabled}\n          onPointerDown={onPointerDown}\n          onKeyDown={onKeyDown}\n        />\n      </DragHandleWrapper>\n    );\n  }\n);\n\nexport default InternalDragHandle;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,gBAAgB,MAAM,UAAU,CAAC;AAKxC,MAAM,kBAAkB,GAAG,UAAU,CACnC,CACE,EAgBkB,EAClB,GAAuB,EACvB,EAAE;QAlBF,EACE,OAAO,EACP,IAAI,EACJ,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EACX,SAAS,EACT,QAAQ,EACR,UAAU,GAAG,EAAE,EACf,aAAa,EACb,SAAS,EACT,gBAAgB,EAChB,WAAW,EACX,kBAAkB,OAEF,EADb,IAAI,cAfT,kNAgBC,CADQ;IAIT,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,OAAO,CACL,oBAAC,iBAAiB,IAChB,UAAU,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EACvC,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,kBAAkB;QAEtC,oBAAC,gBAAgB,IACf,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,SAAS,EAC9B,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,GACpB,CACgB,CACrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef } from 'react';\n\nimport { getBaseProps } from '../../base-component';\nimport DragHandleWrapper from '../drag-handle-wrapper';\nimport DragHandleButton from './button';\nimport { DragHandleProps } from './interfaces';\n\nexport { DragHandleProps };\n\nconst InternalDragHandle = forwardRef(\n  (\n    {\n      variant,\n      size,\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedby,\n      tooltipText,\n      ariaValue,\n      disabled,\n      directions = {},\n      onPointerDown,\n      onKeyDown,\n      onDirectionClick,\n      triggerMode,\n      initialShowButtons,\n      ...rest\n    }: DragHandleProps,\n    ref: React.Ref<Element>\n  ) => {\n    const baseProps = getBaseProps(rest);\n\n    return (\n      <DragHandleWrapper\n        directions={!disabled ? directions : {}}\n        tooltipText={tooltipText}\n        onDirectionClick={onDirectionClick}\n        triggerMode={triggerMode}\n        initialShowButtons={initialShowButtons}\n      >\n        <DragHandleButton\n          ref={ref}\n          className={baseProps.className}\n          variant={variant}\n          size={size}\n          ariaLabel={ariaLabel}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedby={ariaDescribedby}\n          ariaValue={ariaValue}\n          disabled={disabled}\n          onPointerDown={onPointerDown}\n          onKeyDown={onKeyDown}\n        />\n      </DragHandleWrapper>\n    );\n  }\n);\n\nexport default InternalDragHandle;\n"]}

package/lib/internal/template/internal/components/drag-handle/interfaces.d.ts

@@ -15,6 +15,7 @@ export interface DragHandleProps {
     directions?: Partial<Record<DragHandleProps.Direction, DragHandleProps.DirectionState>>;
     onDirectionClick?: (direction: DragHandleProps.Direction) => void;
     triggerMode?: TriggerMode;
+    initialShowButtons?: boolean;
 }
 export declare namespace DragHandleProps {
     type Variant = 'drag-indicator' | 'resize-area' | 'resize-horizontal' | 'resize-vertical';

package/lib/internal/template/internal/components/drag-handle/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/interfaces.ts"],"names":[],"mappings":";AAGA,OAAO,EACL,SAAS,IAAI,gBAAgB,EAC7B,cAAc,IAAI,qBAAqB,EACvC,WAAW,EACZ,MAAM,mCAAmC,CAAC;AAE3C,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC;IAClC,IAAI,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC;IAC1C,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IAEvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,CAAC,SAAS,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC,CAAC;IACxF,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,CAAC,SAAS,KAAK,IAAI,CAAC;IAClE,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,OAAO,GAAG,gBAAgB,GAAG,aAAa,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;IAEjG,KAAY,SAAS,GAAG,gBAAgB,CAAC;IACzC,KAAY,cAAc,GAAG,qBAAqB,CAAC;IAEnD,KAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,CAAC;IAEtC,UAAiB,SAAS;QACxB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;KAClB;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/interfaces.ts"],"names":[],"mappings":";AAGA,OAAO,EACL,SAAS,IAAI,gBAAgB,EAC7B,cAAc,IAAI,qBAAqB,EACvC,WAAW,EACZ,MAAM,mCAAmC,CAAC;AAE3C,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC;IAClC,IAAI,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC;IAC1C,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IAEvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,CAAC,SAAS,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC,CAAC;IACxF,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,CAAC,SAAS,KAAK,IAAI,CAAC;IAClE,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,OAAO,GAAG,gBAAgB,GAAG,aAAa,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;IAEjG,KAAY,SAAS,GAAG,gBAAgB,CAAC;IACzC,KAAY,cAAc,GAAG,qBAAqB,CAAC;IAEnD,KAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,CAAC;IAEtC,UAAiB,SAAS;QACxB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;KAClB;CACF"}

package/lib/internal/template/internal/components/drag-handle/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  Direction as WrapperDirection,\n  DirectionState as WrapperDirectionState,\n  TriggerMode,\n} from '../drag-handle-wrapper/interfaces';\n\nexport interface DragHandleProps {\n  variant?: DragHandleProps.Variant;\n  size?: DragHandleProps.Size;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  ariaDescribedby?: string;\n  ariaValue?: DragHandleProps.AriaValue;\n  disabled?: boolean;\n  className?: string;\n  onPointerDown?: React.PointerEventHandler;\n  onKeyDown?: React.KeyboardEventHandler;\n\n  tooltipText?: string;\n  directions?: Partial<Record<DragHandleProps.Direction, DragHandleProps.DirectionState>>;\n  onDirectionClick?: (direction: DragHandleProps.Direction) => void;\n  triggerMode?: TriggerMode;\n}\n\nexport namespace DragHandleProps {\n  export type Variant = 'drag-indicator' | 'resize-area' | 'resize-horizontal' | 'resize-vertical';\n\n  export type Direction = WrapperDirection;\n  export type DirectionState = WrapperDirectionState;\n\n  export type Size = 'small' | 'normal';\n\n  export interface AriaValue {\n    valueMin: number;\n    valueMax: number;\n    valueNow: number;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  Direction as WrapperDirection,\n  DirectionState as WrapperDirectionState,\n  TriggerMode,\n} from '../drag-handle-wrapper/interfaces';\n\nexport interface DragHandleProps {\n  variant?: DragHandleProps.Variant;\n  size?: DragHandleProps.Size;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  ariaDescribedby?: string;\n  ariaValue?: DragHandleProps.AriaValue;\n  disabled?: boolean;\n  className?: string;\n  onPointerDown?: React.PointerEventHandler;\n  onKeyDown?: React.KeyboardEventHandler;\n\n  tooltipText?: string;\n  directions?: Partial<Record<DragHandleProps.Direction, DragHandleProps.DirectionState>>;\n  onDirectionClick?: (direction: DragHandleProps.Direction) => void;\n  triggerMode?: TriggerMode;\n  initialShowButtons?: boolean;\n}\n\nexport namespace DragHandleProps {\n  export type Variant = 'drag-indicator' | 'resize-area' | 'resize-horizontal' | 'resize-vertical';\n\n  export type Direction = WrapperDirection;\n  export type DirectionState = WrapperDirectionState;\n\n  export type Size = 'small' | 'normal';\n\n  export interface AriaValue {\n    valueMin: number;\n    valueMax: number;\n    valueNow: number;\n  }\n}\n"]}

package/lib/internal/template/internal/components/drag-handle-wrapper/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { DragHandleWrapperProps } from './interfaces';
-export default function DragHandleWrapper({ directions, tooltipText, children, onDirectionClick, triggerMode, }: DragHandleWrapperProps): JSX.Element;
+export default function DragHandleWrapper({ directions, tooltipText, children, onDirectionClick, triggerMode, initialShowButtons, }: DragHandleWrapperProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/internal/components/drag-handle-wrapper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/index.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAa,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAWjE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAqB,GACtB,EAAE,sBAAsB,eA8MxB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/index.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAa,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAWjE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAqB,EACrB,kBAA0B,GAC3B,EAAE,sBAAsB,eA8MxB"}

package/lib/internal/template/internal/components/drag-handle-wrapper/index.js

@@ -13,11 +13,11 @@ import styles from './styles.css.js';
 // a drag. A little allowance is needed for usability reasons, but this number
 // isn't set in stone.
 const PRESS_DELTA_MAX = 3;
-export default function DragHandleWrapper({ directions, tooltipText, children, onDirectionClick, triggerMode = 'focus', }) {
+export default function DragHandleWrapper({ directions, tooltipText, children, onDirectionClick, triggerMode = 'focus', initialShowButtons = false, }) {
     const wrapperRef = useRef(null);
     const dragHandleRef = useRef(null);
     const [showTooltip, setShowTooltip] = useState(false);
-    const [showButtons, setShowButtons] = useState(false);
+    const [showButtons, setShowButtons] = useState(initialShowButtons);
     const isPointerDown = useRef(false);
     const initialPointerPosition = useRef();
     const didPointerDrag = useRef(false);
@@ -115,7 +115,7 @@ export default function DragHandleWrapper({ directions, tooltipText, children, o
         }
         else if (triggerMode === 'keyboard-activate' && (event.key === 'Enter' || event.key === ' ')) {
             // toggle buttons when Enter or space is pressed in 'keyboard-activate' triggerMode
-            setShowButtons(prevShowButtons => !prevShowButtons);
+            setShowButtons(prevshowButtons => !prevshowButtons);
         }
         else if (event.key !== 'Alt' && event.key !== 'Control' && event.key !== 'Meta' && event.key !== 'Shift') {
             // Pressing any other key will display the focus-visible ring around the
@@ -137,7 +137,7 @@ export default function DragHandleWrapper({ directions, tooltipText, children, o
         React.createElement("div", { onPointerEnter: onTooltipGroupPointerEnter, onPointerLeave: onTooltipGroupPointerLeave },
             React.createElement("div", { className: styles['drag-handle'], ref: dragHandleRef, onPointerDown: onHandlePointerDown, onKeyDown: onDragHandleKeyDown }, children),
             !isDisabled && !showButtons && showTooltip && tooltipText && (React.createElement(Tooltip, { trackRef: dragHandleRef, value: tooltipText, onDismiss: () => setShowTooltip(false) }))),
-        React.createElement(PortalOverlay, { track: dragHandleRef.current, isDisabled: !showButtons },
+        React.createElement(PortalOverlay, { track: dragHandleRef, isDisabled: !showButtons },
             directions['block-start'] && (React.createElement(DirectionButton, { show: !isDisabled && showButtons, direction: "block-start", state: directions['block-start'], onClick: () => onInternalDirectionClick('block-start') })),
             directions['block-end'] && (React.createElement(DirectionButton, { show: !isDisabled && showButtons, direction: "block-end", state: directions['block-end'], onClick: () => onInternalDirectionClick('block-end') })),
             directions['inline-start'] && (React.createElement(DirectionButton, { show: !isDisabled && showButtons, direction: "inline-start", state: directions['inline-start'], onClick: () => onInternalDirectionClick('inline-start') })),

package/lib/internal/template/internal/components/drag-handle-wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AAExE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,eAAe,MAAM,oBAAoB,CAAC;AAEjD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,0EAA0E;AAC1E,4EAA4E;AAC5E,8EAA8E;AAC9E,sBAAsB;AACtB,MAAM,eAAe,GAAG,CAAC,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,GAAG,OAAO,GACE;IACvB,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,aAAa,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC1D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACpC,MAAM,sBAAsB,GAAG,MAAM,EAAwC,CAAC;IAC9E,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAErC,2EAA2E;IAC3E,sCAAsC;IACtC,MAAM,UAAU,GACd,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAErH,MAAM,gBAAgB,GAA4B,KAAK,CAAC,EAAE;QACxD,wEAAwE;QACxE,2EAA2E;QAC3E,qEAAqE;QACrE,6EAA6E;QAC7E,iFAAiF;QACjF,4EAA4E;QAC5E,IAAI,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC,EAAE;YACrG,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,IAAI,WAAW,KAAK,OAAO,EAAE;gBAC3B,cAAc,CAAC,IAAI,CAAC,CAAC;aACtB;SACF;IACH,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAA4B,KAAK,CAAC,EAAE;QACzD,uEAAuE;QACvE,yEAAyE;QACzE,wEAAwE;QACxE,8CAA8C;QAC9C,IAAI,QAAQ,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC,EAAE;YACjF,cAAc,CAAC,KAAK,CAAC,CAAC;SACvB;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QAEzC,0EAA0E;QAC1E,yEAAyE;QACzE,sEAAsE;QACtE,sEAAsE;QACtE,sEAAsE;QACtE,wEAAwE;QACxE,oEAAoE;QACpE,QAAQ,CAAC,gBAAgB,CACvB,aAAa,EACb,KAAK,CAAC,EAAE;YACN,IACE,aAAa,CAAC,OAAO;gBACrB,sBAAsB,CAAC,OAAO;gBAC9B,CAAC,KAAK,CAAC,OAAO,GAAG,sBAAsB,CAAC,OAAO,CAAC,CAAC,GAAG,eAAe;oBACjE,KAAK,CAAC,OAAO,GAAG,sBAAsB,CAAC,OAAO,CAAC,CAAC,GAAG,eAAe;oBAClE,KAAK,CAAC,OAAO,GAAG,sBAAsB,CAAC,OAAO,CAAC,CAAC,GAAG,eAAe;oBAClE,KAAK,CAAC,OAAO,GAAG,sBAAsB,CAAC,OAAO,CAAC,CAAC,GAAG,eAAe,CAAC,EACrE;gBACA,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;aAC/B;QACH,CAAC,EACD,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAC9B,CAAC;QAEF,wEAAwE;QACxE,iEAAiE;QACjE,MAAM,qBAAqB,GAAG,GAAG,EAAE;YACjC,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;YAC9B,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;QAC7C,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CACvB,eAAe,EACf,GAAG,EAAE;YACH,qBAAqB,EAAE,CAAC;QAC1B,CAAC,EACD,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAC9B,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CACvB,WAAW,EACX,GAAG,EAAE;YACH,IAAI,aAAa,CAAC,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;gBACpD,qEAAqE;gBACrE,gDAAgD;gBAChD,cAAc,CAAC,IAAI,CAAC,CAAC;aACtB;YACD,qBAAqB,EAAE,CAAC;QAC1B,CAAC,EACD,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAC9B,CAAC;QAEF,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;IAClC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,mBAAmB,GAA8B,KAAK,CAAC,EAAE;QAC7D,2EAA2E;QAC3E,uEAAuE;QACvE,wEAAwE;QACxE,0EAA0E;QAC1E,kCAAkC;QAElC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;QAC7B,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;QAC/B,sBAAsB,CAAC,OAAO,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;QACxE,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,uEAAuE;IACvE,wEAAwE;IACxE,0EAA0E;IAC1E,MAAM,0BAA0B,GAA8B,GAAG,EAAE;QACjE,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;YAC1B,cAAc,CAAC,IAAI,CAAC,CAAC;SACtB;IACH,CAAC,CAAC;IACF,MAAM,0BAA0B,GAA8B,GAAG,EAAE;QACjE,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAA+B,KAAK,CAAC,EAAE;QAC9D,wEAAwE;QACxE,yBAAyB;QACzB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YAC1B,cAAc,CAAC,KAAK,CAAC,CAAC;SACvB;aAAM,IAAI,WAAW,KAAK,mBAAmB,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE;YAC9F,mFAAmF;YACnF,cAAc,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,eAAe,CAAC,CAAC;SACrD;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YAC1G,wEAAwE;YACxE,wEAAwE;YACxE,cAAc,CAAC,IAAI,CAAC,CAAC;SACtB;IACH,CAAC,CAAC;IAEF,MAAM,wBAAwB,GAAG,CAAC,SAAoB,EAAE,EAAE;;QACxD,4EAA4E;QAC5E,6EAA6E;QAC7E,gDAAgD;QAChD,IAAI,aAAa,CAAC,OAAO,EAAE;YACzB,MAAA,iBAAiB,CAAC,aAAa,CAAC,OAAO,CAAC,0CAAE,KAAK,EAAE,CAAC;SACnD;QACD,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,SAAS,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,EAAE,WAAW,IAAI,MAAM,CAAC,0BAA0B,CAAC,CAAC,EACjG,GAAG,EAAE,UAAU,EACf,OAAO,EAAE,gBAAgB,EACzB,MAAM,EAAE,iBAAiB;QAEzB,6BAAK,cAAc,EAAE,0BAA0B,EAAE,cAAc,EAAE,0BAA0B;YACzF,6BACE,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,EAChC,GAAG,EAAE,aAAa,EAClB,aAAa,EAAE,mBAAmB,EAClC,SAAS,EAAE,mBAAmB,IAE7B,QAAQ,CACL;YAEL,CAAC,UAAU,IAAI,CAAC,WAAW,IAAI,WAAW,IAAI,WAAW,IAAI,CAC5D,oBAAC,OAAO,IAAC,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,GAAI,CACjG,CACG;QAEN,oBAAC,aAAa,IAAC,KAAK,EAAE,aAAa,CAAC,OAAO,EAAE,UAAU,EAAE,CAAC,WAAW;YAClE,UAAU,CAAC,aAAa,CAAC,IAAI,CAC5B,oBAAC,eAAe,IACd,IAAI,EAAE,CAAC,UAAU,IAAI,WAAW,EAChC,SAAS,EAAC,aAAa,EACvB,KAAK,EAAE,UAAU,CAAC,aAAa,CAAC,EAChC,OAAO,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,aAAa,CAAC,GACtD,CACH;YACA,UAAU,CAAC,WAAW,CAAC,IAAI,CAC1B,oBAAC,eAAe,IACd,IAAI,EAAE,CAAC,UAAU,IAAI,WAAW,EAChC,SAAS,EAAC,WAAW,EACrB,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,WAAW,CAAC,GACpD,CACH;YACA,UAAU,CAAC,cAAc,CAAC,IAAI,CAC7B,oBAAC,eAAe,IACd,IAAI,EAAE,CAAC,UAAU,IAAI,WAAW,EAChC,SAAS,EAAC,cAAc,EACxB,KAAK,EAAE,UAAU,CAAC,cAAc,CAAC,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,cAAc,CAAC,GACvD,CACH;YACA,UAAU,CAAC,YAAY,CAAC,IAAI,CAC3B,oBAAC,eAAe,IACd,IAAI,EAAE,CAAC,UAAU,IAAI,WAAW,EAChC,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE,UAAU,CAAC,YAAY,CAAC,EAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,YAAY,CAAC,GACrD,CACH,CACa,CACZ,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\n\nimport { getFirstFocusable } from '../focus-lock/utils';\nimport Tooltip from '../tooltip';\nimport DirectionButton from './direction-button';\nimport { Direction, DragHandleWrapperProps } from './interfaces';\nimport PortalOverlay from './portal-overlay';\n\nimport styles from './styles.css.js';\n\n// The amount of distance after pointer down that the cursor is allowed to\n// jitter for a subsequent mouseup to still register as a \"press\" instead of\n// a drag. A little allowance is needed for usability reasons, but this number\n// isn't set in stone.\nconst PRESS_DELTA_MAX = 3;\n\nexport default function DragHandleWrapper({\n  directions,\n  tooltipText,\n  children,\n  onDirectionClick,\n  triggerMode = 'focus',\n}: DragHandleWrapperProps) {\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\n  const dragHandleRef = useRef<HTMLDivElement | null>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n  const [showButtons, setShowButtons] = useState(false);\n\n  const isPointerDown = useRef(false);\n  const initialPointerPosition = useRef<{ x: number; y: number } | undefined>();\n  const didPointerDrag = useRef(false);\n\n  // The tooltip (\"Drag or select to move/resize\") shouldn't show if clicking\n  // on the handle wouldn't do anything.\n  const isDisabled =\n    !directions['block-start'] && !directions['block-end'] && !directions['inline-start'] && !directions['inline-end'];\n\n  const onWrapperFocusIn: React.FocusEventHandler = event => {\n    // The drag handle is focused when it's either tabbed to, or the pointer\n    // is pressed on it. We exclude handling the pointer press in this handler,\n    // since it could be the start of a drag event - the pointer stuff is\n    // handled in the \"pointerup\" listener instead. In cases where focus is moved\n    // to the button (by manually calling `.focus()`, the buttons should only appear)\n    // if the action that triggered the focus move was the result of a keypress.\n    if (document.body.dataset.awsuiFocusVisible && !nodeContains(wrapperRef.current, event.relatedTarget)) {\n      setShowTooltip(false);\n      if (triggerMode === 'focus') {\n        setShowButtons(true);\n      }\n    }\n  };\n\n  const onWrapperFocusOut: React.FocusEventHandler = event => {\n    // Close the directional buttons when the focus leaves the drag handle.\n    // \"focusout\" is also triggered when the user leaves the current tab, but\n    // since it'll be returned when they switch back anyway, we exclude that\n    // case by checking for `document.hasFocus()`.\n    if (document.hasFocus() && !nodeContains(wrapperRef.current, event.relatedTarget)) {\n      setShowButtons(false);\n    }\n  };\n\n  useEffect(() => {\n    const controller = new AbortController();\n\n    // See `PRESS_DELTA_MAX` above. We need to differentiate between a \"click\"\n    // and a \"drag\" action. We can say a \"click\" happens when a \"pointerdown\"\n    // is followed by a \"pointerup\" with no \"pointermove\" between the two.\n    // However, it would be a poor usability experience if a \"click\" isn't\n    // registered because, while pressing my mouse, I moved it by just one\n    // pixel, making it a \"drag\" instead. So we allow the pointer to move by\n    // `PRESS_DELTA_MAX` pixels before setting `didPointerDrag` to true.\n    document.addEventListener(\n      'pointermove',\n      event => {\n        if (\n          isPointerDown.current &&\n          initialPointerPosition.current &&\n          (event.clientX > initialPointerPosition.current.x + PRESS_DELTA_MAX ||\n            event.clientX < initialPointerPosition.current.x - PRESS_DELTA_MAX ||\n            event.clientY > initialPointerPosition.current.y + PRESS_DELTA_MAX ||\n            event.clientY < initialPointerPosition.current.y - PRESS_DELTA_MAX)\n        ) {\n          didPointerDrag.current = true;\n        }\n      },\n      { signal: controller.signal }\n    );\n\n    // Shared behavior when a \"pointerdown\" state ends. This is shared so it\n    // can be called for both \"pointercancel\" and \"pointerup\" events.\n    const resetPointerDownState = () => {\n      isPointerDown.current = false;\n      initialPointerPosition.current = undefined;\n    };\n\n    document.addEventListener(\n      'pointercancel',\n      () => {\n        resetPointerDownState();\n      },\n      { signal: controller.signal }\n    );\n\n    document.addEventListener(\n      'pointerup',\n      () => {\n        if (isPointerDown.current && !didPointerDrag.current) {\n          // The cursor didn't move much between \"pointerdown\" and \"pointerup\".\n          // Handle this as a \"click\" instead of a \"drag\".\n          setShowButtons(true);\n        }\n        resetPointerDownState();\n      },\n      { signal: controller.signal }\n    );\n\n    return () => controller.abort();\n  }, []);\n\n  const onHandlePointerDown: React.PointerEventHandler = event => {\n    // Tooltip behavior: the tooltip should appear on hover, but disappear when\n    // the pointer starts dragging (having the tooltip get in the way while\n    // you're trying to drag upwards is annoying). Additionally, the tooltip\n    // shouldn't reappear when dragging ends, but only when the pointer leaves\n    // the drag handle and comes back.\n\n    isPointerDown.current = true;\n    didPointerDrag.current = false;\n    initialPointerPosition.current = { x: event.clientX, y: event.clientY };\n    setShowTooltip(false);\n  };\n\n  // Tooltip behavior: the tooltip should stay open when the cursor moves\n  // from the drag handle into the tooltip content itself. This is why the\n  // handler is set on the wrapper for both the drag handle and the tooltip.\n  const onTooltipGroupPointerEnter: React.PointerEventHandler = () => {\n    if (!isPointerDown.current) {\n      setShowTooltip(true);\n    }\n  };\n  const onTooltipGroupPointerLeave: React.PointerEventHandler = () => {\n    setShowTooltip(false);\n  };\n\n  const onDragHandleKeyDown: React.KeyboardEventHandler = event => {\n    // For accessibility reasons, pressing escape should should always close\n    // the floating controls.\n    if (event.key === 'Escape') {\n      setShowButtons(false);\n    } else if (triggerMode === 'keyboard-activate' && (event.key === 'Enter' || event.key === ' ')) {\n      // toggle buttons when Enter or space is pressed in 'keyboard-activate' triggerMode\n      setShowButtons(prevShowButtons => !prevShowButtons);\n    } else if (event.key !== 'Alt' && event.key !== 'Control' && event.key !== 'Meta' && event.key !== 'Shift') {\n      // Pressing any other key will display the focus-visible ring around the\n      // drag handle if it's in focus, so we should also show the buttons now.\n      setShowButtons(true);\n    }\n  };\n\n  const onInternalDirectionClick = (direction: Direction) => {\n    // Move focus back to the wrapper on click. This prevents focus from staying\n    // on an aria-hidden control, and allows future keyboard events to be handled\n    // cleanly using the drag handle's own handlers.\n    if (dragHandleRef.current) {\n      getFirstFocusable(dragHandleRef.current)?.focus();\n    }\n    onDirectionClick?.(direction);\n  };\n\n  return (\n    <div\n      className={clsx(styles['drag-handle-wrapper'], showButtons && styles['drag-handle-wrapper-open'])}\n      ref={wrapperRef}\n      onFocus={onWrapperFocusIn}\n      onBlur={onWrapperFocusOut}\n    >\n      <div onPointerEnter={onTooltipGroupPointerEnter} onPointerLeave={onTooltipGroupPointerLeave}>\n        <div\n          className={styles['drag-handle']}\n          ref={dragHandleRef}\n          onPointerDown={onHandlePointerDown}\n          onKeyDown={onDragHandleKeyDown}\n        >\n          {children}\n        </div>\n\n        {!isDisabled && !showButtons && showTooltip && tooltipText && (\n          <Tooltip trackRef={dragHandleRef} value={tooltipText} onDismiss={() => setShowTooltip(false)} />\n        )}\n      </div>\n\n      <PortalOverlay track={dragHandleRef.current} isDisabled={!showButtons}>\n        {directions['block-start'] && (\n          <DirectionButton\n            show={!isDisabled && showButtons}\n            direction=\"block-start\"\n            state={directions['block-start']}\n            onClick={() => onInternalDirectionClick('block-start')}\n          />\n        )}\n        {directions['block-end'] && (\n          <DirectionButton\n            show={!isDisabled && showButtons}\n            direction=\"block-end\"\n            state={directions['block-end']}\n            onClick={() => onInternalDirectionClick('block-end')}\n          />\n        )}\n        {directions['inline-start'] && (\n          <DirectionButton\n            show={!isDisabled && showButtons}\n            direction=\"inline-start\"\n            state={directions['inline-start']}\n            onClick={() => onInternalDirectionClick('inline-start')}\n          />\n        )}\n        {directions['inline-end'] && (\n          <DirectionButton\n            show={!isDisabled && showButtons}\n            direction=\"inline-end\"\n            state={directions['inline-end']}\n            onClick={() => onInternalDirectionClick('inline-end')}\n          />\n        )}\n      </PortalOverlay>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\n\nimport { getFirstFocusable } from '../focus-lock/utils';\nimport Tooltip from '../tooltip';\nimport DirectionButton from './direction-button';\nimport { Direction, DragHandleWrapperProps } from './interfaces';\nimport PortalOverlay from './portal-overlay';\n\nimport styles from './styles.css.js';\n\n// The amount of distance after pointer down that the cursor is allowed to\n// jitter for a subsequent mouseup to still register as a \"press\" instead of\n// a drag. A little allowance is needed for usability reasons, but this number\n// isn't set in stone.\nconst PRESS_DELTA_MAX = 3;\n\nexport default function DragHandleWrapper({\n  directions,\n  tooltipText,\n  children,\n  onDirectionClick,\n  triggerMode = 'focus',\n  initialShowButtons = false,\n}: DragHandleWrapperProps) {\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\n  const dragHandleRef = useRef<HTMLDivElement | null>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n  const [showButtons, setShowButtons] = useState(initialShowButtons);\n\n  const isPointerDown = useRef(false);\n  const initialPointerPosition = useRef<{ x: number; y: number } | undefined>();\n  const didPointerDrag = useRef(false);\n\n  // The tooltip (\"Drag or select to move/resize\") shouldn't show if clicking\n  // on the handle wouldn't do anything.\n  const isDisabled =\n    !directions['block-start'] && !directions['block-end'] && !directions['inline-start'] && !directions['inline-end'];\n\n  const onWrapperFocusIn: React.FocusEventHandler = event => {\n    // The drag handle is focused when it's either tabbed to, or the pointer\n    // is pressed on it. We exclude handling the pointer press in this handler,\n    // since it could be the start of a drag event - the pointer stuff is\n    // handled in the \"pointerup\" listener instead. In cases where focus is moved\n    // to the button (by manually calling `.focus()`, the buttons should only appear)\n    // if the action that triggered the focus move was the result of a keypress.\n    if (document.body.dataset.awsuiFocusVisible && !nodeContains(wrapperRef.current, event.relatedTarget)) {\n      setShowTooltip(false);\n      if (triggerMode === 'focus') {\n        setShowButtons(true);\n      }\n    }\n  };\n\n  const onWrapperFocusOut: React.FocusEventHandler = event => {\n    // Close the directional buttons when the focus leaves the drag handle.\n    // \"focusout\" is also triggered when the user leaves the current tab, but\n    // since it'll be returned when they switch back anyway, we exclude that\n    // case by checking for `document.hasFocus()`.\n    if (document.hasFocus() && !nodeContains(wrapperRef.current, event.relatedTarget)) {\n      setShowButtons(false);\n    }\n  };\n\n  useEffect(() => {\n    const controller = new AbortController();\n\n    // See `PRESS_DELTA_MAX` above. We need to differentiate between a \"click\"\n    // and a \"drag\" action. We can say a \"click\" happens when a \"pointerdown\"\n    // is followed by a \"pointerup\" with no \"pointermove\" between the two.\n    // However, it would be a poor usability experience if a \"click\" isn't\n    // registered because, while pressing my mouse, I moved it by just one\n    // pixel, making it a \"drag\" instead. So we allow the pointer to move by\n    // `PRESS_DELTA_MAX` pixels before setting `didPointerDrag` to true.\n    document.addEventListener(\n      'pointermove',\n      event => {\n        if (\n          isPointerDown.current &&\n          initialPointerPosition.current &&\n          (event.clientX > initialPointerPosition.current.x + PRESS_DELTA_MAX ||\n            event.clientX < initialPointerPosition.current.x - PRESS_DELTA_MAX ||\n            event.clientY > initialPointerPosition.current.y + PRESS_DELTA_MAX ||\n            event.clientY < initialPointerPosition.current.y - PRESS_DELTA_MAX)\n        ) {\n          didPointerDrag.current = true;\n        }\n      },\n      { signal: controller.signal }\n    );\n\n    // Shared behavior when a \"pointerdown\" state ends. This is shared so it\n    // can be called for both \"pointercancel\" and \"pointerup\" events.\n    const resetPointerDownState = () => {\n      isPointerDown.current = false;\n      initialPointerPosition.current = undefined;\n    };\n\n    document.addEventListener(\n      'pointercancel',\n      () => {\n        resetPointerDownState();\n      },\n      { signal: controller.signal }\n    );\n\n    document.addEventListener(\n      'pointerup',\n      () => {\n        if (isPointerDown.current && !didPointerDrag.current) {\n          // The cursor didn't move much between \"pointerdown\" and \"pointerup\".\n          // Handle this as a \"click\" instead of a \"drag\".\n          setShowButtons(true);\n        }\n        resetPointerDownState();\n      },\n      { signal: controller.signal }\n    );\n\n    return () => controller.abort();\n  }, []);\n\n  const onHandlePointerDown: React.PointerEventHandler = event => {\n    // Tooltip behavior: the tooltip should appear on hover, but disappear when\n    // the pointer starts dragging (having the tooltip get in the way while\n    // you're trying to drag upwards is annoying). Additionally, the tooltip\n    // shouldn't reappear when dragging ends, but only when the pointer leaves\n    // the drag handle and comes back.\n\n    isPointerDown.current = true;\n    didPointerDrag.current = false;\n    initialPointerPosition.current = { x: event.clientX, y: event.clientY };\n    setShowTooltip(false);\n  };\n\n  // Tooltip behavior: the tooltip should stay open when the cursor moves\n  // from the drag handle into the tooltip content itself. This is why the\n  // handler is set on the wrapper for both the drag handle and the tooltip.\n  const onTooltipGroupPointerEnter: React.PointerEventHandler = () => {\n    if (!isPointerDown.current) {\n      setShowTooltip(true);\n    }\n  };\n  const onTooltipGroupPointerLeave: React.PointerEventHandler = () => {\n    setShowTooltip(false);\n  };\n\n  const onDragHandleKeyDown: React.KeyboardEventHandler = event => {\n    // For accessibility reasons, pressing escape should should always close\n    // the floating controls.\n    if (event.key === 'Escape') {\n      setShowButtons(false);\n    } else if (triggerMode === 'keyboard-activate' && (event.key === 'Enter' || event.key === ' ')) {\n      // toggle buttons when Enter or space is pressed in 'keyboard-activate' triggerMode\n      setShowButtons(prevshowButtons => !prevshowButtons);\n    } else if (event.key !== 'Alt' && event.key !== 'Control' && event.key !== 'Meta' && event.key !== 'Shift') {\n      // Pressing any other key will display the focus-visible ring around the\n      // drag handle if it's in focus, so we should also show the buttons now.\n      setShowButtons(true);\n    }\n  };\n\n  const onInternalDirectionClick = (direction: Direction) => {\n    // Move focus back to the wrapper on click. This prevents focus from staying\n    // on an aria-hidden control, and allows future keyboard events to be handled\n    // cleanly using the drag handle's own handlers.\n    if (dragHandleRef.current) {\n      getFirstFocusable(dragHandleRef.current)?.focus();\n    }\n    onDirectionClick?.(direction);\n  };\n\n  return (\n    <div\n      className={clsx(styles['drag-handle-wrapper'], showButtons && styles['drag-handle-wrapper-open'])}\n      ref={wrapperRef}\n      onFocus={onWrapperFocusIn}\n      onBlur={onWrapperFocusOut}\n    >\n      <div onPointerEnter={onTooltipGroupPointerEnter} onPointerLeave={onTooltipGroupPointerLeave}>\n        <div\n          className={styles['drag-handle']}\n          ref={dragHandleRef}\n          onPointerDown={onHandlePointerDown}\n          onKeyDown={onDragHandleKeyDown}\n        >\n          {children}\n        </div>\n\n        {!isDisabled && !showButtons && showTooltip && tooltipText && (\n          <Tooltip trackRef={dragHandleRef} value={tooltipText} onDismiss={() => setShowTooltip(false)} />\n        )}\n      </div>\n\n      <PortalOverlay track={dragHandleRef} isDisabled={!showButtons}>\n        {directions['block-start'] && (\n          <DirectionButton\n            show={!isDisabled && showButtons}\n            direction=\"block-start\"\n            state={directions['block-start']}\n            onClick={() => onInternalDirectionClick('block-start')}\n          />\n        )}\n        {directions['block-end'] && (\n          <DirectionButton\n            show={!isDisabled && showButtons}\n            direction=\"block-end\"\n            state={directions['block-end']}\n            onClick={() => onInternalDirectionClick('block-end')}\n          />\n        )}\n        {directions['inline-start'] && (\n          <DirectionButton\n            show={!isDisabled && showButtons}\n            direction=\"inline-start\"\n            state={directions['inline-start']}\n            onClick={() => onInternalDirectionClick('inline-start')}\n          />\n        )}\n        {directions['inline-end'] && (\n          <DirectionButton\n            show={!isDisabled && showButtons}\n            direction=\"inline-end\"\n            state={directions['inline-end']}\n            onClick={() => onInternalDirectionClick('inline-end')}\n          />\n        )}\n      </PortalOverlay>\n    </div>\n  );\n}\n"]}

package/lib/internal/template/internal/components/drag-handle-wrapper/interfaces.d.ts

@@ -8,5 +8,6 @@ export interface DragHandleWrapperProps {
     tooltipText?: string;
     children: React.ReactNode;
     triggerMode?: TriggerMode;
+    initialShowButtons?: boolean;
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/internal/components/drag-handle-wrapper/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/interfaces.ts"],"names":[],"mappings":";AAGA,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,cAAc,GAAG,YAAY,CAAC;AACpF,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,UAAU,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,mBAAmB,CAAC;AAExD,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/interfaces.ts"],"names":[],"mappings":";AAGA,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,cAAc,GAAG,YAAY,CAAC;AACpF,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,UAAU,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,mBAAmB,CAAC;AAExD,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B"}

package/lib/internal/template/internal/components/drag-handle-wrapper/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport type Direction = 'block-start' | 'block-end' | 'inline-start' | 'inline-end';\nexport type DirectionState = 'active' | 'disabled';\nexport type TriggerMode = 'focus' | 'keyboard-activate';\n\nexport interface DragHandleWrapperProps {\n  directions: Partial<Record<Direction, DirectionState>>;\n  onDirectionClick?: (direction: Direction) => void;\n  tooltipText?: string;\n  children: React.ReactNode;\n  triggerMode?: TriggerMode;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport type Direction = 'block-start' | 'block-end' | 'inline-start' | 'inline-end';\nexport type DirectionState = 'active' | 'disabled';\nexport type TriggerMode = 'focus' | 'keyboard-activate';\n\nexport interface DragHandleWrapperProps {\n  directions: Partial<Record<Direction, DirectionState>>;\n  onDirectionClick?: (direction: Direction) => void;\n  tooltipText?: string;\n  children: React.ReactNode;\n  triggerMode?: TriggerMode;\n  initialShowButtons?: boolean;\n}\n"]}

package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export default function PortalOverlay({ track, isDisabled, children, }: {
-    track: HTMLElement | null;
+    track: React.RefObject<HTMLElement | null>;
     isDisabled: boolean;
     children: React.ReactNode;
 }): JSX.Element | null;

package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"portal-overlay.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/portal-overlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAWjD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,UAAU,EACV,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,sBA0DA"}
+{"version":3,"file":"portal-overlay.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/portal-overlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAWjD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,UAAU,EACV,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC3C,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,sBA4DA"}

package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.js

@@ -6,7 +6,7 @@ import styles from './styles.css.js';
 export default function PortalOverlay({ track, isDisabled, children, }) {
     const ref = useRef(null);
     useEffect(() => {
-        if (track === null || isDisabled) {
+        if (track.current === null || isDisabled) {
             return;
         }
         let cleanedUp = false;
@@ -16,9 +16,9 @@ export default function PortalOverlay({ track, isDisabled, children, }) {
         let lastBlockSize;
         const updateElement = () => {
             // It could be that the portal hasn't been attached to the DOM yet - ensure the ref exists and is attached DOM tree.
-            if (ref.current && document.body.contains(ref.current)) {
+            if (track.current && ref.current && document.body.contains(ref.current)) {
                 const isRtl = getIsRtl(ref.current);
-                const { insetInlineStart, insetBlockStart, inlineSize, blockSize } = getLogicalBoundingClientRect(track);
+                const { insetInlineStart, insetBlockStart, inlineSize, blockSize } = getLogicalBoundingClientRect(track.current);
                 // For simplicity, we just make all our calculations independent of
                 // the browser's scrolling edge. When it comes to applying the changes,
                 // translate is independent of writing direction, so we need to invert

package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"portal-overlay.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/portal-overlay.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EACL,QAAQ,EACR,4BAA4B,EAC5B,oBAAoB,EACpB,MAAM,GACP,MAAM,+CAA+C,CAAC;AAEvD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,UAAU,EACV,QAAQ,GAKT;IACC,MAAM,GAAG,GAAG,MAAM,CAAyB,IAAI,CAAC,CAAC;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,KAAK,IAAI,IAAI,UAAU,EAAE;YAChC,OAAO;SACR;QAED,IAAI,SAAS,GAAG,KAAK,CAAC;QACtB,IAAI,KAAyB,CAAC;QAC9B,IAAI,KAAyB,CAAC;QAC9B,IAAI,cAAkC,CAAC;QACvC,IAAI,aAAiC,CAAC;QACtC,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,oHAAoH;YACpH,IAAI,GAAG,CAAC,OAAO,IAAI,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;gBACtD,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;gBACpC,MAAM,EAAE,gBAAgB,EAAE,eAAe,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,4BAA4B,CAAC,KAAK,CAAC,CAAC;gBACzG,mEAAmE;gBACnE,uEAAuE;gBACvE,sEAAsE;gBACtE,8DAA8D;gBAC9D,MAAM,IAAI,GAAG,CAAC,gBAAgB,GAAG,oBAAoB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACpG,MAAM,IAAI,GAAG,eAAe,GAAG,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC;gBAClE,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,IAAI,EAAE;oBACpC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,MAAM,IAAI,IAAI,CAAC;oBACpD,KAAK,GAAG,IAAI,CAAC;oBACb,KAAK,GAAG,IAAI,CAAC;iBACd;gBACD,IAAI,cAAc,KAAK,UAAU,IAAI,aAAa,KAAK,SAAS,EAAE;oBAChE,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,UAAU,IAAI,CAAC;oBAC5C,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,SAAS,IAAI,CAAC;oBAC5C,cAAc,GAAG,UAAU,CAAC;oBAC5B,aAAa,GAAG,SAAS,CAAC;iBAC3B;aACF;YACD,IAAI,CAAC,SAAS,EAAE;gBACd,qBAAqB,CAAC,aAAa,CAAC,CAAC;aACtC;QACH,CAAC,CAAC;QACF,aAAa,EAAE,CAAC;QAEhB,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,IAAI,CAAC;QACnB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IAExB,IAAI,KAAK,KAAK,IAAI,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,oBAAC,MAAM;QACL,8BAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;YACjD,8BAAM,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC,IAAG,QAAQ,CAAQ,CAChE,CACA,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\n\nimport {\n  getIsRtl,\n  getLogicalBoundingClientRect,\n  getScrollInlineStart,\n  Portal,\n} from '@cloudscape-design/component-toolkit/internal';\n\nimport styles from './styles.css.js';\n\nexport default function PortalOverlay({\n  track,\n  isDisabled,\n  children,\n}: {\n  track: HTMLElement | null;\n  isDisabled: boolean;\n  children: React.ReactNode;\n}) {\n  const ref = useRef<HTMLSpanElement | null>(null);\n\n  useEffect(() => {\n    if (track === null || isDisabled) {\n      return;\n    }\n\n    let cleanedUp = false;\n    let lastX: number | undefined;\n    let lastY: number | undefined;\n    let lastInlineSize: number | undefined;\n    let lastBlockSize: number | undefined;\n    const updateElement = () => {\n      // It could be that the portal hasn't been attached to the DOM yet - ensure the ref exists and is attached DOM tree.\n      if (ref.current && document.body.contains(ref.current)) {\n        const isRtl = getIsRtl(ref.current);\n        const { insetInlineStart, insetBlockStart, inlineSize, blockSize } = getLogicalBoundingClientRect(track);\n        // For simplicity, we just make all our calculations independent of\n        // the browser's scrolling edge. When it comes to applying the changes,\n        // translate is independent of writing direction, so we need to invert\n        // the X coordinate ourselves just before applying the values.\n        const newX = (insetInlineStart + getScrollInlineStart(document.documentElement)) * (isRtl ? -1 : 1);\n        const newY = insetBlockStart + document.documentElement.scrollTop;\n        if (lastX !== newX || lastY !== newY) {\n          ref.current.style.translate = `${newX}px ${newY}px`;\n          lastX = newX;\n          lastY = newY;\n        }\n        if (lastInlineSize !== inlineSize || lastBlockSize !== blockSize) {\n          ref.current.style.width = `${inlineSize}px`;\n          ref.current.style.height = `${blockSize}px`;\n          lastInlineSize = inlineSize;\n          lastBlockSize = blockSize;\n        }\n      }\n      if (!cleanedUp) {\n        requestAnimationFrame(updateElement);\n      }\n    };\n    updateElement();\n\n    return () => {\n      cleanedUp = true;\n    };\n  }, [isDisabled, track]);\n\n  if (track === null) {\n    return null;\n  }\n\n  return (\n    <Portal>\n      <span ref={ref} className={styles['portal-overlay']}>\n        <span className={styles['portal-overlay-contents']}>{children}</span>\n      </span>\n    </Portal>\n  );\n}\n"]}
+{"version":3,"file":"portal-overlay.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/portal-overlay.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EACL,QAAQ,EACR,4BAA4B,EAC5B,oBAAoB,EACpB,MAAM,GACP,MAAM,+CAA+C,CAAC;AAEvD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,UAAU,EACV,QAAQ,GAKT;IACC,MAAM,GAAG,GAAG,MAAM,CAAyB,IAAI,CAAC,CAAC;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,IAAI,UAAU,EAAE;YACxC,OAAO;SACR;QAED,IAAI,SAAS,GAAG,KAAK,CAAC;QACtB,IAAI,KAAyB,CAAC;QAC9B,IAAI,KAAyB,CAAC;QAC9B,IAAI,cAAkC,CAAC;QACvC,IAAI,aAAiC,CAAC;QACtC,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,oHAAoH;YACpH,IAAI,KAAK,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,IAAI,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;gBACvE,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;gBACpC,MAAM,EAAE,gBAAgB,EAAE,eAAe,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,4BAA4B,CAC/F,KAAK,CAAC,OAAO,CACd,CAAC;gBACF,mEAAmE;gBACnE,uEAAuE;gBACvE,sEAAsE;gBACtE,8DAA8D;gBAC9D,MAAM,IAAI,GAAG,CAAC,gBAAgB,GAAG,oBAAoB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACpG,MAAM,IAAI,GAAG,eAAe,GAAG,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC;gBAClE,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,IAAI,EAAE;oBACpC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,MAAM,IAAI,IAAI,CAAC;oBACpD,KAAK,GAAG,IAAI,CAAC;oBACb,KAAK,GAAG,IAAI,CAAC;iBACd;gBACD,IAAI,cAAc,KAAK,UAAU,IAAI,aAAa,KAAK,SAAS,EAAE;oBAChE,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,UAAU,IAAI,CAAC;oBAC5C,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,SAAS,IAAI,CAAC;oBAC5C,cAAc,GAAG,UAAU,CAAC;oBAC5B,aAAa,GAAG,SAAS,CAAC;iBAC3B;aACF;YACD,IAAI,CAAC,SAAS,EAAE;gBACd,qBAAqB,CAAC,aAAa,CAAC,CAAC;aACtC;QACH,CAAC,CAAC;QACF,aAAa,EAAE,CAAC;QAEhB,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,IAAI,CAAC;QACnB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IAExB,IAAI,KAAK,KAAK,IAAI,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,oBAAC,MAAM;QACL,8BAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;YACjD,8BAAM,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC,IAAG,QAAQ,CAAQ,CAChE,CACA,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\n\nimport {\n  getIsRtl,\n  getLogicalBoundingClientRect,\n  getScrollInlineStart,\n  Portal,\n} from '@cloudscape-design/component-toolkit/internal';\n\nimport styles from './styles.css.js';\n\nexport default function PortalOverlay({\n  track,\n  isDisabled,\n  children,\n}: {\n  track: React.RefObject<HTMLElement | null>;\n  isDisabled: boolean;\n  children: React.ReactNode;\n}) {\n  const ref = useRef<HTMLSpanElement | null>(null);\n\n  useEffect(() => {\n    if (track.current === null || isDisabled) {\n      return;\n    }\n\n    let cleanedUp = false;\n    let lastX: number | undefined;\n    let lastY: number | undefined;\n    let lastInlineSize: number | undefined;\n    let lastBlockSize: number | undefined;\n    const updateElement = () => {\n      // It could be that the portal hasn't been attached to the DOM yet - ensure the ref exists and is attached DOM tree.\n      if (track.current && ref.current && document.body.contains(ref.current)) {\n        const isRtl = getIsRtl(ref.current);\n        const { insetInlineStart, insetBlockStart, inlineSize, blockSize } = getLogicalBoundingClientRect(\n          track.current\n        );\n        // For simplicity, we just make all our calculations independent of\n        // the browser's scrolling edge. When it comes to applying the changes,\n        // translate is independent of writing direction, so we need to invert\n        // the X coordinate ourselves just before applying the values.\n        const newX = (insetInlineStart + getScrollInlineStart(document.documentElement)) * (isRtl ? -1 : 1);\n        const newY = insetBlockStart + document.documentElement.scrollTop;\n        if (lastX !== newX || lastY !== newY) {\n          ref.current.style.translate = `${newX}px ${newY}px`;\n          lastX = newX;\n          lastY = newY;\n        }\n        if (lastInlineSize !== inlineSize || lastBlockSize !== blockSize) {\n          ref.current.style.width = `${inlineSize}px`;\n          ref.current.style.height = `${blockSize}px`;\n          lastInlineSize = inlineSize;\n          lastBlockSize = blockSize;\n        }\n      }\n      if (!cleanedUp) {\n        requestAnimationFrame(updateElement);\n      }\n    };\n    updateElement();\n\n    return () => {\n      cleanedUp = true;\n    };\n  }, [isDisabled, track]);\n\n  if (track === null) {\n    return null;\n  }\n\n  return (\n    <Portal>\n      <span ref={ref} className={styles['portal-overlay']}>\n        <span className={styles['portal-overlay-contents']}>{children}</span>\n      </span>\n    </Portal>\n  );\n}\n"]}