@apify/ui-library 1.164.1 → 1.164.3

package/dist/type_utils.d.ts

@@ -24,5 +24,16 @@ export type PolymorphicComponentProps<E extends ElementType, OwnProps extends ob
 export type PolymorphicComponentPropsWithRef<E extends ElementType, OwnProps extends object = object> = PolymorphicComponentProps<E, OwnProps> & {
     ref?: PolymorphicRef<E>;
 };
+/**
+ * Cross-cutting `data-*` attribute props for testing and debugging.
+ * These are optional, but `Required<DataTestProps>` can be used to enforce them.
+ */
+export type DataTestProps = {
+    'data-test'?: string;
+};
+/** flows.sh related attributes to help with debugging and tracing. */
+export type DataFlowsIdProps = {
+    'data-flows-id'?: string;
+};
 export {};
 //# sourceMappingURL=type_utils.d.ts.map

package/dist/type_utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type_utils.d.ts","sourceRoot":"","sources":["../src/type_utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrG,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM,IAAI,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC;AAEjF,MAAM,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAC1E,MAAM,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAElF;;;;GAIG;AAEH,4JAA4J;AAC5J,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,qBAAqB,CAAC,CAAC,CAAC,SAAS;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC,CAAA;CAAE,GAAG,CAAC,GAAG,KAAK,CAAC;AAEnH,sDAAsD;AACtD,KAAK,mBAAmB,CAAC,CAAC,SAAS,WAAW,EAAE,QAAQ,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,GAAG;IAC3F,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,yHAAyH;AACzH,MAAM,MAAM,yBAAyB,CAAC,CAAC,SAAS,WAAW,EAAE,QAAQ,SAAS,MAAM,GAAG,MAAM,IAAI,mBAAmB,CAChH,CAAC,EACD,QAAQ,CACX,GACG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,mBAAmB,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC;AAE9E,+FAA+F;AAC/F,MAAM,MAAM,gCAAgC,CACxC,CAAC,SAAS,WAAW,EACrB,QAAQ,SAAS,MAAM,GAAG,MAAM,IAChC,yBAAyB,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAA;CAAE,CAAC"}
+{"version":3,"file":"type_utils.d.ts","sourceRoot":"","sources":["../src/type_utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrG,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM,IAAI,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC;AAEjF,MAAM,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAC1E,MAAM,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAElF;;;;GAIG;AAEH,4JAA4J;AAC5J,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,qBAAqB,CAAC,CAAC,CAAC,SAAS;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC,CAAA;CAAE,GAAG,CAAC,GAAG,KAAK,CAAC;AAEnH,sDAAsD;AACtD,KAAK,mBAAmB,CAAC,CAAC,SAAS,WAAW,EAAE,QAAQ,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,GAAG;IAC3F,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF,yHAAyH;AACzH,MAAM,MAAM,yBAAyB,CAAC,CAAC,SAAS,WAAW,EAAE,QAAQ,SAAS,MAAM,GAAG,MAAM,IAAI,mBAAmB,CAChH,CAAC,EACD,QAAQ,CACX,GACG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,mBAAmB,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC;AAE9E,+FAA+F;AAC/F,MAAM,MAAM,gCAAgC,CACxC,CAAC,SAAS,WAAW,EACrB,QAAQ,SAAS,MAAM,GAAG,MAAM,IAChC,yBAAyB,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAA;CAAE,CAAC;AAEzE;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAErD,sEAAsE;AACtE,MAAM,MAAM,gBAAgB,GAAG;IAAE,eAAe,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.164.1",
+    "version": "1.164.3",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -75,7 +75,7 @@
         "styled-components": "^6.1.19"
     },
     "devDependencies": {
-        "@apify-packages/types": "^3.424.0",
+        "@apify-packages/types": "^3.425.0",
         "@storybook/react-vite": "^10.3.5",
         "@testing-library/react": "^16.3.2",
         "@types/hast": "^3.0.4",
@@ -95,5 +95,5 @@
         "src",
         "style"
     ],
-    "gitHead": "a35af5ede0c200f2a17051a6a117ac74a5be2bbc"
+    "gitHead": "5b6f3b21ac0d6838bbcb3965fcdfe9c4b9b4d958"
 }

package/src/components/dropdown/dropdown.styled.ts

@@ -2,6 +2,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import styled from 'styled-components';
 
 import { theme } from '../../design_system/theme';
+import type { DataTestProps } from '../../type_utils';
 import { dropdownTestIds } from './dropdown.test_ids';
 
 export const DROPDOWN_ELEMENT_CLASSES = {
@@ -21,12 +22,12 @@ type StyledContentProps = {
     $zIndex?: number;
 };
 
-export const StyledContent = styled(DropdownMenu.Content).attrs<
-    DropdownMenu.DropdownMenuContentProps & { 'data-test'?: string }
->((props) => ({
-    'data-test': dropdownTestIds.WRAPPER,
-    className: [DROPDOWN_ELEMENT_CLASSES.WRAPPER, props.className].filter(Boolean).join(' '),
-}))<StyledContentProps>`
+export const StyledContent = styled(DropdownMenu.Content).attrs<DropdownMenu.DropdownMenuContentProps & DataTestProps>(
+    (props) => ({
+        'data-test': dropdownTestIds.WRAPPER,
+        className: [DROPDOWN_ELEMENT_CLASSES.WRAPPER, props.className].filter(Boolean).join(' '),
+    }),
+)<StyledContentProps>`
     background: ${theme.color.neutral.background};
     border: 1px solid ${theme.color.neutral.separatorSubtle};
     border-radius: ${theme.radius.radius12};

package/src/components/tabs/tab.stories.tsx

@@ -56,7 +56,8 @@ const sampleTabs = [
     { id: 'tab-2', title: 'Analytics', to: '#' },
     { id: 'tab-3', title: 'Settings', to: '#' },
     { id: 'tab-4', title: 'Users', to: '#' },
-    { id: 'tab-5', title: 'Reports', to: '#' },
+    { id: 'tab-5', title: 'Disabled', to: '#', disabled: true, tooltip: 'Unavailable for this Actor.' },
+    { id: 'tab-6', title: 'Reports', to: '#' },
 ];
 
 export const TabVariants = (args: { Icon?: boolean; chip?: string; rollout?: 'alpha' | 'beta' | 'none' }) => {

package/src/components/tabs/tab.tsx

@@ -6,11 +6,12 @@ import styled, { css } from 'styled-components';
 import type { IconComponent } from '@apify/ui-icons';
 
 import { theme } from '../../design_system/theme';
-import type { WithTransientProps } from '../../type_utils';
+import type { DataFlowsIdProps, DataTestProps, WithTransientProps } from '../../type_utils';
 import type { FlattenSimpleInterpolation } from '../../utils/type_utils';
 import type { BadgeSize } from '../badge';
 import { Badge } from '../badge';
 import type { MarginSpacingProps, RegularBoxProps } from '../box';
+import { Tooltip } from '../floating';
 import type { RegularLinkProps } from '../link';
 import { Link } from '../link';
 import type { SharedTextSize } from '../text';
@@ -23,14 +24,17 @@ type SharedTabProps = Omit<RegularBoxProps, 'as' | 'onClick'> &
 
 export type TabVariant = 'default' | 'boxed' | 'buttoned';
 
-export type TabData = SharedTabProps & {
-    id: string;
-    title: string;
-    Icon?: IconComponent;
-    chip?: number | string;
-    rollout?: 'alpha' | 'beta';
-    disabled?: boolean;
-};
+export type TabData = SharedTabProps &
+    DataTestProps &
+    DataFlowsIdProps & {
+        id: string;
+        title: string;
+        Icon?: IconComponent;
+        chip?: number | string;
+        rollout?: 'alpha' | 'beta';
+        disabled?: boolean;
+        tooltip?: React.ReactNode;
+    };
 
 export type TabProps = TabData & {
     variant?: TabVariant;
@@ -195,40 +199,43 @@ export const Tab = ({
     onSelect,
     active = false,
     disabled = false,
+    tooltip,
     ...props
 }: TabProps) => {
     const href = typeof to === 'string' ? to : createPath(to);
     return (
-        <TabWrapper
-            data-test={tabTestIds.TAB}
-            {...props}
-            id={id}
-            to={to}
-            role="tab"
-            data-test-url={href}
-            className={clsx(className, { active, disabled })}
-            onClick={onSelect ? (event) => onSelect({ id, href, event }) : undefined}
-            $variant={variant}
-        >
-            {Icon && <Icon size="16" className={TAB_CLASSNAMES.ICON} />}
-            <Text
-                size={tabVariantTextSize[variant]}
-                className={TAB_CLASSNAMES.TITLE}
-                weight={active ? 'bold' : 'medium'}
-                as="div"
+        <Tooltip content={tooltip}>
+            <TabWrapper
+                data-test={tabTestIds.TAB}
+                {...props}
+                id={id}
+                to={to}
+                role="tab"
+                data-test-url={href}
+                className={clsx(className, { active, disabled })}
+                onClick={onSelect ? (event) => onSelect({ id, href, event }) : undefined}
+                $variant={variant}
             >
-                {title}
-            </Text>
-            {chip && (
-                <Badge size={tabVariantBadgeSize[variant]} variant={active ? 'primary_black' : 'neutral_subtle'}>
-                    {chip}
-                </Badge>
-            )}
-            {rollout && (
-                <Badge size={tabVariantBadgeSize[variant]} variant="primary_blue">
-                    {rollout}
-                </Badge>
-            )}
-        </TabWrapper>
+                {Icon && <Icon size="16" className={TAB_CLASSNAMES.ICON} />}
+                <Text
+                    size={tabVariantTextSize[variant]}
+                    className={TAB_CLASSNAMES.TITLE}
+                    weight={active ? 'bold' : 'medium'}
+                    as="div"
+                >
+                    {title}
+                </Text>
+                {chip && (
+                    <Badge size={tabVariantBadgeSize[variant]} variant={active ? 'primary_black' : 'neutral_subtle'}>
+                        {chip}
+                    </Badge>
+                )}
+                {rollout && (
+                    <Badge size={tabVariantBadgeSize[variant]} variant="primary_blue">
+                        {rollout}
+                    </Badge>
+                )}
+            </TabWrapper>
+        </Tooltip>
     );
 };

package/src/type_utils.ts

@@ -35,3 +35,12 @@ export type PolymorphicComponentPropsWithRef<
     E extends ElementType,
     OwnProps extends object = object,
 > = PolymorphicComponentProps<E, OwnProps> & { ref?: PolymorphicRef<E> };
+
+/**
+ * Cross-cutting `data-*` attribute props for testing and debugging.
+ * These are optional, but `Required<DataTestProps>` can be used to enforce them.
+ */
+export type DataTestProps = { 'data-test'?: string };
+
+/** flows.sh related attributes to help with debugging and tracing. */
+export type DataFlowsIdProps = { 'data-flows-id'?: string };

package/src/type_utils.type-test.ts

@@ -6,7 +6,12 @@
  */
 import { expectTypeOf } from 'vitest';
 
-import type { PolymorphicComponentProps, PolymorphicComponentPropsWithRef, PolymorphicRef } from './type_utils';
+import type {
+    DataTestProps,
+    PolymorphicComponentProps,
+    PolymorphicComponentPropsWithRef,
+    PolymorphicRef,
+} from './type_utils';
 
 type OwnProps = { variant?: 'a' | 'b' };
 type CustomClick = { onClick: (value: number) => void };
@@ -33,3 +38,10 @@ expectTypeOf<PolymorphicComponentProps<'div'>>().not.toHaveProperty('ref');
 
 // `PolymorphicRef` resolves to a concrete (non-`never`) ref type for a bound element.
 expectTypeOf<PolymorphicRef<'a'>>().not.toBeNever();
+
+// `Required` turns the optional test id into a mandatory one.
+expectTypeOf<Required<DataTestProps>>().toEqualTypeOf<{ 'data-test': string }>();
+
+// They compose with native attribute typing rather than replacing it (`data-*` isn't in it).
+expectTypeOf<PolymorphicComponentProps<'div', DataTestProps>>().toHaveProperty('data-test');
+expectTypeOf<PolymorphicComponentProps<'div', DataTestProps>>().toHaveProperty('tabIndex');