@uniformdev/design-system 19.81.1 → 19.82.1

package/dist/esm/index.js

@@ -19665,7 +19665,13 @@ var useCurrentTab = () => {
   }
   return context;
 };
-var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }) => {
+var Tabs = ({
+  children,
+  onSelectedIdChange,
+  useHashForState,
+  selectedId,
+  ...props
+}) => {
   const selected = useMemo6(() => {
     if (selectedId)
       return selectedId;
@@ -19675,12 +19681,15 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
   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.pushState(null, "", hashValue);
+      window.history.replaceState(null, "", hashValue);
     }
-  }, [tab.selectedId, onSelectedIdChange, useHashForState]);
+  }, [selected, tab.selectedId, onSelectedIdChange, useHashForState]);
   useEffect16(() => {
     if (selected && selected !== tab.selectedId) {
       tab.setSelectedId(selected);
@@ -19692,11 +19701,18 @@ var TabButtonGroup = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
   return /* @__PURE__ */ jsx116(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
 };
-var TabButton = ({ children, id, ...props }) => {
+var TabButton = ({
+  children,
+  id,
+  ...props
+}) => {
   const currentTab = useCurrentTab();
   return /* @__PURE__ */ jsx116(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
 };
-var TabContent = ({ children, ...props }) => {
+var TabContent = ({
+  children,
+  ...props
+}) => {
   const currentTab = useCurrentTab();
   return /* @__PURE__ */ jsx116(ReakitTabPanel, { ...props, ...currentTab, children });
 };

package/dist/index.d.mts

@@ -22909,26 +22909,29 @@ declare const TableCellHead: React$1.ForwardRefExoticComponent<Omit<React$1.Deta
 declare const TableCellData: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & React$1.RefAttributes<HTMLTableCellElement>>;
 
 declare const useCurrentTab: () => TabState;
-interface TabsProps {
+type TabsProps<TTabName extends string = string> = {
     children: React__default.ReactNode;
-    selectedId?: string;
+    selectedId?: TTabName;
     manual?: boolean;
     orientation?: TabState['orientation'];
-    onSelectedIdChange?: (tabName: string | undefined) => void;
+    onSelectedIdChange?: (tabName: TTabName | undefined) => void;
+    /**
+     * @deprecated you can control the route state on the application level.
+     */
     useHashForState?: boolean;
-}
-declare const Tabs: ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }: TabsProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+};
+declare const Tabs: <TTabName extends string = string>({ children, onSelectedIdChange, useHashForState, selectedId, ...props }: TabsProps<TTabName>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 declare const TabButtonGroup: ({ children, ...props }: Partial<TabListProps>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-interface TabButtonProps extends Partial<TabProps> {
-    id: string;
+type TabButtonProps<TTabName extends string = string> = Partial<TabProps> & {
+    id: TTabName;
     children: React__default.ReactNode;
-}
-declare const TabButton: ({ children, id, ...props }: TabButtonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-interface TabContentProps extends Partial<TabPanelProps> {
-    id: string;
+};
+declare const TabButton: <TTabName extends string = string>({ children, id, ...props }: TabButtonProps<TTabName>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+type TabContentProps<TTabName extends string = string> = Partial<TabPanelProps> & {
+    tabId?: TTabName;
     children: React__default.ReactNode;
-}
-declare const TabContent: ({ children, ...props }: TabContentProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+};
+declare const TabContent: <TTabName extends string = string>({ children, ...props }: TabContentProps<TTabName>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type CreateTeamIntegrationTileProps = React.HTMLAttributes<HTMLDivElement> & {
     /** (optional) sets the title value

package/dist/index.d.ts

@@ -22909,26 +22909,29 @@ declare const TableCellHead: React$1.ForwardRefExoticComponent<Omit<React$1.Deta
 declare const TableCellData: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & React$1.RefAttributes<HTMLTableCellElement>>;
 
 declare const useCurrentTab: () => TabState;
-interface TabsProps {
+type TabsProps<TTabName extends string = string> = {
     children: React__default.ReactNode;
-    selectedId?: string;
+    selectedId?: TTabName;
     manual?: boolean;
     orientation?: TabState['orientation'];
-    onSelectedIdChange?: (tabName: string | undefined) => void;
+    onSelectedIdChange?: (tabName: TTabName | undefined) => void;
+    /**
+     * @deprecated you can control the route state on the application level.
+     */
     useHashForState?: boolean;
-}
-declare const Tabs: ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }: TabsProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+};
+declare const Tabs: <TTabName extends string = string>({ children, onSelectedIdChange, useHashForState, selectedId, ...props }: TabsProps<TTabName>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 declare const TabButtonGroup: ({ children, ...props }: Partial<TabListProps>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-interface TabButtonProps extends Partial<TabProps> {
-    id: string;
+type TabButtonProps<TTabName extends string = string> = Partial<TabProps> & {
+    id: TTabName;
     children: React__default.ReactNode;
-}
-declare const TabButton: ({ children, id, ...props }: TabButtonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
-interface TabContentProps extends Partial<TabPanelProps> {
-    id: string;
+};
+declare const TabButton: <TTabName extends string = string>({ children, id, ...props }: TabButtonProps<TTabName>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+type TabContentProps<TTabName extends string = string> = Partial<TabPanelProps> & {
+    tabId?: TTabName;
     children: React__default.ReactNode;
-}
-declare const TabContent: ({ children, ...props }: TabContentProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+};
+declare const TabContent: <TTabName extends string = string>({ children, ...props }: TabContentProps<TTabName>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type CreateTeamIntegrationTileProps = React.HTMLAttributes<HTMLDivElement> & {
     /** (optional) sets the title value

package/dist/index.js

@@ -21474,7 +21474,13 @@ var useCurrentTab = () => {
   }
   return context;
 };
-var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }) => {
+var Tabs = ({
+  children,
+  onSelectedIdChange,
+  useHashForState,
+  selectedId,
+  ...props
+}) => {
   const selected = (0, import_react137.useMemo)(() => {
     if (selectedId)
       return selectedId;
@@ -21484,12 +21490,15 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
   (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.pushState(null, "", hashValue);
+      window.history.replaceState(null, "", hashValue);
     }
-  }, [tab.selectedId, onSelectedIdChange, useHashForState]);
+  }, [selected, tab.selectedId, onSelectedIdChange, useHashForState]);
   (0, import_react137.useEffect)(() => {
     if (selected && selected !== tab.selectedId) {
       tab.setSelectedId(selected);
@@ -21501,11 +21510,18 @@ var TabButtonGroup = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
   return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_Tab.TabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
 };
-var TabButton = ({ children, id, ...props }) => {
+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 });
 };
-var TabContent = ({ children, ...props }) => {
+var TabContent = ({
+  children,
+  ...props
+}) => {
   const currentTab = useCurrentTab();
   return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_Tab.TabPanel, { ...props, ...currentTab, children });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.81.1",
+  "version": "19.82.1",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -23,8 +23,8 @@
     "@storybook/react": "6.5.16",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
-    "@uniformdev/canvas": "^19.81.1",
-    "@uniformdev/richtext": "^19.81.1",
+    "@uniformdev/canvas": "^19.82.1",
+    "@uniformdev/richtext": "^19.82.1",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.31",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e72e4f188122bfe8b9944515be927d1f3febf257"
+  "gitHead": "242b8cbfdb9e52a8020c7660af8363a16c070cfa"
 }