@uniformdev/design-system 17.7.1-alpha.181 → 17.7.1-alpha.211

package/dist/esm/index.js

@@ -390,7 +390,7 @@ var inputIcon = css2`
   display: flex;
   position: absolute;
   inset: 0 var(--spacing-base) 0 auto;
-  pointer-event: one;
+  pointer-events: none;
 `;
 var inputWithIcon = css2`
   padding-right: var(--spacing-2xl);
@@ -490,6 +490,12 @@ var textarea = css2`
   ${input("wrap")};
   display: block;
 `;
+var inputSelectCompact = css2`
+  font-size: var(--fs-xs);
+  padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-xs);
+  border-color: var(--gray-300);
+  background-position: right var(--spacing-xs) center;
+`;
 
 // src/styles/Animations.styles.ts
 import { keyframes } from "@emotion/react";
@@ -2757,8 +2763,8 @@ import { CgChevronRight } from "react-icons/cg";
 
 // src/components/Drawer/Drawer.styles.ts
 import { css as css27, keyframes as keyframes2 } from "@emotion/react";
-var drawerStyles = css27`
-  background-color: var(--gray-50);
+var drawerStyles = (bgColor = "var(--white)") => css27`
+  background-color: ${bgColor};
   display: flex;
   gap: var(--spacing-sm);
   flex-direction: column;
@@ -2778,8 +2784,8 @@ var drawerHeaderStyles = css27`
   font-size: var(--fs-lg);
   font-weight: var(--fw-bold);
 `;
-var drawerRendererStyles = css27`
-  position: absolute;
+var drawerRendererStyles = (position) => css27`
+  position: ${position};
   inset: 0;
   overflow: hidden;
   z-index: var(--z-10);
@@ -2889,28 +2895,39 @@ function isEqualDrawerInstance(a, b) {
 // src/components/Drawer/Drawer.tsx
 import { jsx as jsx30, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
 var Drawer = React10.forwardRef(
-  ({ id, stackId, instanceKey, onRequestClose, header, children }, ref) => {
+  ({ id, stackId, instanceKey, onRequestClose, header, bgColor, children }, ref) => {
     const { registerDrawer, unregisterDrawer } = useDrawer();
     const closeButtonRef = useRef2(null);
     const component = useMemo(() => {
       const headerId = `dialog-header-${stackId}-${id}`;
-      return /* @__PURE__ */ jsxs17("div", { ref, role: "dialog", tabIndex: -1, "aria-labelledby": headerId, css: drawerStyles, children: [
-        /* @__PURE__ */ jsx30(
-          Button,
-          {
-            ref: closeButtonRef,
-            type: "button",
-            onClick: onRequestClose,
-            css: drawerCloseButtonStyles,
-            title: "Close dialog",
-            buttonType: "ghost",
-            children: /* @__PURE__ */ jsx30(Icon, { icon: CgChevronRight, iconColor: "gray", size: "1.5rem" })
-          }
-        ),
-        header ? /* @__PURE__ */ jsx30("div", { id: headerId, css: drawerHeaderStyles, children: header }) : null,
-        /* @__PURE__ */ jsx30("div", { css: drawerInnerStyles, children })
-      ] });
-    }, [children, header, id, stackId, onRequestClose, ref]);
+      return /* @__PURE__ */ jsxs17(
+        "div",
+        {
+          ref,
+          id,
+          role: "dialog",
+          tabIndex: -1,
+          "aria-labelledby": headerId,
+          css: drawerStyles(bgColor),
+          children: [
+            /* @__PURE__ */ jsx30(
+              Button,
+              {
+                ref: closeButtonRef,
+                type: "button",
+                onClick: onRequestClose,
+                css: drawerCloseButtonStyles,
+                title: "Close dialog",
+                buttonType: "ghost",
+                children: /* @__PURE__ */ jsx30(Icon, { icon: CgChevronRight, iconColor: "gray", size: "1.5rem" })
+              }
+            ),
+            header ? /* @__PURE__ */ jsx30("div", { id: headerId, css: drawerHeaderStyles, children: header }) : null,
+            /* @__PURE__ */ jsx30("div", { css: drawerInnerStyles, children })
+          ]
+        }
+      );
+    }, [children, header, id, stackId, bgColor, onRequestClose, ref]);
     useEffect4(() => {
       registerDrawer({
         drawer: {
@@ -2941,6 +2958,7 @@ var maxLayeringInPx = 64;
 var idealDistanceBetweenLayersInPx = 16;
 var DrawerRenderer = ({
   stackId,
+  position = "absolute",
   width = "45%",
   minWidth = "0",
   maxWidth = "100%",
@@ -2951,7 +2969,7 @@ var DrawerRenderer = ({
   if (drawersToRender.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx31("div", { css: drawerRendererStyles, ...otherProps, children: drawersToRender.map(({ component, id, stackId: stackId2, onRequestClose }, index) => /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx31("div", { css: drawerRendererStyles(position), ...otherProps, children: drawersToRender.map(({ component, id, stackId: stackId2, onRequestClose }, index) => /* @__PURE__ */ jsx31(
     DrawerWrapper,
     {
       index,
@@ -3624,6 +3642,7 @@ var InputSelect = ({
   warningMessage,
   showLabel = true,
   labelCta,
+  compact,
   classNameContainer,
   classNameControl,
   classNameLabel,
@@ -3656,6 +3675,7 @@ var InputSelect = ({
               input("wrap"),
               inputSelect,
               errorMessage ? inputError : void 0,
+              compact ? inputSelectCompact : void 0,
               typeof classNameControl === "object" ? classNameControl : void 0
             ],
             className: typeof classNameControl === "string" ? classNameControl : "",

package/dist/index.d.ts

@@ -403,6 +403,7 @@ declare const useDrawer: () => DrawerContextValue;
 interface DrawerProps extends Omit<DrawerItem, 'component'> {
     header?: React__default.ReactNode;
     children?: React__default.ReactNode;
+    bgColor?: 'var(--gray-50)' | 'var(--white)';
 }
 /**
  * A drawer component that opens from the right side of is parent. The component is used in combination with DrawerProvider and DrawerRenderer
@@ -426,8 +427,12 @@ interface DrawerRendererProps extends Omit<React__default.HTMLAttributes<HTMLDiv
      * @default '100%'
      */
     maxWidth?: string;
+    /** Sets the css position value
+     * @default 'absolute'
+     */
+    position?: 'absolute' | 'fixed';
 }
-declare const DrawerRenderer: ({ stackId, width, minWidth, maxWidth, ...otherProps }: DrawerRendererProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
+declare const DrawerRenderer: ({ stackId, position, width, minWidth, maxWidth, ...otherProps }: DrawerRendererProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
 interface DrawerRendererItemProps extends React__default.HTMLAttributes<HTMLDivElement> {
     index: number;
     totalDrawers: number;
@@ -709,6 +714,8 @@ type InputSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
     warningMessage?: string;
     /** (optional) allows react components to be added inline with the label element */
     labelCta?: JSX.Element;
+    /** (optional) styles the component in a compact format */
+    compact?: boolean;
     /**
      * (optional) sets an overriding classname on the container element
      * @deprecated */
@@ -726,7 +733,7 @@ type InputSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
  * Input Select Component
  * @example <InputSelect label="my label" options={[{label: "option 1"}, {label: "option 2"}]} />
  */
-declare const InputSelect: ({ label, defaultOption, options, caption, errorMessage, warningMessage, showLabel, labelCta, classNameContainer, classNameControl, classNameLabel, ...props }: InputSelectProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const InputSelect: ({ label, defaultOption, options, caption, errorMessage, warningMessage, showLabel, labelCta, compact, classNameContainer, classNameControl, classNameLabel, ...props }: InputSelectProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type InputToggleProps = React$1.HTMLAttributes<HTMLInputElement> & {
     /** sets the label value */

package/dist/index.js

@@ -527,7 +527,7 @@ var inputIcon = import_react3.css`
   display: flex;
   position: absolute;
   inset: 0 var(--spacing-base) 0 auto;
-  pointer-event: one;
+  pointer-events: none;
 `;
 var inputWithIcon = import_react3.css`
   padding-right: var(--spacing-2xl);
@@ -627,6 +627,12 @@ var textarea = import_react3.css`
   ${input("wrap")};
   display: block;
 `;
+var inputSelectCompact = import_react3.css`
+  font-size: var(--fs-xs);
+  padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-xs);
+  border-color: var(--gray-300);
+  background-position: right var(--spacing-xs) center;
+`;
 
 // src/styles/Animations.styles.ts
 var import_react4 = require("@emotion/react");
@@ -2890,8 +2896,8 @@ var import_cg7 = require("react-icons/cg");
 
 // src/components/Drawer/Drawer.styles.ts
 var import_react33 = require("@emotion/react");
-var drawerStyles = import_react33.css`
-  background-color: var(--gray-50);
+var drawerStyles = (bgColor = "var(--white)") => import_react33.css`
+  background-color: ${bgColor};
   display: flex;
   gap: var(--spacing-sm);
   flex-direction: column;
@@ -2911,8 +2917,8 @@ var drawerHeaderStyles = import_react33.css`
   font-size: var(--fs-lg);
   font-weight: var(--fw-bold);
 `;
-var drawerRendererStyles = import_react33.css`
-  position: absolute;
+var drawerRendererStyles = (position) => import_react33.css`
+  position: ${position};
   inset: 0;
   overflow: hidden;
   z-index: var(--z-10);
@@ -3022,28 +3028,39 @@ function isEqualDrawerInstance(a, b) {
 // src/components/Drawer/Drawer.tsx
 var import_jsx_runtime29 = require("@emotion/react/jsx-runtime");
 var Drawer = import_react35.default.forwardRef(
-  ({ id, stackId, instanceKey, onRequestClose, header, children }, ref) => {
+  ({ id, stackId, instanceKey, onRequestClose, header, bgColor, children }, ref) => {
     const { registerDrawer, unregisterDrawer } = useDrawer();
     const closeButtonRef = (0, import_react35.useRef)(null);
     const component = (0, import_react35.useMemo)(() => {
       const headerId = `dialog-header-${stackId}-${id}`;
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ref, role: "dialog", tabIndex: -1, "aria-labelledby": headerId, css: drawerStyles, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          Button,
-          {
-            ref: closeButtonRef,
-            type: "button",
-            onClick: onRequestClose,
-            css: drawerCloseButtonStyles,
-            title: "Close dialog",
-            buttonType: "ghost",
-            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { icon: import_cg7.CgChevronRight, iconColor: "gray", size: "1.5rem" })
-          }
-        ),
-        header ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { id: headerId, css: drawerHeaderStyles, children: header }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { css: drawerInnerStyles, children })
-      ] });
-    }, [children, header, id, stackId, onRequestClose, ref]);
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        "div",
+        {
+          ref,
+          id,
+          role: "dialog",
+          tabIndex: -1,
+          "aria-labelledby": headerId,
+          css: drawerStyles(bgColor),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              Button,
+              {
+                ref: closeButtonRef,
+                type: "button",
+                onClick: onRequestClose,
+                css: drawerCloseButtonStyles,
+                title: "Close dialog",
+                buttonType: "ghost",
+                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { icon: import_cg7.CgChevronRight, iconColor: "gray", size: "1.5rem" })
+              }
+            ),
+            header ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { id: headerId, css: drawerHeaderStyles, children: header }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { css: drawerInnerStyles, children })
+          ]
+        }
+      );
+    }, [children, header, id, stackId, bgColor, onRequestClose, ref]);
     (0, import_react35.useEffect)(() => {
       registerDrawer({
         drawer: {
@@ -3074,6 +3091,7 @@ var maxLayeringInPx = 64;
 var idealDistanceBetweenLayersInPx = 16;
 var DrawerRenderer = ({
   stackId,
+  position = "absolute",
   width = "45%",
   minWidth = "0",
   maxWidth = "100%",
@@ -3084,7 +3102,7 @@ var DrawerRenderer = ({
   if (drawersToRender.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { css: drawerRendererStyles, ...otherProps, children: drawersToRender.map(({ component, id, stackId: stackId2, onRequestClose }, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { css: drawerRendererStyles(position), ...otherProps, children: drawersToRender.map(({ component, id, stackId: stackId2, onRequestClose }, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     DrawerWrapper,
     {
       index,
@@ -3757,6 +3775,7 @@ var InputSelect = ({
   warningMessage,
   showLabel = true,
   labelCta,
+  compact,
   classNameContainer,
   classNameControl,
   classNameLabel,
@@ -3789,6 +3808,7 @@ var InputSelect = ({
               input("wrap"),
               inputSelect,
               errorMessage ? inputError : void 0,
+              compact ? inputSelectCompact : void 0,
               typeof classNameControl === "object" ? classNameControl : void 0
             ],
             className: typeof classNameControl === "string" ? classNameControl : "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "17.7.1-alpha.181+fd26c02ce",
+  "version": "17.7.1-alpha.211+e51b76310",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -45,5 +45,5 @@
   "files": [
     "/dist"
   ],
-  "gitHead": "fd26c02ceb3e569cdfe188d605f7ca42073d09ab"
+  "gitHead": "e51b76310a677d0f0f2b35bfa1f7416c733cf25d"
 }