@cloudscape-design/components 3.0.0

package/internal/hooks/check-controlled/index.d.ts

@@ -0,0 +1,3 @@
+import { NonCancelableEventHandler } from '../../events';
+export default function checkControlled<ValueType, EventDetailType>(componentName: string, propertyName: string, propertyValue: ValueType | undefined, handlerName: string, handlerValue: NonCancelableEventHandler<EventDetailType> | undefined): void;
+//# sourceMappingURL=index.d.ts.map

package/internal/hooks/check-controlled/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/check-controlled/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,SAAS,EAAE,eAAe,EAChE,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,SAAS,GAAG,SAAS,EACpC,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,yBAAyB,CAAC,eAAe,CAAC,GAAG,SAAS,QAQrE"}

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

@@ -0,0 +1,10 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+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."));
+    }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"]}

package/internal/hooks/container-queries/index.d.ts

@@ -0,0 +1,5 @@
+export { ContainerQueryEntry } from './interfaces';
+export * from './use-container-query';
+export * from './use-container-breakpoints';
+export * from './use-resize-observer';
+//# sourceMappingURL=index.d.ts.map

package/internal/hooks/container-queries/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/container-queries/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACnD,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC"}

package/internal/hooks/container-queries/index.js

@@ -0,0 +1,4 @@
+export * from './use-container-query';
+export * from './use-container-breakpoints';
+export * from './use-resize-observer';
+//# sourceMappingURL=index.js.map

package/internal/hooks/container-queries/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/container-queries/index.ts"],"names":[],"mappings":"AAGA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport { ContainerQueryEntry } from './interfaces';\nexport * from './use-container-query';\nexport * from './use-container-breakpoints';\nexport * from './use-resize-observer';\n"]}

package/internal/hooks/container-queries/interfaces.d.ts

@@ -0,0 +1,10 @@
+export interface ContainerQueryEntry {
+    target: Element;
+    contentBoxWidth: number;
+    contentBoxHeight: number;
+    borderBoxWidth: number;
+    borderBoxHeight: number;
+    width: number;
+    height: number;
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/internal/hooks/container-queries/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/container-queries/interfaces.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB"}

package/internal/hooks/container-queries/interfaces.js

@@ -0,0 +1,4 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export {};
+//# sourceMappingURL=interfaces.js.map

package/internal/hooks/container-queries/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/container-queries/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\n// Simplified version of ResizeObserverEntry\nexport interface ContainerQueryEntry {\n  target: Element;\n  contentBoxWidth: number;\n  contentBoxHeight: number;\n  borderBoxWidth: number;\n  borderBoxHeight: number;\n  width: number; // Same as contentWidth, added for consistency with old API\n  height: number; // Same as contentHeight, added for consistency with old API\n}\n"]}

package/internal/hooks/container-queries/use-container-breakpoints.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Breakpoint } from '../../breakpoints';
+/**
+ * Re-renders the component when the breakpoint for the component changes. Scopes the re-renders to the specific
+ * breakpoints you want to break at. "default" is always included as a fallback, so ["xs"] would trigger for
+ * "default" and "xs".
+ *
+ * @param triggers The relevant breakpoints to trigger for.
+ */
+export declare function useContainerBreakpoints<T extends readonly Breakpoint[]>(triggers?: T): [T[number] | 'default' | null, React.Ref<any>];
+//# sourceMappingURL=use-container-breakpoints.d.ts.map

package/internal/hooks/container-queries/use-container-breakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-container-breakpoints.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/container-queries/use-container-breakpoints.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAyB,MAAM,mBAAmB,CAAC;AAEtE;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,SAAS,UAAU,EAAE,EACrE,QAAQ,CAAC,EAAE,CAAC,GACX,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,SAAS,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAKhD"}

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

@@ -0,0 +1,16 @@
+import { useContainerQuery } from './use-container-query';
+import { getMatchingBreakpoint } from '../../breakpoints';
+/**
+ * Re-renders the component when the breakpoint for the component changes. Scopes the re-renders to the specific
+ * breakpoints you want to break at. "default" is always included as a fallback, so ["xs"] would trigger for
+ * "default" and "xs".
+ *
+ * @param triggers The relevant breakpoints to trigger for.
+ */
+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();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return useContainerQuery(function (rect) { return getMatchingBreakpoint(rect.width, triggers); }, [triggersDep]);
+}
+//# sourceMappingURL=use-container-breakpoints.js.map

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

@@ -0,0 +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"]}

package/internal/hooks/container-queries/use-container-query.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ContainerQueryEntry } from './interfaces';
+/**
+ * Attaches resize-observer to the referenced element and keeps last observation in state.
+ * The hook allows to limit the amount of re-renders to only when the observed value changes.
+ *
+ * Examples:
+ *    // Switching display mode under a given condition (only re-renders when mode changes):
+ *    const [smallMode, ref] = useContainerQuery(entry => entry.contentBoxHeight <= smallModeHeight, [smallModeHeight]);
+ *
+ *    // Obtain observer entity (re-renders with each observation):
+ *    const [entry, ref] = useContainerQuery(entry => entry);
+ *
+ *    // Using prevState to avoid unnecessary re-renders:
+ *    const [value, ref] = useContainerQuery((entry, prevValue) => shouldUpdate(entry) ? getValue(entry) : prevValue);
+ *
+ * @param mapFn Function to convert ContainerQueryEntry to a custom type S
+ * @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 declare function useContainerQuery<S>(mapFn: (entry: ContainerQueryEntry, prev: null | S) => S, deps?: React.DependencyList): [null | S, React.Ref<any>];
+//# sourceMappingURL=use-container-query.d.ts.map

package/internal/hooks/container-queries/use-container-query.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-container-query.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/container-queries/use-container-query.ts"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGnD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EACjC,KAAK,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,IAAI,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,EACxD,IAAI,GAAE,KAAK,CAAC,cAAmB,GAC9B,CAAC,IAAI,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAW5B"}

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

@@ -0,0 +1,33 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useRef, useState, useCallback } from 'react';
+import { useResizeObserver } from './use-resize-observer';
+/**
+ * Attaches resize-observer to the referenced element and keeps last observation in state.
+ * The hook allows to limit the amount of re-renders to only when the observed value changes.
+ *
+ * Examples:
+ *    // Switching display mode under a given condition (only re-renders when mode changes):
+ *    const [smallMode, ref] = useContainerQuery(entry => entry.contentBoxHeight <= smallModeHeight, [smallModeHeight]);
+ *
+ *    // Obtain observer entity (re-renders with each observation):
+ *    const [entry, ref] = useContainerQuery(entry => entry);
+ *
+ *    // Using prevState to avoid unnecessary re-renders:
+ *    const [value, ref] = useContainerQuery((entry, prevValue) => shouldUpdate(entry) ? getValue(entry) : prevValue);
+ *
+ * @param mapFn Function to convert ContainerQueryEntry to a custom type S
+ * @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];
+    // 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); }); });
+    return [state, elementRef];
+}
+//# sourceMappingURL=use-container-query.js.map

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

@@ -0,0 +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"]}

package/internal/hooks/container-queries/use-resize-observer.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ContainerQueryEntry } from './interfaces';
+declare type ElementReference = (() => Element | null) | React.RefObject<Element>;
+/**
+ * Attaches resize-observer to the referenced element.
+ *
+ * Examples:
+ *     // With React reference
+ *     const ref = useRef(null)
+ *     useResizeObserver(ref, (entry) => setState(getWidth(entry)))
+ *
+ *     // With ID reference
+ *     const getElement = useCallback(() => document.getElementById(id), [id])
+ *     useResizeObserver(getElement, (entry) => setState(getWidth(entry)))
+ *
+ * @param elementRef React reference or memoized getter for the target element
+ * @param onObserve Function to fire when observation occurs
+ */
+export declare function useResizeObserver(elementRef: ElementReference, onObserve: (entry: ContainerQueryEntry) => void): void;
+export {};
+//# sourceMappingURL=use-resize-observer.d.ts.map

package/internal/hooks/container-queries/use-resize-observer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-resize-observer.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/container-queries/use-resize-observer.ts"],"names":[],"mappings":"AAGA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAEnD,aAAK,gBAAgB,GAAG,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;AAE1E;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,QAmC9G"}

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

@@ -0,0 +1,64 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { ResizeObserver, ResizeObserverEntry } from '@juggle/resize-observer';
+import { useEffect, useLayoutEffect } from 'react';
+import { useStableEventHandler } from '../use-stable-event-handler';
+/**
+ * Attaches resize-observer to the referenced element.
+ *
+ * Examples:
+ *     // With React reference
+ *     const ref = useRef(null)
+ *     useResizeObserver(ref, (entry) => setState(getWidth(entry)))
+ *
+ *     // With ID reference
+ *     const getElement = useCallback(() => document.getElementById(id), [id])
+ *     useResizeObserver(getElement, (entry) => setState(getWidth(entry)))
+ *
+ * @param elementRef React reference or memoized getter for the target element
+ * @param onObserve Function to fire when observation occurs
+ */
+export function useResizeObserver(elementRef, onObserve) {
+    var 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;
+        if (element) {
+            onObserve(convertResizeObserverEntry(new ResizeObserverEntry(element)));
+        }
+    }, 
+    // 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;
+        if (element) {
+            var connected_1 = true;
+            var observer_1 = new ResizeObserver(function (entries) {
+                // Prevent observe notifications on already unmounted component.
+                if (connected_1) {
+                    stableOnObserve(convertResizeObserverEntry(entries[0]));
+                }
+            });
+            observer_1.observe(element);
+            return function () {
+                connected_1 = false;
+                observer_1.disconnect();
+            };
+        }
+    }, [elementRef, stableOnObserve]);
+}
+function convertResizeObserverEntry(entry) {
+    return {
+        target: entry.target,
+        contentBoxWidth: entry.contentBoxSize[0].inlineSize,
+        contentBoxHeight: entry.contentBoxSize[0].blockSize,
+        borderBoxWidth: entry.borderBoxSize[0].inlineSize,
+        borderBoxHeight: entry.borderBoxSize[0].blockSize,
+        width: entry.contentBoxSize[0].inlineSize,
+        height: entry.contentBoxSize[0].blockSize
+    };
+}
+//# sourceMappingURL=use-resize-observer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-resize-observer.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/container-queries/use-resize-observer.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAc,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAKpE;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,iBAAiB,CAAC,UAA4B,EAAE,SAA+C;IAC7G,IAAM,eAAe,GAAG,qBAAqB,CAAC,SAAS,CAAC,CAAC;IAEzD,qIAAqI;IACrI,+GAA+G;IAC/G,iIAAiI;IACjI,eAAe,CACb;QACE,IAAM,OAAO,GAAG,OAAO,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,CAAC;QACtF,IAAI,OAAO,EAAE;YACX,SAAS,CAAC,0BAA0B,CAAC,IAAI,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;SACzE;IACH,CAAC;IACD,mFAAmF;IACnF,uDAAuD;IACvD,EAAE,CACH,CAAC;IAEF,SAAS,CAAC;QACR,IAAM,OAAO,GAAG,OAAO,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,CAAC;QACtF,IAAI,OAAO,EAAE;YACX,IAAI,WAAS,GAAG,IAAI,CAAC;YACrB,IAAM,UAAQ,GAAG,IAAI,cAAc,CAAC,UAAA,OAAO;gBACzC,gEAAgE;gBAChE,IAAI,WAAS,EAAE;oBACb,eAAe,CAAC,0BAA0B,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;iBACzD;YACH,CAAC,CAAC,CAAC;YACH,UAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YAC1B,OAAO;gBACL,WAAS,GAAG,KAAK,CAAC;gBAClB,UAAQ,CAAC,UAAU,EAAE,CAAC;YACxB,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC;AACpC,CAAC;AAED,SAAS,0BAA0B,CAAC,KAA0B;IAC5D,OAAO;QACL,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,UAAU;QACnD,gBAAgB,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,SAAS;QACnD,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,UAAU;QACjD,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS;QACjD,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,UAAU;QACzC,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,SAAS;KAC1C,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ResizeObserver, ResizeObserverEntry } from '@juggle/resize-observer';\nimport React, { useEffect, useLayoutEffect } from 'react';\nimport { useStableEventHandler } from '../use-stable-event-handler';\nimport { ContainerQueryEntry } from './interfaces';\n\ntype ElementReference = (() => Element | null) | React.RefObject<Element>;\n\n/**\n * Attaches resize-observer to the referenced element.\n *\n * Examples:\n *     // With React reference\n *     const ref = useRef(null)\n *     useResizeObserver(ref, (entry) => setState(getWidth(entry)))\n *\n *     // With ID reference\n *     const getElement = useCallback(() => document.getElementById(id), [id])\n *     useResizeObserver(getElement, (entry) => setState(getWidth(entry)))\n *\n * @param elementRef React reference or memoized getter for the target element\n * @param onObserve Function to fire when observation occurs\n */\nexport function useResizeObserver(elementRef: ElementReference, onObserve: (entry: ContainerQueryEntry) => void) {\n  const stableOnObserve = useStableEventHandler(onObserve);\n\n  // This effect provides a synchronous update required to prevent flakiness when initial state and first observed state are different.\n  // Can potentially conflict with React concurrent mode: https://17.reactjs.org/docs/concurrent-mode-intro.html.\n  // A possible solution would be to make consumers not render any content until the first (asynchronous) observation is available.\n  useLayoutEffect(\n    () => {\n      const element = typeof elementRef === 'function' ? elementRef() : elementRef?.current;\n      if (element) {\n        onObserve(convertResizeObserverEntry(new ResizeObserverEntry(element)));\n      }\n    },\n    // This effect is only needed for the first render to provide a synchronous update.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    []\n  );\n\n  useEffect(() => {\n    const element = typeof elementRef === 'function' ? elementRef() : elementRef?.current;\n    if (element) {\n      let connected = true;\n      const observer = new ResizeObserver(entries => {\n        // Prevent observe notifications on already unmounted component.\n        if (connected) {\n          stableOnObserve(convertResizeObserverEntry(entries[0]));\n        }\n      });\n      observer.observe(element);\n      return () => {\n        connected = false;\n        observer.disconnect();\n      };\n    }\n  }, [elementRef, stableOnObserve]);\n}\n\nfunction convertResizeObserverEntry(entry: ResizeObserverEntry): ContainerQueryEntry {\n  return {\n    target: entry.target,\n    contentBoxWidth: entry.contentBoxSize[0].inlineSize,\n    contentBoxHeight: entry.contentBoxSize[0].blockSize,\n    borderBoxWidth: entry.borderBoxSize[0].inlineSize,\n    borderBoxHeight: entry.borderBoxSize[0].blockSize,\n    width: entry.contentBoxSize[0].inlineSize,\n    height: entry.contentBoxSize[0].blockSize,\n  };\n}\n"]}

package/internal/hooks/dom-context/index.d.ts

@@ -0,0 +1,14 @@
+import React, { ProviderProps } from 'react';
+export interface RootProviderProps<T> extends React.HTMLAttributes<HTMLDivElement>, ProviderProps<T> {
+}
+export interface IntermediateProviderProps {
+    parentElement: HTMLElement;
+    children?: React.ReactNode;
+}
+export interface DomContextDeclaration<T> {
+    context: React.Context<T>;
+    RootProvider: React.FC<RootProviderProps<T>>;
+    IntermediateProvider: React.FC<IntermediateProviderProps>;
+}
+export declare function createDomContext<T>(name: string, defaultValue: T): DomContextDeclaration<T>;
+//# sourceMappingURL=index.d.ts.map

package/internal/hooks/dom-context/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/dom-context/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAiB,aAAa,EAAqC,MAAM,OAAO,CAAC;AAwB/F,MAAM,WAAW,iBAAiB,CAAC,CAAC,CAAE,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC;CAAG;AAEvG,MAAM,WAAW,yBAAyB;IACxC,aAAa,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAC1B,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7C,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAAC,CAAC;CAC3D;AAED,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAiD3F"}

package/internal/hooks/dom-context/index.js

@@ -0,0 +1,70 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { createContext, useLayoutEffect, useRef, useState } from 'react';
+function getContextFromElement(element, contextKey) {
+    return element[contextKey];
+}
+function setContextToElement(element, contextKey, contextValue) {
+    element[contextKey] = contextValue;
+    var event = document.createEvent('CustomEvent');
+    event.initCustomEvent(contextKey, false, false, null);
+    element.dispatchEvent(event);
+}
+function findupContext(contextKey, element) {
+    var currentElement = element;
+    while (currentElement) {
+        if (getContextFromElement(currentElement, contextKey) !== undefined) {
+            return currentElement;
+        }
+        currentElement = currentElement.parentElement;
+    }
+    return null;
+}
+export function createDomContext(name, defaultValue) {
+    var context = createContext(defaultValue);
+    var contextKey = "__awsui_context_".concat(name);
+    var ReactProvider = context.Provider;
+    function RootProvider(_a) {
+        var value = _a.value, rest = __rest(_a, ["value"]);
+        var ref = useRef(null);
+        useLayoutEffect(function () {
+            if (ref.current) {
+                setContextToElement(ref.current, contextKey, value);
+            }
+        }, [value]);
+        return (React.createElement(ReactProvider, { value: value },
+            React.createElement("div", __assign({ ref: ref }, rest))));
+    }
+    function IntermediateProvider(_a) {
+        var children = _a.children, parentElement = _a.parentElement;
+        var _b = useState(undefined), discoveredValue = _b[0], setDiscoveredValue = _b[1];
+        useLayoutEffect(function () {
+            var providerElement = findupContext(contextKey, parentElement);
+            if (!providerElement) {
+                setDiscoveredValue(null);
+            }
+            else {
+                setDiscoveredValue(getContextFromElement(providerElement, contextKey));
+                var changeListener_1 = function () {
+                    var newValue = getContextFromElement(providerElement, contextKey);
+                    setDiscoveredValue(newValue);
+                };
+                providerElement.addEventListener(contextKey, changeListener_1);
+                return function () { return providerElement.removeEventListener(contextKey, changeListener_1); };
+            }
+        }, [parentElement]);
+        // it is undefined at the first render
+        if (discoveredValue === undefined) {
+            return null;
+        }
+        // we looked for context value but found nothing, continue rendering children
+        if (discoveredValue === null) {
+            return React.createElement(React.Fragment, null, children);
+        }
+        // there is a context value, wrap into provider
+        return React.createElement(ReactProvider, { value: discoveredValue }, children);
+    }
+    return { context: context, RootProvider: RootProvider, IntermediateProvider: IntermediateProvider };
+}
+//# sourceMappingURL=index.js.map

package/internal/hooks/dom-context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/dom-context/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, { createContext, ProviderProps, useLayoutEffect, useRef, useState } from 'react';\n\nfunction getContextFromElement(element: HTMLElement, contextKey: string) {\n  return (element as any)[contextKey];\n}\n\nfunction setContextToElement(element: HTMLElement, contextKey: string, contextValue: any) {\n  (element as any)[contextKey] = contextValue;\n  const event = document.createEvent('CustomEvent');\n  event.initCustomEvent(contextKey, false, false, null);\n  element.dispatchEvent(event);\n}\n\nfunction findupContext(contextKey: string, element: HTMLElement) {\n  let currentElement: HTMLElement | null = element;\n  while (currentElement) {\n    if (getContextFromElement(currentElement, contextKey) !== undefined) {\n      return currentElement;\n    }\n    currentElement = currentElement.parentElement;\n  }\n  return null;\n}\n\nexport interface RootProviderProps<T> extends React.HTMLAttributes<HTMLDivElement>, ProviderProps<T> {}\n\nexport interface IntermediateProviderProps {\n  parentElement: HTMLElement;\n  children?: React.ReactNode;\n}\n\nexport interface DomContextDeclaration<T> {\n  context: React.Context<T>;\n  RootProvider: React.FC<RootProviderProps<T>>;\n  IntermediateProvider: React.FC<IntermediateProviderProps>;\n}\n\nexport function createDomContext<T>(name: string, defaultValue: T): DomContextDeclaration<T> {\n  const context = createContext<T>(defaultValue);\n  const contextKey = `__awsui_context_${name}`;\n  const ReactProvider = context.Provider;\n\n  function RootProvider({ value, ...rest }: RootProviderProps<T>) {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useLayoutEffect(() => {\n      if (ref.current) {\n        setContextToElement(ref.current, contextKey, value);\n      }\n    }, [value]);\n    return (\n      <ReactProvider value={value}>\n        <div ref={ref} {...rest} />\n      </ReactProvider>\n    );\n  }\n\n  function IntermediateProvider({ children, parentElement }: IntermediateProviderProps) {\n    const [discoveredValue, setDiscoveredValue] = useState<T | null | undefined>(undefined);\n    useLayoutEffect(() => {\n      const providerElement = findupContext(contextKey, parentElement);\n      if (!providerElement) {\n        setDiscoveredValue(null);\n      } else {\n        setDiscoveredValue(getContextFromElement(providerElement, contextKey));\n        const changeListener = () => {\n          const newValue = getContextFromElement(providerElement, contextKey);\n          setDiscoveredValue(newValue);\n        };\n        providerElement.addEventListener(contextKey, changeListener);\n        return () => providerElement.removeEventListener(contextKey, changeListener);\n      }\n    }, [parentElement]);\n    // it is undefined at the first render\n    if (discoveredValue === undefined) {\n      return null;\n    }\n    // we looked for context value but found nothing, continue rendering children\n    if (discoveredValue === null) {\n      return <>{children}</>;\n    }\n    // there is a context value, wrap into provider\n    return <ReactProvider value={discoveredValue}>{children}</ReactProvider>;\n  }\n\n  return { context, RootProvider, IntermediateProvider };\n}\n"]}

package/internal/hooks/focus-visible/index.d.ts

@@ -0,0 +1,6 @@
+export default function useFocusVisible(): {
+    'data-awsui-focus-visible': true;
+} | {
+    'data-awsui-focus-visible'?: undefined;
+};
+//# sourceMappingURL=index.d.ts.map

package/internal/hooks/focus-visible/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/focus-visible/index.ts"],"names":[],"mappings":"AA2BA,MAAM,CAAC,OAAO,UAAU,eAAe;;;;EAGtC"}

package/internal/hooks/focus-visible/index.js

@@ -0,0 +1,29 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { KeyCode } from '../../keycode';
+import { createSingletonState } from '../use-singleton-handler';
+var useFocusSingleton = createSingletonState({
+    initialState: false,
+    factory: function (setIsKeyboard) {
+        var handleMousedown = function () { return setIsKeyboard(false); };
+        var handleKeydown = function (event) {
+            // we do not want to highlight focused element
+            // when special keys are pressed
+            var isSpecialKey = [KeyCode.shift, KeyCode.alt, KeyCode.control, KeyCode.meta].indexOf(event.keyCode) > -1;
+            if (!isSpecialKey) {
+                setIsKeyboard(true);
+            }
+        };
+        document.addEventListener('mousedown', handleMousedown);
+        document.addEventListener('keydown', handleKeydown);
+        return function () {
+            document.removeEventListener('mousedown', handleMousedown);
+            document.removeEventListener('keydown', handleKeydown);
+        };
+    }
+});
+export default function useFocusVisible() {
+    var visible = useFocusSingleton();
+    return visible ? { 'data-awsui-focus-visible': visible } : {};
+}
+//# sourceMappingURL=index.js.map

package/internal/hooks/focus-visible/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/focus-visible/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,IAAM,iBAAiB,GAAG,oBAAoB,CAAU;IACtD,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,UAAA,aAAa;QACpB,IAAM,eAAe,GAAG,cAAM,OAAA,aAAa,CAAC,KAAK,CAAC,EAApB,CAAoB,CAAC;QACnD,IAAM,aAAa,GAAG,UAAC,KAAoB;YACzC,8CAA8C;YAC9C,gCAAgC;YAChC,IAAM,YAAY,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;YAE7G,IAAI,CAAC,YAAY,EAAE;gBACjB,aAAa,CAAC,IAAI,CAAC,CAAC;aACrB;QACH,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;QACxD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACpD,OAAO;YACL,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;YAC3D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,eAAe;IACrC,IAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,OAAO,OAAO,CAAC,CAAC,CAAC,EAAE,0BAA0B,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AAChE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { KeyCode } from '../../keycode';\nimport { createSingletonState } from '../use-singleton-handler';\n\nconst useFocusSingleton = createSingletonState<boolean>({\n  initialState: false,\n  factory: setIsKeyboard => {\n    const handleMousedown = () => setIsKeyboard(false);\n    const handleKeydown = (event: KeyboardEvent) => {\n      // we do not want to highlight focused element\n      // when special keys are pressed\n      const isSpecialKey = [KeyCode.shift, KeyCode.alt, KeyCode.control, KeyCode.meta].indexOf(event.keyCode) > -1;\n\n      if (!isSpecialKey) {\n        setIsKeyboard(true);\n      }\n    };\n    document.addEventListener('mousedown', handleMousedown);\n    document.addEventListener('keydown', handleKeydown);\n    return () => {\n      document.removeEventListener('mousedown', handleMousedown);\n      document.removeEventListener('keydown', handleKeydown);\n    };\n  },\n});\n\nexport default function useFocusVisible() {\n  const visible = useFocusSingleton();\n  return visible ? { 'data-awsui-focus-visible': visible } : {};\n}\n"]}

package/internal/hooks/forward-focus/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ForwardFocusRef {
+    focus(): void;
+}
+export default function useForwardFocus(mainRef: React.Ref<any>, controlRef: React.RefObject<{
+    focus: HTMLElement['focus'];
+}>): void;
+//# sourceMappingURL=index.d.ts.map

package/internal/hooks/forward-focus/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/forward-focus/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,MAAM,WAAW,eAAe;IAC9B,KAAK,IAAI,IAAI,CAAC;CACf;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,EACvB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAAE,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;CAAE,CAAC,QAW7D"}

package/internal/hooks/forward-focus/index.js

@@ -0,0 +1,16 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useImperativeHandle } from 'react';
+export default function useForwardFocus(mainRef, controlRef) {
+    useImperativeHandle(mainRef, function () { return ({
+        focus: function () {
+            var _a;
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            (_a = controlRef.current) === null || _a === void 0 ? void 0 : _a.focus.apply(_a, args);
+        }
+    }); }, [controlRef]);
+}
+//# sourceMappingURL=index.js.map

package/internal/hooks/forward-focus/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/forward-focus/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAc,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAMnD,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,OAAuB,EACvB,UAA4D;IAE5D,mBAAmB,CACjB,OAAO,EACP,cAAM,OAAA,CAAC;QACL,KAAK,EAAL;;YAAM,cAAyC;iBAAzC,UAAyC,EAAzC,qBAAyC,EAAzC,IAAyC;gBAAzC,yBAAyC;;YAC7C,MAAA,UAAU,CAAC,OAAO,0CAAE,KAAK,WAAI,IAAI,CAAC,CAAC;QACrC,CAAC;KACF,CAAC,EAJI,CAIJ,EACF,CAAC,UAAU,CAAC,CACb,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useImperativeHandle } from 'react';\n\nexport interface ForwardFocusRef {\n  focus(): void;\n}\n\nexport default function useForwardFocus(\n  mainRef: React.Ref<any>,\n  controlRef: React.RefObject<{ focus: HTMLElement['focus'] }>\n) {\n  useImperativeHandle(\n    mainRef,\n    () => ({\n      focus(...args: Parameters<HTMLElement['focus']>) {\n        controlRef.current?.focus(...args);\n      },\n    }),\n    [controlRef]\n  );\n}\n"]}

package/internal/hooks/use-base-component/index.d.ts

@@ -0,0 +1,14 @@
+import { MutableRefObject } from 'react';
+export declare const COMPONENT_METADATA_KEY = "__awsuiMetadata__";
+export interface InternalBaseComponentProps {
+    __internalRootRef?: MutableRefObject<any> | null;
+}
+/**
+ * This hook is used for components which are exported to customers. The returned __internalRootRef needs to be
+ * attached to the (internal) component's root DOM node. The hook takes care of attaching the metadata to this
+ * root DOM node and emits the telemetry for this component.
+ */
+export default function useBaseComponent<T = any>(componentName: string): {
+    __internalRootRef: import("react").RefObject<T>;
+};
+//# sourceMappingURL=index.d.ts.map

package/internal/hooks/use-base-component/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-base-component/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAqB,MAAM,OAAO,CAAC;AAI5D,eAAO,MAAM,sBAAsB,sBAAsB,CAAC;AAE1D,MAAM,WAAW,0BAA0B;IACzC,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;CAClD;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,CAAC,GAAG,GAAG,EAAE,aAAa,EAAE,MAAM;;EAQtE"}

package/internal/hooks/use-base-component/index.js

@@ -0,0 +1,39 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect, useRef } from 'react';
+import { useTelemetry } from '../use-telemetry';
+import { PACKAGE_VERSION } from '../../environment';
+export var COMPONENT_METADATA_KEY = '__awsuiMetadata__';
+/**
+ * This hook is used for components which are exported to customers. The returned __internalRootRef needs to be
+ * attached to the (internal) component's root DOM node. The hook takes care of attaching the metadata to this
+ * root DOM node and emits the telemetry for this component.
+ */
+export default function useBaseComponent(componentName) {
+    var elementRef = useRef(null);
+    useTelemetry(componentName);
+    useComponentMetadata(componentName, elementRef);
+    return {
+        __internalRootRef: elementRef
+    };
+}
+function useComponentMetadata(componentName, elementRef) {
+    useEffect(function () {
+        if (elementRef.current && !Object.prototype.hasOwnProperty.call(elementRef.current, COMPONENT_METADATA_KEY)) {
+            var node = elementRef.current;
+            var metadata = {
+                name: componentName,
+                version: PACKAGE_VERSION
+            };
+            Object.freeze(metadata);
+            Object.defineProperty(node, COMPONENT_METADATA_KEY, {
+                value: metadata,
+                writable: false
+            });
+        }
+        // Some component refs change dynamically. E.g. The Modal component where
+        // the content gets rendered conditionally inside a Portal.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [elementRef.current]);
+}
+//# sourceMappingURL=index.js.map

package/internal/hooks/use-base-component/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-base-component/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAoB,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,MAAM,CAAC,IAAM,sBAAsB,GAAG,mBAAmB,CAAC;AAM1D;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAU,aAAqB;IACrE,IAAM,UAAU,GAAG,MAAM,CAAI,IAAI,CAAC,CAAC;IACnC,YAAY,CAAC,aAAa,CAAC,CAAC;IAC5B,oBAAoB,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;IAEhD,OAAO;QACL,iBAAiB,EAAE,UAAU;KAC9B,CAAC;AACJ,CAAC;AAED,SAAS,oBAAoB,CAAC,aAAqB,EAAE,UAAiC;IAUpF,SAAS,CAAC;QACR,IAAI,UAAU,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,sBAAsB,CAAC,EAAE;YAC3G,IAAM,IAAI,GAAG,UAAU,CAAC,OAA8B,CAAC;YACvD,IAAM,QAAQ,GAAG;gBACf,IAAI,EAAE,aAAa;gBACnB,OAAO,EAAE,eAAe;aACzB,CAAC;YAEF,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YACxB,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,sBAAsB,EAAE;gBAClD,KAAK,EAAE,QAAQ;gBACf,QAAQ,EAAE,KAAK;aAChB,CAAC,CAAC;SACJ;QACD,yEAAyE;QACzE,2DAA2D;QAC3D,uDAAuD;IACzD,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;AAC3B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { MutableRefObject, useEffect, useRef } from 'react';\nimport { useTelemetry } from '../use-telemetry';\nimport { PACKAGE_VERSION } from '../../environment';\n\nexport const COMPONENT_METADATA_KEY = '__awsuiMetadata__';\n\nexport interface InternalBaseComponentProps {\n  __internalRootRef?: MutableRefObject<any> | null;\n}\n\n/**\n * This hook is used for components which are exported to customers. The returned __internalRootRef needs to be\n * attached to the (internal) component's root DOM node. The hook takes care of attaching the metadata to this\n * root DOM node and emits the telemetry for this component.\n */\nexport default function useBaseComponent<T = any>(componentName: string) {\n  const elementRef = useRef<T>(null);\n  useTelemetry(componentName);\n  useComponentMetadata(componentName, elementRef);\n\n  return {\n    __internalRootRef: elementRef,\n  };\n}\n\nfunction useComponentMetadata(componentName: string, elementRef: MutableRefObject<any>) {\n  interface AwsUiMetadata {\n    name: string;\n    version: string;\n  }\n\n  interface HTMLMetadataElement extends HTMLElement {\n    [COMPONENT_METADATA_KEY]: AwsUiMetadata;\n  }\n\n  useEffect(() => {\n    if (elementRef.current && !Object.prototype.hasOwnProperty.call(elementRef.current, COMPONENT_METADATA_KEY)) {\n      const node = elementRef.current as HTMLMetadataElement;\n      const metadata = {\n        name: componentName,\n        version: PACKAGE_VERSION,\n      };\n\n      Object.freeze(metadata);\n      Object.defineProperty(node, COMPONENT_METADATA_KEY, {\n        value: metadata,\n        writable: false,\n      });\n    }\n    // Some component refs change dynamically. E.g. The Modal component where\n    // the content gets rendered conditionally inside a Portal.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [elementRef.current]);\n}\n"]}

package/internal/hooks/use-controllable/index.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+interface PropertyDescription {
+    componentName: string;
+    controlledProp: string;
+    changeHandler: string;
+}
+/**
+ * This hook allows you to make a component that can be used both in controlled mode and uncontrolled mode.
+ * Pass in your component's props, and then implement your component as if it was only controlled.
+ * When calling onChange callbacks (or the equivalent for your property), you need to call both the callback returned by this function
+ * as well as the callback provided in your component's props.
+ *
+ * A component determines its mode (either controlled or uncontrolled) on the first render and keeps it for its lifetime. The mode cannot
+ * be switched later.
+ *
+ *
+ * Example usage:
+ * ```jsx
+ * const [checked, setChecked] = useControllable(
+ *     props,
+ *     props.defaultEnabled ?? false,
+ *     {
+ *        componentName: 'MyCheckboxComponent',
+ *        controlledProp: 'enabled',
+ *        changeHandler: 'onCheckedStatusChange'
+ *     }
+ * )
+ *
+ * return
+ *  <input
+ *   type="checkbox"
+ *   checked={checked}
+ *   onChange={event => {
+ *    setChecked(event.target.checked);
+ *    fireNonCancelableEvent(props.onCheckedStatusChange, { checked: event.target.checked })
+ *   }} />
+ * ```
+ *
+ * @param controlledValue value for the controlled mode
+ * @param handler update handler for controlled mode
+ * @param defaultValue initial value for uncontrolled mode
+ * @param description property metadata
+ */
+export declare function useControllable<ValueType>(controlledValue: ValueType, handler: ((...args: any[]) => unknown) | undefined, defaultValue: ValueType, { componentName, changeHandler, controlledProp }: PropertyDescription): readonly [ValueType, (newValue: React.SetStateAction<ValueType>) => void];
+export {};
+//# sourceMappingURL=index.d.ts.map

package/internal/hooks/use-controllable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/use-controllable/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,mBAAmB;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,eAAe,CAAC,SAAS,EACvC,eAAe,EAAE,SAAS,EAC1B,OAAO,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,GAAG,SAAS,EAClD,YAAY,EAAE,SAAS,EACvB,EAAE,aAAa,EAAE,aAAa,EAAE,cAAc,EAAE,EAAE,mBAAmB,mCA2CxD,MAAM,cAAc,CAAC,SAAS,CAAC,WAY7C"}