@gnist/design-system 2.0.1 → 2.0.3

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.3](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@2.0.2...@gnist/design-system@2.0.3) (2025-01-24)
+
+**Note:** Version bump only for package @gnist/design-system
+
+## [2.0.2](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@2.0.1...@gnist/design-system@2.0.2) (2025-01-22)
+
+### Bug Fixes
+
+* set uniqueKey prop on TextSkeleton component ([ec276b0](https://github.com/mollerdigital/design-system-design-system/commit/ec276b0bdeff238723f3dba13dd2bd7453c45604))
+
 ## [2.0.1](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@2.0.0...@gnist/design-system@2.0.1) (2025-01-22)
 
 ### Bug Fixes

package/dist/building-blocks/skeletons/TextSkeleton.cjs

@@ -5,11 +5,15 @@ const jsxRuntime = require("react/jsx-runtime");
 const Row = require("../../utilities/layout/Row.cjs");
 const tokens_css_js = require("@gnist/themes/tokens.css.js");
 const reactContentLoader = require("react-content-loader");
+const React = require("react");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const reactContentLoader__default = /* @__PURE__ */ _interopDefaultCompat(reactContentLoader);
 const ContentLoader = reactContentLoader__default.default;
-const TextSkeleton = ({ className, height = "1em", width = "100%" }) => jsxRuntime.jsx(Row.Row, { className, style: {
-  height: `calc(1em * ${tokens_css_js.tokens.typeface["line-height"]})`,
-  width
-}, verticalAlign: "center", horizontalAlign: "end", children: jsxRuntime.jsx(ContentLoader, { height, width, title: "", backgroundColor: tokens_css_js.tokens.color.loader, foregroundColor: tokens_css_js.tokens.color["on-loader"], children: jsxRuntime.jsx("rect", { x: "0", y: "0", rx: "4", ry: "6.7", height, width }) }) });
+const TextSkeleton = ({ className, height = "1em", width = "100%" }) => {
+  const uniqueKey = React.useId();
+  return jsxRuntime.jsx(Row.Row, { className, style: {
+    height: `calc(1em * ${tokens_css_js.tokens.typeface["line-height"]})`,
+    width
+  }, verticalAlign: "center", horizontalAlign: "end", children: jsxRuntime.jsx(ContentLoader, { uniqueKey, height, width, title: "", backgroundColor: tokens_css_js.tokens.color.loader, foregroundColor: tokens_css_js.tokens.color["on-loader"], children: jsxRuntime.jsx("rect", { x: "0", y: "0", rx: "4", ry: "6.7", height, width }) }) });
+};
 exports.TextSkeleton = TextSkeleton;

package/dist/building-blocks/skeletons/TextSkeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextSkeleton.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/skeletons/TextSkeleton.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,kCAItB,iBAAiB,4CAqBnB,CAAC"}
+{"version":3,"file":"TextSkeleton.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/skeletons/TextSkeleton.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,iBAAiB;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,kCAItB,iBAAiB,4CAiCnB,CAAC"}

package/dist/building-blocks/skeletons/TextSkeleton.js

@@ -3,11 +3,15 @@ import { jsx } from "react/jsx-runtime";
 import { Row } from "../../utilities/layout/Row.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
 import reactContentLoader from "react-content-loader";
+import { useId } from "react";
 const ContentLoader = reactContentLoader;
-const TextSkeleton = ({ className, height = "1em", width = "100%" }) => jsx(Row, { className, style: {
-  height: `calc(1em * ${tokens.typeface["line-height"]})`,
-  width
-}, verticalAlign: "center", horizontalAlign: "end", children: jsx(ContentLoader, { height, width, title: "", backgroundColor: tokens.color.loader, foregroundColor: tokens.color["on-loader"], children: jsx("rect", { x: "0", y: "0", rx: "4", ry: "6.7", height, width }) }) });
+const TextSkeleton = ({ className, height = "1em", width = "100%" }) => {
+  const uniqueKey = useId();
+  return jsx(Row, { className, style: {
+    height: `calc(1em * ${tokens.typeface["line-height"]})`,
+    width
+  }, verticalAlign: "center", horizontalAlign: "end", children: jsx(ContentLoader, { uniqueKey, height, width, title: "", backgroundColor: tokens.color.loader, foregroundColor: tokens.color["on-loader"], children: jsx("rect", { x: "0", y: "0", rx: "4", ry: "6.7", height, width }) }) });
+};
 export {
   TextSkeleton
 };

package/dist/components/inputs/dropdowns/SelectBase.cjs

@@ -7,13 +7,13 @@ const InputHelperText = require("../../../building-blocks/inputs/InputHelperText
 require("../../../utilities/layout/Row.cjs");
 require("@gnist/themes/tokens.css.js");
 require("react-content-loader");
+const React = require("react");
 const shared = require("../shared.cjs");
 require("../../../foundation/iconography/ExtraIconsProvider.cjs");
 require("../../../foundation/iconography/IconVariantProvider.cjs");
 require("../../../foundation/iconography/icons.cjs");
 const Icon = require("../../../foundation/iconography/Icon.cjs");
 require("../../../foundation/typography/index.cjs");
-const React = require("react");
 const classNames = require("classnames");
 require("../../../foundation/logos/Logo.css.cjs");
 const atoms_css_js = require("@gnist/themes/atoms.css.js");

package/dist/components/inputs/dropdowns/SelectBase.js

@@ -5,13 +5,13 @@ import { InputHelperText } from "../../../building-blocks/inputs/InputHelperText
 import "../../../utilities/layout/Row.js";
 import "@gnist/themes/tokens.css.js";
 import "react-content-loader";
+import { useState } from "react";
 import { useSelectInputLogic, getSelectInputProps } from "../shared.js";
 import "../../../foundation/iconography/ExtraIconsProvider.js";
 import "../../../foundation/iconography/IconVariantProvider.js";
 import "../../../foundation/iconography/icons.js";
 import { Icon } from "../../../foundation/iconography/Icon.js";
 import "../../../foundation/typography/index.js";
-import { useState } from "react";
 import classNames from "classnames";
 import "../../../foundation/logos/Logo.css.js";
 import { atoms } from "@gnist/themes/atoms.css.js";

package/dist/components/inputs/textFields/TextArea.cjs

@@ -6,12 +6,12 @@ const InputHelperText = require("../../../building-blocks/inputs/InputHelperText
 require("../../../utilities/layout/Row.cjs");
 require("@gnist/themes/tokens.css.js");
 require("react-content-loader");
+const React = require("react");
 require("../../../foundation/iconography/ExtraIconsProvider.cjs");
 require("../../../foundation/iconography/IconVariantProvider.cjs");
 require("../../../foundation/iconography/icons.cjs");
 const Icon = require("../../../foundation/iconography/Icon.cjs");
 require("../../../foundation/typography/index.cjs");
-const React = require("react");
 const classNames = require("classnames");
 require("../../../foundation/logos/Logo.css.cjs");
 const atoms_css_js = require("@gnist/themes/atoms.css.js");

package/dist/components/inputs/textFields/TextArea.js

@@ -4,12 +4,12 @@ import { InputHelperText } from "../../../building-blocks/inputs/InputHelperText
 import "../../../utilities/layout/Row.js";
 import "@gnist/themes/tokens.css.js";
 import "react-content-loader";
+import { forwardRef } from "react";
 import "../../../foundation/iconography/ExtraIconsProvider.js";
 import "../../../foundation/iconography/IconVariantProvider.js";
 import "../../../foundation/iconography/icons.js";
 import { Icon } from "../../../foundation/iconography/Icon.js";
 import "../../../foundation/typography/index.js";
-import { forwardRef } from "react";
 import classNames from "classnames";
 import "../../../foundation/logos/Logo.css.js";
 import { atoms } from "@gnist/themes/atoms.css.js";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gnist/design-system",
-    "version": "2.0.1",
+    "version": "2.0.3",
     "license": "UNLICENSED",
     "type": "module",
     "main": "dist/index.cjs",
@@ -49,7 +49,7 @@
     "dependencies": {
         "@formkit/auto-animate": "^0.7.0",
         "@gnist/component-utils": "3.0.1",
-        "@gnist/themes": "^2.0.0",
+        "@gnist/themes": "^2.0.1",
         "@mui/base": "^5.0.0-beta.36",
         "@vanilla-extract/css": "^1.14.1",
         "@vanilla-extract/css-utils": "^0.1.3",
@@ -113,5 +113,5 @@
             "optional": true
         }
     },
-    "gitHead": "f80d7051e82b744d81f9cedb0262f72b84bd04ca"
+    "gitHead": "f404c9184b953e0af3726eb51f0913944fd5a5c8"
 }