@oracle/oraclejet-preact 14.0.0

package/es/hooks/PRIVATE_useTabbableModeSet.js

@@ -0,0 +1,83 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+import { useState, useCallback } from 'preact/hooks';
+import { isKeyDefined } from '../utils/UNSAFE_keys.js';
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+/**
+ * Hook for handling Tabbable mode set provider components.
+ *
+ * @param contains - callback to check  whether an element is in set
+ * @param keyExtractor - function to extract the key based on provided element
+ * @param currentKey - current key navigation "cursor" is on
+ * @param onTabbableModeDisable - callback to parent when set is disabled
+ * @param onTabbableModeEnable - callback to parent when set is enabled
+ * @returns isCurrentTabbableKey - callback for parent to check if key is in interactive mode
+ * @returns tabbableSetProps - event handlers mode relies on
+ */
+function useTabbableModeSet(contains, keyExtractor, currentKey, onTabbableModeDisable, onTabbableModeEnable) {
+    // Track which row is in actionable in state
+    const [currentTabbableKey, setCurrentTabbableKey] = useState();
+    const disableTabbableMode = useCallback((target, isKeyboardEvent = false) => {
+        setCurrentTabbableKey(undefined);
+        onTabbableModeDisable && onTabbableModeDisable(target, isKeyboardEvent);
+    }, [onTabbableModeDisable, setCurrentTabbableKey]);
+    const enableTabbableMode = useCallback((key) => {
+        setCurrentTabbableKey(key);
+        onTabbableModeEnable && onTabbableModeEnable(key);
+    }, [onTabbableModeEnable, setCurrentTabbableKey]);
+    const isCurrentTabbableKey = useCallback((key) => {
+        return key === currentTabbableKey;
+    }, [currentTabbableKey]);
+    const onFocus = (event) => {
+        const key = keyExtractor(event.target);
+        if (isKeyDefined(key) && !isCurrentTabbableKey(key)) {
+            enableTabbableMode(key);
+        }
+    };
+    const onBlur = (event) => {
+        if (!event.relatedTarget || !contains(event.relatedTarget)) {
+            disableTabbableMode(event.relatedTarget);
+        }
+    };
+    const onPointerDown = (event) => {
+        const key = keyExtractor(event.target);
+        if (currentTabbableKey !== undefined && !isCurrentTabbableKey(key)) {
+            disableTabbableMode(event.target);
+        }
+    };
+    const onKeyUp = useCallback((event) => {
+        if (event.key === 'F2') {
+            currentKey !== undefined && !isCurrentTabbableKey(currentKey)
+                ? enableTabbableMode(currentKey)
+                : disableTabbableMode(event.target, true);
+        }
+        if (event.key === 'Esc' || event.key === 'Escape') {
+            disableTabbableMode(event.target, true);
+        }
+    }, [currentKey, disableTabbableMode, enableTabbableMode, isCurrentTabbableKey]);
+    const tabbableSetProps = {
+        onFocus,
+        onBlur,
+        onKeyUp,
+        onPointerDown
+    };
+    return [isCurrentTabbableKey, tabbableSetProps];
+}
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+
+export { useTabbableModeSet };
+/*  */
+//# sourceMappingURL=PRIVATE_useTabbableModeSet.js.map

package/es/hooks/PRIVATE_useTabbableModeSet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PRIVATE_useTabbableModeSet.js","sources":["../../../src/hooks/PRIVATE_useTabbableModeSet/useTabbableModeSet.ts","../../../src/hooks/PRIVATE_useTabbableModeSet/index.ts"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { useCallback, useState } from 'preact/hooks';\nimport { isKeyDefined } from '../../utils/UNSAFE_keys';\n\n/**\n * Hook for handling Tabbable mode set provider components.\n *\n * @param contains - callback to check  whether an element is in set\n * @param keyExtractor - function to extract the key based on provided element\n * @param currentKey - current key navigation \"cursor\" is on\n * @param onTabbableModeDisable - callback to parent when set is disabled\n * @param onTabbableModeEnable - callback to parent when set is enabled\n * @returns isCurrentTabbableKey - callback for parent to check if key is in interactive mode\n * @returns tabbableSetProps - event handlers mode relies on\n */\nexport function useTabbableModeSet<K>(\n  contains: (elem: Element | null) => boolean,\n  keyExtractor: (element: HTMLElement) => K | null,\n  currentKey?: K,\n  onTabbableModeDisable?: (target: EventTarget | null, isKeyboardEvent: boolean) => void,\n  onTabbableModeEnable?: (key: K) => void\n): [\n  (key?: K) => boolean,\n  {\n    onFocus: (event: FocusEvent) => void;\n    onBlur: (event: FocusEvent) => void;\n    onKeyUp: (event: KeyboardEvent) => void;\n    onPointerDown: (event: MouseEvent) => void;\n  }\n] {\n  // Track which row is in actionable in state\n  const [currentTabbableKey, setCurrentTabbableKey] = useState<K>();\n  const disableTabbableMode = useCallback(\n    (target: EventTarget | null, isKeyboardEvent = false) => {\n      setCurrentTabbableKey(undefined);\n      onTabbableModeDisable && onTabbableModeDisable(target, isKeyboardEvent);\n    },\n    [onTabbableModeDisable, setCurrentTabbableKey]\n  );\n  const enableTabbableMode = useCallback(\n    (key: K) => {\n      setCurrentTabbableKey(key);\n      onTabbableModeEnable && onTabbableModeEnable(key);\n    },\n    [onTabbableModeEnable, setCurrentTabbableKey]\n  );\n  const isCurrentTabbableKey = useCallback(\n    (key?: K) => {\n      return key === currentTabbableKey;\n    },\n    [currentTabbableKey]\n  );\n\n  const onFocus = (event: FocusEvent) => {\n    const key = keyExtractor(event.target as HTMLElement) as K;\n    if (isKeyDefined(key) && !isCurrentTabbableKey(key)) {\n      enableTabbableMode(key);\n    }\n  };\n\n  const onBlur = (event: FocusEvent) => {\n    if (!event.relatedTarget || !contains(event.relatedTarget as Element)) {\n      disableTabbableMode(event.relatedTarget);\n    }\n  };\n\n  const onPointerDown = (event: MouseEvent) => {\n    const key = keyExtractor(event.target as HTMLElement) as K;\n    if (currentTabbableKey !== undefined && !isCurrentTabbableKey(key)) {\n      disableTabbableMode(event.target);\n    }\n  };\n\n  const onKeyUp = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'F2') {\n        currentKey !== undefined && !isCurrentTabbableKey(currentKey)\n          ? enableTabbableMode(currentKey)\n          : disableTabbableMode(event.target, true);\n      }\n      if (event.key === 'Esc' || event.key === 'Escape') {\n        disableTabbableMode(event.target, true);\n      }\n    },\n    [currentKey, disableTabbableMode, enableTabbableMode, isCurrentTabbableKey]\n  );\n\n  const tabbableSetProps = {\n    onFocus,\n    onBlur,\n    onKeyUp,\n    onPointerDown\n  };\n\n  return [isCurrentTabbableKey, tabbableSetProps];\n}\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nexport { useTabbableModeSet } from './useTabbableModeSet';\n"],"names":[],"mappings":"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"}

package/es/hooks/UNSAFE_useActionable.js

@@ -0,0 +1,42 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+import { mergeProps } from '../utils/UNSAFE_mergeProps.js';
+import { useHover } from './UNSAFE_useHover.js';
+import { useActive } from './UNSAFE_useActive.js';
+import { useFocus } from './UNSAFE_useFocus.js';
+import { usePress } from './UNSAFE_usePress.js';
+import './UNSAFE_useToggle.js';
+import 'preact/hooks';
+
+const DefaultActionableOptions = {
+    isDisabled: false,
+    isRepeat: false
+};
+/**
+ * A hook that can add actionable support to a target element, turning it into a
+ * clickable button, div, card, etc.
+ * If isHover, isFocus, and isActive are only used for changing visual rendering, it would be
+ * faster to not use this hook, and instead use :hover, :focus-visible, :active and usePress.
+ * @param onActionHandler
+ * @returns
+ */
+function useActionable(onActionHandler, settings = DefaultActionableOptions) {
+    const mergedSettings = Object.assign(Object.assign({}, DefaultActionableOptions), settings);
+    const { pressProps } = usePress(onActionHandler, mergedSettings);
+    const { hoverProps, isHover } = useHover({ isDisabled: mergedSettings.isDisabled });
+    const { focusProps, isFocus } = useFocus({ isDisabled: mergedSettings.isDisabled });
+    const { activeProps, isActive } = useActive({ isDisabled: mergedSettings.isDisabled });
+    const actionableProps = mergeProps(pressProps, hoverProps, activeProps, focusProps);
+    return { actionableProps, isActive, isHover, isFocus };
+}
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+
+export { useActionable };
+/*  */
+//# sourceMappingURL=UNSAFE_useActionable.js.map

package/es/hooks/UNSAFE_useActionable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_useActionable.js","sources":["../../../src/hooks/UNSAFE_useActionable/useActionable.ts","../../../src/hooks/UNSAFE_useActionable/index.ts"],"sourcesContent":["import { mergeProps } from '../../utils/UNSAFE_mergeProps';\nimport { useHover } from '../UNSAFE_useHover';\nimport { useActive } from '../UNSAFE_useActive';\nimport { useFocus } from '../UNSAFE_useFocus';\nimport { usePress } from '../UNSAFE_usePress';\n\nexport type ActionableOptions = {\n  isDisabled?: boolean;\n  isRepeat?: boolean;\n};\n\nconst DefaultActionableOptions = {\n  isDisabled: false,\n  isRepeat: false\n};\n\n/**\n * A hook that can add actionable support to a target element, turning it into a\n * clickable button, div, card, etc.\n * If isHover, isFocus, and isActive are only used for changing visual rendering, it would be\n * faster to not use this hook, and instead use :hover, :focus-visible, :active and usePress.\n * @param onActionHandler\n * @returns\n */\nexport function useActionable(\n  onActionHandler: (event: Event) => void,\n  settings: ActionableOptions = DefaultActionableOptions\n): { isActive: boolean; isHover: boolean; isFocus: boolean; actionableProps: Record<string, any> } {\n  const mergedSettings = { ...DefaultActionableOptions, ...settings };\n  const { pressProps } = usePress(onActionHandler, mergedSettings);\n  const { hoverProps, isHover } = useHover({ isDisabled: mergedSettings.isDisabled });\n  const { focusProps, isFocus } = useFocus({ isDisabled: mergedSettings.isDisabled });\n  const { activeProps, isActive } = useActive({ isDisabled: mergedSettings.isDisabled });\n  const actionableProps = mergeProps(pressProps, hoverProps, activeProps, focusProps);\n  return { actionableProps, isActive, isHover, isFocus };\n}\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nexport * from './useActionable';\n"],"names":[],"mappings":";;;;;;;;;AAWA,MAAM,wBAAwB,GAAG;AAC/B,IAAA,UAAU,EAAE,KAAK;AACjB,IAAA,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF;;;;;;;AAOG;SACa,aAAa,CAC3B,eAAuC,EACvC,WAA8B,wBAAwB,EAAA;AAEtD,IAAA,MAAM,cAAc,GAAQ,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,wBAAwB,CAAK,EAAA,QAAQ,CAAE,CAAC;IACpE,MAAM,EAAE,UAAU,EAAE,GAAG,QAAQ,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;AACjE,IAAA,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,QAAQ,CAAC,EAAE,UAAU,EAAE,cAAc,CAAC,UAAU,EAAE,CAAC,CAAC;AACpF,IAAA,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,QAAQ,CAAC,EAAE,UAAU,EAAE,cAAc,CAAC,UAAU,EAAE,CAAC,CAAC;AACpF,IAAA,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC,EAAE,UAAU,EAAE,cAAc,CAAC,UAAU,EAAE,CAAC,CAAC;AACvF,IAAA,MAAM,eAAe,GAAG,UAAU,CAAC,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC;IACpF,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;AACzD;;ACnCA;;;;;;AAMG;;;;;;;"}

package/es/hooks/UNSAFE_useActive.js

@@ -0,0 +1,81 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+import { useToggle } from './UNSAFE_useToggle.js';
+import { useRef, useCallback } from 'preact/hooks';
+
+/**
+ * Indicates if primary mouse button is down
+ * @param e
+ * @returns
+ */
+const isPrimaryMouseButtonDown = (e) => {
+    const flags = e.buttons !== undefined ? e.buttons : e.which;
+    const primaryMouseButtonDown = (flags & 1) === 1;
+    if (primaryMouseButtonDown) {
+        return true;
+    }
+    return false;
+};
+/**
+ * Returns properties to manage active state indication
+ * @returns
+ */
+function useActive(settings = { isDisabled: false }) {
+    const { bool, setTrue, setFalse } = useToggle(false);
+    const wasActive = useRef(false);
+    const mouseDownTarget = useCallback((e) => {
+        if (isPrimaryMouseButtonDown(e)) {
+            setTrue();
+        }
+    }, [setTrue]);
+    const leftTarget = useCallback((e) => {
+        if (isPrimaryMouseButtonDown(e)) {
+            wasActive.current = true;
+        }
+        setFalse();
+    }, [setFalse]);
+    const enteredTarget = useCallback((e) => {
+        if (wasActive.current) {
+            if (isPrimaryMouseButtonDown(e)) {
+                setTrue();
+            }
+            wasActive.current = false;
+        }
+    }, [setTrue]);
+    const onKeyDown = useCallback((event) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+            setTrue();
+        }
+    }, [setTrue]);
+    const onKeyUp = useCallback(() => {
+        setFalse();
+    }, [setFalse]);
+    const activeProps = settings.isDisabled
+        ? {}
+        : {
+            onMouseDown: mouseDownTarget,
+            onMouseOut: leftTarget,
+            onMouseEnter: enteredTarget,
+            onMouseUp: setFalse,
+            onTouchStart: setTrue,
+            onTouchEnd: setFalse,
+            onTouchCancel: setFalse,
+            onKeyDown,
+            onKeyUp
+        };
+    return {
+        isActive: settings.isDisabled ? false : bool,
+        activeProps: activeProps
+    };
+}
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+
+export { useActive };
+/*  */
+//# sourceMappingURL=UNSAFE_useActive.js.map

package/es/hooks/UNSAFE_useActive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_useActive.js","sources":["../../../src/hooks/UNSAFE_useActive/useActive.ts","../../../src/hooks/UNSAFE_useActive/index.ts"],"sourcesContent":["import { useToggle } from '../UNSAFE_useToggle';\nimport { useRef, useCallback } from 'preact/hooks';\n\nexport type ActiveOptions = {\n  isDisabled?: boolean;\n};\n\n/**\n * Indicates if primary mouse button is down\n * @param e\n * @returns\n */\nconst isPrimaryMouseButtonDown = (e: MouseEvent) => {\n  const flags = e.buttons !== undefined ? e.buttons : e.which;\n  const primaryMouseButtonDown = (flags & 1) === 1;\n  if (primaryMouseButtonDown) {\n    return true;\n  }\n  return false;\n};\n\n/**\n * Returns properties to manage active state indication\n * @returns\n */\nexport function useActive(settings: ActiveOptions = { isDisabled: false }): {\n  isActive: boolean;\n  activeProps: Record<string, any>;\n} {\n  const { bool, setTrue, setFalse } = useToggle(false);\n  const wasActive = useRef(false);\n\n  const mouseDownTarget = useCallback(\n    (e: MouseEvent) => {\n      if (isPrimaryMouseButtonDown(e)) {\n        setTrue();\n      }\n    },\n    [setTrue]\n  );\n\n  const leftTarget = useCallback(\n    (e: MouseEvent) => {\n      if (isPrimaryMouseButtonDown(e)) {\n        wasActive.current = true;\n      }\n      setFalse();\n    },\n    [setFalse]\n  );\n\n  const enteredTarget = useCallback(\n    (e: MouseEvent) => {\n      if (wasActive.current) {\n        if (isPrimaryMouseButtonDown(e)) {\n          setTrue();\n        }\n        wasActive.current = false;\n      }\n    },\n    [setTrue]\n  );\n\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === ' ' || event.key === 'Enter') {\n        setTrue();\n      }\n    },\n    [setTrue]\n  );\n\n  const onKeyUp = useCallback(() => {\n    setFalse();\n  }, [setFalse]);\n\n  const activeProps = settings.isDisabled\n    ? {}\n    : {\n        onMouseDown: mouseDownTarget,\n        onMouseOut: leftTarget,\n        onMouseEnter: enteredTarget,\n        onMouseUp: setFalse,\n        onTouchStart: setTrue,\n        onTouchEnd: setFalse,\n        onTouchCancel: setFalse,\n        onKeyDown,\n        onKeyUp\n      };\n\n  return {\n    isActive: settings.isDisabled ? false : bool,\n    activeProps: activeProps\n  };\n}\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nexport * from './useActive';\n"],"names":[],"mappings":";;;;AAOA;;;;AAIG;AACH,MAAM,wBAAwB,GAAG,CAAC,CAAa,KAAI;AACjD,IAAA,MAAM,KAAK,GAAG,CAAC,CAAC,OAAO,KAAK,SAAS,GAAG,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC;IAC5D,MAAM,sBAAsB,GAAG,CAAC,KAAK,GAAG,CAAC,MAAM,CAAC,CAAC;AACjD,IAAA,IAAI,sBAAsB,EAAE;AAC1B,QAAA,OAAO,IAAI,CAAC;AACb,KAAA;AACD,IAAA,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF;;;AAGG;AACG,SAAU,SAAS,CAAC,QAAA,GAA0B,EAAE,UAAU,EAAE,KAAK,EAAE,EAAA;AAIvE,IAAA,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;AACrD,IAAA,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AAEhC,IAAA,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,CAAa,KAAI;AAChB,QAAA,IAAI,wBAAwB,CAAC,CAAC,CAAC,EAAE;AAC/B,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACH,KAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;AAEF,IAAA,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,CAAa,KAAI;AAChB,QAAA,IAAI,wBAAwB,CAAC,CAAC,CAAC,EAAE;AAC/B,YAAA,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;AAC1B,SAAA;AACD,QAAA,QAAQ,EAAE,CAAC;AACb,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,CAAa,KAAI;QAChB,IAAI,SAAS,CAAC,OAAO,EAAE;AACrB,YAAA,IAAI,wBAAwB,CAAC,CAAC,CAAC,EAAE;AAC/B,gBAAA,OAAO,EAAE,CAAC;AACX,aAAA;AACD,YAAA,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;AAC3B,SAAA;AACH,KAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;AAEF,IAAA,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,KAAoB,KAAI;QACvB,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;AAC9C,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACH,KAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;AAEF,IAAA,MAAM,OAAO,GAAG,WAAW,CAAC,MAAK;AAC/B,QAAA,QAAQ,EAAE,CAAC;AACb,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AAEf,IAAA,MAAM,WAAW,GAAG,QAAQ,CAAC,UAAU;AACrC,UAAE,EAAE;AACJ,UAAE;AACE,YAAA,WAAW,EAAE,eAAe;AAC5B,YAAA,UAAU,EAAE,UAAU;AACtB,YAAA,YAAY,EAAE,aAAa;AAC3B,YAAA,SAAS,EAAE,QAAQ;AACnB,YAAA,YAAY,EAAE,OAAO;AACrB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,aAAa,EAAE,QAAQ;YACvB,SAAS;YACT,OAAO;SACR,CAAC;IAEN,OAAO;QACL,QAAQ,EAAE,QAAQ,CAAC,UAAU,GAAG,KAAK,GAAG,IAAI;AAC5C,QAAA,WAAW,EAAE,WAAW;KACzB,CAAC;AACJ;;AC9FA;;;;;;AAMG;;;;;;;"}

package/es/hooks/UNSAFE_useAnimation.js

@@ -0,0 +1,246 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+import { useRef, useEffect, useCallback } from 'preact/hooks';
+import { _ as __rest } from '../tslib.es6-8b94ba02.js';
+
+/**
+ * Converts shorthand translate props into transform string representation.
+ *
+ * @param translateX
+ * @param translateY
+ * @param translateZ
+ * @returns Longhand transform string representation.
+ */
+function convertTranslateShortcuts(translateX, translateY, translateZ) {
+    return `${translateX ? ` translateX(${translateX})` : ''}${translateY ? ` translateY(${translateY})` : ''}${translateZ ? ` translateZ(${translateZ})` : ''}`;
+}
+/**
+ * Converts shorthand rotate props into transform string representation.
+ *
+ * @param rotateX
+ * @param rotateY
+ * @param rotateZ
+ * @returns Longhand transform string representation.
+ */
+function convertRotateShortcuts(rotateX, rotateY, rotateZ) {
+    return `${rotateX ? ` rotateX(${rotateX})` : ''}${rotateY ? ` rotateY(${rotateY})` : ''}${rotateZ ? ` rotateZ(${rotateZ})` : ''}`;
+}
+/**
+ * Converts shorthand scale props into transform string representation.
+ *
+ * @param scaleX
+ * @param scaleY
+ * @param scaleZ
+ * @returns Longhand transform string representation.
+ */
+function convertScaleShortcuts(scaleX, scaleY, scaleZ) {
+    return `${scaleX || scaleX === 0 ? ` scaleX(${scaleX})` : ''}${scaleY || scaleY === 0 ? ` scaleY(${scaleY})` : ''}${scaleZ || scaleZ === 0 ? ` scaleZ(${scaleZ})` : ''}`;
+}
+/**
+ * Converts shorthand skew props into transform string representation.
+ *
+ * @param skewX
+ * @param skewY
+ * @returns Longhand transform string representation.
+ */
+function convertSkewShortcuts(skewX, skewY) {
+    return `${skewX ? ` skewX(${skewX})` : ''}${skewY ? ` skewY(${skewY})` : ''}`;
+}
+/**
+ * Converts animation CSS properties into Regular camel cased CSS properties.
+ *
+ * @param useAnimationCssProperties This include transform shorthand props.
+ * @returns Regular camel cased CSS properties.
+ */
+function convertUseAnimationCssPropertiesToRegularCSS(useAnimationCssProperties) {
+    if (!useAnimationCssProperties) {
+        return {};
+    }
+    const { translateX, translateY, translateZ, rotateX, rotateY, rotateZ, scaleX, scaleY, scaleZ, skewX, skewY } = useAnimationCssProperties, otherCssProperties = __rest(useAnimationCssProperties, ["translateX", "translateY", "translateZ", "rotateX", "rotateY", "rotateZ", "scaleX", "scaleY", "scaleZ", "skewX", "skewY"]);
+    const initialTransformValue = useAnimationCssProperties['transform'] || '';
+    // Now we just add values pased in shortcuts to transform property, do we want to replace it instead?
+    const finalTransformValue = `${initialTransformValue}${convertTranslateShortcuts(translateX, translateY, translateZ)}${convertRotateShortcuts(rotateX, rotateY, rotateZ)}${convertScaleShortcuts(scaleX, scaleY, scaleZ)}${convertSkewShortcuts(skewX, skewY)}`;
+    return Object.assign(Object.assign({}, otherCssProperties), (finalTransformValue && { transform: finalTransformValue }));
+}
+/**
+ * Converts animation CSS properties into WAAPI keyframe properties.
+ * Since keyframes have a difference between offset and cssOffset this collision is avoided here.
+ *
+ * @param useAnimationCssProperties This include transform shorthand props.
+ * @returns WAAPI keyframe
+ */
+function convertUseAnimationCssPropertiesToWAAPIKeyframe(useAnimationCssProperties) {
+    if (!useAnimationCssProperties) {
+        return {};
+    }
+    const _a = convertUseAnimationCssPropertiesToRegularCSS(useAnimationCssProperties), { offset } = _a, otherCssProperties = __rest(_a, ["offset"]);
+    return Object.assign(Object.assign({}, otherCssProperties), (offset && { cssOffset: offset }));
+}
+/**
+ * Stops an animation.
+ *
+ * @param animation Animation that is going to be stopped.
+ * @returns
+ */
+function stopAnimation(animation, node) {
+    // TO DO: rollup-plugin-typescript seems to have an outdated Animation typing. That produces warnings while bulding.
+    // Update picked type to get rid of this casting.
+    // We have to check if the element is visible to commit styles
+    isVisible(node) && animation.commitStyles();
+    animation.cancel();
+}
+/**
+ * Check if an element is visible. Similar to jQuery :visible selector.
+ *
+ * @param element HTML element that is going to be checked for its visibility.
+ * @returns
+ */
+function isVisible(element) {
+    return !!((element === null || element === void 0 ? void 0 : element.offsetWidth) || (element === null || element === void 0 ? void 0 : element.offsetHeight) || (element === null || element === void 0 ? void 0 : element.getClientRects().length));
+}
+
+/**
+ * Hook to animate single components.
+ * It allows n number of animation states.
+ * @param animationState
+ * @param animationConfig
+ * @returns
+ */
+function useAnimation(animationState, { animationStates, isAnimatedOnMount = false, onAnimationEnd = () => { } }) {
+    const didMountRef = useRef(false);
+    const nodeRef = useRef(null);
+    const currentAnimationState = useRef();
+    const currentAnimation = useRef();
+    // We don't allow changing animationStates. Ref to keep "first run" animation states.
+    const animationStatesRef = useRef(animationStates);
+    useEffect(() => {
+        var _a;
+        // UseEffect just have to be ran when there is a change on animationState
+        if (currentAnimationState.current === animationState)
+            return;
+        // It makes sense to keep track of animation states even if there's no animated element to animate.
+        const previousAnimationState = currentAnimationState.current;
+        currentAnimationState.current = animationState;
+        //Stop an animation here only makes sense if the previous one is running
+        if (((_a = currentAnimation.current) === null || _a === void 0 ? void 0 : _a.playState) === 'running') {
+            stopAnimation(currentAnimation.current, nodeRef.current);
+        }
+        const animatedElement = nodeRef.current;
+        if (!animatedElement) {
+            return;
+        }
+        if (!didMountRef.current) {
+            didMountRef.current = true;
+            if (!isAnimatedOnMount) {
+                return;
+            }
+        }
+        const animationConfig = getConfig(animationStatesRef.current, animatedElement, animationState, previousAnimationState);
+        if (!animationConfig) {
+            return;
+        }
+        currentAnimation.current = startAnimation(animationConfig, animatedElement, animationState, onAnimationEnd);
+    }, [animationState, isAnimatedOnMount, onAnimationEnd]);
+    /**
+     * Used to cancel current animation. When animation is canceled node style goes back to beginning style of canceled animation.
+     * @returns
+     */
+    const cancelCurrentAnimation = useCallback(() => {
+        const animation = currentAnimation.current;
+        if ((animation === null || animation === void 0 ? void 0 : animation.playState) === 'running') {
+            animation.cancel();
+        }
+    }, []);
+    /**
+     * Callback ref use to set nodeRef.
+     *
+     * @param node Actual element user set.
+     * @returns
+     */
+    const callbackRef = useCallback((node) => {
+        var _a;
+        if (node != nodeRef.current) {
+            //If for any reason element is unmounted we have to cancel animation(if there is one) and
+            //set currentAnimation as undefined so we don't keep running this animation
+            if (nodeRef.current) {
+                (_a = currentAnimation.current) === null || _a === void 0 ? void 0 : _a.cancel();
+                currentAnimation.current = undefined;
+            }
+            nodeRef.current = node;
+        }
+    }, []);
+    return { nodeRef: callbackRef, controller: { cancel: cancelCurrentAnimation } };
+}
+/**
+ * Gets animation configuration.
+ *
+ * @param animationStates Set of animation configurations provided by the user.
+ * @param animatedElement Element that is going to be styled.
+ * @param animationState Current animation state.
+ * @param previousAnimationState Previous animation state.
+ * @returns AnimationConfig.
+ */
+function getConfig(animationStates, animatedElement, animationState, previousAnimationState) {
+    const currentAnimationStateConfig = animationStates[`${previousAnimationState} => ${animationState}`] ||
+        animationStates[animationState];
+    const animationConfig = typeof currentAnimationStateConfig === 'function'
+        ? currentAnimationStateConfig(animatedElement)
+        : currentAnimationStateConfig;
+    return animationConfig && Object.keys(animationConfig).length > 0 ? animationConfig : null;
+}
+/**
+ * Starts an animation.
+ *
+ * @param animationConfig Animation configuration used by the animation.
+ * @param animatedElement Element that is going to be styled.
+ * @param animationState Current animation state.
+ * @param onAnimationEnd Callback called once the animation is completed.
+ * @returns Animation.
+ */
+function startAnimation(animationConfig, animatedElement, animationState, onAnimationEnd) {
+    const { delay, duration, easing } = animationConfig.options || {};
+    //Now, if user does not pass a value we override it by hand. We will use theming tools in future.
+    const animationOptions = {
+        delay: delay || 0,
+        duration: duration || 400,
+        easing: easing
+            ? typeof easing === 'string'
+                ? easing
+                : `cubic-bezier(${easing[0]}, ${easing[1]}, ${easing[2]}, ${easing[3]})`
+            : 'ease'
+    };
+    // WAAPI animation method. https://developer.mozilla.org/en-US/docs/Web/API/Element/animate
+    // TO DO: Check for required browser compatibility in case we need pollyfill.
+    // https://github.com/web-animations/web-animations-js/blob/dev/docs/support.md#browser-support
+    const startedAnimation = animatedElement.animate([
+        convertUseAnimationCssPropertiesToWAAPIKeyframe(animationConfig.from),
+        convertUseAnimationCssPropertiesToWAAPIKeyframe(animationConfig.to)
+    ], Object.assign({}, animationOptions));
+    startedAnimation.onfinish = () => {
+        //We commit styles to have an only source of truth.
+        setEndStyle(animatedElement, true, animationConfig);
+        // On animationEnd is only called when animation actually finished. If an animation is interruped by other one
+        // or animated element is not longer rendered onAnimationEnd will not be called. Do we want to have a callback for those cases?
+        onAnimationEnd === null || onAnimationEnd === void 0 ? void 0 : onAnimationEnd({ animationState });
+    };
+    return startedAnimation;
+}
+/**
+ * Sets element style.
+ *
+ * @param animatedElement Element that is going to be styled.
+ * @param toAndEndStyle Represents which data will be used to set style. If set to true it uses "to" and "endStyle".
+ * If set to false it uses just "endStyle".
+ * @param animationConfig Style that is going to be set.
+ */
+function setEndStyle(animatedElement, toAndEndStyle, animationConfig) {
+    const endStyle = toAndEndStyle
+        ? Object.assign(Object.assign({}, convertUseAnimationCssPropertiesToRegularCSS(animationConfig.to)), convertUseAnimationCssPropertiesToRegularCSS(animationConfig.end)) : convertUseAnimationCssPropertiesToRegularCSS(animationConfig.end);
+    for (const key in endStyle) {
+        //TO DO: Look for a better way to handle types.
+        animatedElement.style[key] = endStyle[key];
+    }
+}
+
+export { useAnimation };
+/*  */
+//# sourceMappingURL=UNSAFE_useAnimation.js.map

package/es/hooks/UNSAFE_useAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_useAnimation.js","sources":["../../../src/hooks/UNSAFE_useAnimation/animationUtils.ts","../../../src/hooks/UNSAFE_useAnimation/useAnimation.ts"],"sourcesContent":["import { StandardProperties } from 'csstype';\n\nexport type UseAnimationCssProperties = StandardProperties & TransformProperties;\n\n// This represents shorthand UseAnimationCssProperties props.\ntype TransformProperties = Partial<\n  Record<\n    | 'translateX'\n    | 'translateY'\n    | 'translateZ'\n    | 'rotateX'\n    | 'rotateY'\n    | 'rotateZ'\n    | 'skewX'\n    | 'skewY',\n    string\n  > &\n    Record<'scaleX' | 'scaleY' | 'scaleZ', string | number>\n>;\n\n/**\n * Converts shorthand translate props into transform string representation.\n *\n * @param translateX\n * @param translateY\n * @param translateZ\n * @returns Longhand transform string representation.\n */\nfunction convertTranslateShortcuts(\n  translateX: TransformProperties['translateX'],\n  translateY: TransformProperties['translateY'],\n  translateZ: TransformProperties['translateZ']\n) {\n  return `${translateX ? ` translateX(${translateX})` : ''}${\n    translateY ? ` translateY(${translateY})` : ''\n  }${translateZ ? ` translateZ(${translateZ})` : ''}`;\n}\n\n/**\n * Converts shorthand rotate props into transform string representation.\n *\n * @param rotateX\n * @param rotateY\n * @param rotateZ\n * @returns Longhand transform string representation.\n */\nfunction convertRotateShortcuts(\n  rotateX?: TransformProperties['rotateX'],\n  rotateY?: TransformProperties['rotateY'],\n  rotateZ?: TransformProperties['rotateZ']\n) {\n  return `${rotateX ? ` rotateX(${rotateX})` : ''}${rotateY ? ` rotateY(${rotateY})` : ''}${\n    rotateZ ? ` rotateZ(${rotateZ})` : ''\n  }`;\n}\n\n/**\n * Converts shorthand scale props into transform string representation.\n *\n * @param scaleX\n * @param scaleY\n * @param scaleZ\n * @returns Longhand transform string representation.\n */\nfunction convertScaleShortcuts(\n  scaleX: TransformProperties['scaleX'],\n  scaleY: TransformProperties['scaleY'],\n  scaleZ: TransformProperties['scaleZ']\n) {\n  return `${scaleX || scaleX === 0 ? ` scaleX(${scaleX})` : ''}${\n    scaleY || scaleY === 0 ? ` scaleY(${scaleY})` : ''\n  }${scaleZ || scaleZ === 0 ? ` scaleZ(${scaleZ})` : ''}`;\n}\n\n/**\n * Converts shorthand skew props into transform string representation.\n *\n * @param skewX\n * @param skewY\n * @returns Longhand transform string representation.\n */\nfunction convertSkewShortcuts(\n  skewX: TransformProperties['skewX'],\n  skewY: TransformProperties['skewY']\n) {\n  return `${skewX ? ` skewX(${skewX})` : ''}${skewY ? ` skewY(${skewY})` : ''}`;\n}\n\n/**\n * Converts animation CSS properties into Regular camel cased CSS properties.\n *\n * @param useAnimationCssProperties This include transform shorthand props.\n * @returns Regular camel cased CSS properties.\n */\nexport function convertUseAnimationCssPropertiesToRegularCSS(\n  useAnimationCssProperties?: UseAnimationCssProperties\n) {\n  if (!useAnimationCssProperties) {\n    return {};\n  }\n  const {\n    translateX,\n    translateY,\n    translateZ,\n    rotateX,\n    rotateY,\n    rotateZ,\n    scaleX,\n    scaleY,\n    scaleZ,\n    skewX,\n    skewY,\n    ...otherCssProperties\n  } = useAnimationCssProperties;\n  const initialTransformValue = useAnimationCssProperties['transform'] || '';\n  // Now we just add values pased in shortcuts to transform property, do we want to replace it instead?\n  const finalTransformValue = `${initialTransformValue}${convertTranslateShortcuts(\n    translateX,\n    translateY,\n    translateZ\n  )}${convertRotateShortcuts(rotateX, rotateY, rotateZ)}${convertScaleShortcuts(\n    scaleX,\n    scaleY,\n    scaleZ\n  )}${convertSkewShortcuts(skewX, skewY)}`;\n  return {\n    ...otherCssProperties,\n    ...(finalTransformValue && { transform: finalTransformValue })\n  };\n}\n\n/**\n * Converts animation CSS properties into WAAPI keyframe properties.\n * Since keyframes have a difference between offset and cssOffset this collision is avoided here.\n *\n * @param useAnimationCssProperties This include transform shorthand props.\n * @returns WAAPI keyframe\n */\nexport function convertUseAnimationCssPropertiesToWAAPIKeyframe(\n  useAnimationCssProperties?: UseAnimationCssProperties\n) {\n  if (!useAnimationCssProperties) {\n    return {};\n  }\n  const { offset, ...otherCssProperties } =\n    convertUseAnimationCssPropertiesToRegularCSS(useAnimationCssProperties);\n  return {\n    ...otherCssProperties,\n    ...(offset && { cssOffset: offset })\n  };\n}\n\n/**\n * Stops an animation.\n *\n * @param animation Animation that is going to be stopped.\n * @returns\n */\nexport function stopAnimation<E extends HTMLElement>(animation: Animation, node: E | null) {\n  // TO DO: rollup-plugin-typescript seems to have an outdated Animation typing. That produces warnings while bulding.\n  // Update picked type to get rid of this casting.\n  // We have to check if the element is visible to commit styles\n  isVisible(node) && (animation as any).commitStyles();\n  animation.cancel();\n}\n\n/**\n * Check if an element is visible. Similar to jQuery :visible selector.\n *\n * @param element HTML element that is going to be checked for its visibility.\n * @returns\n */\nfunction isVisible<E extends HTMLElement>(element: E | null): boolean {\n  return !!(element?.offsetWidth || element?.offsetHeight || element?.getClientRects().length);\n}\n","import { useRef, useEffect, useCallback } from 'preact/hooks';\nimport {\n  convertUseAnimationCssPropertiesToRegularCSS,\n  convertUseAnimationCssPropertiesToWAAPIKeyframe,\n  UseAnimationCssProperties,\n  stopAnimation\n} from './animationUtils';\n\nexport type UseAnimationConfig<V extends string, E extends HTMLElement> = {\n  animationStates: Partial<\n    Record<AnimationStateKey<V>, ((node: E) => AnimationConfig) | AnimationConfig>\n  >;\n  isAnimatedOnMount?: boolean;\n  onAnimationEnd?: ({ animationState }: { animationState: V }) => void;\n};\n\n// Used to filter simple states and ones that include previous state\ntype AnimationStateKey<PA extends string> = ExtractAnimationStates<PA | `${PA} => ${PA}`>;\n\n// Used to get previous and current states and do deeper typing\ntype ExtractAnimationStates<StateString extends string> =\n  StateString extends `${infer From} => ${infer To}`\n    ? KeyWithPreviousAndCurrentState<From, To>\n    : StateString;\n\n// Used to just allow keys with different previous and current states\ntype KeyWithPreviousAndCurrentState<PreviousState extends string, CurrentState extends string> = {\n  b: PreviousState;\n} extends { b: CurrentState }\n  ? never\n  : `${PreviousState} => ${CurrentState}`;\n\ntype AnimationConfig = {\n  from?: UseAnimationCssProperties;\n  to: UseAnimationCssProperties;\n  end?: UseAnimationCssProperties;\n  options?: AnimationOptions;\n};\n\ntype AnimationOptions = {\n  delay?: number;\n  duration?: number;\n  easing?:\n    | 'linear'\n    | 'ease'\n    | 'ease-in'\n    | 'ease-out'\n    | 'ease-in-out'\n    | [number, number, number, number];\n};\n\n// Used to exclude states that include => since this string is used to represent a transition from state to another.\ntype PermittedAnimationState<V extends string> = Exclude<V, `${string}=>${string}`>;\n\n/**\n * Hook to animate single components.\n * It allows n number of animation states.\n * @param animationState\n * @param animationConfig\n * @returns\n */\nexport function useAnimation<V extends string, E extends HTMLElement = HTMLElement>(\n  animationState: PermittedAnimationState<V>,\n  {\n    animationStates,\n    isAnimatedOnMount = false,\n    onAnimationEnd = () => {}\n  }: UseAnimationConfig<PermittedAnimationState<V>, E>\n) {\n  const didMountRef = useRef(false);\n  const nodeRef = useRef<E | null>(null);\n  const currentAnimationState = useRef<PermittedAnimationState<V>>();\n  const currentAnimation = useRef<Animation>();\n\n  // We don't allow changing animationStates. Ref to keep \"first run\" animation states.\n  const animationStatesRef =\n    useRef<UseAnimationConfig<PermittedAnimationState<V>, E>['animationStates']>(animationStates);\n\n  useEffect(() => {\n    // UseEffect just have to be ran when there is a change on animationState\n    if (currentAnimationState.current === animationState) return;\n\n    // It makes sense to keep track of animation states even if there's no animated element to animate.\n    const previousAnimationState = currentAnimationState.current;\n    currentAnimationState.current = animationState;\n\n    //Stop an animation here only makes sense if the previous one is running\n    if (currentAnimation.current?.playState === 'running') {\n      stopAnimation(currentAnimation.current, nodeRef.current);\n    }\n\n    const animatedElement = nodeRef.current;\n    if (!animatedElement) {\n      return;\n    }\n\n    if (!didMountRef.current) {\n      didMountRef.current = true;\n      if (!isAnimatedOnMount) {\n        return;\n      }\n    }\n\n    const animationConfig = getConfig(\n      animationStatesRef.current,\n      animatedElement,\n      animationState,\n      previousAnimationState\n    );\n\n    if (!animationConfig) {\n      return;\n    }\n\n    currentAnimation.current = startAnimation(\n      animationConfig,\n      animatedElement,\n      animationState,\n      onAnimationEnd\n    );\n  }, [animationState, isAnimatedOnMount, onAnimationEnd]);\n\n  /**\n   * Used to cancel current animation. When animation is canceled node style goes back to beginning style of canceled animation.\n   * @returns\n   */\n  const cancelCurrentAnimation = useCallback(() => {\n    const animation = currentAnimation.current;\n    if (animation?.playState === 'running') {\n      animation.cancel();\n    }\n  }, []);\n\n  /**\n   * Callback ref use to set nodeRef.\n   *\n   * @param node Actual element user set.\n   * @returns\n   */\n  const callbackRef = useCallback((node: E | null) => {\n    if (node != nodeRef.current) {\n      //If for any reason element is unmounted we have to cancel animation(if there is one) and\n      //set currentAnimation as undefined so we don't keep running this animation\n      if (nodeRef.current) {\n        currentAnimation.current?.cancel();\n        currentAnimation.current = undefined;\n      }\n      nodeRef.current = node;\n    }\n  }, []);\n\n  return { nodeRef: callbackRef, controller: { cancel: cancelCurrentAnimation } };\n}\n\n/**\n * Gets animation configuration.\n *\n * @param animationStates Set of animation configurations provided by the user.\n * @param animatedElement Element that is going to be styled.\n * @param animationState Current animation state.\n * @param previousAnimationState Previous animation state.\n * @returns AnimationConfig.\n */\nfunction getConfig<V extends string, E extends HTMLElement>(\n  animationStates: UseAnimationConfig<PermittedAnimationState<V>, E>['animationStates'],\n  animatedElement: E,\n  animationState: PermittedAnimationState<V>,\n  previousAnimationState?: PermittedAnimationState<V>\n) {\n  const currentAnimationStateConfig =\n    animationStates[\n      `${previousAnimationState} => ${animationState}` as keyof UseAnimationConfig<\n        PermittedAnimationState<V>,\n        E\n      >['animationStates']\n    ] ||\n    animationStates[\n      animationState as keyof UseAnimationConfig<PermittedAnimationState<V>, E>['animationStates']\n    ];\n\n  const animationConfig =\n    typeof currentAnimationStateConfig === 'function'\n      ? currentAnimationStateConfig(animatedElement)\n      : (currentAnimationStateConfig as AnimationConfig);\n\n  return animationConfig && Object.keys(animationConfig).length > 0 ? animationConfig : null;\n}\n\n/**\n * Starts an animation.\n *\n * @param animationConfig Animation configuration used by the animation.\n * @param animatedElement Element that is going to be styled.\n * @param animationState Current animation state.\n * @param onAnimationEnd Callback called once the animation is completed.\n * @returns Animation.\n */\nfunction startAnimation<V extends string, E extends HTMLElement>(\n  animationConfig: AnimationConfig,\n  animatedElement: E,\n  animationState: PermittedAnimationState<V>,\n  onAnimationEnd: UseAnimationConfig<PermittedAnimationState<V>, E>['onAnimationEnd']\n) {\n  const { delay, duration, easing } = animationConfig.options || {};\n\n  //Now, if user does not pass a value we override it by hand. We will use theming tools in future.\n  const animationOptions = {\n    delay: delay || 0,\n    duration: duration || 400,\n    easing: easing\n      ? typeof easing === 'string'\n        ? easing\n        : `cubic-bezier(${easing[0]}, ${easing[1]}, ${easing[2]}, ${easing[3]})`\n      : 'ease'\n  };\n\n  // WAAPI animation method. https://developer.mozilla.org/en-US/docs/Web/API/Element/animate\n  // TO DO: Check for required browser compatibility in case we need pollyfill.\n  // https://github.com/web-animations/web-animations-js/blob/dev/docs/support.md#browser-support\n  const startedAnimation = animatedElement.animate(\n    [\n      convertUseAnimationCssPropertiesToWAAPIKeyframe(animationConfig.from),\n      convertUseAnimationCssPropertiesToWAAPIKeyframe(animationConfig.to)\n    ],\n    { ...animationOptions }\n  );\n\n  startedAnimation.onfinish = () => {\n    //We commit styles to have an only source of truth.\n    setEndStyle(animatedElement, true, animationConfig);\n    // On animationEnd is only called when animation actually finished. If an animation is interruped by other one\n    // or animated element is not longer rendered onAnimationEnd will not be called. Do we want to have a callback for those cases?\n    onAnimationEnd?.({ animationState });\n  };\n\n  return startedAnimation;\n}\n\n/**\n * Sets element style.\n *\n * @param animatedElement Element that is going to be styled.\n * @param toAndEndStyle Represents which data will be used to set style. If set to true it uses \"to\" and \"endStyle\".\n * If set to false it uses just \"endStyle\".\n * @param animationConfig Style that is going to be set.\n */\nfunction setEndStyle<E extends HTMLElement>(\n  animatedElement: E,\n  toAndEndStyle: boolean,\n  animationConfig: AnimationConfig\n) {\n  const endStyle = toAndEndStyle\n    ? {\n        ...convertUseAnimationCssPropertiesToRegularCSS(animationConfig.to),\n        ...convertUseAnimationCssPropertiesToRegularCSS(animationConfig.end)\n      }\n    : convertUseAnimationCssPropertiesToRegularCSS(animationConfig.end);\n  for (const key in endStyle) {\n    //TO DO: Look for a better way to handle types.\n    (<any>animatedElement.style)[key] = endStyle[key as keyof typeof endStyle];\n  }\n}\n"],"names":[],"mappings":"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"}

package/es/hooks/UNSAFE_useBreakpointValues.js

@@ -0,0 +1,23 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+import { defaultBreakpoints, useBreakpoints } from './UNSAFE_useBreakpoints.js';
+import 'preact/hooks';
+
+/*
+ * Custom hook to allow the user to define custom values that are returned if a breakpoint is reached.
+ * The Responsive object is a set of one or more key/value pairs, with each breakpoint as a key.
+ *
+ * TODO: Fix breakpoint value Type:
+ *  The second arg allows arbitrary breakpoints to be specified, but the first arg only allows values for "sm", "md", "lg" and "xl"; if we allow custom breakpoints to be specified via the second arg, the first arg needs to allow values for those same custom breakpoints to be passed in.
+ */
+function useBreakpointValues(breakpointValues, breakpoints = defaultBreakpoints) {
+    const current = useBreakpoints(breakpoints);
+    const breakpoint = Object.entries(breakpointValues).reduce((p, c) => {
+        const key = c[0]; // first entry in breakpoint values is the key
+        return current[key] ? c : p; // if current breakpoint is true, return it, else stay with previous
+    });
+    return breakpoint[1]; // second entry in breakpoint values is the value
+}
+
+export { useBreakpointValues };
+/*  */
+//# sourceMappingURL=UNSAFE_useBreakpointValues.js.map

package/es/hooks/UNSAFE_useBreakpointValues.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_useBreakpointValues.js","sources":["../../../src/hooks/UNSAFE_useBreakpointValues/useBreakpointValues.ts"],"sourcesContent":["import { useBreakpoints, Breakpoints, defaultBreakpoints } from '../UNSAFE_useBreakpoints';\n\n/*\n * This allows a user to define key/value pairs that map to each breakpoint.\n * The user's custom value is returned when the specific breakpoint is reached.\n */\ntype DefaultBreakpoints = keyof typeof defaultBreakpoints;\ntype DefaultType<T> = Record<DefaultBreakpoints, T>;\ntype Responsive<V> = Partial<DefaultType<V>>;\n\n/*\n * Custom hook to allow the user to define custom values that are returned if a breakpoint is reached.\n * The Responsive object is a set of one or more key/value pairs, with each breakpoint as a key.\n *\n * TODO: Fix breakpoint value Type:\n *  The second arg allows arbitrary breakpoints to be specified, but the first arg only allows values for \"sm\", \"md\", \"lg\" and \"xl\"; if we allow custom breakpoints to be specified via the second arg, the first arg needs to allow values for those same custom breakpoints to be passed in.\n */\nexport function useBreakpointValues<V>(\n  breakpointValues: Responsive<V>,\n  breakpoints: Breakpoints = defaultBreakpoints\n) {\n  const current = useBreakpoints(breakpoints);\n\n  const breakpoint = Object.entries(breakpointValues).reduce((p, c) => {\n    const key = c[0]; // first entry in breakpoint values is the key\n    return current[key] ? c : p; // if current breakpoint is true, return it, else stay with previous\n  });\n\n  return breakpoint[1]; // second entry in breakpoint values is the value\n}\n"],"names":[],"mappings":";;;;AAUA;;;;;;AAMG;SACa,mBAAmB,CACjC,gBAA+B,EAC/B,cAA2B,kBAAkB,EAAA;AAE7C,IAAA,MAAM,OAAO,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;AAE5C,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;QAClE,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AACjB,QAAA,OAAO,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAC9B,KAAC,CAAC,CAAC;AAEH,IAAA,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC;AACvB;;;;;;;"}

package/es/hooks/UNSAFE_useBreakpoints.js

@@ -0,0 +1,48 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+import { useCallback, useState, useEffect } from 'preact/hooks';
+
+/*
+ * TODO: These default breakpoints are temporary (will be set by Provider in the future)
+ *
+ * This object defines default breakpoints for screens and containers.
+ */
+const defaultBreakpoints = {
+    sm: '0px',
+    md: '600px',
+    lg: '1024px',
+    xl: '1440px'
+};
+/*
+ * Simple custom hook which returns the current breakpoints based on viewport width.
+ * The breakpoints are returned as an object that is a set of boolean values keyed to each breakpoint.
+ * The window/viewport min-width is matched against a range of pixel values defined as the breakpoints.
+ *
+ * TODO: Investigate useBreakpoints scalability if a component that uses useBreakpoints ends up being stamped out in some collection component (JET-49558)
+ *
+ * TODO: Parameterize this hook type such that we enable type checking on the returned record key; introduce a type parameter that corresponds to the Record key type
+ */
+function useBreakpoints(breakpoints = defaultBreakpoints) {
+    // this handler will return current breakpoints as a single object we can watch, rather than looping through each breakpoint key
+    const queryMatches = useCallback(() => {
+        const currentMatches = {};
+        Object.entries(breakpoints).forEach(([key, value]) => {
+            currentMatches[key] = window.matchMedia(`(min-width: ${value})`).matches;
+        });
+        return currentMatches;
+    }, [breakpoints]);
+    const [matches, setMatches] = useState(() => queryMatches());
+    useEffect(() => {
+        const onResize = () => {
+            setMatches(queryMatches());
+        };
+        window.addEventListener('resize', onResize);
+        return () => {
+            window.removeEventListener('resize', onResize);
+        };
+    }, [queryMatches]);
+    return matches;
+}
+
+export { defaultBreakpoints, useBreakpoints };
+/*  */
+//# sourceMappingURL=UNSAFE_useBreakpoints.js.map

package/es/hooks/UNSAFE_useBreakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_useBreakpoints.js","sources":["../../../src/hooks/UNSAFE_useBreakpoints/useBreakpoints.ts"],"sourcesContent":["import { useState, useEffect, useCallback } from 'preact/hooks';\n\n/*\n * TODO: These default breakpoints are temporary (will be set by Provider in the future)\n *\n * This object defines default breakpoints for screens and containers.\n */\nexport const defaultBreakpoints = {\n  sm: '0px',\n  md: '600px',\n  lg: '1024px',\n  xl: '1440px'\n};\n\nexport type Breakpoints = Record<string, string>;\n\n/*\n * Simple custom hook which returns the current breakpoints based on viewport width.\n * The breakpoints are returned as an object that is a set of boolean values keyed to each breakpoint.\n * The window/viewport min-width is matched against a range of pixel values defined as the breakpoints.\n *\n * TODO: Investigate useBreakpoints scalability if a component that uses useBreakpoints ends up being stamped out in some collection component (JET-49558)\n *\n * TODO: Parameterize this hook type such that we enable type checking on the returned record key; introduce a type parameter that corresponds to the Record key type\n */\nexport function useBreakpoints(breakpoints: Breakpoints = defaultBreakpoints) {\n  // this handler will return current breakpoints as a single object we can watch, rather than looping through each breakpoint key\n  const queryMatches = useCallback(() => {\n    const currentMatches: Record<string, boolean> = {};\n    Object.entries(breakpoints).forEach(([key, value]) => {\n      currentMatches[key] = window.matchMedia(`(min-width: ${value})`).matches;\n    });\n    return currentMatches;\n  }, [breakpoints]);\n\n  const [matches, setMatches] = useState(() => queryMatches());\n\n  useEffect(() => {\n    const onResize = () => {\n      setMatches(queryMatches());\n    };\n\n    window.addEventListener('resize', onResize);\n    return () => {\n      window.removeEventListener('resize', onResize);\n    };\n  }, [queryMatches]);\n\n  return matches;\n}\n"],"names":[],"mappings":";;;AAEA;;;;AAIG;AACU,MAAA,kBAAkB,GAAG;AAChC,IAAA,EAAE,EAAE,KAAK;AACT,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,QAAQ;EACZ;AAIF;;;;;;;;AAQG;AACa,SAAA,cAAc,CAAC,WAAA,GAA2B,kBAAkB,EAAA;;AAE1E,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,MAAK;QACpC,MAAM,cAAc,GAA4B,EAAE,CAAC;AACnD,QAAA,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,KAAI;AACnD,YAAA,cAAc,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA,YAAA,EAAe,KAAK,CAAA,CAAA,CAAG,CAAC,CAAC,OAAO,CAAC;AAC3E,SAAC,CAAC,CAAC;AACH,QAAA,OAAO,cAAc,CAAC;AACxB,KAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;AAElB,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,MAAM,YAAY,EAAE,CAAC,CAAC;IAE7D,SAAS,CAAC,MAAK;QACb,MAAM,QAAQ,GAAG,MAAK;AACpB,YAAA,UAAU,CAAC,YAAY,EAAE,CAAC,CAAC;AAC7B,SAAC,CAAC;AAEF,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC5C,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AACjD,SAAC,CAAC;AACJ,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;AAEnB,IAAA,OAAO,OAAO,CAAC;AACjB;;;;;;;"}