@iress-oss/ids-components 6.0.0-alpha.10 → 6.0.0-alpha.11

package/dist/components/Col/Col.d.ts

@@ -1,11 +1,12 @@
 import { ReactNode } from 'react';
 import { IressStyledProps, ResponsiveProp } from '../../types';
+import { IressCSSProps } from '../../interfaces';
 import { UtilityValues } from '../../styled-system/types/prop-type';
 export interface IressColProps extends IressStyledProps {
     /**
      * Individual alignment of column
      */
-    alignSelf?: 'start' | 'end' | 'center' | 'stretch';
+    alignSelf?: IressCSSProps['alignSelf'];
     /**
      * Any content you would like to be contained in a column.
      */

package/dist/components/Col/Col.styles.d.ts

@@ -1,16 +1 @@
-export declare const col: import('../../styled-system/types').RecipeRuntimeFn<{
-    alignSelf: {
-        start: {
-            alignSelf: "start";
-        };
-        end: {
-            alignSelf: "end";
-        };
-        center: {
-            alignSelf: "center";
-        };
-        stretch: {
-            alignSelf: "stretch";
-        };
-    };
-}>;
+export declare const col: import('../../styled-system/types').RecipeRuntimeFn<{}>;

package/dist/components/Col/Col.styles.js

@@ -1,28 +1,13 @@
 import { c as a } from "../../cva-DtPMccE9.js";
-const t = a({
+const r = a({
   base: {
     display: "block",
     boxSizing: "border-box",
     span: "auto"
   },
-  variants: {
-    alignSelf: {
-      start: {
-        alignSelf: "start"
-      },
-      end: {
-        alignSelf: "end"
-      },
-      center: {
-        alignSelf: "center"
-      },
-      stretch: {
-        alignSelf: "stretch"
-      }
-    }
-  },
+  variants: {},
   defaultVariants: {}
 });
 export {
-  t as col
+  r as col
 };

package/dist/constants.d.ts

@@ -87,7 +87,7 @@ export declare const GRID_SIZE = 12;
 /**
  * The horizontal alignment options.
  */
-export declare const HORIZONTAL_ALIGNS: readonly ["around", "between", "center", "evenly", "left", "right"];
+export declare const HORIZONTAL_ALIGNS: readonly ["around", "between", "center", "evenly", "left", "right", "stretch"];
 /**
  * The statuses available for various components.
  */

package/dist/constants.js

@@ -84,7 +84,8 @@ const e = {
   "center",
   "evenly",
   "left",
-  "right"
+  "right",
+  "stretch"
 ], a = ["danger", "info", "success", "warning"], r = [
   "inherit",
   "left",

package/dist/interfaces.d.ts

@@ -166,6 +166,14 @@ export interface BreakpointDetail {
  * **Note:** These are the only props we support for styling components. Anything else is at your own risk.
  */
 export interface IressCSSProps {
+    /**
+     * The **`align-self`** CSS property overrides a flex item's alignment set by its flex container's `align-items` property.
+     *
+     * This is useful when you want a single flex item to have a different alignment than the others in the flex container.
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/align-self
+     */
+    alignSelf?: ResponsiveProp<'start' | 'end' | 'center' | 'stretch'>;
     /**
      * **`bg`** sets the background color of an element using the `background-color` css property using the color tokens in the design system.
      *
@@ -368,14 +376,6 @@ export interface IressCSSProps {
      * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
      */
     pt?: ResponsiveProp<PositiveSpacingToken>;
-    /**
-     * The **`row-gap`** CSS property sets the size of the gap (gutter) between an element's rows.
-     *
-     * Note: It only has an effect when used as a direct child of a layout component, such as IressRow, IressStack or IressInline.
-     *
-     * @see https://developer.mozilla.org/docs/Web/CSS/row-gap
-     */
-    rowGap?: ResponsiveProp<PositiveSpacingToken>;
     /**
      * The **`scrollable`** property enables scrolling behavior for an element when its content overflows its bounds. It sets the `overflow` CSS property to `auto`, allowing scrollbars to appear as needed. The scrollbar has been styled to match the design system.
      * You can set the value to `true` to enable scrolling on both axes, or specify `'x'` or `'y'` to restrict scrolling to a single axis.

package/dist/patterns/Loading/hooks/useEstimatedProgressValue.js

@@ -1,25 +1,20 @@
-import { useState as A, useMemo as E, useEffect as V } from "react";
-const l = (r, u = !1, n, t = 0) => {
-  const [o, w] = A(n ?? 0), c = E(() => !u && !n && a(o, r, t), [
-    r,
-    t,
-    u,
-    n,
-    o
-  ]);
-  return V(() => {
-    const q = performance.now(), f = () => {
-      const x = Math.max(performance.now() - q, 0), P = o + x;
-      w(P), a(P, r, t) && requestAnimationFrame(f);
+import { useState as l, useEffect as A } from "react";
+const v = (r, t = !1, n, e = 0) => {
+  const [o, c] = l(n ?? 0);
+  return A(() => {
+    if (t || n !== void 0)
+      return;
+    const m = performance.now();
+    let a;
+    const u = () => {
+      const f = Math.max(performance.now() - m, 0);
+      c(f), P(f, r, e) && (a = requestAnimationFrame(u));
     };
-    requestAnimationFrame(f);
-  }, [
-    r,
-    c,
-    t,
-    o
-  ]), n !== void 0 ? u ? r : n : !c && o < r ? r : o;
-}, a = (r, u, n) => r < u || r < n;
+    return a = requestAnimationFrame(u), () => {
+      a && cancelAnimationFrame(a);
+    };
+  }, [r, t, e, n]), n !== void 0 ? t ? r : n : t || o >= r ? r : o;
+}, P = (r, t, n) => r < t || r < n;
 export {
-  l as useEstimatedProgressValue
+  v as useEstimatedProgressValue
 };

package/dist/patterns/Loading/hooks/useShouldRenderLoading.js

@@ -1,24 +1,30 @@
-import { useState as m, useRef as T, useEffect as f } from "react";
-const a = (e, o = 500, t = 250, c = 250) => {
-  const [i, r] = m(t === 0), n = T(0);
-  return f(() => {
+import { useState as m, useRef as T, useEffect as i } from "react";
+const l = (e, c = 500, n = 250, f = 250) => {
+  const [s, t] = m(!1), r = T(0);
+  return i(() => {
+    if (n === 0) {
+      const o = setTimeout(() => {
+        e || (t(!0), r.current = performance.now());
+      }, 0);
+      return () => clearTimeout(o);
+    }
     const u = setTimeout(() => {
-      e || (r(!0), n.current = performance.now());
-    }, t);
+      e || (t(!0), r.current = performance.now());
+    }, n);
     return () => clearTimeout(u);
-  }, [t, e]), f(() => {
+  }, [n, e]), i(() => {
     if (e !== !0)
       return;
     const u = setTimeout(() => {
-      (!n.current || performance.now() - n.current < c) && r(!1);
-    }, 0), s = setTimeout(() => {
-      r(!1);
-    }, o);
+      (!r.current || performance.now() - r.current < f) && t(!1);
+    }, 0), o = setTimeout(() => {
+      t(!1);
+    }, c);
     return () => {
-      clearTimeout(u), clearTimeout(s);
+      clearTimeout(u), clearTimeout(o);
     };
-  }, [e, o, c]), e !== !0 || i;
+  }, [e, c, f]), e !== !0 || s;
 };
 export {
-  a as useShouldRenderLoading
+  l as useShouldRenderLoading
 };