@uniformdev/design-system 19.173.2-alpha.8 → 19.176.1-alpha.9

package/dist/esm/index.js

@@ -12289,7 +12289,6 @@ var menuItem = (textTheme, forceActive) => css26`
   font-weight: var(--fw-regular);
   flex-grow: 1;
   gap: var(--spacing-xs);
-  cursor: default;
   white-space: nowrap;
   transition: background-color var(--duration-fast) var(--timing-ease-out);
   ${forceActive ? activeMenuItem : ""}
@@ -15336,6 +15335,7 @@ var input2 = css53`
   padding: 0;
   display: flex;
   justify-content: space-between;
+  gap: var(--spacing-xs);
 `;
 var inputLabel = css53`
   flex-grow: 1;
@@ -15354,9 +15354,9 @@ var trigger = css53`
 `;
 var popover = css53`
   padding: var(--spacing-md);
-  max-width: none;
+  max-width: unset;
   container-type: inline-size;
-  width: 100%;
+  width: clamp(200px, 100%, 540px);
 `;
 var popoverInnerContent = css53`
   display: grid;
@@ -15375,6 +15375,8 @@ var popoverInnerContent = css53`
 var calendarSection = css53`
   grid-column: 1;
   grid-row: 1 / 3;
+  max-width: 240px;
+  margin-inline: auto;
 
   [data-variant='date'] & {
     grid-row: 1 / 2;
@@ -15396,6 +15398,7 @@ var datePart = css53`
 var datePartButton = css53`
   // this allows the button to be as wide as the text
   min-width: 0;
+  margin-right: auto;
 `;
 
 // src/components/DateTimePicker/DateTimePickerSummary.tsx
@@ -15544,10 +15547,12 @@ var DateTimePicker = ({
   warningMessage,
   disabled: disabled2,
   onChange,
-  testId,
+  testId = "datetime-picker",
+  placement = "bottom-start",
+  offset,
   ...props
 }) => {
-  const popover2 = usePopoverState({ placement: "bottom-start" });
+  const popover2 = usePopoverState({ placement, unstable_offset: offset });
   const parsedValue = useMemo(() => tryParseAbsolute(value == null ? void 0 : value.datetime, value == null ? void 0 : value.timeZone), [value]);
   const parsedMinVisible = useMemo(
     () => tryParseAbsoluteToDateString(minVisible, value == null ? void 0 : value.timeZone),
@@ -15718,21 +15723,17 @@ import { css as css54 } from "@emotion/react";
 var descriptionListHorizontal = css54`
   display: grid;
   grid-template-columns: max-content auto;
-  gap: var(--spacing-xs) var(--spacing-md);
+  gap: var(--spacing-sm) var(--spacing-md);
 `;
 var descriptionListVertical = css54`
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-sm);
 `;
 var descriptionListLabelStyles = css54`
   display: flex;
   align-items: center;
   color: var(--gray-500);
-
-  dd + & {
-    margin-top: var(--spacing-sm);
-  }
 `;
 var descriptionListValueStyles = css54`
   display: flex;
@@ -15787,7 +15788,10 @@ var detailsContent = css55`
   position: relative;
   animation: ${fadeInRtl} var(--duration-fast) var(--timing-ease-out) forwards;
   will-change: height;
-  z-index: 1;
+
+  &:focus-within {
+    z-index: 1;
+  }
 `;
 var detailsContentIndented = css55`
   margin-left: calc(1.25rem / 2);
@@ -18919,14 +18923,19 @@ var ObjectListItemContainer = css84`
   }
 `;
 var ObjectListItemCover = css84`
-  max-width: 80px;
-  min-height: 45px;
+  align-items: center;
+  background: var(--gray-100);
+  color: var(--gray-500);
+  display: flex;
+  width: 80px;
+  height: 45px;
+  text-align: center;
+  font-size: var(--fs-xs);
+`;
+var ObjectListItemImage = css84`
   object-fit: cover;
-
-  [role='presentation'] {
-    background: var(--gray-200);
-    height: 45px;
-  }
+  width: 100%;
+  height: 100%;
 `;
 var ObjectListItemLoading = css84`
   animation: ${skeletonLoading} 1s linear infinite alternate;
@@ -19009,26 +19018,30 @@ var ObjectListItem2 = (props) => {
 
 // src/components/Objects/ObjectListItemContainer.tsx
 import { jsx as jsx110 } from "@emotion/react/jsx-runtime";
-var ObjectListItemContainer2 = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx110(VerticalRhythm, { css: ObjectListItemContainer, role: "list", ...props, children });
+var ObjectListItemContainer2 = ({ children, gap = "0", ...props }) => {
+  return /* @__PURE__ */ jsx110(VerticalRhythm, { gap, css: ObjectListItemContainer, role: "list", ...props, children });
 };
 
 // src/components/Objects/ObjectListItemCover.tsx
 import { jsx as jsx111 } from "@emotion/react/jsx-runtime";
-var ObjectListItemCover2 = ({ imageUrl, ...props }) => {
+var ObjectListItemCover2 = ({
+  imageUrl,
+  noImageText = "Image not available",
+  ...props
+}) => {
   if (!imageUrl) {
-    return /* @__PURE__ */ jsx111("div", { css: ObjectListItemCover, role: "presentation", "data-testid": "object-list-item-thumbnail" });
+    return /* @__PURE__ */ jsx111("div", { css: ObjectListItemCover, role: "presentation", "data-testid": "object-list-item-thumbnail", children: noImageText });
   }
-  return /* @__PURE__ */ jsx111(
+  return /* @__PURE__ */ jsx111("div", { css: ObjectListItemCover, children: /* @__PURE__ */ jsx111(
     "img",
     {
-      css: ObjectListItemCover,
       src: imageUrl,
+      css: ObjectListItemImage,
       loading: "lazy",
       "data-testid": "object-list-item-thumbnail",
       ...props
     }
-  );
+  ) });
 };
 
 // src/components/Objects/ObjectListItemHeading.tsx

package/dist/index.d.mts

@@ -16,6 +16,7 @@ import * as _react_icons_all_files from '@react-icons/all-files';
 import { IconType as IconType$2 } from '@react-icons/all-files';
 import { DateValue } from '@internationalized/date';
 import { CalendarProps as CalendarProps$1, TimeFieldProps, TimeValue } from 'react-aria-components';
+import { PopoverState } from 'reakit/Popover';
 import { CreatableProps } from 'react-select/creatable';
 import InternalSelect from 'react-select/dist/declarations/src/Select';
 import { JsonSchema7Type } from 'zod-to-json-schema/src/parseDef';
@@ -21470,6 +21471,10 @@ type DateTimePickerProps = {
     disabled?: boolean;
     /** (optional) sets the base test id for each of the elements with a testid */
     testId?: string;
+    /** (optional) sets the popover placement */
+    placement?: PopoverState['placement'];
+    /** (optional) sets the popover offset */
+    offset?: [string | number, string | number] | undefined;
 };
 /**
  * Use this context for slots within the date time picker
@@ -21492,7 +21497,7 @@ declare function useDateTimePickerContext(): {
  * Subcomponents can manipulate the value directly by using
  * the `useDateTimePickerContext()` hook.
  */
-declare const DateTimePicker: ({ id, label, triggerIcon, value, minVisible, maxVisible, variant, caption, placeholder, belowTimeInputSlot, showLabel, errorMessage, warningMessage, disabled, onChange, testId, ...props }: DateTimePickerProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const DateTimePicker: ({ id, label, triggerIcon, value, minVisible, maxVisible, variant, caption, placeholder, belowTimeInputSlot, showLabel, errorMessage, warningMessage, disabled, onChange, testId, placement, offset, ...props }: DateTimePickerProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 declare function DateTimePickerSummary({ value, placeholder, }: {
     value: DateTimePickerValue | null | undefined;
@@ -22905,14 +22910,18 @@ type ObjectListItemMultiProps = Omit<ObjectItemProps, 'cover'> & {
 declare const ObjectListItem: (props: ObjectListItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /** @deprecated - Beta Object list item container component  */
-declare const ObjectListItemContainer: ({ children, ...props }: RhythmProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ObjectListItemContainer: ({ children, gap, ...props }: RhythmProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /** @deprecated - Beta Object list item cover component  */
 type ObjectListItemCoverProps = {
     imageUrl?: string;
+    /** (optional) sets the text to display when there is no image
+     * @default 'Image not available'
+     */
+    noImageText?: string;
 } & HTMLAttributes<HTMLImageElement>;
 /** @deprecated - beta Object list item cover component  */
-declare const ObjectListItemCover: ({ imageUrl, ...props }: ObjectListItemCoverProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ObjectListItemCover: ({ imageUrl, noImageText, ...props }: ObjectListItemCoverProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /** @deprecated - Beta Object list item heading component  */
 type ObjectListItemHeadingProps = Omit<ObjectHeadingProps, 'heading'> & HTMLAttributes<HTMLDivElement> & {

package/dist/index.d.ts

@@ -16,6 +16,7 @@ import * as _react_icons_all_files from '@react-icons/all-files';
 import { IconType as IconType$2 } from '@react-icons/all-files';
 import { DateValue } from '@internationalized/date';
 import { CalendarProps as CalendarProps$1, TimeFieldProps, TimeValue } from 'react-aria-components';
+import { PopoverState } from 'reakit/Popover';
 import { CreatableProps } from 'react-select/creatable';
 import InternalSelect from 'react-select/dist/declarations/src/Select';
 import { JsonSchema7Type } from 'zod-to-json-schema/src/parseDef';
@@ -21470,6 +21471,10 @@ type DateTimePickerProps = {
     disabled?: boolean;
     /** (optional) sets the base test id for each of the elements with a testid */
     testId?: string;
+    /** (optional) sets the popover placement */
+    placement?: PopoverState['placement'];
+    /** (optional) sets the popover offset */
+    offset?: [string | number, string | number] | undefined;
 };
 /**
  * Use this context for slots within the date time picker
@@ -21492,7 +21497,7 @@ declare function useDateTimePickerContext(): {
  * Subcomponents can manipulate the value directly by using
  * the `useDateTimePickerContext()` hook.
  */
-declare const DateTimePicker: ({ id, label, triggerIcon, value, minVisible, maxVisible, variant, caption, placeholder, belowTimeInputSlot, showLabel, errorMessage, warningMessage, disabled, onChange, testId, ...props }: DateTimePickerProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const DateTimePicker: ({ id, label, triggerIcon, value, minVisible, maxVisible, variant, caption, placeholder, belowTimeInputSlot, showLabel, errorMessage, warningMessage, disabled, onChange, testId, placement, offset, ...props }: DateTimePickerProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 declare function DateTimePickerSummary({ value, placeholder, }: {
     value: DateTimePickerValue | null | undefined;
@@ -22905,14 +22910,18 @@ type ObjectListItemMultiProps = Omit<ObjectItemProps, 'cover'> & {
 declare const ObjectListItem: (props: ObjectListItemProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /** @deprecated - Beta Object list item container component  */
-declare const ObjectListItemContainer: ({ children, ...props }: RhythmProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ObjectListItemContainer: ({ children, gap, ...props }: RhythmProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /** @deprecated - Beta Object list item cover component  */
 type ObjectListItemCoverProps = {
     imageUrl?: string;
+    /** (optional) sets the text to display when there is no image
+     * @default 'Image not available'
+     */
+    noImageText?: string;
 } & HTMLAttributes<HTMLImageElement>;
 /** @deprecated - beta Object list item cover component  */
-declare const ObjectListItemCover: ({ imageUrl, ...props }: ObjectListItemCoverProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ObjectListItemCover: ({ imageUrl, noImageText, ...props }: ObjectListItemCoverProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /** @deprecated - Beta Object list item heading component  */
 type ObjectListItemHeadingProps = Omit<ObjectHeadingProps, 'heading'> & HTMLAttributes<HTMLDivElement> & {

package/dist/index.js

@@ -13988,7 +13988,6 @@ var menuItem = (textTheme, forceActive) => import_react34.css`
   font-weight: var(--fw-regular);
   flex-grow: 1;
   gap: var(--spacing-xs);
-  cursor: default;
   white-space: nowrap;
   transition: background-color var(--duration-fast) var(--timing-ease-out);
   ${forceActive ? activeMenuItem : ""}
@@ -17109,6 +17108,7 @@ var input2 = import_react74.css`
   padding: 0;
   display: flex;
   justify-content: space-between;
+  gap: var(--spacing-xs);
 `;
 var inputLabel = import_react74.css`
   flex-grow: 1;
@@ -17127,9 +17127,9 @@ var trigger = import_react74.css`
 `;
 var popover = import_react74.css`
   padding: var(--spacing-md);
-  max-width: none;
+  max-width: unset;
   container-type: inline-size;
-  width: 100%;
+  width: clamp(200px, 100%, 540px);
 `;
 var popoverInnerContent = import_react74.css`
   display: grid;
@@ -17148,6 +17148,8 @@ var popoverInnerContent = import_react74.css`
 var calendarSection = import_react74.css`
   grid-column: 1;
   grid-row: 1 / 3;
+  max-width: 240px;
+  margin-inline: auto;
 
   [data-variant='date'] & {
     grid-row: 1 / 2;
@@ -17169,6 +17171,7 @@ var datePart = import_react74.css`
 var datePartButton = import_react74.css`
   // this allows the button to be as wide as the text
   min-width: 0;
+  margin-right: auto;
 `;
 
 // src/components/DateTimePicker/DateTimePickerSummary.tsx
@@ -17312,10 +17315,12 @@ var DateTimePicker = ({
   warningMessage,
   disabled: disabled2,
   onChange,
-  testId,
+  testId = "datetime-picker",
+  placement = "bottom-start",
+  offset,
   ...props
 }) => {
-  const popover2 = (0, import_Popover.usePopoverState)({ placement: "bottom-start" });
+  const popover2 = (0, import_Popover.usePopoverState)({ placement, unstable_offset: offset });
   const parsedValue = (0, import_react75.useMemo)(() => tryParseAbsolute(value == null ? void 0 : value.datetime, value == null ? void 0 : value.timeZone), [value]);
   const parsedMinVisible = (0, import_react75.useMemo)(
     () => tryParseAbsoluteToDateString(minVisible, value == null ? void 0 : value.timeZone),
@@ -17488,21 +17493,17 @@ var import_react76 = require("@emotion/react");
 var descriptionListHorizontal = import_react76.css`
   display: grid;
   grid-template-columns: max-content auto;
-  gap: var(--spacing-xs) var(--spacing-md);
+  gap: var(--spacing-sm) var(--spacing-md);
 `;
 var descriptionListVertical = import_react76.css`
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-sm);
 `;
 var descriptionListLabelStyles = import_react76.css`
   display: flex;
   align-items: center;
   color: var(--gray-500);
-
-  dd + & {
-    margin-top: var(--spacing-sm);
-  }
 `;
 var descriptionListValueStyles = import_react76.css`
   display: flex;
@@ -17559,7 +17560,10 @@ var detailsContent = import_react78.css`
   position: relative;
   animation: ${fadeInRtl} var(--duration-fast) var(--timing-ease-out) forwards;
   will-change: height;
-  z-index: 1;
+
+  &:focus-within {
+    z-index: 1;
+  }
 `;
 var detailsContentIndented = import_react78.css`
   margin-left: calc(1.25rem / 2);
@@ -20778,14 +20782,19 @@ var ObjectListItemContainer = import_react126.css`
   }
 `;
 var ObjectListItemCover = import_react126.css`
-  max-width: 80px;
-  min-height: 45px;
+  align-items: center;
+  background: var(--gray-100);
+  color: var(--gray-500);
+  display: flex;
+  width: 80px;
+  height: 45px;
+  text-align: center;
+  font-size: var(--fs-xs);
+`;
+var ObjectListItemImage = import_react126.css`
   object-fit: cover;
-
-  [role='presentation'] {
-    background: var(--gray-200);
-    height: 45px;
-  }
+  width: 100%;
+  height: 100%;
 `;
 var ObjectListItemLoading = import_react126.css`
   animation: ${skeletonLoading} 1s linear infinite alternate;
@@ -20870,27 +20879,31 @@ var ObjectListItem2 = (props) => {
 // src/components/Objects/ObjectListItemContainer.tsx
 init_emotion_jsx_shim();
 var import_jsx_runtime110 = require("@emotion/react/jsx-runtime");
-var ObjectListItemContainer2 = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(VerticalRhythm, { css: ObjectListItemContainer, role: "list", ...props, children });
+var ObjectListItemContainer2 = ({ children, gap = "0", ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(VerticalRhythm, { gap, css: ObjectListItemContainer, role: "list", ...props, children });
 };
 
 // src/components/Objects/ObjectListItemCover.tsx
 init_emotion_jsx_shim();
 var import_jsx_runtime111 = require("@emotion/react/jsx-runtime");
-var ObjectListItemCover2 = ({ imageUrl, ...props }) => {
+var ObjectListItemCover2 = ({
+  imageUrl,
+  noImageText = "Image not available",
+  ...props
+}) => {
   if (!imageUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { css: ObjectListItemCover, role: "presentation", "data-testid": "object-list-item-thumbnail" });
+    return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { css: ObjectListItemCover, role: "presentation", "data-testid": "object-list-item-thumbnail", children: noImageText });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { css: ObjectListItemCover, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
     "img",
     {
-      css: ObjectListItemCover,
       src: imageUrl,
+      css: ObjectListItemImage,
       loading: "lazy",
       "data-testid": "object-list-item-thumbnail",
       ...props
     }
-  );
+  ) });
 };
 
 // src/components/Objects/ObjectListItemHeading.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.173.2-alpha.8+7b0bc70fd5",
+  "version": "19.176.1-alpha.9+f0d014e428",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -24,8 +24,8 @@
     "@storybook/react": "8.0.10",
     "@types/react": "18.2.40",
     "@types/react-dom": "18.2.17",
-    "@uniformdev/canvas": "^19.173.2-alpha.8+7b0bc70fd5",
-    "@uniformdev/richtext": "^19.173.2-alpha.8+7b0bc70fd5",
+    "@uniformdev/canvas": "^19.176.1-alpha.9+f0d014e428",
+    "@uniformdev/richtext": "^19.176.1-alpha.9+f0d014e428",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.38",
@@ -76,5 +76,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7b0bc70fd58912415a860667c266cb339fa8133a"
+  "gitHead": "f0d014e4289935e7192ae91d421883c8b49cc3fb"
 }