@uniformdev/design-system 19.86.0 → 19.86.1-alpha.10

package/dist/esm/index.js

@@ -13746,7 +13746,7 @@ var CaptionText = (dynamicSize) => css45`
   color: var(--gray-500);
   display: block;
   font-size: ${dynamicSize ? "clamp(var(--fs-xs), 87.5%,var(--fs-sm))" : "var(--fs-sm)"};
-  margin: var(--spacing-xs) 0;
+  margin-block: var(--spacing-2xs) 1px;
   max-width: var(--prose);
 `;
 
@@ -17287,7 +17287,7 @@ var ParameterNameAndPublicIdInput = ({
         "data-af": "true",
         onBlur,
         onChange: onNameChange,
-        caption: nameCaption,
+        caption: !nameIdError ? nameCaption : void 0,
         placeholder: namePlaceholderText,
         readOnly,
         errorMessage: nameIdError,
@@ -17306,7 +17306,7 @@ var ParameterNameAndPublicIdInput = ({
         autoComplete: "off",
         onBlur,
         onChange: onPublicIdChange,
-        caption: publicIdCaption,
+        caption: !publicIdError ? publicIdCaption : void 0,
         placeholder: publicIdPlaceholderText,
         errorMessage: publicIdError,
         menuItems: /* @__PURE__ */ jsx102(
@@ -19622,13 +19622,14 @@ var TableCellData = React24.forwardRef(
 );
 
 // src/components/Tabs/Tabs.tsx
-import { createContext as createContext5, useContext as useContext6, useEffect as useEffect16, useMemo as useMemo6 } from "react";
 import {
-  Tab as ReakitTab,
-  TabList as ReakitTabList,
-  TabPanel as ReakitTabPanel,
-  useTabState
-} from "reakit/Tab";
+  Tab as AriakitTab,
+  TabList as AriakitTabList,
+  TabPanel as AriakitTabPanel,
+  TabProvider as AriakitTabProvider,
+  useTabStore as useAriakitTabStore
+} from "@ariakit/react";
+import { useCallback as useCallback8, useEffect as useEffect16, useMemo as useMemo6 } from "react";
 
 // src/components/Tabs/Tabs.styles.ts
 import { css as css94 } from "@emotion/react";
@@ -19657,9 +19658,8 @@ var tabButtonGroupStyles = css94`
 
 // src/components/Tabs/Tabs.tsx
 import { jsx as jsx116 } from "@emotion/react/jsx-runtime";
-var CurrentTabContext = createContext5(null);
 var useCurrentTab = () => {
-  const context = useContext6(CurrentTabContext);
+  const context = useAriakitTabStore();
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
@@ -19670,6 +19670,7 @@ var Tabs = ({
   onSelectedIdChange,
   useHashForState,
   selectedId,
+  manual,
   ...props
 }) => {
   const selected = useMemo6(() => {
@@ -19677,44 +19678,40 @@ var Tabs = ({
       return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
-  const tab = useTabState({ ...props, selectedId: selected });
-  useEffect16(() => {
-    var _a;
-    const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
-    if (selectedValueWithoutNull === selected) {
-      return;
-    }
-    onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
-    if (useHashForState && typeof window !== "undefined" && window.history) {
-      const hashValue = selectedValueWithoutNull ? `#${selectedValueWithoutNull}` : "";
-      window.history.replaceState(null, "", hashValue);
-    }
-  }, [selected, tab.selectedId, onSelectedIdChange, useHashForState]);
+  const tab = useAriakitTabStore({ ...props, selectOnMove: !manual, selectedId: selected });
+  const onTabSelect = useCallback8(
+    (value) => {
+      const selectedValueWithoutNull = value != null ? value : void 0;
+      onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
+      if (useHashForState && typeof window !== "undefined" && window.history) {
+        const hashValue = selectedValueWithoutNull ? `#${selectedValueWithoutNull}` : "";
+        window.history.replaceState(null, "", hashValue);
+      }
+    },
+    [onSelectedIdChange, useHashForState]
+  );
   useEffect16(() => {
-    if (selected && selected !== tab.selectedId) {
+    if (selected && selected !== tab.getState().activeId) {
       tab.setSelectedId(selected);
     }
-  }, [selected]);
-  return /* @__PURE__ */ jsx116(CurrentTabContext.Provider, { value: tab, children });
+  }, [selected, tab]);
+  return /* @__PURE__ */ jsx116(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx116(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx116(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx116(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx116(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx116(ReakitTabPanel, { ...props, ...currentTab, children });
+  return /* @__PURE__ */ jsx116(AriakitTabPanel, { ...props, children });
 };
 
 // src/components/Validation/StatusBullet.styles.ts

package/dist/index.d.mts

@@ -14,14 +14,14 @@ import * as _react_icons_all_files from '@react-icons/all-files';
 import InternalSelect from 'react-select/dist/declarations/src/Select';
 import { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager';
 import { JsonSchema7Type } from 'zod-to-json-schema/src/parseDef';
-import { MenuProps as MenuProps$2, MenuStoreProps, MenuItemProps as MenuItemProps$1 } from '@ariakit/react';
+import * as _ariakit_react from '@ariakit/react';
+import { MenuProps as MenuProps$2, MenuStoreProps, MenuItemProps as MenuItemProps$1, TabStoreState, TabListProps, TabProps, TabPanelProps } from '@ariakit/react';
 import { InitialConfigType } from '@lexical/react/LexicalComposer';
 import { LinkParamValue, RichTextParamConfiguration } from '@uniformdev/canvas';
 export { RichTextBuiltInElement, RichTextBuiltInFormat } from '@uniformdev/canvas';
 import { Spread, SerializedElementNode, ElementNode, NodeKey, EditorConfig, DOMConversionMap, RangeSelection, SerializedEditorState, LexicalEditor } from 'lexical';
 import { PopoverProps as PopoverProps$1, PopoverInitialState } from 'reakit/Popover';
 import * as react_hotkeys_hook_dist_types from 'react-hotkeys-hook/dist/types';
-import { TabState, TabListProps, TabProps, TabPanelProps } from 'reakit/Tab';
 import { TooltipOptions, TooltipInitialState } from 'reakit/Tooltip';
 export { richTextBuiltInElements, richTextBuiltInFormats } from '@uniformdev/richtext';
 
@@ -22908,19 +22908,19 @@ declare const TableRow: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedH
 declare const TableCellHead: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & React$1.RefAttributes<HTMLTableCellElement>>;
 declare const TableCellData: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & React$1.RefAttributes<HTMLTableCellElement>>;
 
-declare const useCurrentTab: () => TabState;
+declare const useCurrentTab: () => _ariakit_react.TabStore;
 type TabsProps<TTabName extends string = string> = {
     children: React__default.ReactNode;
     selectedId?: TTabName;
     manual?: boolean;
-    orientation?: TabState['orientation'];
+    orientation?: TabStoreState['orientation'];
     onSelectedIdChange?: (tabName: TTabName | undefined) => void;
     /**
      * @deprecated you can control the route state on the application level.
      */
     useHashForState?: boolean;
 };
-declare const Tabs: <TTabName extends string = string>({ children, onSelectedIdChange, useHashForState, selectedId, ...props }: TabsProps<TTabName>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Tabs: <TTabName extends string = string>({ children, onSelectedIdChange, useHashForState, selectedId, manual, ...props }: TabsProps<TTabName>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 declare const TabButtonGroup: ({ children, ...props }: Partial<TabListProps>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 type TabButtonProps<TTabName extends string = string> = Partial<TabProps> & {
     id: TTabName;

package/dist/index.d.ts

@@ -14,14 +14,14 @@ import * as _react_icons_all_files from '@react-icons/all-files';
 import InternalSelect from 'react-select/dist/declarations/src/Select';
 import { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager';
 import { JsonSchema7Type } from 'zod-to-json-schema/src/parseDef';
-import { MenuProps as MenuProps$2, MenuStoreProps, MenuItemProps as MenuItemProps$1 } from '@ariakit/react';
+import * as _ariakit_react from '@ariakit/react';
+import { MenuProps as MenuProps$2, MenuStoreProps, MenuItemProps as MenuItemProps$1, TabStoreState, TabListProps, TabProps, TabPanelProps } from '@ariakit/react';
 import { InitialConfigType } from '@lexical/react/LexicalComposer';
 import { LinkParamValue, RichTextParamConfiguration } from '@uniformdev/canvas';
 export { RichTextBuiltInElement, RichTextBuiltInFormat } from '@uniformdev/canvas';
 import { Spread, SerializedElementNode, ElementNode, NodeKey, EditorConfig, DOMConversionMap, RangeSelection, SerializedEditorState, LexicalEditor } from 'lexical';
 import { PopoverProps as PopoverProps$1, PopoverInitialState } from 'reakit/Popover';
 import * as react_hotkeys_hook_dist_types from 'react-hotkeys-hook/dist/types';
-import { TabState, TabListProps, TabProps, TabPanelProps } from 'reakit/Tab';
 import { TooltipOptions, TooltipInitialState } from 'reakit/Tooltip';
 export { richTextBuiltInElements, richTextBuiltInFormats } from '@uniformdev/richtext';
 
@@ -22908,19 +22908,19 @@ declare const TableRow: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedH
 declare const TableCellHead: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & React$1.RefAttributes<HTMLTableCellElement>>;
 declare const TableCellData: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & React$1.RefAttributes<HTMLTableCellElement>>;
 
-declare const useCurrentTab: () => TabState;
+declare const useCurrentTab: () => _ariakit_react.TabStore;
 type TabsProps<TTabName extends string = string> = {
     children: React__default.ReactNode;
     selectedId?: TTabName;
     manual?: boolean;
-    orientation?: TabState['orientation'];
+    orientation?: TabStoreState['orientation'];
     onSelectedIdChange?: (tabName: TTabName | undefined) => void;
     /**
      * @deprecated you can control the route state on the application level.
      */
     useHashForState?: boolean;
 };
-declare const Tabs: <TTabName extends string = string>({ children, onSelectedIdChange, useHashForState, selectedId, ...props }: TabsProps<TTabName>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Tabs: <TTabName extends string = string>({ children, onSelectedIdChange, useHashForState, selectedId, manual, ...props }: TabsProps<TTabName>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 declare const TabButtonGroup: ({ children, ...props }: Partial<TabListProps>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 type TabButtonProps<TTabName extends string = string> = Partial<TabProps> & {
     id: TTabName;

package/dist/index.js

@@ -15458,7 +15458,7 @@ var CaptionText = (dynamicSize) => import_react62.css`
   color: var(--gray-500);
   display: block;
   font-size: ${dynamicSize ? "clamp(var(--fs-xs), 87.5%,var(--fs-sm))" : "var(--fs-sm)"};
-  margin: var(--spacing-xs) 0;
+  margin-block: var(--spacing-2xs) 1px;
   max-width: var(--prose);
 `;
 
@@ -19108,7 +19108,7 @@ var ParameterNameAndPublicIdInput = ({
         "data-af": "true",
         onBlur,
         onChange: onNameChange,
-        caption: nameCaption,
+        caption: !nameIdError ? nameCaption : void 0,
         placeholder: namePlaceholderText,
         readOnly,
         errorMessage: nameIdError,
@@ -19127,7 +19127,7 @@ var ParameterNameAndPublicIdInput = ({
         autoComplete: "off",
         onBlur,
         onChange: onPublicIdChange,
-        caption: publicIdCaption,
+        caption: !publicIdError ? publicIdCaption : void 0,
         placeholder: publicIdPlaceholderText,
         errorMessage: publicIdError,
         menuItems: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
@@ -21435,8 +21435,8 @@ var TableCellData = React24.forwardRef(
 
 // src/components/Tabs/Tabs.tsx
 init_emotion_jsx_shim();
-var import_react137 = require("react");
-var import_Tab = require("reakit/Tab");
+var import_react137 = require("@ariakit/react");
+var import_react138 = require("react");
 
 // src/components/Tabs/Tabs.styles.ts
 init_emotion_jsx_shim();
@@ -21466,9 +21466,8 @@ var tabButtonGroupStyles = import_react136.css`
 
 // src/components/Tabs/Tabs.tsx
 var import_jsx_runtime116 = require("@emotion/react/jsx-runtime");
-var CurrentTabContext = (0, import_react137.createContext)(null);
 var useCurrentTab = () => {
-  const context = (0, import_react137.useContext)(CurrentTabContext);
+  const context = (0, import_react137.useTabStore)();
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
@@ -21479,51 +21478,48 @@ var Tabs = ({
   onSelectedIdChange,
   useHashForState,
   selectedId,
+  manual,
   ...props
 }) => {
-  const selected = (0, import_react137.useMemo)(() => {
+  const selected = (0, import_react138.useMemo)(() => {
     if (selectedId)
       return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
-  const tab = (0, import_Tab.useTabState)({ ...props, selectedId: selected });
-  (0, import_react137.useEffect)(() => {
-    var _a;
-    const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
-    if (selectedValueWithoutNull === selected) {
-      return;
-    }
-    onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
-    if (useHashForState && typeof window !== "undefined" && window.history) {
-      const hashValue = selectedValueWithoutNull ? `#${selectedValueWithoutNull}` : "";
-      window.history.replaceState(null, "", hashValue);
-    }
-  }, [selected, tab.selectedId, onSelectedIdChange, useHashForState]);
-  (0, import_react137.useEffect)(() => {
-    if (selected && selected !== tab.selectedId) {
+  const tab = (0, import_react137.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
+  const onTabSelect = (0, import_react138.useCallback)(
+    (value) => {
+      const selectedValueWithoutNull = value != null ? value : void 0;
+      onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
+      if (useHashForState && typeof window !== "undefined" && window.history) {
+        const hashValue = selectedValueWithoutNull ? `#${selectedValueWithoutNull}` : "";
+        window.history.replaceState(null, "", hashValue);
+      }
+    },
+    [onSelectedIdChange, useHashForState]
+  );
+  (0, import_react138.useEffect)(() => {
+    if (selected && selected !== tab.getState().activeId) {
       tab.setSelectedId(selected);
     }
-  }, [selected]);
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(CurrentTabContext.Provider, { value: tab, children });
+  }, [selected, tab]);
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react137.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_Tab.TabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react137.TabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_Tab.Tab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react137.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_Tab.TabPanel, { ...props, ...currentTab, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react137.TabPanel, { ...props, children });
 };
 
 // src/components/Validation/StatusBullet.tsx
@@ -21531,8 +21527,8 @@ init_emotion_jsx_shim();
 
 // src/components/Validation/StatusBullet.styles.ts
 init_emotion_jsx_shim();
-var import_react138 = require("@emotion/react");
-var StatusBulletContainer = import_react138.css`
+var import_react139 = require("@emotion/react");
+var StatusBulletContainer = import_react139.css`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -21549,33 +21545,33 @@ var StatusBulletContainer = import_react138.css`
     display: block;
   }
 `;
-var StatusBulletBase = import_react138.css`
+var StatusBulletBase = import_react139.css`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = import_react138.css`
+var StatusBulletSmall = import_react139.css`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = import_react138.css`
+var StatusDraft = import_react139.css`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusModified = import_react138.css`
+var StatusModified = import_react139.css`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--primary-action-default) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusError = import_react138.css`
+var StatusError = import_react139.css`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -21588,17 +21584,17 @@ var StatusError = import_react138.css`
     );
   }
 `;
-var StatusPublished = import_react138.css`
+var StatusPublished = import_react139.css`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = import_react138.css`
+var StatusOrphan = import_react139.css`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
-var StatusUnknown = import_react138.css`
+var StatusUnknown = import_react139.css`
   &:before {
     background: var(--brand-secondary-1);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.86.0",
+  "version": "19.86.1-alpha.10+3a63322d8",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -21,10 +21,10 @@
     "@emotion/jest": "11.11.0",
     "@storybook/client-api": "6.5.16",
     "@storybook/react": "6.5.16",
-    "@types/react": "18.2.39",
+    "@types/react": "18.2.40",
     "@types/react-dom": "18.2.17",
-    "@uniformdev/canvas": "^19.86.0",
-    "@uniformdev/richtext": "^19.86.0",
+    "@uniformdev/canvas": "^19.86.1-alpha.10+3a63322d8",
+    "@uniformdev/richtext": "^19.86.1-alpha.10+3a63322d8",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.31",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "33b5e38f48fe693bf6a4b195009222fd34b9e9f3"
+  "gitHead": "3a63322d8e6be500eec846e067b9afb7cd28c6fd"
 }