@crystallize/design-system 1.24.12 → 1.24.14

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @crystallize/design-system
 
+## 1.24.14
+
+### Patch Changes
+
+- a0aa5b7: It was found that when adding a content to richtext component via the API, the content transformer can turn the resulting `json` into an array of array of nodes, which we do not expect in the UI. In the UI we always work with flat list of block nodes as the nested array does not have any semantic meaning. To fix it now we check if the root element is an array and then we flat it.
+
+## 1.24.13
+
+### Patch Changes
+
+- 7b11867: Add popover to the exported components so I can be used.
+
 ## 1.24.12
 
 ### Patch Changes

package/dist/index.css

@@ -1517,6 +1517,43 @@
   fill: #fff;
 }
 
+/* src/popover/popover.css */
+.c-popover-content {
+  border-radius: 0.25rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
+  font-size: 0.75rem;
+  line-height: 1rem;
+  --tw-text-opacity: 1;
+  color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity));
+  --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
+  --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+.c-popover-content:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.c-popover-close {
+  position: absolute;
+  right: 0.25rem;
+  top: 0.25rem;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  border-width: 0px;
+  background-color: transparent;
+  padding: 0.25rem;
+}
+.c-popover-arrow {
+  fill: #fff;
+}
+
 /* src/progress/progress.css */
 .c-progress-root {
   position: relative;

package/dist/index.d.ts

@@ -10,6 +10,7 @@ import * as CollapsiblePrimitives from '@radix-ui/react-collapsible';
 import { CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ProgressPrimitives from '@radix-ui/react-progress';
 import * as _radix_ui_react_select from '@radix-ui/react-select';
 import * as SliderPrimitive from '@radix-ui/react-slider';
@@ -284,6 +285,15 @@ type LabelRef = HTMLLabelElement;
 type LabelProps = LabelHTMLAttributes<LabelRef>;
 declare const Label: react.ForwardRefExoticComponent<LabelProps & react.RefAttributes<HTMLLabelElement>>;
 
+type PopoverProps = Pick<PopoverPrimitive.PopoverProps, 'open' | 'onOpenChange'> & Pick<PopoverPrimitive.PortalProps, 'container'> & PopoverPrimitive.PopperContentProps & {
+    children: ReactNode;
+    closeButton?: boolean | JSX.Element;
+    hasArrow?: boolean;
+    content: ReactNode;
+    onOpenAutoFocus?: (e: Event) => void;
+};
+declare function Popover({ children, closeButton, content, side, open, onOpenChange, className, container, hasArrow, ...delegatedContent }: PopoverProps): JSX.Element;
+
 type ProgressProps = ProgressPrimitives.ProgressProps;
 declare function Progress({ className, value }: ProgressProps): JSX.Element;
 
@@ -612,4 +622,4 @@ declare const tokens: {
     card: string;
 };
 
-export { ActionMenu, Avatar, Button, ButtonProps, Card, Checkbox, CheckboxProps, CheckboxRef, Collapsible, CollapsibleTrigger, Container, CrystallizeRichText, CrystallizeRichTextActionMenuItem, Dialog, DropdownMenu, DropdownMenuRootProps, Icon, IconButton, IconButtonProps, InlineRadio, Input, InputWithLabel, Label, Progress, Radio, RichTextEditor, Select, Slider, Spinner, StackIcon, Switch, Tag, ToastProps, Tooltip, buttonTokens, cardToken, destroyAll, showConfirm, showDialog, showError, showInfo, showWarning, toast, tokens };
+export { ActionMenu, Avatar, Button, ButtonProps, Card, Checkbox, CheckboxProps, CheckboxRef, Collapsible, CollapsibleTrigger, Container, CrystallizeRichText, CrystallizeRichTextActionMenuItem, Dialog, DropdownMenu, DropdownMenuRootProps, Icon, IconButton, IconButtonProps, InlineRadio, Input, InputWithLabel, Label, Popover, Progress, Radio, RichTextEditor, Select, Slider, Spinner, StackIcon, Switch, Tag, ToastProps, Tooltip, buttonTokens, cardToken, destroyAll, showConfirm, showDialog, showError, showInfo, showWarning, toast, tokens };