@pega/cosmos-react-core 2.2.1 → 2.2.4

package/lib/hooks/useTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.js","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAEA,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAElD;;;GAGG;AACH,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,gBAAgB,EAAE,CAAC,YAAY,CAAC,KAAqB,CAAC;AAE7E,eAAe,QAAQ,CAAC","sourcesContent":["import { DefaultTheme } from 'styled-components';\n\nimport useConfiguration from './useConfiguration';\n\n/**\n * @example const theme = useTheme();\n * @returns theme:: The complete theme object as provided to the Configuration component.\n */\nconst useTheme = () => useConfiguration().themeMachine.theme as DefaultTheme;\n\nexport default useTheme;\n"]}

package/lib/hooks/useTransitionState.d.ts

@@ -0,0 +1,39 @@
+import { CSSProperties, RefObject } from 'react';
+export declare const expandCollapseStates: Readonly<{
+    readonly low: "collapsed";
+    readonly rising: "expanding";
+    readonly high: "expanded";
+    readonly falling: "collapsing";
+}>;
+export declare const openCloseStates: Readonly<{
+    readonly low: "closed";
+    readonly rising: "opening";
+    readonly high: "open";
+    readonly falling: "closing";
+}>;
+declare const useTransitionState: <Low extends string = "low", Rising extends string = "rising", High extends string = "high", Falling extends string = "falling">({ ref, property, states, defaultState }: {
+    ref: RefObject<HTMLElement>;
+    property: keyof CSSProperties;
+} & ({
+    states: {
+        low: Low;
+        rising: Rising;
+        high: High;
+        falling: Falling;
+    };
+    defaultState?: Low | High | undefined;
+} | {
+    states?: {
+        low: 'low';
+        rising: 'rising';
+        high: 'high';
+        falling: 'falling';
+    } | undefined;
+    defaultState?: "high" | "low" | undefined;
+})) => {
+    state: Low | Rising | High | Falling;
+    set: (wantsToGo: Low | High) => void;
+    toggle: () => void;
+};
+export default useTransitionState;
+//# sourceMappingURL=useTransitionState.d.ts.map

package/lib/hooks/useTransitionState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransitionState.d.ts","sourceRoot":"","sources":["../../src/hooks/useTransitionState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAoC,MAAM,OAAO,CAAC;AAEnF,eAAO,MAAM,oBAAoB;;;;;EAKtB,CAAC;AAEZ,eAAO,MAAM,eAAe;;;;;EAKjB,CAAC;AAEZ,QAAA,MAAM,kBAAkB;SAgBjB,UAAU,WAAW,CAAC;cACjB,MAAM,aAAa;;;;;;;;;;;aAOT,KAAK;gBAAU,QAAQ;cAAQ,MAAM;iBAAW,SAAS;;;;;;;CA2C9E,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/hooks/useTransitionState.js

@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useState } from 'react';
+export const expandCollapseStates = Object.freeze({
+    low: 'collapsed',
+    rising: 'expanding',
+    high: 'expanded',
+    falling: 'collapsing'
+});
+export const openCloseStates = Object.freeze({
+    low: 'closed',
+    rising: 'opening',
+    high: 'open',
+    falling: 'closing'
+});
+const useTransitionState = ({ ref, property, states = {
+    low: 'low',
+    rising: 'rising',
+    high: 'high',
+    falling: 'falling'
+}, defaultState = states.low }) => {
+    const [state, setState] = useState(() => defaultState === states.high ? 'high' : 'low');
+    const onTransitionEnd = useCallback((e) => {
+        if (e.propertyName !== property || e.target !== e.currentTarget)
+            return;
+        setState(cur => (cur === 'falling' ? 'low' : 'high'));
+    }, [property]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        el.addEventListener('transitionend', onTransitionEnd);
+        return () => {
+            el.removeEventListener('transitionend', onTransitionEnd);
+        };
+    }, [onTransitionEnd]);
+    const set = useCallback((wantsToGo) => {
+        setState(cur => {
+            if (wantsToGo === states.high && cur !== 'high')
+                return 'rising';
+            if (wantsToGo === states.low && cur !== 'low')
+                return 'falling';
+            return cur;
+        });
+    }, []);
+    const toggle = useCallback(() => {
+        setState(cur => {
+            if (cur === 'low' || cur === 'falling')
+                return 'rising';
+            if (cur === 'high' || cur === 'rising')
+                return 'falling';
+            return cur;
+        });
+    }, []);
+    return { state: states[state], set, toggle };
+};
+export default useTransitionState;
+//# sourceMappingURL=useTransitionState.js.map

package/lib/hooks/useTransitionState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransitionState.js","sourceRoot":"","sources":["../../src/hooks/useTransitionState.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnF,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC;IAChD,GAAG,EAAE,WAAW;IAChB,MAAM,EAAE,WAAW;IACnB,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,YAAY;CACb,CAAC,CAAC;AAEZ,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC;IAC3C,GAAG,EAAE,QAAQ;IACb,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;CACV,CAAC,CAAC;AAEZ,MAAM,kBAAkB,GAAG,CAKzB,EACA,GAAG,EACH,QAAQ,EACR,MAAM,GAAG;IACP,GAAG,EAAE,KAAY;IACjB,MAAM,EAAE,QAAkB;IAC1B,IAAI,EAAE,MAAc;IACpB,OAAO,EAAE,SAAoB;CAC9B,EACD,YAAY,GAAG,MAAM,CAAC,GAAG,EAa1B,EAAE,EAAE;IACH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAsB,GAAG,EAAE,CAC3D,YAAY,KAAK,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAC9C,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,CAAkB,EAAE,EAAE;QACrB,IAAI,CAAC,CAAC,YAAY,KAAK,QAAQ,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa;YAAE,OAAO;QACxE,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IACxD,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;QACtD,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,mBAAmB,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;QAC3D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,GAAG,GAAG,WAAW,CAAC,CAAC,SAAqB,EAAE,EAAE;QAChD,QAAQ,CAAC,GAAG,CAAC,EAAE;YACb,IAAI,SAAS,KAAK,MAAM,CAAC,IAAI,IAAI,GAAG,KAAK,MAAM;gBAAE,OAAO,QAAQ,CAAC;YACjE,IAAI,SAAS,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,KAAK,KAAK;gBAAE,OAAO,SAAS,CAAC;YAChE,OAAO,GAAG,CAAC;QACb,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,QAAQ,CAAC,GAAG,CAAC,EAAE;YACb,IAAI,GAAG,KAAK,KAAK,IAAI,GAAG,KAAK,SAAS;gBAAE,OAAO,QAAQ,CAAC;YACxD,IAAI,GAAG,KAAK,MAAM,IAAI,GAAG,KAAK,QAAQ;gBAAE,OAAO,SAAS,CAAC;YACzD,OAAO,GAAG,CAAC;QACb,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAkC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC;AAChF,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { CSSProperties, RefObject, useCallback, useEffect, useState } from 'react';\n\nexport const expandCollapseStates = Object.freeze({\n  low: 'collapsed',\n  rising: 'expanding',\n  high: 'expanded',\n  falling: 'collapsing'\n} as const);\n\nexport const openCloseStates = Object.freeze({\n  low: 'closed',\n  rising: 'opening',\n  high: 'open',\n  falling: 'closing'\n} as const);\n\nconst useTransitionState = <\n  Low extends string = 'low',\n  Rising extends string = 'rising',\n  High extends string = 'high',\n  Falling extends string = 'falling'\n>({\n  ref,\n  property,\n  states = {\n    low: 'low' as Low,\n    rising: 'rising' as Rising,\n    high: 'high' as High,\n    falling: 'falling' as Falling\n  },\n  defaultState = states.low\n}: {\n  ref: RefObject<HTMLElement>;\n  property: keyof CSSProperties;\n} & (\n  | {\n      states: { low: Low; rising: Rising; high: High; falling: Falling };\n      defaultState?: Low | High;\n    }\n  | {\n      states?: { low: 'low'; rising: 'rising'; high: 'high'; falling: 'falling' };\n      defaultState?: 'low' | 'high';\n    }\n)) => {\n  const [state, setState] = useState<keyof typeof states>(() =>\n    defaultState === states.high ? 'high' : 'low'\n  );\n\n  const onTransitionEnd = useCallback(\n    (e: TransitionEvent) => {\n      if (e.propertyName !== property || e.target !== e.currentTarget) return;\n      setState(cur => (cur === 'falling' ? 'low' : 'high'));\n    },\n    [property]\n  );\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    el.addEventListener('transitionend', onTransitionEnd);\n    return () => {\n      el.removeEventListener('transitionend', onTransitionEnd);\n    };\n  }, [onTransitionEnd]);\n\n  const set = useCallback((wantsToGo: Low | High) => {\n    setState(cur => {\n      if (wantsToGo === states.high && cur !== 'high') return 'rising';\n      if (wantsToGo === states.low && cur !== 'low') return 'falling';\n      return cur;\n    });\n  }, []);\n\n  const toggle = useCallback(() => {\n    setState(cur => {\n      if (cur === 'low' || cur === 'falling') return 'rising';\n      if (cur === 'high' || cur === 'rising') return 'falling';\n      return cur;\n    });\n  }, []);\n\n  return { state: states[state] as Low | Rising | High | Falling, set, toggle };\n};\n\nexport default useTransitionState;\n"]}

package/lib/hooks/useTriggerableEffect.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @example const triggerFunction = useTriggerableEffect(cb);
+ * @param cb The callback function that will be invoked after re-render by the useEffect.
+ * @returns triggerFunction:: The function that will trigger the useEffect.
+ */
+declare const useTriggerableEffect: <F extends (...args: any[]) => any>(cb: F) => (...args: Parameters<F>) => void;
+export default useTriggerableEffect;
+//# sourceMappingURL=useTriggerableEffect.d.ts.map

package/lib/hooks/useTriggerableEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTriggerableEffect.d.ts","sourceRoot":"","sources":["../../src/hooks/useTriggerableEffect.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,QAAA,MAAM,oBAAoB,uBAAwB,GAAG,EAAE,KAAK,GAAG,4CAsB9D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/lib/hooks/useTriggerableEffect.js

@@ -0,0 +1,26 @@
+import { useState, useCallback, useEffect } from 'react';
+/**
+ * @example const triggerFunction = useTriggerableEffect(cb);
+ * @param cb The callback function that will be invoked after re-render by the useEffect.
+ * @returns triggerFunction:: The function that will trigger the useEffect.
+ */
+const useTriggerableEffect = (cb) => {
+    const [state, setState] = useState({
+        triggered: false,
+        args: null
+    });
+    useEffect(() => {
+        if (!state.triggered)
+            return;
+        setState({
+            triggered: false,
+            args: null
+        });
+        cb(...state.args);
+    }, [cb, state]);
+    return useCallback((...args) => {
+        setState({ triggered: true, args });
+    }, []);
+};
+export default useTriggerableEffect;
+//# sourceMappingURL=useTriggerableEffect.js.map

package/lib/hooks/useTriggerableEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTriggerableEffect.js","sourceRoot":"","sources":["../../src/hooks/useTriggerableEffect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzD;;;;GAIG;AACH,MAAM,oBAAoB,GAAG,CAAoC,EAAK,EAAE,EAAE;IACxE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAEhC;QACA,SAAS,EAAE,KAAK;QAChB,IAAI,EAAE,IAAI;KACX,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,CAAC,SAAS;YAAE,OAAO;QAE7B,QAAQ,CAAC;YACP,SAAS,EAAE,KAAK;YAChB,IAAI,EAAE,IAAI;SACX,CAAC,CAAC;QAEH,EAAE,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC;IAEhB,OAAO,WAAW,CAAC,CAAC,GAAG,IAAmB,EAAE,EAAE;QAC5C,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import { useState, useCallback, useEffect } from 'react';\n\n/**\n * @example const triggerFunction = useTriggerableEffect(cb);\n * @param cb The callback function that will be invoked after re-render by the useEffect.\n * @returns triggerFunction:: The function that will trigger the useEffect.\n */\nconst useTriggerableEffect = <F extends (...args: any[]) => any>(cb: F) => {\n  const [state, setState] = useState<\n    { triggered: false; args: null } | { triggered: true; args: Parameters<F> }\n  >({\n    triggered: false,\n    args: null\n  });\n\n  useEffect(() => {\n    if (!state.triggered) return;\n\n    setState({\n      triggered: false,\n      args: null\n    });\n\n    cb(...state.args);\n  }, [cb, state]);\n\n  return useCallback((...args: Parameters<F>) => {\n    setState({ triggered: true, args });\n  }, []);\n};\n\nexport default useTriggerableEffect;\n"]}

package/lib/hooks/useTriggerableLayoutEffect.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @example const triggerFunction = useTriggerableLayoutEffect(cb);
+ * @param cb The callback function that will be invoked after re-render by the useLayoutEffect.
+ * @returns triggerFunction:: The function that will trigger the useLayoutEffect.
+ */
+declare const useTriggerableLayoutEffect: (cb: (...args: unknown[]) => void) => (...args: unknown[]) => void;
+export default useTriggerableLayoutEffect;
+//# sourceMappingURL=useTriggerableLayoutEffect.d.ts.map

package/lib/hooks/useTriggerableLayoutEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTriggerableLayoutEffect.d.ts","sourceRoot":"","sources":["../../src/hooks/useTriggerableLayoutEffect.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,QAAA,MAAM,0BAA0B,iBAAkB,OAAO,EAAE,KAAK,IAAI,eAmBrC,OAAO,EAAE,SAGvC,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

package/lib/hooks/useTriggerableLayoutEffect.js

@@ -0,0 +1,26 @@
+import { useState, useCallback, useLayoutEffect } from 'react';
+/**
+ * @example const triggerFunction = useTriggerableLayoutEffect(cb);
+ * @param cb The callback function that will be invoked after re-render by the useLayoutEffect.
+ * @returns triggerFunction:: The function that will trigger the useLayoutEffect.
+ */
+const useTriggerableLayoutEffect = (cb) => {
+    const [state, setState] = useState({
+        triggered: false,
+        args: null
+    });
+    useLayoutEffect(() => {
+        if (!state.triggered)
+            return;
+        setState({
+            triggered: false,
+            args: null
+        });
+        cb(...state.args);
+    }, [cb, state]);
+    return useCallback((...args) => {
+        setState({ triggered: true, args });
+    }, []);
+};
+export default useTriggerableLayoutEffect;
+//# sourceMappingURL=useTriggerableLayoutEffect.js.map

package/lib/hooks/useTriggerableLayoutEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTriggerableLayoutEffect.js","sourceRoot":"","sources":["../../src/hooks/useTriggerableLayoutEffect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAE/D;;;;GAIG;AACH,MAAM,0BAA0B,GAAG,CAAC,EAAgC,EAAE,EAAE;IACtE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAEhC;QACA,SAAS,EAAE,KAAK;QAChB,IAAI,EAAE,IAAI;KACX,CAAC,CAAC;IAEH,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,KAAK,CAAC,SAAS;YAAE,OAAO;QAE7B,QAAQ,CAAC;YACP,SAAS,EAAE,KAAK;YAChB,IAAI,EAAE,IAAI;SACX,CAAC,CAAC;QAEH,EAAE,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC;IAEhB,OAAO,WAAW,CAAC,CAAC,GAAG,IAAe,EAAE,EAAE;QACxC,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC,CAAC;AAEF,eAAe,0BAA0B,CAAC","sourcesContent":["import { useState, useCallback, useLayoutEffect } from 'react';\n\n/**\n * @example const triggerFunction = useTriggerableLayoutEffect(cb);\n * @param cb The callback function that will be invoked after re-render by the useLayoutEffect.\n * @returns triggerFunction:: The function that will trigger the useLayoutEffect.\n */\nconst useTriggerableLayoutEffect = (cb: (...args: unknown[]) => void) => {\n  const [state, setState] = useState<\n    { triggered: false; args: null } | { triggered: true; args: any[] }\n  >({\n    triggered: false,\n    args: null\n  });\n\n  useLayoutEffect(() => {\n    if (!state.triggered) return;\n\n    setState({\n      triggered: false,\n      args: null\n    });\n\n    cb(...state.args);\n  }, [cb, state]);\n\n  return useCallback((...args: unknown[]) => {\n    setState({ triggered: true, args });\n  }, []);\n};\n\nexport default useTriggerableLayoutEffect;\n"]}

package/lib/hooks/useUID.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Generate unique identifier that is stable across renders.
+ * @example const stableUID = useUID();
+ * @returns uid:: The same autogenerated UID between renders.
+ */
+declare const useUID: () => string;
+export default useUID;
+//# sourceMappingURL=useUID.d.ts.map

package/lib/hooks/useUID.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUID.d.ts","sourceRoot":"","sources":["../../src/hooks/useUID.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,QAAA,MAAM,MAAM,QAAO,MAElB,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/hooks/useUID.js

@@ -0,0 +1,12 @@
+import { useRef } from 'react';
+import { createUID } from '../utils';
+/**
+ * Generate unique identifier that is stable across renders.
+ * @example const stableUID = useUID();
+ * @returns uid:: The same autogenerated UID between renders.
+ */
+const useUID = () => {
+    return useRef(createUID()).current;
+};
+export default useUID;
+//# sourceMappingURL=useUID.js.map

package/lib/hooks/useUID.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUID.js","sourceRoot":"","sources":["../../src/hooks/useUID.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC;;;;GAIG;AACH,MAAM,MAAM,GAAG,GAAW,EAAE;IAC1B,OAAO,MAAM,CAAS,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC;AAC7C,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { useRef } from 'react';\n\nimport { createUID } from '../utils';\n\n/**\n * Generate unique identifier that is stable across renders.\n * @example const stableUID = useUID();\n * @returns uid:: The same autogenerated UID between renders.\n */\nconst useUID = (): string => {\n  return useRef<string>(createUID()).current;\n};\n\nexport default useUID;\n"]}