@caspeco/casper-ui-library 9.6.2 → 9.7.0

package/dist/components/collapsible/collapsible.composition.d.ts

@@ -0,0 +1,4 @@
+export declare const DefaultState: () => import("react/jsx-runtime").JSX.Element;
+export declare const CollapsedState: () => import("react/jsx-runtime").JSX.Element;
+export declare const NonCollapsibleContent: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=collapsible.composition.d.ts.map

package/dist/components/collapsible/collapsible.composition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/collapsible.composition.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY,+CAIxB,CAAC;AAEF,eAAO,MAAM,cAAc,+CAI1B,CAAC;AAEF,eAAO,MAAM,qBAAqB,+CAIjC,CAAC"}

package/dist/components/collapsible/collapsible.d.ts

@@ -0,0 +1,3 @@
+import { CollapsibleProps } from './types.js';
+export declare const Collapsible: ({ children, collapsedHeight, defaultExpanded, locale, }: CollapsibleProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=collapsible.d.ts.map

package/dist/components/collapsible/collapsible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/collapsible.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAIhD,eAAO,MAAM,WAAW,GAAI,yDAKzB,gBAAgB,4CAwFlB,CAAC"}

package/dist/components/collapsible/collapsible.js

@@ -0,0 +1,117 @@
+import { jsx as e, jsxs as I } from "react/jsx-runtime";
+import { Collapsible as o, Box as a, Flex as R } from "@chakra-ui/react";
+import { useState as m, useRef as y, useLayoutEffect as O } from "react";
+import { useRemoveAttributes as S } from "../../hooks/use-remove-attributes.js";
+import { translations as f } from "./translations.js";
+import { ThemeSpaceVariable as D, ThemeColorVariable as d } from "../../theme/theme-types.js";
+import { ExpandIcon as E } from "../icon/icons/expand-icon.js";
+const s = "200ms", k = ({
+  children: h,
+  collapsedHeight: r,
+  defaultExpanded: b = !0,
+  locale: l = "en-US"
+}) => {
+  const [g, C] = m(b), [c, x] = m(!0), i = y(null), t = c ? g : !0;
+  return S(i, ["inert"], !t), O(() => {
+    const n = i.current;
+    if (!n) return;
+    const p = () => {
+      const v = n.getBoundingClientRect().height;
+      x(v > r);
+    };
+    p();
+    const u = new ResizeObserver(p);
+    return u.observe(n), () => {
+      u.disconnect();
+    };
+  }, [r]), /* @__PURE__ */ e(
+    o.Root,
+    {
+      collapsedHeight: r,
+      open: t,
+      onOpenChange: ({ open: n }) => {
+        C(n);
+      },
+      children: /* @__PURE__ */ I(a, { position: "relative", children: [
+        /* @__PURE__ */ e(
+          o.Content,
+          {
+            _open: {
+              animationDuration: s
+            },
+            _closed: {
+              animationDuration: s
+            },
+            children: /* @__PURE__ */ e(a, { ref: i, children: h })
+          }
+        ),
+        !t && /* @__PURE__ */ e(T, {}),
+        c && /* @__PURE__ */ e(
+          R,
+          {
+            css: t ? {
+              position: "relative"
+            } : {
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              right: 0,
+              transform: `translateY(${D.XSmall})`
+            },
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+            children: /* @__PURE__ */ e(o.Trigger, { children: /* @__PURE__ */ e(
+              o.Indicator,
+              {
+                width: 40,
+                height: 40,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                transition: `transform ${s} ease`,
+                "aria-label": t ? f[l].collapseContent : f[l].expandContent,
+                _open: { transform: "rotate(180deg)" },
+                children: /* @__PURE__ */ e(E, {})
+              }
+            ) })
+          }
+        )
+      ] })
+    }
+  );
+}, T = () => /* @__PURE__ */ e(
+  a,
+  {
+    "data-testid": "blur-overlay",
+    css: {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: "36px",
+      pointerEvents: "none",
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        height: "20px",
+        background: `linear-gradient(to bottom, rgba(255, 255, 255, 0.00) 2.18%, ${d.Surface} 97.81%)`
+      },
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: "calc(100% - 20px)",
+        background: d.Surface
+      }
+    }
+  }
+);
+export {
+  k as Collapsible
+};

package/dist/components/collapsible/collapsible.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=collapsible.spec.d.ts.map

package/dist/components/collapsible/collapsible.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.spec.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/collapsible.spec.tsx"],"names":[],"mappings":""}

package/dist/components/collapsible/collapsible.visual.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=collapsible.visual.test.d.ts.map

package/dist/components/collapsible/collapsible.visual.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.visual.test.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/collapsible.visual.test.tsx"],"names":[],"mappings":""}

package/dist/components/collapsible/index.d.ts

@@ -0,0 +1,3 @@
+export { Collapsible } from './collapsible.js';
+export type { CollapsibleProps } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/collapsible/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/collapsible/translations.d.ts

@@ -0,0 +1,32 @@
+export type Locales = "en-US" | "nb-NO" | "da-DK" | "sv-SE" | "en-GB" | "fr-FR" | "nl-BE";
+export declare const translations: {
+    "sv-SE": {
+        collapseContent: string;
+        expandContent: string;
+    };
+    "en-US": {
+        collapseContent: string;
+        expandContent: string;
+    };
+    "en-GB": {
+        collapseContent: string;
+        expandContent: string;
+    };
+    "nb-NO": {
+        collapseContent: string;
+        expandContent: string;
+    };
+    "da-DK": {
+        collapseContent: string;
+        expandContent: string;
+    };
+    "fr-FR": {
+        collapseContent: string;
+        expandContent: string;
+    };
+    "nl-BE": {
+        collapseContent: string;
+        expandContent: string;
+    };
+};
+//# sourceMappingURL=translations.d.ts.map

package/dist/components/collapsible/translations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/translations.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAO1F,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBxB,CAAC"}

package/dist/components/collapsible/translations.js

@@ -0,0 +1,30 @@
+const n = {
+  collapseContent: "Collapse content",
+  expandContent: "Expand content"
+}, e = {
+  "sv-SE": {
+    collapseContent: "Kollapsa innehåll",
+    expandContent: "Expandera innehåll"
+  },
+  "en-US": n,
+  "en-GB": n,
+  "nb-NO": {
+    collapseContent: "Skjul innhold",
+    expandContent: "Vis innhold"
+  },
+  "da-DK": {
+    collapseContent: "Skjul indhold",
+    expandContent: "Vis indhold"
+  },
+  "fr-FR": {
+    collapseContent: "Réduire le contenu",
+    expandContent: "Afficher le contenu"
+  },
+  "nl-BE": {
+    collapseContent: "Inhoud samenvouwen",
+    expandContent: "Inhoud uitvouwen"
+  }
+};
+export {
+  e as translations
+};

package/dist/components/collapsible/types.d.ts

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from 'react';
+import { Locales } from './translations.js';
+export type CollapsibleProps = PropsWithChildren<{
+    /** The height (in pixels) at which the content should be collapsed. If the content's height is less than or equal to this value, it will not be collapsible. */
+    collapsedHeight: number;
+    /** Whether the content should be expanded by default. */
+    defaultExpanded?: boolean;
+    /**
+     * Locale used for translation of text contents native to the collapsible, such as aria-labels for the trigger button.
+     * Defaults to 'en-US'.
+     */
+    locale?: Locales;
+}>;
+export type { Locales };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/collapsible/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAChD,gKAAgK;IAChK,eAAe,EAAE,MAAM,CAAC;IACxB,yDAAyD;IACzD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC,CAAC;AAEH,YAAY,EAAE,OAAO,EAAE,CAAC"}

package/dist/hooks/use-remove-attributes.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from 'react';
+/**
+ * Watches an element and strips the given attributes whenever they are added to
+ * it or its descendants, keeping them interactive / unstyled even when a parent
+ * component would otherwise set those attributes.
+ *
+ * @param ref - Ref to the root element to observe.
+ * @param attributes - One or more attribute names to remove (e.g. `["inert"]`).
+ * @param active - Whether the hook should run. Set to `false` when observation
+ *   is not needed so the MutationObserver is not running unnecessarily.
+ *   Defaults to `true`.
+ */
+export declare const useRemoveAttributes: (ref: RefObject<HTMLElement | null>, attributes: string[], active?: boolean) => void;
+//# sourceMappingURL=use-remove-attributes.d.ts.map

package/dist/hooks/use-remove-attributes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-remove-attributes.d.ts","sourceRoot":"","sources":["../../lib/hooks/use-remove-attributes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAa,MAAM,OAAO,CAAC;AAElD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,mBAAmB,GAC/B,KAAK,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,YAAY,MAAM,EAAE,EACpB,gBAAa,SAoBb,CAAC"}

package/dist/hooks/use-remove-attributes.js

@@ -0,0 +1,17 @@
+import { useEffect as b } from "react";
+const f = (o, e, u = !0) => {
+  b(() => {
+    const t = o.current;
+    if (!u || !t || e.length === 0) return;
+    const n = () => {
+      for (const r of e)
+        t.removeAttribute(r), t.querySelectorAll(`[${r}]`).forEach((c) => c.removeAttribute(r));
+    };
+    n();
+    const s = new MutationObserver(n);
+    return s.observe(t, { subtree: !0, attributes: !0, attributeFilter: e }), () => s.disconnect();
+  }, [o, u, e]);
+};
+export {
+  f as useRemoveAttributes
+};

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export * from './components/breadcrumbs/index.js';
 export * from './components/button/index.js';
 export * from './components/checkbox/index.js';
 export * from './components/checkbox-group/index.js';
+export * from './components/collapsible/index.js';
 export * from './components/combobox/index.js';
 export * from './components/date-picker/index.js';
 export * from './components/divider/index.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AAExB,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AAEvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AAExB,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AAEvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC"}