@caspeco/casper-ui-library 9.0.0-alpha.2 → 9.0.0-alpha.4

package/README.md

@@ -2,7 +2,7 @@
 
 [![NPM Version](https://img.shields.io/npm/v/%40caspeco%2Fcasper-ui-library)](https://www.npmjs.com/package/@caspeco/casper-ui-library)
 
-Caspeco's UI component library, built on top of on top of [Chakra UI](https://chakra-ui.com/).
+Caspeco's UI component library, built on top of [Chakra UI](https://chakra-ui.com/).
 
 👉 **The usage documentation can be found at https://caspeco.github.io/casper-ui-library**
 
@@ -27,7 +27,7 @@ All commands are run from the root of the project, from a terminal.
 | `npm run test:visual:update` | Update visual regression baseline screenshots. Run this after intentional UI changes. |
 | `npm run lint` | Run linting with [@caspeco/eslint-config](https://github.com/Caspeco/eslint-config). If you use the recommended [ESLint VSCode extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) you can see your eslint errors directly in your editor without having to run this. |
 | `npm run prettier:fix` | Reformat all files with [@caspeco/prettier-config](https://github.com/Caspeco/prettier-config). If you use the recommended [Prettier VSCode extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) you can have your files automatically formatted on file save. |
-| `npm run chakra typegen lib/theme/theme.ts` | Generate Chakra UI type definitions for the theme. BUG: You have to rename `tsconfig.app.json` to `tsconfig.json` first, see [this issue](https://github.com/chakra-ui/chakra-ui/issues/10629). |
+| `npm run chakra:types` | Generate Chakra UI type definitions for the theme. Happens automatically on `npm install`. |
 
 ### Preview locally in another project
 

package/dist/components/breadcrumbs/breadcrumb-item.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
 import { Breadcrumb as t } from "@chakra-ui/react";
 function u({ children: r, isCurrentPage: o, ...m }) {
-  return /* @__PURE__ */ e(t.Item, { whiteSpace: "nowrap", overflow: "hidden", ...m, children: o ? r : /* @__PURE__ */ e(t.CurrentLink, { asChild: !0, children: r }) });
+  return /* @__PURE__ */ e(t.Item, { whiteSpace: "nowrap", overflow: "hidden", ...m, children: o ? /* @__PURE__ */ e(t.CurrentLink, { asChild: !0, children: r }) : r });
 }
 export {
   u as BreadcrumbItem

package/dist/components/table/table-cell.js

@@ -1,5 +1,5 @@
-import { jsx as n, jsxs as I, Fragment as w } from "react/jsx-runtime";
-import { TableCell as z, Flex as V, Box as m } from "@chakra-ui/react";
+import { jsx as n, jsxs as I, Fragment as F } from "react/jsx-runtime";
+import { TableCell as w, Flex as V, Box as m } from "@chakra-ui/react";
 import { flexRender as j } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
 import { memo as K, useMemo as h, useCallback as P } from "react";
 import { useTableContext as N } from "./table-context.js";
@@ -18,11 +18,11 @@ const U = ({
   visibleCells: T,
   breakingContentState: g,
   localeString: b,
-  actionMenu: s,
+  actionMenu: l,
   canSelectRows: r,
   isCheckboxDisabled: D
 }) => {
-  const l = N(), { column: i } = a, S = L[b], $ = h(() => {
+  const s = N(), { column: i } = a, S = L[b], $ = h(() => {
     const e = {
       width: "100%",
       display: "inline-flex",
@@ -30,14 +30,14 @@ const U = ({
       alignItems: "center"
     };
     return g[i.id] || (e.overflow = "hidden", e.whiteSpace = "nowrap"), e;
-  }, [g, i.id]), x = h(() => i.getIndex() === 0, [i]), C = o.getCanExpand(), f = T[0]?.id === a.id, y = C && f, u = s || x && !!l.getRowActions || r, R = h(() => {
+  }, [g, i.id]), x = h(() => i.getIndex() === 0, [i]), C = o.getCanExpand(), f = T[0]?.id === a.id, y = C && f, u = l || x && !!s.getRowActions || r, B = h(() => {
     const e = [];
     for (let t = 0; t < o.depth; t += 1) {
       let d = `${t * 2 + 0.7}rem`;
-      u && (d = `calc(${d} + ${s && r ? 48 : 24}px)`), e.push(/* @__PURE__ */ n(W, { orientation: "vertical", position: "absolute", top: "0", left: d }, t));
+      u && (d = `calc(${d} + ${l && r ? 48 : 24}px)`), e.push(/* @__PURE__ */ n(W, { orientation: "vertical", position: "absolute", top: "0", left: d }, t));
     }
     return e;
-  }, [s, r, o.depth, u]), A = P(() => {
+  }, [l, r, o.depth, u]), R = P(() => {
     const e = i.getIsPinned();
     return {
       position: e ? "sticky" : "relative",
@@ -48,44 +48,44 @@ const U = ({
       maxWidth: i.getSize()
     };
   }, [i]);
-  function B() {
+  function A() {
     const e = o.depth && f || y ? `${o.depth * 2}rem` : Q.Small;
     if (!u)
       return e;
-    const t = s && r && o.depth === 0 ? 48 : 24;
+    const t = l && r && o.depth === 0 ? 48 : 24;
     return `calc(${e} + ${t}px)`;
   }
   const E = P(
     ({ checked: e }) => {
       const t = (d) => {
-        if (l.disableSelectionCheckbox?.(d))
+        if (s.disableSelectionCheckbox?.(d))
           return [];
         const c = [d.id];
         return d.subRows?.forEach((p) => {
           c.push(...t(p));
         }), c;
       };
-      l.setSelectedRowIds((d) => {
+      s.setSelectedRowIds((d) => {
         const c = t(o), p = new Set(d);
         return c.forEach((v) => {
           e ? p.add(v) : p.delete(v);
         }), Array.from(p);
       });
     },
-    [o, l]
-  ), F = h(() => l.selectedRowIds?.includes(o.id) ?? !1, [o.id, l.selectedRowIds]);
+    [o, s]
+  ), z = h(() => s.selectedRowIds?.includes(o.id) ?? !1, [o.id, s.selectedRowIds]);
   return /* @__PURE__ */ n(
-    z,
+    w,
     {
       id: a.id,
       textAlign: i.columnDef.meta?.isNumeric ? "end" : void 0,
       style: {
-        ...A(),
+        ...R(),
         borderBottom: 0,
-        paddingLeft: B()
+        paddingLeft: A()
       },
       children: /* @__PURE__ */ I(V, { w: "100%", h: "100%", align: "center", children: [
-        s && /* @__PURE__ */ n(q, { children: ({ isOpen: e }) => /* @__PURE__ */ I(
+        l && /* @__PURE__ */ n(q, { lazyBehavior: "keepMounted", children: ({ isOpen: e }) => /* @__PURE__ */ I(
           m,
           {
             display: "contents",
@@ -114,14 +114,14 @@ const U = ({
                   )
                 }
               ),
-              s
+              l
             ]
           }
         ) }),
-        r && /* @__PURE__ */ n(m, { display: "contents", onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: /* @__PURE__ */ n(m, { position: "absolute", left: s ? "24px" : "0", children: /* @__PURE__ */ n(
+        r && /* @__PURE__ */ n(m, { display: "contents", onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: /* @__PURE__ */ n(m, { position: "absolute", left: l ? "24px" : "0", children: /* @__PURE__ */ n(
           J,
           {
-            isChecked: F,
+            isChecked: z,
             onCheckedChange: E,
             isDisabled: D
           }
@@ -134,8 +134,8 @@ const U = ({
             hidden: !C,
             rowIsExpanded: k
           }
-        ) : /* @__PURE__ */ n(w, {}),
-        x && R,
+        ) : /* @__PURE__ */ n(F, {}),
+        x && B,
         /* @__PURE__ */ n("div", { style: $, children: j(i.columnDef.cell, a.getContext()) })
       ] })
     },

package/dist/components/textarea/textarea-recipe.js

@@ -1,16 +1,16 @@
 import { isTouchScreenDevice as d } from "../../theme/theme-helper.js";
-import { ThemeColorToken as r, ThemeBorderToken as o, ThemeSpaceToken as n, ThemeRadiusToken as l, ThemeFontToken as t } from "../../theme/theme-tokens.js";
+import { ThemeColorToken as r, ThemeBorderToken as o, ThemeSpaceToken as a, ThemeRadiusToken as l, ThemeFontToken as t } from "../../theme/theme-tokens.js";
 import { ThemeColorVariable as e } from "../../theme/theme-types.js";
 import { defineRecipe as i } from "@chakra-ui/react";
-const a = {
+const n = {
   fontFamily: t.Body,
   color: r.OnSurface,
   border: o.XSmall,
   borderColor: r.OnSurfaceBorder,
   background: r.Surface,
   borderRadius: l.Small,
-  paddingX: n.Medium,
-  paddingY: "12px",
+  paddingX: a.Small,
+  paddingY: a.Small,
   width: "100%",
   minHeight: "5rem",
   lineHeight: "1.375",
@@ -47,7 +47,7 @@ const a = {
     boxShadow: `0 0 0 4px ${e.InfoContainer}`
   }
 }, c = {
-  ...a,
+  ...n,
   border: o.XSmall,
   borderColor: "transparent",
   _hover: void 0,
@@ -84,7 +84,7 @@ const a = {
 }, f = i({
   variants: {
     variant: {
-      unstyled: a,
+      unstyled: n,
       ghost: c
     }
   },

package/dist/components/textarea/textarea.d.ts

@@ -8,7 +8,7 @@ type CustomProperties = {
     isRequired?: boolean;
 };
 type CustomStyleProps = CustomChakraBoxProps & LayoutProps & MarginProps & PaddingProps & CustomProperties;
-type ChakraTextareaProperties = Pick<ChakraTextareaProps, "as" | "id" | "name" | "placeholder" | "rows" | "value" | "defaultValue" | "onChange" | "onBlur" | "onFocus" | "onKeyDown" | "resize" | "autoresize">;
+type ChakraTextareaProperties = Pick<ChakraTextareaProps, "id" | "name" | "placeholder" | "rows" | "value" | "defaultValue" | "onChange" | "onBlur" | "onFocus" | "onKeyDown" | "resize" | "autoresize">;
 export type TextareaProps = ChakraTextareaProperties & CustomStyleProps;
 export declare const Textarea: React.ForwardRefExoticComponent<ChakraTextareaProperties & CustomChakraBoxProps & LayoutProps & MarginProps & PaddingProps & CustomProperties & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../lib/components/textarea/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5F,OAAO,EAA8B,KAAK,aAAa,IAAI,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACzG,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,gBAAgB,GAAG;IACvB,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAG/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,KAAK,gBAAgB,GAAG,oBAAoB,GAAG,WAAW,GAAG,WAAW,GAAG,YAAY,GAAG,gBAAgB,CAAC;AAE3G,KAAK,wBAAwB,GAAG,IAAI,CACnC,mBAAmB,EACjB,IAAI,GACJ,IAAI,GACJ,MAAM,GACN,aAAa,GACb,MAAM,GACN,OAAO,GACP,cAAc,GACd,UAAU,GACV,QAAQ,GACR,SAAS,GACT,WAAW,GACX,QAAQ,GACR,YAAY,CACd,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,wBAAwB,GAAG,gBAAgB,CAAC;AAExE,eAAO,MAAM,QAAQ,2LAcnB,CAAC"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../lib/components/textarea/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5F,OAAO,EAA8B,KAAK,aAAa,IAAI,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACzG,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,gBAAgB,GAAG;IACvB,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAG/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,KAAK,gBAAgB,GAAG,oBAAoB,GAAG,WAAW,GAAG,WAAW,GAAG,YAAY,GAAG,gBAAgB,CAAC;AAE3G,KAAK,wBAAwB,GAAG,IAAI,CACnC,mBAAmB,EACjB,IAAI,GACJ,MAAM,GACN,aAAa,GACb,MAAM,GACN,OAAO,GACP,cAAc,GACd,UAAU,GACV,QAAQ,GACR,SAAS,GACT,WAAW,GACX,QAAQ,GACR,YAAY,CACd,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,wBAAwB,GAAG,gBAAgB,CAAC;AAExE,eAAO,MAAM,QAAQ,2LAanB,CAAC"}

package/dist/components/textarea/textarea.js

@@ -1,21 +1,20 @@
-import { jsx as f } from "react/jsx-runtime";
-import { Textarea as m } from "@chakra-ui/react";
-import l from "react";
-const u = l.forwardRef((e, r) => {
-  const { isDisabled: a, isReadOnly: t, isRequired: s, resize: i, as: o, ...d } = e;
-  return /* @__PURE__ */ f(
-    m,
+import { jsx as d } from "react/jsx-runtime";
+import { Textarea as f } from "@chakra-ui/react";
+import m from "react";
+const p = m.forwardRef((e, r) => {
+  const { isDisabled: a, isReadOnly: t, isRequired: i, resize: s, ...o } = e;
+  return /* @__PURE__ */ d(
+    f,
     {
-      resize: i,
+      resize: s,
       ref: r,
       disabled: a,
       readOnly: t,
-      required: s,
-      as: o,
-      ...d
+      required: i,
+      ...o
     }
   );
 });
 export {
-  u as Textarea
+  p as Textarea
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@caspeco/casper-ui-library",
-	"version": "9.0.0-alpha.2",
+	"version": "9.0.0-alpha.4",
 	"prettier": "@caspeco/prettier-config",
 	"type": "module",
 	"sideEffects": false,