@crystallize/design-system 1.23.0 → 1.23.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @crystallize/design-system
 
+## 1.23.1
+
+### Patch Changes
+
+- 74818d2: This pr is adding a basic components and mutations to add an item to specific flow
+  query getFlows was moved to common hooks as it is used in different views
+
+  Also prop classname was added to Select.Container component to allow better styling
+
 ## 1.23.0
 
 ### Minor Changes

package/dist/index.css

@@ -1033,11 +1033,14 @@
 }
 
 /* src/dialog/dialog.css */
+:root {
+  --dialog-z-index: 100;
+}
 .c-dialog {
   position: fixed;
   left: 50%;
   top: 50%;
-  z-index: 100;
+  z-index: var(--dialog-z-index);
   width: auto;
   min-width: 25%;
   max-width: 800px;
@@ -1059,7 +1062,7 @@
 .c-dialog-overlay {
   position: fixed;
   inset: 0px;
-  z-index: 100;
+  z-index: var(--dialog-z-index);
   background-color: rgb(var(--c-color-overlay) / 0.3);
 }
 .c-dialog-icon-wrapper {
@@ -1619,6 +1622,9 @@
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.c-dialog ~ div > .c-select-content {
+  z-index: calc(var(--dialog-z-index) + 1);
+}
 
 /* src/slider/slider.css */
 .c-slider-root {

package/dist/index.d.ts

@@ -286,6 +286,7 @@ declare const Select: {
     } & class_variance_authority.VariantProps<(props?: ({
         size?: "xs" | "sm" | "md" | "lg" | null | undefined;
     } & class_variance_authority_dist_types.ClassProp) | undefined) => string> & {
+        triggerClassName?: string | undefined;
         disabled?: boolean | undefined;
         id?: string | undefined;
         placeholder?: string | undefined;

package/dist/index.js

@@ -39536,13 +39536,13 @@ var selectTriggerStyles = (0, import_class_variance_authority17.cva)("c-select-t
   }
 });
 var SelectContainer = (0, import_react111.forwardRef)(
-  ({ children, id, placeholder, disabled, size, ...delegated }, ref) => {
+  ({ children, id, placeholder, disabled, size, triggerClassName, ...delegated }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(SelectPrimitives2.Root, {
       ...delegated,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(SelectPrimitives2.Trigger, {
           ref,
-          className: selectTriggerStyles({ size }),
+          className: selectTriggerStyles({ size, className: triggerClassName }),
           disabled,
           id,
           children: [

package/dist/index.mjs

@@ -224,13 +224,13 @@ var selectTriggerStyles = cva4("c-select-trigger", {
   }
 });
 var SelectContainer = forwardRef4(
-  ({ children, id, placeholder, disabled, size, ...delegated }, ref) => {
+  ({ children, id, placeholder, disabled, size, triggerClassName, ...delegated }, ref) => {
     return /* @__PURE__ */ jsxs3(SelectPrimitives2.Root, {
       ...delegated,
       children: [
         /* @__PURE__ */ jsxs3(SelectPrimitives2.Trigger, {
           ref,
-          className: selectTriggerStyles({ size }),
+          className: selectTriggerStyles({ size, className: triggerClassName }),
           disabled,
           id,
           children: [

package/dist/{rich-text-editor-OUGDPSPV.css → rich-text-editor-EVP7CTRQ.css}

@@ -1582,11 +1582,14 @@
 }
 
 /* src/dialog/dialog.css */
+:root {
+  --dialog-z-index: 100;
+}
 .c-dialog {
   position: fixed;
   left: 50%;
   top: 50%;
-  z-index: 100;
+  z-index: var(--dialog-z-index);
   width: auto;
   min-width: 25%;
   max-width: 800px;
@@ -1608,7 +1611,7 @@
 .c-dialog-overlay {
   position: fixed;
   inset: 0px;
-  z-index: 100;
+  z-index: var(--dialog-z-index);
   background-color: rgb(var(--c-color-overlay) / 0.3);
 }
 .c-dialog-icon-wrapper {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.23.0",
+  "version": "1.23.1",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/dialog/dialog.css

@@ -1,9 +1,18 @@
+:root {
+  --dialog-z-index: 100;
+}
+
 .c-dialog {
-  @apply fixed left-1/2 top-1/2 z-[100] w-auto min-w-[25%] max-w-[800px] rounded-lg bg-elevate p-14 leading-6 text-gray-500-400 shadow;
+  @apply fixed
+  left-1/2 top-1/2
+  z-[--dialog-z-index]
+  w-auto min-w-[25%] max-w-[800px] rounded-lg bg-elevate p-14 leading-6 text-gray-500-400 shadow;
   transform: translate(-50%, -50%);
 
   &-overlay {
-    @apply fixed inset-0 z-[100] bg-overlay;
+    @apply fixed
+    inset-0 z-[--dialog-z-index]
+    bg-overlay;
   }
 
   &-icon-wrapper {

package/src/select/select-root.tsx

@@ -21,16 +21,22 @@ const selectTriggerStyles = cva('c-select-trigger', {
 export type SelectRef = HTMLButtonElement;
 export type SelectProps = ComponentProps<typeof SelectPrimitives.Root> &
   VariantProps<typeof selectTriggerStyles> & {
+    triggerClassName?: string;
     disabled?: boolean;
     id?: string;
     placeholder?: string;
   };
 
 export const SelectContainer = forwardRef<SelectRef, SelectProps>(
-  ({ children, id, placeholder, disabled, size, ...delegated }, ref) => {
+  ({ children, id, placeholder, disabled, size, triggerClassName, ...delegated }, ref) => {
     return (
       <SelectPrimitives.Root {...delegated}>
-        <SelectPrimitives.Trigger ref={ref} className={selectTriggerStyles({ size })} disabled={disabled} id={id}>
+        <SelectPrimitives.Trigger
+          ref={ref}
+          className={selectTriggerStyles({ size, className: triggerClassName })}
+          disabled={disabled}
+          id={id}
+        >
           <SelectPrimitives.Value placeholder={<span className="c-select-value">{placeholder ?? 'Select...'}</span>} />
           <Icon.Arrow />
         </SelectPrimitives.Trigger>

package/src/select/select.css

@@ -43,3 +43,9 @@
     @apply bg-gray-50-900 outline-none;
   }
 }
+
+/*This is a workaround to handle z-index on dialog component that is also rendered in portal on the same level*/
+/*Styles added to .c-dialog are added to parent div as inline styles, therefore ~ div > .c-select-content*/
+.c-dialog ~ div > .c-select-content {
+  z-index: calc(var(--dialog-z-index) + 1);
+}