@rescui/collapse 0.8.2 → 0.8.4-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.10

package/lib/use-safe-id.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare function useFallbackId(): number;
+export declare const useSafeId: typeof React.useId | typeof useFallbackId;

package/lib/use-safe-id.js

@@ -0,0 +1,10 @@
+import React, { useState } from 'react';
+let nextFallbackId = 0;
+
+function useFallbackId() {
+  const [id] = useState(() => nextFallbackId++);
+  return id;
+}
+
+const useSafeId = React.useId ?? useFallbackId;
+export { useFallbackId, useSafeId };

package/llm/components/accordion.md

@@ -173,57 +173,42 @@ render(<Demo />);
 
 ##### Demo
 
-Instead of separate classes, it may be a single class with `@media` queries inside:
+Use the controls to see the effect at different viewport widths.
 
 ```tsx
 import { Accordion, Collapse } from '@rescui/collapse';
 
-const MyAccordion = ({ className }) => {
+const MyAccordion = () => {
   return (
-    <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
-      <Accordion className={className}>
-        <Collapse title={'Collapse 1'}>Content</Collapse>
-        <Collapse title={'Collapse 2'}>Content</Collapse>
-        <Collapse title={'Collapse 3'}>Content</Collapse>
-      </Accordion>
-    </div>
+    <Accordion className="my-accordion-demo">
+      <Collapse title={'Collapse 1'}>Content</Collapse>
+      <Collapse title={'Collapse 2'}>Content</Collapse>
+      <Collapse title={'Collapse 3'}>Content</Collapse>
+    </Accordion>
   );
 };
 
-render(
-  <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-    <div>
-      <p>Default:</p>
-      <MyAccordion />
-    </div>
-    <div>
-      <p>Var1:</p>
-      <MyAccordion className={`my-accordion-var-1`} />
-    </div>
-    <div>
-      <p>Var1 & Var2 combined:</p>
-      <MyAccordion className={`my-accordion-var-1 my-accordion-var-2`} />
-    </div>
-  </div>
-);
+render(<MyAccordion />);
 ```
 
 ```postcss attached
 @import '@rescui/collapse/lib/public-api.p.css';
 
-.my-accordion-var-1 {
-  @mixin rs-accordion-size-l;
-  @mixin rs-accordion-mode-rock;
-  @mixin rs-accordion-border-bottom-true;
-  @mixin rs-accordion-disable-left-padding-true;
-  @mixin rs-accordion-gap-24;
-}
-.my-accordion-var-2 {
-  @mixin rs-accordion-size-s;
-  @mixin rs-accordion-mode-clear;
-  @mixin rs-accordion-border-bottom-false;
-  @mixin rs-accordion-disable-left-padding-false;
-  @mixin rs-accordion-gap-8;
+.my-accordion-demo {
+  @media (max-width: 640px) {
+    @mixin rs-accordion-size-l;
+    @mixin rs-accordion-mode-rock;
+    @mixin rs-accordion-border-bottom-true;
+    @mixin rs-accordion-disable-left-padding-true;
+    @mixin rs-accordion-gap-24;
+  }
+  @media (max-width: 500px) {
+    @mixin rs-accordion-size-s;
+    @mixin rs-accordion-mode-clear;
+    @mixin rs-accordion-border-bottom-false;
+    @mixin rs-accordion-disable-left-padding-false;
+    @mixin rs-accordion-gap-8;
+  }
 }
 ```
 

package/llm/components/collapse.md

@@ -81,53 +81,38 @@ import { Collapse } from '@rescui/collapse';
 
 #### Demo
 
-Instead of separate classes, it may be a single class with `@media` queries inside:
+Use the controls to see the effect at different viewport widths.
 
 ```tsx
 import { Collapse } from '@rescui/collapse';
 
-const MyCollapse = ({ className }) => {
+const MyCollapse = () => {
   return (
-    <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
-      <Collapse title={'Title'} className={className}>
-        Content
-      </Collapse>
-    </div>
+    <Collapse title={'Title'} className="my-collapse-demo">
+      Content
+    </Collapse>
   );
 };
 
-render(
-  <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-    <div>
-      <p>Default:</p>
-      <MyCollapse />
-    </div>
-    <div>
-      <p>Var1:</p>
-      <MyCollapse className={`my-collapse-var-1`} />
-    </div>
-    <div>
-      <p>Var1 & Var2 combined:</p>
-      <MyCollapse className={`my-collapse-var-1 my-collapse-var-2`} />
-    </div>
-  </div>
-);
+render(<MyCollapse />);
 ```
 
 ```postcss attached
 @import '@rescui/collapse/lib/public-api.p.css';
 
-.my-collapse-var-1 {
-  @mixin rs-collapse-size-l;
-  @mixin rs-collapse-mode-rock;
-  @mixin rs-collapse-border-bottom-true;
-  @mixin rs-collapse-disable-left-padding-false;
-}
-.my-collapse-var-2 {
-  @mixin rs-collapse-size-s;
-  @mixin rs-collapse-mode-clear;
-  @mixin rs-collapse-border-bottom-false;
-  @mixin rs-collapse-disable-left-padding-true;
+.my-collapse-demo {
+  @media (max-width: 640px) {
+    @mixin rs-collapse-size-l;
+    @mixin rs-collapse-mode-rock;
+    @mixin rs-collapse-border-bottom-true;
+    @mixin rs-collapse-disable-left-padding-false;
+  }
+  @media (max-width: 500px) {
+    @mixin rs-collapse-size-s;
+    @mixin rs-collapse-mode-clear;
+    @mixin rs-collapse-border-bottom-false;
+    @mixin rs-collapse-disable-left-padding-true;
+  }
 }
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/collapse",
-  "version": "0.8.2",
+  "version": "0.8.4-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.10+dbbefd7b8",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -17,25 +17,26 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/use-resize-observer": "^0.3.2",
-    "classnames": "^2.2.6"
+    "@rescui/use-resize-observer": "0.3.4-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.10+dbbefd7b8",
+    "classnames": "^2.2.6",
+    "react-compiler-runtime": "^1.0.0"
   },
   "peerDependencies": {
     "@rescui/ui-contexts": "^0.6.0",
     "prop-types": "^15",
-    "react": ">=16.8.0 <20"
+    "react": ">=17.0.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.3.2",
-    "@rescui/scripts": "^0.5.2",
-    "@rescui/typography": "^0.27.2",
-    "@rescui/visual-regression": "^0.1.4",
+    "@rescui/colors": "0.3.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
+    "@rescui/scripts": "0.5.2",
+    "@rescui/typography": "0.27.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
+    "@rescui/visual-regression": "0.1.4",
     "@types/classnames": "^2.2.11"
   },
   "scripts": {
-    "build": "rescui-scripts build && yarn run build-pcss-api",
+    "build": "rescui-scripts build --react-compiler-target 17 && yarn run build-pcss-api",
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "d60e4f3491c7cdb9ef684d08940869914492a61b"
+  "gitHead": "dbbefd7b8e24da18262edf3baffa35039ae01af3"
 }