@cloudscape-design/components-themeable 3.0.227 → 3.0.228

package/lib/internal/template/internal/components/transition/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/transition/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\nimport React, { useState } from 'react';\nimport { MutableRefObject, useCallback, useRef } from 'react';\nimport {\n  Transition as ReactTransitionGroupTransition,\n  TransitionStatus as ReactTransitionGroupTransitionStatus,\n} from 'react-transition-group';\nimport { useReducedMotion } from '../../hooks/use-visual-mode';\n\nexport type TransitionStatus = ReactTransitionGroupTransitionStatus | 'enter' | 'exit';\n\nexport interface TransitionProps {\n  in: boolean;\n  exit?: boolean;\n\n  disabled?: boolean;\n\n  children: (state: TransitionStatus, transitioningElementRef: MutableRefObject<any>) => React.ReactNode;\n  onStatusChange?: (status: TransitionStatus) => void;\n  transitionChangeDelay?: { entering?: number };\n}\n\n/**\n * This component is a wrapper around the CSSTransition component.\n *\n * It provides a second parameter in its rendering function that must be\n * attached to the node that is transitioning.\n */\nexport function Transition({\n  in: isIn,\n  children,\n  exit = true,\n  onStatusChange = () => void 0,\n  disabled = false,\n  transitionChangeDelay,\n  ...rest\n}: TransitionProps) {\n  const transitionRootElement = useRef<HTMLElement>(null);\n  // the initial state of the transition should be either 'exited' or 'entered' depending\n  // on the `in` property, this mimicks how internally the Transition component works here:\n  // https://github.com/reactjs/react-transition-group/blob/6cbd6aaedaf8e9472007640b429ddb48c6c24158/src/Transition.js#L121\n  const [transitionState, setTransitionState] = useState<TransitionStatus>(isIn ? 'entered' : 'exited');\n  const motionDisabled = useReducedMotion(transitionRootElement) || disabled;\n\n  const addTransitionEndListener = useCallback((done: () => void) => {\n    const node = transitionRootElement.current;\n\n    if (node === null) {\n      return;\n    }\n    const listener = (e: TransitionEvent | AnimationEvent) => {\n      if (e.target === node) {\n        node.removeEventListener('transitionend', listener);\n        node.removeEventListener('animationend', listener);\n        done();\n      }\n    };\n    node.addEventListener('transitionend', listener);\n    node.addEventListener('animationend', listener);\n  }, []);\n\n  return (\n    <ReactTransitionGroupTransition\n      addEndListener={addTransitionEndListener}\n      timeout={motionDisabled ? 0 : undefined}\n      in={isIn}\n      nodeRef={transitionRootElement}\n      exit={exit}\n      onEnter={isAppearing => {\n        if (!isAppearing) {\n          setTransitionState('enter');\n          onStatusChange('enter');\n        }\n      }}\n      onEntering={isAppearing => {\n        if (!isAppearing) {\n          // This line forces the browser to recalculate the layout because we want the starting state in the 'enter' style\n          // to be applied before the animation starts.\n          void transitionRootElement.current?.offsetHeight;\n\n          if (transitionChangeDelay?.entering) {\n            setTimeout(() => {\n              setTransitionState('entering');\n              onStatusChange('entering');\n            }, transitionChangeDelay?.entering);\n          } else {\n            setTransitionState('entering');\n            onStatusChange('entering');\n          }\n        }\n      }}\n      onEntered={isAppearing => {\n        if (!isAppearing) {\n          setTransitionState('entered');\n          onStatusChange('entered');\n        }\n      }}\n      onExit={() => {\n        setTransitionState('exit');\n        onStatusChange('exit');\n      }}\n      onExiting={() => {\n        setTransitionState('exiting');\n        onStatusChange('exiting');\n      }}\n      onExited={() => {\n        setTransitionState('exited');\n        onStatusChange('exited');\n      }}\n      {...rest}\n    >\n      {() => children(transitionState, transitionRootElement)}\n    </ReactTransitionGroupTransition>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/transition/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\nimport React, { useState } from 'react';\nimport { MutableRefObject, useCallback, useRef } from 'react';\nimport {\n  Transition as ReactTransitionGroupTransition,\n  TransitionStatus as ReactTransitionGroupTransitionStatus,\n} from 'react-transition-group';\nimport { useReducedMotion } from '../../hooks/use-visual-mode';\n\nexport type TransitionStatus = ReactTransitionGroupTransitionStatus | 'enter' | 'exit';\n\nexport interface TransitionProps {\n  in: boolean;\n  exit?: boolean;\n\n  disabled?: boolean;\n\n  children: (state: TransitionStatus, transitioningElementRef: MutableRefObject<any>) => React.ReactNode;\n  onStatusChange?: (status: TransitionStatus) => void;\n  transitionChangeDelay?: { entering?: number };\n}\n\n/**\n * This component is a wrapper around the CSSTransition component.\n *\n * It provides a second parameter in its rendering function that must be\n * attached to the node that is transitioning.\n */\nexport function Transition({\n  in: isIn,\n  children,\n  exit = true,\n  onStatusChange = () => void 0,\n  disabled = false,\n  transitionChangeDelay,\n  ...rest\n}: TransitionProps) {\n  const transitionRootElement = useRef<HTMLElement>(null);\n  // the initial state of the transition should be either 'exited' or 'entered' depending\n  // on the `in` property, this mimicks how internally the Transition component works here:\n  // https://github.com/reactjs/react-transition-group/blob/6cbd6aaedaf8e9472007640b429ddb48c6c24158/src/Transition.js#L121\n  const [transitionState, setTransitionState] = useState<TransitionStatus>(isIn ? 'entered' : 'exited');\n  const motionDisabled = useReducedMotion(transitionRootElement) || disabled;\n\n  const addTransitionEndListener = useCallback((done: () => void) => {\n    const node = transitionRootElement.current;\n\n    if (node === null) {\n      return;\n    }\n    const listener = (e: TransitionEvent | AnimationEvent) => {\n      if (e.target === node) {\n        node.removeEventListener('transitionend', listener);\n        node.removeEventListener('animationend', listener);\n        done();\n      }\n    };\n    node.addEventListener('transitionend', listener);\n    node.addEventListener('animationend', listener);\n  }, []);\n\n  return (\n    <ReactTransitionGroupTransition\n      addEndListener={addTransitionEndListener}\n      timeout={motionDisabled ? 0 : undefined}\n      in={isIn}\n      nodeRef={transitionRootElement}\n      exit={exit}\n      onEnter={isAppearing => {\n        if (!isAppearing) {\n          setTransitionState('enter');\n          onStatusChange('enter');\n        }\n      }}\n      onEntering={isAppearing => {\n        if (!isAppearing) {\n          // This line forces the browser to recalculate the layout because we want the starting state in the 'enter' style\n          // to be applied before the animation starts.\n          void transitionRootElement.current?.offsetHeight;\n\n          if (transitionChangeDelay?.entering) {\n            setTimeout(() => {\n              setTransitionState('entering');\n              onStatusChange('entering');\n            }, transitionChangeDelay?.entering);\n          } else {\n            setTransitionState('entering');\n            onStatusChange('entering');\n          }\n        }\n      }}\n      onEntered={isAppearing => {\n        if (!isAppearing) {\n          setTransitionState('entered');\n          onStatusChange('entered');\n        }\n      }}\n      onExit={() => {\n        setTransitionState('exit');\n        onStatusChange('exit');\n      }}\n      onExiting={() => {\n        setTransitionState('exiting');\n        onStatusChange('exiting');\n      }}\n      onExited={() => {\n        setTransitionState('exited');\n        onStatusChange('exited');\n      }}\n      {...rest}\n    >\n      {() => children(transitionState, transitionRootElement)}\n    </ReactTransitionGroupTransition>\n  );\n}\n"]}

package/lib/internal/template/internal/components/visual-context/index.js

@@ -3,13 +3,13 @@
 import clsx from 'clsx';
 import React, { useLayoutEffect, useState } from 'react';
 import { findUpUntil } from '../../utils/dom';
-var contextMatch = /awsui-context-([\w-]+)/;
+const contextMatch = /awsui-context-([\w-]+)/;
 export function useVisualContext(elementRef) {
-    var _a = useState(''), value = _a[0], setValue = _a[1];
-    useLayoutEffect(function () {
+    const [value, setValue] = useState('');
+    useLayoutEffect(() => {
         var _a;
         if (elementRef.current) {
-            var contextParent = findUpUntil(elementRef.current, function (node) { return !!node.className.match(contextMatch); });
+            const contextParent = findUpUntil(elementRef.current, node => !!node.className.match(contextMatch));
             setValue((_a = contextParent === null || contextParent === void 0 ? void 0 : contextParent.className.match(contextMatch)[1]) !== null && _a !== void 0 ? _a : '');
         }
     }, [elementRef]);
@@ -22,10 +22,9 @@ export function useVisualContext(elementRef) {
  * of a <div> node creates style problems.
  */
 export function getVisualContextClassname(contextName) {
-    return "awsui-context-".concat(contextName);
+    return `awsui-context-${contextName}`;
 }
-export default function VisualContext(_a) {
-    var contextName = _a.contextName, className = _a.className, children = _a.children;
+export default function VisualContext({ contextName, className, children }) {
     return React.createElement("div", { className: clsx(getVisualContextClassname(contextName), className) }, children);
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/internal/components/visual-context/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/visual-context/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAQ9C,IAAM,YAAY,GAAG,wBAAwB,CAAC;AAE9C,MAAM,UAAU,gBAAgB,CAAC,UAAwC;IACjE,IAAA,KAAoB,QAAQ,CAAC,EAAE,CAAC,EAA/B,KAAK,QAAA,EAAE,QAAQ,QAAgB,CAAC;IAEvC,eAAe,CAAC;;QACd,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,IAAM,aAAa,GAAG,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,UAAA,IAAI,IAAI,OAAA,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,EAApC,CAAoC,CAAC,CAAC;YACpG,QAAQ,CAAC,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,SAAS,CAAC,KAAK,CAAC,YAAY,EAAG,CAAC,CAAC,mCAAI,EAAE,CAAC,CAAC;SAClE;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,yBAAyB,CAAC,WAAmB;IAC3D,OAAO,wBAAiB,WAAW,CAAE,CAAC;AACxC,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAwD;QAAtD,WAAW,iBAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA;IACtE,OAAO,6BAAK,SAAS,EAAE,IAAI,CAAC,yBAAyB,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC,IAAG,QAAQ,CAAO,CAAC;AACnG,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useLayoutEffect, useState } from 'react';\nimport { findUpUntil } from '../../utils/dom';\n\ninterface VisualContextProps {\n  contextName: string;\n  className?: string;\n  children: React.ReactNode;\n}\n\nconst contextMatch = /awsui-context-([\\w-]+)/;\n\nexport function useVisualContext(elementRef: React.RefObject<HTMLElement>) {\n  const [value, setValue] = useState('');\n\n  useLayoutEffect(() => {\n    if (elementRef.current) {\n      const contextParent = findUpUntil(elementRef.current, node => !!node.className.match(contextMatch));\n      setValue(contextParent?.className.match(contextMatch)![1] ?? '');\n    }\n  }, [elementRef]);\n\n  return value;\n}\n\n/**\n * This function returns only the className string needed to apply a\n * visual context to the DOM. It is used by the default export but\n * can also be imported directly for situations where the insertion\n * of a <div> node creates style problems.\n */\nexport function getVisualContextClassname(contextName: string) {\n  return `awsui-context-${contextName}`;\n}\n\nexport default function VisualContext({ contextName, className, children }: VisualContextProps) {\n  return <div className={clsx(getVisualContextClassname(contextName), className)}>{children}</div>;\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/visual-context/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAQ9C,MAAM,YAAY,GAAG,wBAAwB,CAAC;AAE9C,MAAM,UAAU,gBAAgB,CAAC,UAAwC;IACvE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEvC,eAAe,CAAC,GAAG,EAAE;;QACnB,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,MAAM,aAAa,GAAG,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;YACpG,QAAQ,CAAC,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,SAAS,CAAC,KAAK,CAAC,YAAY,EAAG,CAAC,CAAC,mCAAI,EAAE,CAAC,CAAC;SAClE;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,yBAAyB,CAAC,WAAmB;IAC3D,OAAO,iBAAiB,WAAW,EAAE,CAAC;AACxC,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAsB;IAC5F,OAAO,6BAAK,SAAS,EAAE,IAAI,CAAC,yBAAyB,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC,IAAG,QAAQ,CAAO,CAAC;AACnG,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useLayoutEffect, useState } from 'react';\nimport { findUpUntil } from '../../utils/dom';\n\ninterface VisualContextProps {\n  contextName: string;\n  className?: string;\n  children: React.ReactNode;\n}\n\nconst contextMatch = /awsui-context-([\\w-]+)/;\n\nexport function useVisualContext(elementRef: React.RefObject<HTMLElement>) {\n  const [value, setValue] = useState('');\n\n  useLayoutEffect(() => {\n    if (elementRef.current) {\n      const contextParent = findUpUntil(elementRef.current, node => !!node.className.match(contextMatch));\n      setValue(contextParent?.className.match(contextMatch)![1] ?? '');\n    }\n  }, [elementRef]);\n\n  return value;\n}\n\n/**\n * This function returns only the className string needed to apply a\n * visual context to the DOM. It is used by the default export but\n * can also be imported directly for situations where the insertion\n * of a <div> node creates style problems.\n */\nexport function getVisualContextClassname(contextName: string) {\n  return `awsui-context-${contextName}`;\n}\n\nexport default function VisualContext({ contextName, className, children }: VisualContextProps) {\n  return <div className={clsx(getVisualContextClassname(contextName), className)}>{children}</div>;\n}\n"]}

package/lib/internal/template/internal/context/app-layout-context.js

@@ -1,10 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { useContext, createContext } from 'react';
-export var AppLayoutContext = createContext({
+export const AppLayoutContext = createContext({
     stickyOffsetTop: 0,
     stickyOffsetBottom: 0,
-    hasBreadcrumbs: false
+    hasBreadcrumbs: false,
 });
 export function useAppLayoutContext() {
     return useContext(AppLayoutContext);

package/lib/internal/template/internal/context/app-layout-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-layout-context.js","sourceRoot":"","sources":["../../../../src/internal/context/app-layout-context.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAUlD,MAAM,CAAC,IAAM,gBAAgB,GAAG,aAAa,CAAwB;IACnE,eAAe,EAAE,CAAC;IAClB,kBAAkB,EAAE,CAAC;IACrB,cAAc,EAAE,KAAK;CACtB,CAAC,CAAC;AAEH,MAAM,UAAU,mBAAmB;IACjC,OAAO,UAAU,CAAC,gBAAgB,CAAC,CAAC;AACtC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useContext, createContext } from 'react';\n\nexport interface AppLayoutContextProps {\n  stickyOffsetBottom: number;\n  stickyOffsetTop: number;\n  hasBreadcrumbs: boolean;\n  setHasStickyBackground?: (hasBackground: boolean) => void;\n  setDynamicOverlapHeight?: (height: number) => void;\n}\n\nexport const AppLayoutContext = createContext<AppLayoutContextProps>({\n  stickyOffsetTop: 0,\n  stickyOffsetBottom: 0,\n  hasBreadcrumbs: false,\n});\n\nexport function useAppLayoutContext() {\n  return useContext(AppLayoutContext);\n}\n"]}
+{"version":3,"file":"app-layout-context.js","sourceRoot":"","sources":["../../../../src/internal/context/app-layout-context.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAUlD,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAwB;IACnE,eAAe,EAAE,CAAC;IAClB,kBAAkB,EAAE,CAAC;IACrB,cAAc,EAAE,KAAK;CACtB,CAAC,CAAC;AAEH,MAAM,UAAU,mBAAmB;IACjC,OAAO,UAAU,CAAC,gBAAgB,CAAC,CAAC;AACtC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useContext, createContext } from 'react';\n\nexport interface AppLayoutContextProps {\n  stickyOffsetBottom: number;\n  stickyOffsetTop: number;\n  hasBreadcrumbs: boolean;\n  setHasStickyBackground?: (hasBackground: boolean) => void;\n  setDynamicOverlapHeight?: (height: number) => void;\n}\n\nexport const AppLayoutContext = createContext<AppLayoutContextProps>({\n  stickyOffsetTop: 0,\n  stickyOffsetBottom: 0,\n  hasBreadcrumbs: false,\n});\n\nexport function useAppLayoutContext() {\n  return useContext(AppLayoutContext);\n}\n"]}

package/lib/internal/template/internal/context/form-field-context.js

@@ -1,16 +1,16 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { useContext, createContext } from 'react';
-export var FormFieldContext = createContext({});
+export const FormFieldContext = createContext({});
 function applyDefault(fields, defaults, keys) {
-    var result = {};
-    keys.forEach(function (key) {
+    const result = {};
+    keys.forEach(key => {
         result[key] = fields[key] === undefined ? defaults[key] : fields[key];
     });
     return result;
 }
 export function useFormFieldContext(props) {
-    var context = useContext(FormFieldContext);
+    const context = useContext(FormFieldContext);
     return applyDefault(props, context, [
         'invalid',
         'controlId',

package/lib/internal/template/internal/context/form-field-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-field-context.js","sourceRoot":"","sources":["../../../../src/internal/context/form-field-context.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAmDlD,MAAM,CAAC,IAAM,gBAAgB,GAAG,aAAa,CAAgC,EAAE,CAAC,CAAC;AAEjF,SAAS,YAAY,CAAI,MAAS,EAAE,QAAW,EAAE,IAAiB;IAChE,IAAM,MAAM,GAAM,EAAE,CAAC;IACrB,IAAI,CAAC,OAAO,CAAC,UAAA,GAAG;QACd,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACxE,CAAC,CAAC,CAAC;IACH,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,KAAsC;IACxE,IAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAC7C,OAAO,YAAY,CAAgC,KAAK,EAAE,OAAO,EAAE;QACjE,SAAS;QACT,WAAW;QACX,gBAAgB;QAChB,iBAAiB;QACjB,qBAAqB;KACtB,CAAC,CAAC;AACL,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useContext, createContext } from 'react';\n\nexport interface FormFieldControlProps {\n  /**\n   * Specifies the ID of the native form element. You can use it to relate\n   * a label element's `for` attribute to this control.\n   *\n   * It defaults to an automatically generated ID that\n   * is provided by its parent form field component.\n   */\n  controlId?: string;\n\n  /**\n   * Adds `aria-labelledby` to the component. If you're using this component within a form field,\n   * don't set this property because the form field component automatically sets it.\n   *\n   * Use this property if the component isn't surrounded by a form field, or you want to override the value\n   * automatically set by the form field (for example, if you have two components within a single form field).\n   *\n   * To use it correctly, define an ID for the element you want to use as label and set the property to that ID.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Adds `aria-describedby` to the component. If you're using this component within a form field,\n   * don't set this property because the form field component automatically sets it.\n   *\n   * Use this property if the component isn't surrounded by a form field, or you want to override the value\n   * automatically set by the form field (for example, if you have two components within a single form field).\n   *\n   * To use it correctly, define an ID for each element that you want to use as a description\n   * and set the property to a string of each ID separated by spaces (for example, `\"id1 id2 id3\"`).\n   */\n  ariaDescribedby?: string;\n}\n\nexport interface FormFieldValidationControlProps extends FormFieldControlProps {\n  /**\n   * Overrides the invalidation state. Usually the invalid state\n   * comes from the parent `FormField`component,\n   * however sometimes you need to override its\n   * state when you have more than one input within a\n   * single form field.\n   */\n  invalid?: boolean;\n}\n\ninterface InternalFormFieldControlProps extends FormFieldValidationControlProps {\n  __useReactAutofocus?: boolean;\n}\n\nexport const FormFieldContext = createContext<InternalFormFieldControlProps>({});\n\nfunction applyDefault<T>(fields: T, defaults: T, keys: (keyof T)[]) {\n  const result = <T>{};\n  keys.forEach(key => {\n    result[key] = fields[key] === undefined ? defaults[key] : fields[key];\n  });\n  return result;\n}\n\nexport function useFormFieldContext(props: FormFieldValidationControlProps) {\n  const context = useContext(FormFieldContext);\n  return applyDefault<InternalFormFieldControlProps>(props, context, [\n    'invalid',\n    'controlId',\n    'ariaLabelledby',\n    'ariaDescribedby',\n    '__useReactAutofocus',\n  ]);\n}\n"]}
+{"version":3,"file":"form-field-context.js","sourceRoot":"","sources":["../../../../src/internal/context/form-field-context.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAmDlD,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAgC,EAAE,CAAC,CAAC;AAEjF,SAAS,YAAY,CAAI,MAAS,EAAE,QAAW,EAAE,IAAiB;IAChE,MAAM,MAAM,GAAM,EAAE,CAAC;IACrB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;QACjB,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACxE,CAAC,CAAC,CAAC;IACH,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,KAAsC;IACxE,MAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAC7C,OAAO,YAAY,CAAgC,KAAK,EAAE,OAAO,EAAE;QACjE,SAAS;QACT,WAAW;QACX,gBAAgB;QAChB,iBAAiB;QACjB,qBAAqB;KACtB,CAAC,CAAC;AACL,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useContext, createContext } from 'react';\n\nexport interface FormFieldControlProps {\n  /**\n   * Specifies the ID of the native form element. You can use it to relate\n   * a label element's `for` attribute to this control.\n   *\n   * It defaults to an automatically generated ID that\n   * is provided by its parent form field component.\n   */\n  controlId?: string;\n\n  /**\n   * Adds `aria-labelledby` to the component. If you're using this component within a form field,\n   * don't set this property because the form field component automatically sets it.\n   *\n   * Use this property if the component isn't surrounded by a form field, or you want to override the value\n   * automatically set by the form field (for example, if you have two components within a single form field).\n   *\n   * To use it correctly, define an ID for the element you want to use as label and set the property to that ID.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Adds `aria-describedby` to the component. If you're using this component within a form field,\n   * don't set this property because the form field component automatically sets it.\n   *\n   * Use this property if the component isn't surrounded by a form field, or you want to override the value\n   * automatically set by the form field (for example, if you have two components within a single form field).\n   *\n   * To use it correctly, define an ID for each element that you want to use as a description\n   * and set the property to a string of each ID separated by spaces (for example, `\"id1 id2 id3\"`).\n   */\n  ariaDescribedby?: string;\n}\n\nexport interface FormFieldValidationControlProps extends FormFieldControlProps {\n  /**\n   * Overrides the invalidation state. Usually the invalid state\n   * comes from the parent `FormField`component,\n   * however sometimes you need to override its\n   * state when you have more than one input within a\n   * single form field.\n   */\n  invalid?: boolean;\n}\n\ninterface InternalFormFieldControlProps extends FormFieldValidationControlProps {\n  __useReactAutofocus?: boolean;\n}\n\nexport const FormFieldContext = createContext<InternalFormFieldControlProps>({});\n\nfunction applyDefault<T>(fields: T, defaults: T, keys: (keyof T)[]) {\n  const result = <T>{};\n  keys.forEach(key => {\n    result[key] = fields[key] === undefined ? defaults[key] : fields[key];\n  });\n  return result;\n}\n\nexport function useFormFieldContext(props: FormFieldValidationControlProps) {\n  const context = useContext(FormFieldContext);\n  return applyDefault<InternalFormFieldControlProps>(props, context, [\n    'invalid',\n    'controlId',\n    'ariaLabelledby',\n    'ariaDescribedby',\n    '__useReactAutofocus',\n  ]);\n}\n"]}

package/lib/internal/template/internal/context/split-panel-context.js

@@ -1,10 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { useContext, createContext } from 'react';
-var SplitPanelContext = createContext(null);
-export var SplitPanelContextProvider = SplitPanelContext.Provider;
+const SplitPanelContext = createContext(null);
+export const SplitPanelContextProvider = SplitPanelContext.Provider;
 export function useSplitPanelContext() {
-    var ctx = useContext(SplitPanelContext);
+    const ctx = useContext(SplitPanelContext);
     if (!ctx) {
         throw new Error('Split panel can only be used inside app layout');
     }

package/lib/internal/template/internal/context/split-panel-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-panel-context.js","sourceRoot":"","sources":["../../../../src/internal/context/split-panel-context.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAc,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAsCzD,IAAM,iBAAiB,GAAG,aAAa,CAAgC,IAAI,CAAC,CAAC;AAE7E,MAAM,CAAC,IAAM,yBAAyB,GAAG,iBAAiB,CAAC,QAAQ,CAAC;AAEpE,MAAM,UAAU,oBAAoB;IAClC,IAAM,GAAG,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC1C,IAAI,CAAC,GAAG,EAAE;QACR,MAAM,IAAI,KAAK,CAAC,gDAAgD,CAAC,CAAC;KACnE;IACD,OAAO,GAAG,CAAC;AACb,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext, createContext } from 'react';\n\nexport type SplitPanelLastInteraction = { type: 'open' } | { type: 'close' } | { type: 'position' };\n\nexport interface SplitPanelSideToggleProps {\n  displayed: boolean;\n  ariaLabel: string | undefined;\n}\n\nexport interface SplitPanelContextProps {\n  topOffset: number;\n  bottomOffset: number;\n  leftOffset: number;\n  rightOffset: number;\n  position: 'side' | 'bottom';\n  size: number;\n  getMaxWidth: () => number;\n  getMaxHeight: () => number;\n  disableContentPaddings?: boolean;\n  contentWidthStyles?: React.CSSProperties;\n  contentWrapperPaddings?: {\n    closedNav: boolean;\n    closedTools: boolean;\n  };\n  isOpen?: boolean;\n  isMobile: boolean;\n  isForcedPosition: boolean;\n  // The lastInteraction property indicates last meaningful state transition used to trigger split-panel effects.\n  // We can't observe properties in a regular way because split-panel is being mounted in several places at once.\n  lastInteraction?: SplitPanelLastInteraction;\n  onResize: (detail: { size: number }) => void;\n  onToggle: () => void;\n  onPreferencesChange: (detail: { position: 'side' | 'bottom' }) => void;\n  reportSize: (pixels: number) => void;\n  reportHeaderHeight: (pixels: number) => void;\n  setSplitPanelToggle: (config: SplitPanelSideToggleProps) => void;\n}\n\nconst SplitPanelContext = createContext<SplitPanelContextProps | null>(null);\n\nexport const SplitPanelContextProvider = SplitPanelContext.Provider;\n\nexport function useSplitPanelContext() {\n  const ctx = useContext(SplitPanelContext);\n  if (!ctx) {\n    throw new Error('Split panel can only be used inside app layout');\n  }\n  return ctx;\n}\n"]}
+{"version":3,"file":"split-panel-context.js","sourceRoot":"","sources":["../../../../src/internal/context/split-panel-context.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAc,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAsCzD,MAAM,iBAAiB,GAAG,aAAa,CAAgC,IAAI,CAAC,CAAC;AAE7E,MAAM,CAAC,MAAM,yBAAyB,GAAG,iBAAiB,CAAC,QAAQ,CAAC;AAEpE,MAAM,UAAU,oBAAoB;IAClC,MAAM,GAAG,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC1C,IAAI,CAAC,GAAG,EAAE;QACR,MAAM,IAAI,KAAK,CAAC,gDAAgD,CAAC,CAAC;KACnE;IACD,OAAO,GAAG,CAAC;AACb,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext, createContext } from 'react';\n\nexport type SplitPanelLastInteraction = { type: 'open' } | { type: 'close' } | { type: 'position' };\n\nexport interface SplitPanelSideToggleProps {\n  displayed: boolean;\n  ariaLabel: string | undefined;\n}\n\nexport interface SplitPanelContextProps {\n  topOffset: number;\n  bottomOffset: number;\n  leftOffset: number;\n  rightOffset: number;\n  position: 'side' | 'bottom';\n  size: number;\n  getMaxWidth: () => number;\n  getMaxHeight: () => number;\n  disableContentPaddings?: boolean;\n  contentWidthStyles?: React.CSSProperties;\n  contentWrapperPaddings?: {\n    closedNav: boolean;\n    closedTools: boolean;\n  };\n  isOpen?: boolean;\n  isMobile: boolean;\n  isForcedPosition: boolean;\n  // The lastInteraction property indicates last meaningful state transition used to trigger split-panel effects.\n  // We can't observe properties in a regular way because split-panel is being mounted in several places at once.\n  lastInteraction?: SplitPanelLastInteraction;\n  onResize: (detail: { size: number }) => void;\n  onToggle: () => void;\n  onPreferencesChange: (detail: { position: 'side' | 'bottom' }) => void;\n  reportSize: (pixels: number) => void;\n  reportHeaderHeight: (pixels: number) => void;\n  setSplitPanelToggle: (config: SplitPanelSideToggleProps) => void;\n}\n\nconst SplitPanelContext = createContext<SplitPanelContextProps | null>(null);\n\nexport const SplitPanelContextProvider = SplitPanelContext.Provider;\n\nexport function useSplitPanelContext() {\n  const ctx = useContext(SplitPanelContext);\n  if (!ctx) {\n    throw new Error('Split panel can only be used inside app layout');\n  }\n  return ctx;\n}\n"]}

package/lib/internal/template/internal/debounce.js

@@ -1,22 +1,17 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 // default delay for components defined by UX
-export var DEBOUNCE_DEFAULT_DELAY = 200;
+export const DEBOUNCE_DEFAULT_DELAY = 200;
 // instead of using this function directly, consider using useDebounceCallback hook
-export default function debounce(func, delay) {
-    if (delay === void 0) { delay = DEBOUNCE_DEFAULT_DELAY; }
-    var timeout;
-    return function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
+export default function debounce(func, delay = DEBOUNCE_DEFAULT_DELAY) {
+    let timeout;
+    return function (...args) {
         if (timeout) {
             clearTimeout(timeout);
         }
-        timeout = setTimeout(function () {
+        timeout = setTimeout(() => {
             timeout = null;
-            func.apply(void 0, args);
+            func(...args);
         }, delay);
     };
 }

package/lib/internal/template/internal/debounce.js.map

@@ -1 +1 @@
-{"version":3,"file":"debounce.js","sourceRoot":"","sources":["../../../src/internal/debounce.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,6CAA6C;AAC7C,MAAM,CAAC,IAAM,sBAAsB,GAAG,GAAG,CAAC;AAE1C,mFAAmF;AACnF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAC9B,IAAkB,EAClB,KAAsC;IAAtC,sBAAA,EAAA,8BAAsC;IAEtC,IAAI,OAA6C,CAAC;IAElD,OAAO;QAAU,cAAc;aAAd,UAAc,EAAd,qBAAc,EAAd,IAAc;YAAd,yBAAc;;QAC7B,IAAI,OAAO,EAAE;YACX,YAAY,CAAC,OAAO,CAAC,CAAC;SACvB;QACD,OAAO,GAAG,UAAU,CAAC;YACnB,OAAO,GAAG,IAAI,CAAC;YACf,IAAI,eAAI,IAAI,EAAE;QAChB,CAAC,EAAE,KAAK,CAAC,CAAC;IACZ,CAAiB,CAAC;AACpB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n// default delay for components defined by UX\nexport const DEBOUNCE_DEFAULT_DELAY = 200;\n\n// instead of using this function directly, consider using useDebounceCallback hook\nexport default function debounce<CallbackType extends (...args: any[]) => void>(\n  func: CallbackType,\n  delay: number = DEBOUNCE_DEFAULT_DELAY\n): CallbackType {\n  let timeout: ReturnType<typeof setTimeout> | null;\n\n  return function (...args: any[]) {\n    if (timeout) {\n      clearTimeout(timeout);\n    }\n    timeout = setTimeout(() => {\n      timeout = null;\n      func(...args);\n    }, delay);\n  } as CallbackType;\n}\n"]}
+{"version":3,"file":"debounce.js","sourceRoot":"","sources":["../../../src/internal/debounce.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,6CAA6C;AAC7C,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAC;AAE1C,mFAAmF;AACnF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAC9B,IAAkB,EAClB,QAAgB,sBAAsB;IAEtC,IAAI,OAA6C,CAAC;IAElD,OAAO,UAAU,GAAG,IAAW;QAC7B,IAAI,OAAO,EAAE;YACX,YAAY,CAAC,OAAO,CAAC,CAAC;SACvB;QACD,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YACxB,OAAO,GAAG,IAAI,CAAC;YACf,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;QAChB,CAAC,EAAE,KAAK,CAAC,CAAC;IACZ,CAAiB,CAAC;AACpB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n// default delay for components defined by UX\nexport const DEBOUNCE_DEFAULT_DELAY = 200;\n\n// instead of using this function directly, consider using useDebounceCallback hook\nexport default function debounce<CallbackType extends (...args: any[]) => void>(\n  func: CallbackType,\n  delay: number = DEBOUNCE_DEFAULT_DELAY\n): CallbackType {\n  let timeout: ReturnType<typeof setTimeout> | null;\n\n  return function (...args: any[]) {\n    if (timeout) {\n      clearTimeout(timeout);\n    }\n    timeout = setTimeout(() => {\n      timeout = null;\n      func(...args);\n    }, delay);\n  } as CallbackType;\n}\n"]}

package/lib/internal/template/internal/environment.js

@@ -1,6 +1,6 @@
 
     export var PACKAGE_SOURCE = 'components';
-    export var PACKAGE_VERSION = '3.0.0 (002c6d1)';
+    export var PACKAGE_VERSION = '3.0.0 (31a1e6f)';
     export var THEME = 'open-source-visual-refresh';
     export var ALWAYS_VISUAL_REFRESH = true;
     

package/lib/internal/template/internal/events/index.js

@@ -1,36 +1,32 @@
-var CustomEventStub = /** @class */ (function () {
-    function CustomEventStub(cancelable, detail) {
-        if (cancelable === void 0) { cancelable = false; }
-        if (detail === void 0) { detail = null; }
+class CustomEventStub {
+    constructor(cancelable = false, detail = null) {
         this.cancelable = cancelable;
         this.detail = detail;
         this.defaultPrevented = false;
         this.cancelBubble = false;
     }
-    CustomEventStub.prototype.preventDefault = function () {
+    preventDefault() {
         this.defaultPrevented = true;
-    };
-    CustomEventStub.prototype.stopPropagation = function () {
+    }
+    stopPropagation() {
         this.cancelBubble = true;
-    };
-    return CustomEventStub;
-}());
-export function createCustomEvent(_a) {
-    var cancelable = _a.cancelable, detail = _a.detail;
+    }
+}
+export function createCustomEvent({ cancelable, detail }) {
     return new CustomEventStub(cancelable, detail);
 }
 export function fireNonCancelableEvent(handler, detail) {
     if (!handler) {
         return;
     }
-    var event = createCustomEvent({ cancelable: false, detail: detail });
+    const event = createCustomEvent({ cancelable: false, detail });
     handler(event);
 }
 export function fireCancelableEvent(handler, detail, sourceEvent) {
     if (!handler) {
         return false;
     }
-    var event = createCustomEvent({ cancelable: true, detail: detail });
+    const event = createCustomEvent({ cancelable: true, detail });
     handler(event);
     if (event.defaultPrevented && sourceEvent) {
         sourceEvent.preventDefault();
@@ -47,10 +43,10 @@ export function fireKeyboardEvent(handler, reactEvent) {
         ctrlKey: reactEvent.ctrlKey,
         shiftKey: reactEvent.shiftKey,
         altKey: reactEvent.altKey,
-        metaKey: reactEvent.metaKey
+        metaKey: reactEvent.metaKey,
     }, reactEvent);
 }
-var isMouseEvent = function (e) {
+const isMouseEvent = (e) => {
     return e.button !== undefined;
 };
 export function isPlainLeftClick(event) {

package/lib/internal/template/internal/events/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/events/index.ts"],"names":[],"mappings":"AAYA;IAGE,yBAAmB,UAA2B,EAAS,MAAuB;QAA3D,2BAAA,EAAA,kBAA2B;QAAS,uBAAA,EAAA,aAAuB;QAA3D,eAAU,GAAV,UAAU,CAAiB;QAAS,WAAM,GAAN,MAAM,CAAiB;QAF9E,qBAAgB,GAAG,KAAK,CAAC;QACzB,iBAAY,GAAG,KAAK,CAAC;IAC4D,CAAC;IAElF,wCAAc,GAAd;QACE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IAC/B,CAAC;IAED,yCAAe,GAAf;QACE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;IAC3B,CAAC;IACH,sBAAC;AAAD,CAAC,AAZD,IAYC;AAyBD,MAAM,UAAU,iBAAiB,CAAI,EAA0C;QAAxC,UAAU,gBAAA,EAAE,MAAM,YAAA;IACvD,OAAO,IAAI,eAAe,CAAC,UAAU,EAAE,MAAM,CAAgB,CAAC;AAChE,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAW,OAAiD,EAAE,MAAU;IAC5G,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO;KACR;IACD,IAAM,KAAK,GAAG,iBAAiB,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,QAAA,EAAE,CAAC,CAAC;IAC/D,OAAO,CAAC,KAAK,CAAC,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,mBAAmB,CACjC,OAA8C,EAC9C,MAAS,EACT,WAA0C;IAE1C,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,KAAK,CAAC;KACd;IACD,IAAM,KAAK,GAAG,iBAAiB,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,QAAA,EAAE,CAAC,CAAC;IAC9D,OAAO,CAAC,KAAK,CAAC,CAAC;IACf,IAAI,KAAK,CAAC,gBAAgB,IAAI,WAAW,EAAE;QACzC,WAAW,CAAC,cAAc,EAAE,CAAC;KAC9B;IACD,IAAI,KAAK,CAAC,YAAY,IAAI,WAAW,EAAE;QACrC,WAAW,CAAC,eAAe,EAAE,CAAC;KAC/B;IACD,OAAO,KAAK,CAAC,gBAAgB,CAAC;AAChC,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,OAA8C,EAAE,UAA+B;IAC/G,OAAO,mBAAmB,CACxB,OAAO,EACP;QACE,OAAO,EAAE,UAAU,CAAC,OAAO;QAC3B,GAAG,EAAE,UAAU,CAAC,GAAG;QACnB,OAAO,EAAE,UAAU,CAAC,OAAO;QAC3B,QAAQ,EAAE,UAAU,CAAC,QAAQ;QAC7B,MAAM,EAAE,UAAU,CAAC,MAAM;QACzB,OAAO,EAAE,UAAU,CAAC,OAAO;KAC5B,EACD,UAAU,CACX,CAAC;AACJ,CAAC;AAED,IAAM,YAAY,GAAG,UAAC,CAAyC;IAC7D,OAAQ,CAAsB,CAAC,MAAM,KAAK,SAAS,CAAC;AACtD,CAAC,CAAC;AAEF,MAAM,UAAU,gBAAgB,CAAC,KAA8C;IAC7E,OAAO,CACL,KAAK;QACL,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;QAC5C,CAAC,KAAK,CAAC,OAAO;QACd,CAAC,KAAK,CAAC,MAAM;QACb,CAAC,KAAK,CAAC,QAAQ;QACf,CAAC,KAAK,CAAC,OAAO,CACf,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\n// This is a part of our public types API. We cannot change this in the current major version\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type NonCancelableEventHandler<Detail = {}> = (event: NonCancelableCustomEvent<Detail>) => void;\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type CancelableEventHandler<Detail = {}> = (event: CustomEvent<Detail>) => void;\n\nexport type NonCancelableCustomEvent<DetailType> = Omit<CustomEvent<DetailType>, 'preventDefault'>;\n\nclass CustomEventStub<T> {\n  defaultPrevented = false;\n  cancelBubble = false;\n  constructor(public cancelable: boolean = false, public detail: T | null = null) {}\n\n  preventDefault() {\n    this.defaultPrevented = true;\n  }\n\n  stopPropagation() {\n    this.cancelBubble = true;\n  }\n}\n\nexport interface BaseKeyDetail {\n  keyCode: number;\n  key: string;\n  ctrlKey: boolean;\n  shiftKey: boolean;\n  altKey: boolean;\n  metaKey: boolean;\n}\n\nexport interface ClickDetail {\n  button: number;\n  ctrlKey: boolean;\n  shiftKey: boolean;\n  altKey: boolean;\n  metaKey: boolean;\n}\n\nexport interface BaseNavigationDetail {\n  href: string | undefined;\n  external?: boolean;\n  target?: string;\n}\n\nexport function createCustomEvent<T>({ cancelable, detail }: CustomEventInit<T>): CustomEvent<T> {\n  return new CustomEventStub(cancelable, detail) as CustomEvent;\n}\n\nexport function fireNonCancelableEvent<T = null>(handler: NonCancelableEventHandler<T> | undefined, detail?: T) {\n  if (!handler) {\n    return;\n  }\n  const event = createCustomEvent({ cancelable: false, detail });\n  handler(event);\n}\n\nexport function fireCancelableEvent<T>(\n  handler: CancelableEventHandler<T> | undefined,\n  detail: T,\n  sourceEvent?: React.SyntheticEvent | Event\n) {\n  if (!handler) {\n    return false;\n  }\n  const event = createCustomEvent({ cancelable: true, detail });\n  handler(event);\n  if (event.defaultPrevented && sourceEvent) {\n    sourceEvent.preventDefault();\n  }\n  if (event.cancelBubble && sourceEvent) {\n    sourceEvent.stopPropagation();\n  }\n  return event.defaultPrevented;\n}\n\nexport function fireKeyboardEvent(handler: CancelableEventHandler<BaseKeyDetail>, reactEvent: React.KeyboardEvent) {\n  return fireCancelableEvent(\n    handler,\n    {\n      keyCode: reactEvent.keyCode,\n      key: reactEvent.key,\n      ctrlKey: reactEvent.ctrlKey,\n      shiftKey: reactEvent.shiftKey,\n      altKey: reactEvent.altKey,\n      metaKey: reactEvent.metaKey,\n    },\n    reactEvent\n  );\n}\n\nconst isMouseEvent = (e: React.MouseEvent | React.KeyboardEvent): e is React.MouseEvent => {\n  return (e as React.MouseEvent).button !== undefined;\n};\n\nexport function isPlainLeftClick(event?: React.MouseEvent | React.KeyboardEvent) {\n  return (\n    event &&\n    (!isMouseEvent(event) || event.button === 0) &&\n    !event.ctrlKey &&\n    !event.altKey &&\n    !event.shiftKey &&\n    !event.metaKey\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/events/index.ts"],"names":[],"mappings":"AAYA,MAAM,eAAe;IAGnB,YAAmB,aAAsB,KAAK,EAAS,SAAmB,IAAI;QAA3D,eAAU,GAAV,UAAU,CAAiB;QAAS,WAAM,GAAN,MAAM,CAAiB;QAF9E,qBAAgB,GAAG,KAAK,CAAC;QACzB,iBAAY,GAAG,KAAK,CAAC;IAC4D,CAAC;IAElF,cAAc;QACZ,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IAC/B,CAAC;IAED,eAAe;QACb,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;IAC3B,CAAC;CACF;AAyBD,MAAM,UAAU,iBAAiB,CAAI,EAAE,UAAU,EAAE,MAAM,EAAsB;IAC7E,OAAO,IAAI,eAAe,CAAC,UAAU,EAAE,MAAM,CAAgB,CAAC;AAChE,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAW,OAAiD,EAAE,MAAU;IAC5G,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO;KACR;IACD,MAAM,KAAK,GAAG,iBAAiB,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;IAC/D,OAAO,CAAC,KAAK,CAAC,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,mBAAmB,CACjC,OAA8C,EAC9C,MAAS,EACT,WAA0C;IAE1C,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,KAAK,CAAC;KACd;IACD,MAAM,KAAK,GAAG,iBAAiB,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IAC9D,OAAO,CAAC,KAAK,CAAC,CAAC;IACf,IAAI,KAAK,CAAC,gBAAgB,IAAI,WAAW,EAAE;QACzC,WAAW,CAAC,cAAc,EAAE,CAAC;KAC9B;IACD,IAAI,KAAK,CAAC,YAAY,IAAI,WAAW,EAAE;QACrC,WAAW,CAAC,eAAe,EAAE,CAAC;KAC/B;IACD,OAAO,KAAK,CAAC,gBAAgB,CAAC;AAChC,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,OAA8C,EAAE,UAA+B;IAC/G,OAAO,mBAAmB,CACxB,OAAO,EACP;QACE,OAAO,EAAE,UAAU,CAAC,OAAO;QAC3B,GAAG,EAAE,UAAU,CAAC,GAAG;QACnB,OAAO,EAAE,UAAU,CAAC,OAAO;QAC3B,QAAQ,EAAE,UAAU,CAAC,QAAQ;QAC7B,MAAM,EAAE,UAAU,CAAC,MAAM;QACzB,OAAO,EAAE,UAAU,CAAC,OAAO;KAC5B,EACD,UAAU,CACX,CAAC;AACJ,CAAC;AAED,MAAM,YAAY,GAAG,CAAC,CAAyC,EAAyB,EAAE;IACxF,OAAQ,CAAsB,CAAC,MAAM,KAAK,SAAS,CAAC;AACtD,CAAC,CAAC;AAEF,MAAM,UAAU,gBAAgB,CAAC,KAA8C;IAC7E,OAAO,CACL,KAAK;QACL,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;QAC5C,CAAC,KAAK,CAAC,OAAO;QACd,CAAC,KAAK,CAAC,MAAM;QACb,CAAC,KAAK,CAAC,QAAQ;QACf,CAAC,KAAK,CAAC,OAAO,CACf,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\n// This is a part of our public types API. We cannot change this in the current major version\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type NonCancelableEventHandler<Detail = {}> = (event: NonCancelableCustomEvent<Detail>) => void;\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type CancelableEventHandler<Detail = {}> = (event: CustomEvent<Detail>) => void;\n\nexport type NonCancelableCustomEvent<DetailType> = Omit<CustomEvent<DetailType>, 'preventDefault'>;\n\nclass CustomEventStub<T> {\n  defaultPrevented = false;\n  cancelBubble = false;\n  constructor(public cancelable: boolean = false, public detail: T | null = null) {}\n\n  preventDefault() {\n    this.defaultPrevented = true;\n  }\n\n  stopPropagation() {\n    this.cancelBubble = true;\n  }\n}\n\nexport interface BaseKeyDetail {\n  keyCode: number;\n  key: string;\n  ctrlKey: boolean;\n  shiftKey: boolean;\n  altKey: boolean;\n  metaKey: boolean;\n}\n\nexport interface ClickDetail {\n  button: number;\n  ctrlKey: boolean;\n  shiftKey: boolean;\n  altKey: boolean;\n  metaKey: boolean;\n}\n\nexport interface BaseNavigationDetail {\n  href: string | undefined;\n  external?: boolean;\n  target?: string;\n}\n\nexport function createCustomEvent<T>({ cancelable, detail }: CustomEventInit<T>): CustomEvent<T> {\n  return new CustomEventStub(cancelable, detail) as CustomEvent;\n}\n\nexport function fireNonCancelableEvent<T = null>(handler: NonCancelableEventHandler<T> | undefined, detail?: T) {\n  if (!handler) {\n    return;\n  }\n  const event = createCustomEvent({ cancelable: false, detail });\n  handler(event);\n}\n\nexport function fireCancelableEvent<T>(\n  handler: CancelableEventHandler<T> | undefined,\n  detail: T,\n  sourceEvent?: React.SyntheticEvent | Event\n) {\n  if (!handler) {\n    return false;\n  }\n  const event = createCustomEvent({ cancelable: true, detail });\n  handler(event);\n  if (event.defaultPrevented && sourceEvent) {\n    sourceEvent.preventDefault();\n  }\n  if (event.cancelBubble && sourceEvent) {\n    sourceEvent.stopPropagation();\n  }\n  return event.defaultPrevented;\n}\n\nexport function fireKeyboardEvent(handler: CancelableEventHandler<BaseKeyDetail>, reactEvent: React.KeyboardEvent) {\n  return fireCancelableEvent(\n    handler,\n    {\n      keyCode: reactEvent.keyCode,\n      key: reactEvent.key,\n      ctrlKey: reactEvent.ctrlKey,\n      shiftKey: reactEvent.shiftKey,\n      altKey: reactEvent.altKey,\n      metaKey: reactEvent.metaKey,\n    },\n    reactEvent\n  );\n}\n\nconst isMouseEvent = (e: React.MouseEvent | React.KeyboardEvent): e is React.MouseEvent => {\n  return (e as React.MouseEvent).button !== undefined;\n};\n\nexport function isPlainLeftClick(event?: React.MouseEvent | React.KeyboardEvent) {\n  return (\n    event &&\n    (!isMouseEvent(event) || event.button === 0) &&\n    !event.ctrlKey &&\n    !event.altKey &&\n    !event.shiftKey &&\n    !event.metaKey\n  );\n}\n"]}

package/lib/internal/template/internal/focus-tracker.js

@@ -1,52 +1,47 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { containsOrEqual } from './utils/dom';
-var FocusTracker = /** @class */ (function () {
-    function FocusTracker(node, _a, viewportId) {
-        var onFocusEnter = _a.onFocusEnter, onFocusLeave = _a.onFocusLeave;
-        if (viewportId === void 0) { viewportId = ''; }
-        var _this = this;
+export default class FocusTracker {
+    constructor(node, { onFocusEnter, onFocusLeave }, viewportId = '') {
         this.node = node;
         this.currentlyFocused = false;
-        this.focusInListener = function (event) {
-            var focusIsInside = containsOrEqual(_this.node, event.target);
-            if (!_this.currentlyFocused && focusIsInside) {
-                _this.triggerFocus();
+        this.focusInListener = (event) => {
+            const focusIsInside = containsOrEqual(this.node, event.target);
+            if (!this.currentlyFocused && focusIsInside) {
+                this.triggerFocus();
             }
         };
-        this.focusOutListener = function (event) {
-            var nextFocused = event.relatedTarget;
-            var isNextFocusedInParent = !containsOrEqual(_this.node, nextFocused);
-            if (_this.viewportId) {
-                var viewport = document.getElementById(_this.viewportId);
+        this.focusOutListener = (event) => {
+            const nextFocused = event.relatedTarget;
+            let isNextFocusedInParent = !containsOrEqual(this.node, nextFocused);
+            if (this.viewportId) {
+                const viewport = document.getElementById(this.viewportId);
                 isNextFocusedInParent = isNextFocusedInParent && !containsOrEqual(viewport, nextFocused);
             }
-            if (_this.currentlyFocused && (nextFocused === null || isNextFocusedInParent)) {
-                _this.triggerBlur();
+            if (this.currentlyFocused && (nextFocused === null || isNextFocusedInParent)) {
+                this.triggerBlur();
             }
         };
         this.onFocusEnter = onFocusEnter;
         this.onFocusLeave = onFocusLeave;
         this.viewportId = viewportId;
     }
-    FocusTracker.prototype.initialize = function () {
+    initialize() {
         this.currentlyFocused = containsOrEqual(this.node, document.activeElement);
         document.addEventListener('focusin', this.focusInListener);
         document.addEventListener('focusout', this.focusOutListener);
-    };
-    FocusTracker.prototype.destroy = function () {
+    }
+    destroy() {
         document.removeEventListener('focusin', this.focusInListener);
         document.removeEventListener('focusout', this.focusOutListener);
-    };
-    FocusTracker.prototype.triggerBlur = function () {
+    }
+    triggerBlur() {
         this.currentlyFocused = false;
         this.onFocusLeave();
-    };
-    FocusTracker.prototype.triggerFocus = function () {
+    }
+    triggerFocus() {
         this.currentlyFocused = true;
         this.onFocusEnter();
-    };
-    return FocusTracker;
-}());
-export default FocusTracker;
+    }
+}
 //# sourceMappingURL=focus-tracker.js.map

package/lib/internal/template/internal/focus-tracker.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus-tracker.js","sourceRoot":"","sources":["../../../src/internal/focus-tracker.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAO9C;IAOE,sBAAoB,IAAiB,EAAE,EAAmD,EAAE,UAAe;YAAlE,YAAY,kBAAA,EAAE,YAAY,kBAAA;QAAyB,2BAAA,EAAA,eAAe;QAA3G,iBAIC;QAJmB,SAAI,GAAJ,IAAI,CAAa;QAF7B,qBAAgB,GAAG,KAAK,CAAC;QAmBzB,oBAAe,GAAG,UAAC,KAAiB;YAC1C,IAAM,aAAa,GAAG,eAAe,CAAC,KAAI,CAAC,IAAI,EAAE,KAAK,CAAC,MAAc,CAAC,CAAC;YACvE,IAAI,CAAC,KAAI,CAAC,gBAAgB,IAAI,aAAa,EAAE;gBAC3C,KAAI,CAAC,YAAY,EAAE,CAAC;aACrB;QACH,CAAC,CAAC;QAEM,qBAAgB,GAAG,UAAC,KAAiB;YAC3C,IAAM,WAAW,GAAG,KAAK,CAAC,aAAqB,CAAC;YAChD,IAAI,qBAAqB,GAAG,CAAC,eAAe,CAAC,KAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;YAErE,IAAI,KAAI,CAAC,UAAU,EAAE;gBACnB,IAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,KAAI,CAAC,UAAU,CAAC,CAAC;gBAC1D,qBAAqB,GAAG,qBAAqB,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;aAC1F;YACD,IAAI,KAAI,CAAC,gBAAgB,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,qBAAqB,CAAC,EAAE;gBAC5E,KAAI,CAAC,WAAW,EAAE,CAAC;aACpB;QACH,CAAC,CAAC;QAlCA,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QACjC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QACjC,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IAC/B,CAAC;IAED,iCAAU,GAAV;QACE,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,aAAoB,CAAC,CAAC;QAClF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAC3D,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC/D,CAAC;IAED,8BAAO,GAAP;QACE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAC9D,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAClE,CAAC;IAsBO,kCAAW,GAAnB;QACE,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAEO,mCAAY,GAApB;QACE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IACH,mBAAC;AAAD,CAAC,AArDD,IAqDC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { containsOrEqual } from './utils/dom';\n\ninterface FocusTrackerOptions {\n  onFocusEnter: () => void;\n  onFocusLeave: () => void;\n}\n\nexport default class FocusTracker {\n  private readonly onFocusLeave: () => void;\n  private readonly onFocusEnter: () => void;\n  private readonly viewportId: string;\n\n  private currentlyFocused = false;\n\n  constructor(private node: HTMLElement, { onFocusEnter, onFocusLeave }: FocusTrackerOptions, viewportId = '') {\n    this.onFocusEnter = onFocusEnter;\n    this.onFocusLeave = onFocusLeave;\n    this.viewportId = viewportId;\n  }\n\n  initialize() {\n    this.currentlyFocused = containsOrEqual(this.node, document.activeElement as any);\n    document.addEventListener('focusin', this.focusInListener);\n    document.addEventListener('focusout', this.focusOutListener);\n  }\n\n  destroy() {\n    document.removeEventListener('focusin', this.focusInListener);\n    document.removeEventListener('focusout', this.focusOutListener);\n  }\n\n  private focusInListener = (event: FocusEvent) => {\n    const focusIsInside = containsOrEqual(this.node, event.target as Node);\n    if (!this.currentlyFocused && focusIsInside) {\n      this.triggerFocus();\n    }\n  };\n\n  private focusOutListener = (event: FocusEvent) => {\n    const nextFocused = event.relatedTarget as Node;\n    let isNextFocusedInParent = !containsOrEqual(this.node, nextFocused);\n\n    if (this.viewportId) {\n      const viewport = document.getElementById(this.viewportId);\n      isNextFocusedInParent = isNextFocusedInParent && !containsOrEqual(viewport, nextFocused);\n    }\n    if (this.currentlyFocused && (nextFocused === null || isNextFocusedInParent)) {\n      this.triggerBlur();\n    }\n  };\n\n  private triggerBlur() {\n    this.currentlyFocused = false;\n    this.onFocusLeave();\n  }\n\n  private triggerFocus() {\n    this.currentlyFocused = true;\n    this.onFocusEnter();\n  }\n}\n"]}
+{"version":3,"file":"focus-tracker.js","sourceRoot":"","sources":["../../../src/internal/focus-tracker.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAO9C,MAAM,CAAC,OAAO,OAAO,YAAY;IAO/B,YAAoB,IAAiB,EAAE,EAAE,YAAY,EAAE,YAAY,EAAuB,EAAE,UAAU,GAAG,EAAE;QAAvF,SAAI,GAAJ,IAAI,CAAa;QAF7B,qBAAgB,GAAG,KAAK,CAAC;QAmBzB,oBAAe,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC9C,MAAM,aAAa,GAAG,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,MAAc,CAAC,CAAC;YACvE,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,aAAa,EAAE;gBAC3C,IAAI,CAAC,YAAY,EAAE,CAAC;aACrB;QACH,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,MAAM,WAAW,GAAG,KAAK,CAAC,aAAqB,CAAC;YAChD,IAAI,qBAAqB,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;YAErE,IAAI,IAAI,CAAC,UAAU,EAAE;gBACnB,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBAC1D,qBAAqB,GAAG,qBAAqB,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;aAC1F;YACD,IAAI,IAAI,CAAC,gBAAgB,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,qBAAqB,CAAC,EAAE;gBAC5E,IAAI,CAAC,WAAW,EAAE,CAAC;aACpB;QACH,CAAC,CAAC;QAlCA,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QACjC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QACjC,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IAC/B,CAAC;IAED,UAAU;QACR,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,aAAoB,CAAC,CAAC;QAClF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAC3D,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC/D,CAAC;IAED,OAAO;QACL,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAC9D,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAClE,CAAC;IAsBO,WAAW;QACjB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;CACF","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { containsOrEqual } from './utils/dom';\n\ninterface FocusTrackerOptions {\n  onFocusEnter: () => void;\n  onFocusLeave: () => void;\n}\n\nexport default class FocusTracker {\n  private readonly onFocusLeave: () => void;\n  private readonly onFocusEnter: () => void;\n  private readonly viewportId: string;\n\n  private currentlyFocused = false;\n\n  constructor(private node: HTMLElement, { onFocusEnter, onFocusLeave }: FocusTrackerOptions, viewportId = '') {\n    this.onFocusEnter = onFocusEnter;\n    this.onFocusLeave = onFocusLeave;\n    this.viewportId = viewportId;\n  }\n\n  initialize() {\n    this.currentlyFocused = containsOrEqual(this.node, document.activeElement as any);\n    document.addEventListener('focusin', this.focusInListener);\n    document.addEventListener('focusout', this.focusOutListener);\n  }\n\n  destroy() {\n    document.removeEventListener('focusin', this.focusInListener);\n    document.removeEventListener('focusout', this.focusOutListener);\n  }\n\n  private focusInListener = (event: FocusEvent) => {\n    const focusIsInside = containsOrEqual(this.node, event.target as Node);\n    if (!this.currentlyFocused && focusIsInside) {\n      this.triggerFocus();\n    }\n  };\n\n  private focusOutListener = (event: FocusEvent) => {\n    const nextFocused = event.relatedTarget as Node;\n    let isNextFocusedInParent = !containsOrEqual(this.node, nextFocused);\n\n    if (this.viewportId) {\n      const viewport = document.getElementById(this.viewportId);\n      isNextFocusedInParent = isNextFocusedInParent && !containsOrEqual(viewport, nextFocused);\n    }\n    if (this.currentlyFocused && (nextFocused === null || isNextFocusedInParent)) {\n      this.triggerBlur();\n    }\n  };\n\n  private triggerBlur() {\n    this.currentlyFocused = false;\n    this.onFocusLeave();\n  }\n\n  private triggerFocus() {\n    this.currentlyFocused = true;\n    this.onFocusEnter();\n  }\n}\n"]}

package/lib/internal/template/internal/generated/custom-css-properties/index.js

@@ -1,4 +1,4 @@
-var customCSSPropertiesMap = {
+const customCSSPropertiesMap = {
     offsetTop: '--awsui-offset-top-lgrg0d',
     offsetTopWithNotifications: '--awsui-offset-top-with-notifications-lgrg0d',
     contentGapLeft: '--awsui-content-gap-left-lgrg0d',
@@ -28,7 +28,7 @@ var customCSSPropertiesMap = {
     flashbarStackIndex: '--awsui-flashbar-stack-index-lgrg0d',
     flashbarStickyBottomMargin: '--awsui-flashbar-sticky-bottom-margin-lgrg0d',
     stackedNotificationsBottomMargin: '--awsui-stacked-notifications-bottom-margin-lgrg0d',
-    stackedNotificationsDefaultBottomMargin: '--awsui-stacked-notifications-default-bottom-margin-lgrg0d'
+    stackedNotificationsDefaultBottomMargin: '--awsui-stacked-notifications-default-bottom-margin-lgrg0d',
 };
 export default customCSSPropertiesMap;
 //# sourceMappingURL=index.js.map

package/lib/internal/template/internal/generated/custom-css-properties/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/generated/custom-css-properties/index.ts"],"names":[],"mappings":"AAAA,IAAM,sBAAsB,GAA2B;IACrD,SAAS,EAAE,2BAA2B;IACtC,0BAA0B,EAAE,8CAA8C;IAC1E,cAAc,EAAE,iCAAiC;IACjD,eAAe,EAAE,kCAAkC;IACnD,aAAa,EAAE,+BAA+B;IAC9C,sBAAsB,EAAE,0CAA0C;IAClE,sBAAsB,EAAE,0CAA0C;IAClE,YAAY,EAAE,8BAA8B;IAC5C,YAAY,EAAE,8BAA8B;IAC5C,WAAW,EAAE,6BAA6B;IAC1C,cAAc,EAAE,iCAAiC;IACjD,eAAe,EAAE,kCAAkC;IACnD,eAAe,EAAE,kCAAkC;IACnD,mBAAmB,EAAE,qCAAqC;IAC1D,aAAa,EAAE,+BAA+B;IAC9C,eAAe,EAAE,iCAAiC;IAClD,4BAA4B,EAAE,iDAAiD;IAC/E,sBAAsB,EAAE,0CAA0C;IAClE,gBAAgB,EAAE,mCAAmC;IACrD,kBAAkB,EAAE,sCAAsC;IAC1D,kBAAkB,EAAE,sCAAsC;IAC1D,aAAa,EAAE,gCAAgC;IAC/C,UAAU,EAAE,4BAA4B;IACxC,6BAA6B,EAAE,iDAAiD;IAChF,mBAAmB,EAAE,sCAAsC;IAC3D,kBAAkB,EAAE,qCAAqC;IACzD,kBAAkB,EAAE,qCAAqC;IACzD,0BAA0B,EAAE,8CAA8C;IAC1E,gCAAgC,EAAE,oDAAoD;IACtF,uCAAuC,EAAE,4DAA4D;CACtG,CAAC;AACF,eAAe,sBAAsB,CAAC","sourcesContent":["const customCSSPropertiesMap: Record<string, string> = {\n  offsetTop: '--awsui-offset-top-lgrg0d',\n  offsetTopWithNotifications: '--awsui-offset-top-with-notifications-lgrg0d',\n  contentGapLeft: '--awsui-content-gap-left-lgrg0d',\n  contentGapRight: '--awsui-content-gap-right-lgrg0d',\n  contentHeight: '--awsui-content-height-lgrg0d',\n  defaultMaxContentWidth: '--awsui-default-max-content-width-lgrg0d',\n  defaultMinContentWidth: '--awsui-default-min-content-width-lgrg0d',\n  footerHeight: '--awsui-footer-height-lgrg0d',\n  headerHeight: '--awsui-header-height-lgrg0d',\n  layoutWidth: '--awsui-layout-width-lgrg0d',\n  mainOffsetLeft: '--awsui-main-offset-left-lgrg0d',\n  maxContentWidth: '--awsui-max-content-width-lgrg0d',\n  minContentWidth: '--awsui-min-content-width-lgrg0d',\n  notificationsHeight: '--awsui-notifications-height-lgrg0d',\n  overlapHeight: '--awsui-overlap-height-lgrg0d',\n  navigationWidth: '--awsui-navigation-width-lgrg0d',\n  splitPanelReportedHeaderSize: '--awsui-split-panel-reported-header-size-lgrg0d',\n  splitPanelReportedSize: '--awsui-split-panel-reported-size-lgrg0d',\n  splitPanelHeight: '--awsui-split-panel-height-lgrg0d',\n  splitPanelMinWidth: '--awsui-split-panel-min-width-lgrg0d',\n  splitPanelMaxWidth: '--awsui-split-panel-max-width-lgrg0d',\n  toolsMaxWidth: '--awsui-tools-max-width-lgrg0d',\n  toolsWidth: '--awsui-tools-width-lgrg0d',\n  toolsAnimationStartingOpacity: '--awsui-tools-animation-starting-opacity-lgrg0d',\n  contentScrollMargin: '--awsui-content-scroll-margin-lgrg0d',\n  flashbarStackDepth: '--awsui-flashbar-stack-depth-lgrg0d',\n  flashbarStackIndex: '--awsui-flashbar-stack-index-lgrg0d',\n  flashbarStickyBottomMargin: '--awsui-flashbar-sticky-bottom-margin-lgrg0d',\n  stackedNotificationsBottomMargin: '--awsui-stacked-notifications-bottom-margin-lgrg0d',\n  stackedNotificationsDefaultBottomMargin: '--awsui-stacked-notifications-default-bottom-margin-lgrg0d',\n};\nexport default customCSSPropertiesMap;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/generated/custom-css-properties/index.ts"],"names":[],"mappings":"AAAA,MAAM,sBAAsB,GAA2B;IACrD,SAAS,EAAE,2BAA2B;IACtC,0BAA0B,EAAE,8CAA8C;IAC1E,cAAc,EAAE,iCAAiC;IACjD,eAAe,EAAE,kCAAkC;IACnD,aAAa,EAAE,+BAA+B;IAC9C,sBAAsB,EAAE,0CAA0C;IAClE,sBAAsB,EAAE,0CAA0C;IAClE,YAAY,EAAE,8BAA8B;IAC5C,YAAY,EAAE,8BAA8B;IAC5C,WAAW,EAAE,6BAA6B;IAC1C,cAAc,EAAE,iCAAiC;IACjD,eAAe,EAAE,kCAAkC;IACnD,eAAe,EAAE,kCAAkC;IACnD,mBAAmB,EAAE,qCAAqC;IAC1D,aAAa,EAAE,+BAA+B;IAC9C,eAAe,EAAE,iCAAiC;IAClD,4BAA4B,EAAE,iDAAiD;IAC/E,sBAAsB,EAAE,0CAA0C;IAClE,gBAAgB,EAAE,mCAAmC;IACrD,kBAAkB,EAAE,sCAAsC;IAC1D,kBAAkB,EAAE,sCAAsC;IAC1D,aAAa,EAAE,gCAAgC;IAC/C,UAAU,EAAE,4BAA4B;IACxC,6BAA6B,EAAE,iDAAiD;IAChF,mBAAmB,EAAE,sCAAsC;IAC3D,kBAAkB,EAAE,qCAAqC;IACzD,kBAAkB,EAAE,qCAAqC;IACzD,0BAA0B,EAAE,8CAA8C;IAC1E,gCAAgC,EAAE,oDAAoD;IACtF,uCAAuC,EAAE,4DAA4D;CACtG,CAAC;AACF,eAAe,sBAAsB,CAAC","sourcesContent":["const customCSSPropertiesMap: Record<string, string> = {\n  offsetTop: '--awsui-offset-top-lgrg0d',\n  offsetTopWithNotifications: '--awsui-offset-top-with-notifications-lgrg0d',\n  contentGapLeft: '--awsui-content-gap-left-lgrg0d',\n  contentGapRight: '--awsui-content-gap-right-lgrg0d',\n  contentHeight: '--awsui-content-height-lgrg0d',\n  defaultMaxContentWidth: '--awsui-default-max-content-width-lgrg0d',\n  defaultMinContentWidth: '--awsui-default-min-content-width-lgrg0d',\n  footerHeight: '--awsui-footer-height-lgrg0d',\n  headerHeight: '--awsui-header-height-lgrg0d',\n  layoutWidth: '--awsui-layout-width-lgrg0d',\n  mainOffsetLeft: '--awsui-main-offset-left-lgrg0d',\n  maxContentWidth: '--awsui-max-content-width-lgrg0d',\n  minContentWidth: '--awsui-min-content-width-lgrg0d',\n  notificationsHeight: '--awsui-notifications-height-lgrg0d',\n  overlapHeight: '--awsui-overlap-height-lgrg0d',\n  navigationWidth: '--awsui-navigation-width-lgrg0d',\n  splitPanelReportedHeaderSize: '--awsui-split-panel-reported-header-size-lgrg0d',\n  splitPanelReportedSize: '--awsui-split-panel-reported-size-lgrg0d',\n  splitPanelHeight: '--awsui-split-panel-height-lgrg0d',\n  splitPanelMinWidth: '--awsui-split-panel-min-width-lgrg0d',\n  splitPanelMaxWidth: '--awsui-split-panel-max-width-lgrg0d',\n  toolsMaxWidth: '--awsui-tools-max-width-lgrg0d',\n  toolsWidth: '--awsui-tools-width-lgrg0d',\n  toolsAnimationStartingOpacity: '--awsui-tools-animation-starting-opacity-lgrg0d',\n  contentScrollMargin: '--awsui-content-scroll-margin-lgrg0d',\n  flashbarStackDepth: '--awsui-flashbar-stack-depth-lgrg0d',\n  flashbarStackIndex: '--awsui-flashbar-stack-index-lgrg0d',\n  flashbarStickyBottomMargin: '--awsui-flashbar-sticky-bottom-margin-lgrg0d',\n  stackedNotificationsBottomMargin: '--awsui-stacked-notifications-bottom-margin-lgrg0d',\n  stackedNotificationsDefaultBottomMargin: '--awsui-stacked-notifications-default-bottom-margin-lgrg0d',\n};\nexport default customCSSPropertiesMap;\n"]}

package/lib/internal/template/internal/hooks/check-controlled/index.js

@@ -4,7 +4,7 @@ import { isDevelopment } from '../../is-development';
 import { warnOnce } from '../../logging';
 export default function checkControlled(componentName, propertyName, propertyValue, handlerName, handlerValue) {
     if (propertyValue !== undefined && handlerValue === undefined && isDevelopment) {
-        warnOnce(componentName, "You provided `".concat(propertyName, "` prop without an `").concat(handlerName, "` handler. This will render a read-only component. If the component should be mutable, set an `").concat(handlerName, "` handler."));
+        warnOnce(componentName, `You provided \`${propertyName}\` prop without an \`${handlerName}\` handler. This will render a read-only component. If the component should be mutable, set an \`${handlerName}\` handler.`);
     }
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/internal/hooks/check-controlled/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/check-controlled/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,aAAqB,EACrB,YAAoB,EACpB,aAAoC,EACpC,WAAmB,EACnB,YAAoE;IAEpE,IAAI,aAAa,KAAK,SAAS,IAAI,YAAY,KAAK,SAAS,IAAI,aAAa,EAAE;QAC9E,QAAQ,CACN,aAAa,EACb,wBAAkB,YAAY,gCAAwB,WAAW,4GAAoG,WAAW,eAAa,CAC9L,CAAC;KACH;AACH,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { isDevelopment } from '../../is-development';\nimport { warnOnce } from '../../logging';\nimport { NonCancelableEventHandler } from '../../events';\n\nexport default function checkControlled<ValueType, EventDetailType>(\n  componentName: string,\n  propertyName: string,\n  propertyValue: ValueType | undefined,\n  handlerName: string,\n  handlerValue: NonCancelableEventHandler<EventDetailType> | undefined\n) {\n  if (propertyValue !== undefined && handlerValue === undefined && isDevelopment) {\n    warnOnce(\n      componentName,\n      `You provided \\`${propertyName}\\` prop without an \\`${handlerName}\\` handler. This will render a read-only component. If the component should be mutable, set an \\`${handlerName}\\` handler.`\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/check-controlled/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,aAAqB,EACrB,YAAoB,EACpB,aAAoC,EACpC,WAAmB,EACnB,YAAoE;IAEpE,IAAI,aAAa,KAAK,SAAS,IAAI,YAAY,KAAK,SAAS,IAAI,aAAa,EAAE;QAC9E,QAAQ,CACN,aAAa,EACb,kBAAkB,YAAY,wBAAwB,WAAW,oGAAoG,WAAW,aAAa,CAC9L,CAAC;KACH;AACH,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { isDevelopment } from '../../is-development';\nimport { warnOnce } from '../../logging';\nimport { NonCancelableEventHandler } from '../../events';\n\nexport default function checkControlled<ValueType, EventDetailType>(\n  componentName: string,\n  propertyName: string,\n  propertyValue: ValueType | undefined,\n  handlerName: string,\n  handlerValue: NonCancelableEventHandler<EventDetailType> | undefined\n) {\n  if (propertyValue !== undefined && handlerValue === undefined && isDevelopment) {\n    warnOnce(\n      componentName,\n      `You provided \\`${propertyName}\\` prop without an \\`${handlerName}\\` handler. This will render a read-only component. If the component should be mutable, set an \\`${handlerName}\\` handler.`\n    );\n  }\n}\n"]}

package/lib/internal/template/internal/hooks/container-queries/use-container-breakpoints.js

@@ -9,8 +9,8 @@ import { getMatchingBreakpoint } from '../../breakpoints';
  */
 export function useContainerBreakpoints(triggers) {
     // triggers.join() gives us a stable value to use for the dependencies argument
-    var triggersDep = triggers === null || triggers === void 0 ? void 0 : triggers.join();
+    const triggersDep = triggers === null || triggers === void 0 ? void 0 : triggers.join();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    return useContainerQuery(function (rect) { return getMatchingBreakpoint(rect.width, triggers); }, [triggersDep]);
+    return useContainerQuery(rect => getMatchingBreakpoint(rect.width, triggers), [triggersDep]);
 }
 //# sourceMappingURL=use-container-breakpoints.js.map

package/lib/internal/template/internal/hooks/container-queries/use-container-breakpoints.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-container-breakpoints.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/container-queries/use-container-breakpoints.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAc,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAEtE;;;;;;GAMG;AACH,MAAM,UAAU,uBAAuB,CACrC,QAAY;IAEZ,+EAA+E;IAC/E,IAAM,WAAW,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,EAAE,CAAC;IACrC,uDAAuD;IACvD,OAAO,iBAAiB,CAAC,UAAA,IAAI,IAAI,OAAA,qBAAqB,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,EAA3C,CAA2C,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;AAC/F,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { useContainerQuery } from './use-container-query';\nimport { Breakpoint, getMatchingBreakpoint } from '../../breakpoints';\n\n/**\n * Re-renders the component when the breakpoint for the component changes. Scopes the re-renders to the specific\n * breakpoints you want to break at. \"default\" is always included as a fallback, so [\"xs\"] would trigger for\n * \"default\" and \"xs\".\n *\n * @param triggers The relevant breakpoints to trigger for.\n */\nexport function useContainerBreakpoints<T extends readonly Breakpoint[]>(\n  triggers?: T\n): [T[number] | 'default' | null, React.Ref<any>] {\n  // triggers.join() gives us a stable value to use for the dependencies argument\n  const triggersDep = triggers?.join();\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  return useContainerQuery(rect => getMatchingBreakpoint(rect.width, triggers), [triggersDep]);\n}\n"]}
+{"version":3,"file":"use-container-breakpoints.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/container-queries/use-container-breakpoints.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAc,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAEtE;;;;;;GAMG;AACH,MAAM,UAAU,uBAAuB,CACrC,QAAY;IAEZ,+EAA+E;IAC/E,MAAM,WAAW,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,EAAE,CAAC;IACrC,uDAAuD;IACvD,OAAO,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;AAC/F,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { useContainerQuery } from './use-container-query';\nimport { Breakpoint, getMatchingBreakpoint } from '../../breakpoints';\n\n/**\n * Re-renders the component when the breakpoint for the component changes. Scopes the re-renders to the specific\n * breakpoints you want to break at. \"default\" is always included as a fallback, so [\"xs\"] would trigger for\n * \"default\" and \"xs\".\n *\n * @param triggers The relevant breakpoints to trigger for.\n */\nexport function useContainerBreakpoints<T extends readonly Breakpoint[]>(\n  triggers?: T\n): [T[number] | 'default' | null, React.Ref<any>] {\n  // triggers.join() gives us a stable value to use for the dependencies argument\n  const triggersDep = triggers?.join();\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  return useContainerQuery(rect => getMatchingBreakpoint(rect.width, triggers), [triggersDep]);\n}\n"]}

package/lib/internal/template/internal/hooks/container-queries/use-container-query.js

@@ -20,14 +20,13 @@ import { useResizeObserver } from './use-resize-observer';
  * @param deps Dependency list to indicate when the mapFn changes
  * @returns A tuple of observation value and a reference to be attached to the target element.
  */
-export function useContainerQuery(mapFn, deps) {
-    if (deps === void 0) { deps = []; }
-    var elementRef = useRef(null);
-    var _a = useState(null), state = _a[0], setState = _a[1];
+export function useContainerQuery(mapFn, deps = []) {
+    const elementRef = useRef(null);
+    const [state, setState] = useState(null);
     // Update getElement when deps change to trigger new observation.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    var getElement = useCallback(function () { return elementRef.current; }, deps);
-    useResizeObserver(getElement, function (entry) { return setState(function (prevState) { return mapFn(entry, prevState); }); });
+    const getElement = useCallback(() => elementRef.current, deps);
+    useResizeObserver(getElement, entry => setState(prevState => mapFn(entry, prevState)));
     return [state, elementRef];
 }
 //# sourceMappingURL=use-container-query.js.map

package/lib/internal/template/internal/hooks/container-queries/use-container-query.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-container-query.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/container-queries/use-container-query.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,iBAAiB,CAC/B,KAAwD,EACxD,IAA+B;IAA/B,qBAAA,EAAA,SAA+B;IAE/B,IAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IACvC,IAAA,KAAoB,QAAQ,CAAW,IAAI,CAAC,EAA3C,KAAK,QAAA,EAAE,QAAQ,QAA4B,CAAC;IAEnD,iEAAiE;IACjE,uDAAuD;IACvD,IAAM,UAAU,GAAG,WAAW,CAAC,cAAM,OAAA,UAAU,CAAC,OAAO,EAAlB,CAAkB,EAAE,IAAI,CAAC,CAAC;IAE/D,iBAAiB,CAAC,UAAU,EAAE,UAAA,KAAK,IAAI,OAAA,QAAQ,CAAC,UAAA,SAAS,IAAI,OAAA,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,EAAvB,CAAuB,CAAC,EAA9C,CAA8C,CAAC,CAAC;IAEvF,OAAO,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;AAC7B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useState, useCallback } from 'react';\nimport { ContainerQueryEntry } from './interfaces';\nimport { useResizeObserver } from './use-resize-observer';\n\n/**\n * Attaches resize-observer to the referenced element and keeps last observation in state.\n * The hook allows to limit the amount of re-renders to only when the observed value changes.\n *\n * Examples:\n *    // Switching display mode under a given condition (only re-renders when mode changes):\n *    const [smallMode, ref] = useContainerQuery(entry => entry.contentBoxHeight <= smallModeHeight, [smallModeHeight]);\n *\n *    // Obtain observer entity (re-renders with each observation):\n *    const [entry, ref] = useContainerQuery(entry => entry);\n *\n *    // Using prevState to avoid unnecessary re-renders:\n *    const [value, ref] = useContainerQuery((entry, prevValue) => shouldUpdate(entry) ? getValue(entry) : prevValue);\n *\n * @param mapFn Function to convert ContainerQueryEntry to a custom type S\n * @param deps Dependency list to indicate when the mapFn changes\n * @returns A tuple of observation value and a reference to be attached to the target element.\n */\nexport function useContainerQuery<S>(\n  mapFn: (entry: ContainerQueryEntry, prev: null | S) => S,\n  deps: React.DependencyList = []\n): [null | S, React.Ref<any>] {\n  const elementRef = useRef<HTMLElement>(null);\n  const [state, setState] = useState<S | null>(null);\n\n  // Update getElement when deps change to trigger new observation.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const getElement = useCallback(() => elementRef.current, deps);\n\n  useResizeObserver(getElement, entry => setState(prevState => mapFn(entry, prevState)));\n\n  return [state, elementRef];\n}\n"]}
+{"version":3,"file":"use-container-query.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/container-queries/use-container-query.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,iBAAiB,CAC/B,KAAwD,EACxD,OAA6B,EAAE;IAE/B,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAW,IAAI,CAAC,CAAC;IAEnD,iEAAiE;IACjE,uDAAuD;IACvD,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAE/D,iBAAiB,CAAC,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IAEvF,OAAO,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;AAC7B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useState, useCallback } from 'react';\nimport { ContainerQueryEntry } from './interfaces';\nimport { useResizeObserver } from './use-resize-observer';\n\n/**\n * Attaches resize-observer to the referenced element and keeps last observation in state.\n * The hook allows to limit the amount of re-renders to only when the observed value changes.\n *\n * Examples:\n *    // Switching display mode under a given condition (only re-renders when mode changes):\n *    const [smallMode, ref] = useContainerQuery(entry => entry.contentBoxHeight <= smallModeHeight, [smallModeHeight]);\n *\n *    // Obtain observer entity (re-renders with each observation):\n *    const [entry, ref] = useContainerQuery(entry => entry);\n *\n *    // Using prevState to avoid unnecessary re-renders:\n *    const [value, ref] = useContainerQuery((entry, prevValue) => shouldUpdate(entry) ? getValue(entry) : prevValue);\n *\n * @param mapFn Function to convert ContainerQueryEntry to a custom type S\n * @param deps Dependency list to indicate when the mapFn changes\n * @returns A tuple of observation value and a reference to be attached to the target element.\n */\nexport function useContainerQuery<S>(\n  mapFn: (entry: ContainerQueryEntry, prev: null | S) => S,\n  deps: React.DependencyList = []\n): [null | S, React.Ref<any>] {\n  const elementRef = useRef<HTMLElement>(null);\n  const [state, setState] = useState<S | null>(null);\n\n  // Update getElement when deps change to trigger new observation.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const getElement = useCallback(() => elementRef.current, deps);\n\n  useResizeObserver(getElement, entry => setState(prevState => mapFn(entry, prevState)));\n\n  return [state, elementRef];\n}\n"]}

package/lib/internal/template/internal/hooks/container-queries/use-resize-observer.js

@@ -19,12 +19,12 @@ import { useStableEventHandler } from '../use-stable-event-handler';
  * @param onObserve Function to fire when observation occurs
  */
 export function useResizeObserver(elementRef, onObserve) {
-    var stableOnObserve = useStableEventHandler(onObserve);
+    const stableOnObserve = useStableEventHandler(onObserve);
     // This effect provides a synchronous update required to prevent flakiness when initial state and first observed state are different.
     // Can potentially conflict with React concurrent mode: https://17.reactjs.org/docs/concurrent-mode-intro.html.
     // A possible solution would be to make consumers not render any content until the first (asynchronous) observation is available.
-    useLayoutEffect(function () {
-        var element = typeof elementRef === 'function' ? elementRef() : elementRef === null || elementRef === void 0 ? void 0 : elementRef.current;
+    useLayoutEffect(() => {
+        const element = typeof elementRef === 'function' ? elementRef() : elementRef === null || elementRef === void 0 ? void 0 : elementRef.current;
         if (element) {
             onObserve(convertResizeObserverEntry(new ResizeObserverEntry(element)));
         }
@@ -32,20 +32,20 @@ export function useResizeObserver(elementRef, onObserve) {
     // This effect is only needed for the first render to provide a synchronous update.
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    useEffect(function () {
-        var element = typeof elementRef === 'function' ? elementRef() : elementRef === null || elementRef === void 0 ? void 0 : elementRef.current;
+    useEffect(() => {
+        const element = typeof elementRef === 'function' ? elementRef() : elementRef === null || elementRef === void 0 ? void 0 : elementRef.current;
         if (element) {
-            var connected_1 = true;
-            var observer_1 = new ResizeObserver(function (entries) {
+            let connected = true;
+            const observer = new ResizeObserver(entries => {
                 // Prevent observe notifications on already unmounted component.
-                if (connected_1) {
+                if (connected) {
                     stableOnObserve(convertResizeObserverEntry(entries[0]));
                 }
             });
-            observer_1.observe(element);
-            return function () {
-                connected_1 = false;
-                observer_1.disconnect();
+            observer.observe(element);
+            return () => {
+                connected = false;
+                observer.disconnect();
             };
         }
     }, [elementRef, stableOnObserve]);
@@ -58,7 +58,7 @@ function convertResizeObserverEntry(entry) {
         borderBoxWidth: entry.borderBoxSize[0].inlineSize,
         borderBoxHeight: entry.borderBoxSize[0].blockSize,
         width: entry.contentBoxSize[0].inlineSize,
-        height: entry.contentBoxSize[0].blockSize
+        height: entry.contentBoxSize[0].blockSize,
     };
 }
 //# sourceMappingURL=use-resize-observer.js.map