@uniformdev/design-system 20.24.1-alpha.0 → 20.24.4-alpha.26

package/dist/esm/index.js

@@ -4167,6 +4167,7 @@ var menuTriggerStyles = css25`
   background: transparent;
   padding: var(--spacing-xs);
   color: var(--gray-600);
+  border-radius: var(--rounded-sm);
   transition: color var(--duration-fast) var(--timing-ease-out);
 
   &:focus,
@@ -4174,6 +4175,10 @@ var menuTriggerStyles = css25`
     outline: none;
     color: var(--typography-base);
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--accent-dark-active);
+  }
 `;
 
 // src/components/Menu/Menu.tsx
@@ -7067,6 +7072,8 @@ var trigger = css50`
   margin: 2px 0;
 `;
 var popover = css50`
+  border-radius: var(--rounded-sm);
+  box-shadow: var(--elevation-100);
   padding: var(--spacing-md);
   max-width: unset;
   container-type: inline-size;
@@ -7266,6 +7273,7 @@ var DateTimePicker = ({
   offset = 8,
   testId = "datetime-picker",
   placement = "bottom-start",
+  portal = false,
   ...props
 }) => {
   const popover2 = usePopoverStore({ placement });
@@ -7374,6 +7382,7 @@ var DateTimePicker = ({
           unmountOnHide: true,
           "aria-label": "Pick a date",
           css: [Popover, popover],
+          portal,
           children: [
             /* @__PURE__ */ jsxs40("div", { css: popoverInnerContent, children: [
               /* @__PURE__ */ jsx63("div", { css: calendarSection, children: /* @__PURE__ */ jsx63(
@@ -8238,6 +8247,11 @@ var iconButton = css58`
   justify-content: center;
   width: var(--button-size);
   height: var(--button-size);
+
+  &:disabled {
+    filter: grayscale(100%);
+    opacity: 0.5;
+  }
 `;
 var sizes2 = {
   xs: css58`
@@ -14586,7 +14600,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
     /* @__PURE__ */ jsxs86(
       Menu,
       {
-        menuTrigger: /* @__PURE__ */ jsxs86("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", children: [
+        menuTrigger: /* @__PURE__ */ jsxs86("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", type: "button", children: [
           visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
           " ",
           /* @__PURE__ */ jsx128(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
@@ -14619,6 +14633,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
         "button",
         {
           "data-testid": `formatting-button-${format.type}`,
+          type: "button",
           onClick: () => {
             editor.dispatchCommand(FORMAT_TEXT_COMMAND, format.type);
           },
@@ -14632,7 +14647,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
       visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx128(
         Menu,
         {
-          menuTrigger: /* @__PURE__ */ jsx128("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx128(Icon, { icon: "more-alt", css: toolbarIcon }) }),
+          menuTrigger: /* @__PURE__ */ jsx128("button", { css: richTextToolbarButton, title: "Alternative text styles", type: "button", children: /* @__PURE__ */ jsx128(Icon, { icon: "more-alt", css: toolbarIcon }) }),
           placement: "bottom-start",
           children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx128(
             MenuItem,
@@ -14652,6 +14667,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
         "button",
         {
           "data-testid": "element-link",
+          type: "button",
           onClick: () => {
             if (isLink) {
               editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {});
@@ -14668,6 +14684,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
           "button",
           {
             "data-testid": "element-unordered-list",
+            type: "button",
             onClick: () => {
               if (activeElement === "unorderedList") {
                 editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0);
@@ -14686,6 +14703,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
           "button",
           {
             "data-testid": "element-ordered-list",
+            type: "button",
             onClick: () => {
               if (activeElement === "orderedList") {
                 editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0);
@@ -14706,7 +14724,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
     visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ jsx128("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-insert", children: /* @__PURE__ */ jsxs86(
       Menu,
       {
-        menuTrigger: /* @__PURE__ */ jsxs86("button", { css: richTextToolbarButton, title: "Insert block element", children: [
+        menuTrigger: /* @__PURE__ */ jsxs86("button", { css: richTextToolbarButton, title: "Insert block element", type: "button", children: [
           "Insert",
           /* @__PURE__ */ jsx128(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),

package/dist/index.d.mts

@@ -1164,13 +1164,12 @@ declare const allSupportedIcons: {
 
 /** A list of available icon names that can be used with the Uniform brand */
 type IconName = keyof typeof allSupportedIcons;
-
+/** sets the type of icon to use from the available list */
+type IconType = IconName | IconType$1;
 /** sets fill color of the svg icon
  * @default 'default'
  */
 type IconColor = 'white' | 'action' | 'default' | 'red' | 'gray' | 'gray300' | 'accent' | 'currentColor' | 'accent-dark' | 'accent-light' | 'accent-alt-dark';
-/** sets the type of icon to use from the available list */
-type IconType = IconName | IconType$1;
 interface IconProps extends IconBaseProps {
     /** sets the icon to be used */
     icon: IconType;
@@ -1179,11 +1178,6 @@ interface IconProps extends IconBaseProps {
     /** sets additional icon props provided by "react-icons" */
     otherProps?: IconBaseProps;
 }
-/**
- * Component that renders icons
- * @example <Icon icon="add-r" iconColor="currentColor" />
- */
-declare const Icon: React__default.MemoExoticComponent<({ icon, iconColor, size, ...otherProps }: IconProps) => _emotion_react_jsx_runtime.JSX.Element | null>;
 
 declare const rectangleRoundedIcon: (props: _react_icons_all_files.IconBaseProps) => React.JSX.Element;
 declare const cardIcon: (props: _react_icons_all_files.IconBaseProps) => React.JSX.Element;
@@ -1238,6 +1232,12 @@ declare const customIcons: {
     'zig-zag-thick': (props: _react_icons_all_files.IconBaseProps) => React.JSX.Element;
 };
 
+/**
+ * Component that renders icons
+ * @example <Icon icon="add-r" iconColor="currentColor" />
+ */
+declare const Icon: React__default.MemoExoticComponent<({ icon, iconColor, size, ...otherProps }: IconProps) => _emotion_react_jsx_runtime.JSX.Element | null>;
+
 type IconsMap = Record<string, IconType$1>;
 declare function useIconContext(): {
     iconsMap: IconsMap;
@@ -1634,6 +1634,8 @@ type DateTimePickerProps = {
      * @default 8
      */
     offset?: number;
+    /** (optional) sets whether to render the popover in a portal */
+    portal?: boolean;
 };
 /**
  * Use this context for slots within the date time picker
@@ -1653,7 +1655,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, offset, testId, placement, ...props }: DateTimePickerProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const DateTimePicker: ({ id, label, triggerIcon, value, minVisible, maxVisible, variant, caption, placeholder, belowTimeInputSlot, showLabel, errorMessage, warningMessage, disabled, onChange, offset, testId, placement, portal, ...props }: DateTimePickerProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare function DateTimePickerSummary({ value, placeholder, }: {
     value: DateTimePickerValue | null | undefined;

package/dist/index.d.ts

@@ -1164,13 +1164,12 @@ declare const allSupportedIcons: {
 
 /** A list of available icon names that can be used with the Uniform brand */
 type IconName = keyof typeof allSupportedIcons;
-
+/** sets the type of icon to use from the available list */
+type IconType = IconName | IconType$1;
 /** sets fill color of the svg icon
  * @default 'default'
  */
 type IconColor = 'white' | 'action' | 'default' | 'red' | 'gray' | 'gray300' | 'accent' | 'currentColor' | 'accent-dark' | 'accent-light' | 'accent-alt-dark';
-/** sets the type of icon to use from the available list */
-type IconType = IconName | IconType$1;
 interface IconProps extends IconBaseProps {
     /** sets the icon to be used */
     icon: IconType;
@@ -1179,11 +1178,6 @@ interface IconProps extends IconBaseProps {
     /** sets additional icon props provided by "react-icons" */
     otherProps?: IconBaseProps;
 }
-/**
- * Component that renders icons
- * @example <Icon icon="add-r" iconColor="currentColor" />
- */
-declare const Icon: React__default.MemoExoticComponent<({ icon, iconColor, size, ...otherProps }: IconProps) => _emotion_react_jsx_runtime.JSX.Element | null>;
 
 declare const rectangleRoundedIcon: (props: _react_icons_all_files.IconBaseProps) => React.JSX.Element;
 declare const cardIcon: (props: _react_icons_all_files.IconBaseProps) => React.JSX.Element;
@@ -1238,6 +1232,12 @@ declare const customIcons: {
     'zig-zag-thick': (props: _react_icons_all_files.IconBaseProps) => React.JSX.Element;
 };
 
+/**
+ * Component that renders icons
+ * @example <Icon icon="add-r" iconColor="currentColor" />
+ */
+declare const Icon: React__default.MemoExoticComponent<({ icon, iconColor, size, ...otherProps }: IconProps) => _emotion_react_jsx_runtime.JSX.Element | null>;
+
 type IconsMap = Record<string, IconType$1>;
 declare function useIconContext(): {
     iconsMap: IconsMap;
@@ -1634,6 +1634,8 @@ type DateTimePickerProps = {
      * @default 8
      */
     offset?: number;
+    /** (optional) sets whether to render the popover in a portal */
+    portal?: boolean;
 };
 /**
  * Use this context for slots within the date time picker
@@ -1653,7 +1655,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, offset, testId, placement, ...props }: DateTimePickerProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const DateTimePicker: ({ id, label, triggerIcon, value, minVisible, maxVisible, variant, caption, placeholder, belowTimeInputSlot, showLabel, errorMessage, warningMessage, disabled, onChange, offset, testId, placement, portal, ...props }: DateTimePickerProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare function DateTimePickerSummary({ value, placeholder, }: {
     value: DateTimePickerValue | null | undefined;

package/dist/index.js

@@ -5892,6 +5892,7 @@ var menuTriggerStyles = import_react35.css`
   background: transparent;
   padding: var(--spacing-xs);
   color: var(--gray-600);
+  border-radius: var(--rounded-sm);
   transition: color var(--duration-fast) var(--timing-ease-out);
 
   &:focus,
@@ -5899,6 +5900,10 @@ var menuTriggerStyles = import_react35.css`
     outline: none;
     color: var(--typography-base);
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--accent-dark-active);
+  }
 `;
 
 // src/components/Menu/Menu.tsx
@@ -8856,6 +8861,8 @@ var trigger = import_react72.css`
   margin: 2px 0;
 `;
 var popover = import_react72.css`
+  border-radius: var(--rounded-sm);
+  box-shadow: var(--elevation-100);
   padding: var(--spacing-md);
   max-width: unset;
   container-type: inline-size;
@@ -9050,6 +9057,7 @@ var DateTimePicker = ({
   offset = 8,
   testId = "datetime-picker",
   placement = "bottom-start",
+  portal = false,
   ...props
 }) => {
   const popover2 = (0, import_react73.usePopoverStore)({ placement });
@@ -9158,6 +9166,7 @@ var DateTimePicker = ({
           unmountOnHide: true,
           "aria-label": "Pick a date",
           css: [Popover, popover],
+          portal,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { css: popoverInnerContent, children: [
               /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { css: calendarSection, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
@@ -10053,6 +10062,11 @@ var iconButton = import_react88.css`
   justify-content: center;
   width: var(--button-size);
   height: var(--button-size);
+
+  &:disabled {
+    filter: grayscale(100%);
+    opacity: 0.5;
+  }
 `;
 var sizes2 = {
   xs: import_react88.css`
@@ -16440,7 +16454,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
     /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
       Menu,
       {
-        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", children: [
+        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", type: "button", children: [
           visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
           " ",
           /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
@@ -16473,6 +16487,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
         "button",
         {
           "data-testid": `formatting-button-${format.type}`,
+          type: "button",
           onClick: () => {
             editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, format.type);
           },
@@ -16486,7 +16501,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
       visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
         Menu,
         {
-          menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
+          menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
           placement: "bottom-start",
           children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
             MenuItem,
@@ -16506,6 +16521,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
         "button",
         {
           "data-testid": "element-link",
+          type: "button",
           onClick: () => {
             if (isLink) {
               editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {});
@@ -16522,6 +16538,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
           "button",
           {
             "data-testid": "element-unordered-list",
+            type: "button",
             onClick: () => {
               if (activeElement === "unorderedList") {
                 editor.dispatchCommand(import_list2.REMOVE_LIST_COMMAND, void 0);
@@ -16540,6 +16557,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
           "button",
           {
             "data-testid": "element-ordered-list",
+            type: "button",
             onClick: () => {
               if (activeElement === "orderedList") {
                 editor.dispatchCommand(import_list2.REMOVE_LIST_COMMAND, void 0);
@@ -16560,7 +16578,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
     visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-insert", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
       Menu,
       {
-        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("button", { css: richTextToolbarButton, title: "Insert block element", children: [
+        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("button", { css: richTextToolbarButton, title: "Insert block element", type: "button", children: [
           "Insert",
           /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "20.24.1-alpha.0+9e8dbc01e8",
+  "version": "20.24.4-alpha.26+80d802be78",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "exports": {
@@ -38,8 +38,8 @@
     "@storybook/theming": "^8.3.3",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
-    "@uniformdev/canvas": "^20.24.1-alpha.0+9e8dbc01e8",
-    "@uniformdev/richtext": "^20.24.1-alpha.0+9e8dbc01e8",
+    "@uniformdev/canvas": "^20.24.4-alpha.26+80d802be78",
+    "@uniformdev/richtext": "^20.24.4-alpha.26+80d802be78",
     "@vitest/coverage-v8": "^3.1.2",
     "autoprefixer": "10.4.21",
     "hygen": "6.2.11",
@@ -91,5 +91,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9e8dbc01e870c404b63c19326477dbb3910ec14a"
+  "gitHead": "80d802be787a855a99bfe70f2b6cbdb17e71cbae"
 }