@apify/ui-library 1.127.3 → 1.127.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.127.3",
+    "version": "1.127.5",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -29,6 +29,7 @@
     "dependencies": {
         "@apify/ui-icons": "^1.29.1",
         "@floating-ui/react": "^0.26.2",
+        "@radix-ui/react-checkbox": "^1.3.3",
         "@react-hook/resize-observer": "^2.0.2",
         "clsx": "^2.0.0",
         "dayjs": "1.11.9",
@@ -66,5 +67,5 @@
         "src",
         "style"
     ],
-    "gitHead": "d5192b5966509f0f334f4b0578bd964e603dfb11"
+    "gitHead": "ed1183fd2d33f91e7429ae07b7e2fa6197a051e4"
 }

package/src/components/checkbox/checkbox.stories.tsx

@@ -0,0 +1,57 @@
+import { type ComponentProps, useState } from 'react';
+import styled from 'styled-components';
+
+import { CheckboxPrimitive, IndeterminateCheckbox } from './checkbox.js';
+
+export default {
+    title: 'Components/Inputs/CheckboxPrimitive',
+};
+
+const Grid = styled.div`
+    margin: 5rem 3rem;
+    display: grid;
+    grid-template-columns: repeat(1, auto);
+    gap: 1.4rem;
+`;
+
+const Row = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+`;
+
+type ControlledCheckboxProps = { initialValue?: boolean } & Omit<ComponentProps<typeof CheckboxPrimitive>, 'value' | 'setValue'>;
+
+const ControlledCheckbox = ({ initialValue = false, ...props }: ControlledCheckboxProps) => {
+    const [value, setValue] = useState(initialValue);
+    return <CheckboxPrimitive value={value} setValue={setValue} {...props} />;
+};
+
+export const States = () => (
+    <Grid>
+        <Row><ControlledCheckbox /> Unchecked</Row>
+        <Row><ControlledCheckbox initialValue /> Checked</Row>
+        <Row><ControlledCheckbox disabled /> Disabled</Row>
+        <Row><ControlledCheckbox initialValue disabled /> Checked & disabled</Row>
+        <Row><ControlledCheckbox readOnly initialValue /> Checked & readonly</Row>
+        <Row><ControlledCheckbox error="Some error" /> Error</Row>
+        <Row><ControlledCheckbox initialValue error="Some error" /> Checked + error</Row>
+    </Grid>
+);
+
+const getIndeterminateLabel = (value: boolean | null) => {
+    if (value === null) return 'Indeterminate';
+    return value ? 'Checked' : 'Unchecked';
+};
+
+export const Indeterminate = () => {
+    const [value, setValue] = useState<boolean | null>(null);
+    return (
+        <Grid>
+            <Row>
+                <IndeterminateCheckbox value={value} setValue={setValue} />
+                {getIndeterminateLabel(value)} (click to toggle)
+            </Row>
+        </Grid>
+    );
+};

package/src/components/checkbox/checkbox.style.ts

@@ -0,0 +1,62 @@
+import { css } from 'styled-components';
+
+import { theme } from '../../design_system/theme.js';
+
+export const checkboxStyle = css`
+    overflow: hidden;
+    border: 1px solid ${theme.color.neutral.border};
+    border-radius: ${theme.radius.radius4};
+    background-color: ${theme.color.neutral.background};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    position: relative;
+    box-sizing: border-box;
+    transition: border-color 120ms ease-out, background-color 120ms ease-out !important;
+
+    &:hover, &:focus {
+        border-color: ${theme.color.primary.action};
+        cursor: pointer;
+    }
+
+    &.disabled {
+        background-color: ${theme.color.neutral.textDisabled};
+        border-color: ${theme.color.neutral.border};
+    }
+
+    &.error {
+        border-color: ${theme.color.danger.text};
+    }
+
+    &.indeterminate {
+        background-color: ${theme.color.primary.action};
+        border-color: ${theme.color.primary.action};
+    }
+
+    &[data-state="checked"] {
+        background-color: ${theme.color.primary.action};
+        border-color: ${theme.color.primary.action};
+
+        &:hover {
+            background-color: ${theme.color.primary.actionHover};
+            border-color: ${theme.color.primary.actionHover};
+        }
+
+        &.error {
+            background-color: ${theme.color.danger.action};
+            border-color: ${theme.color.danger.action};
+
+            &:hover {
+                background-color: ${theme.color.danger.actionHover};
+                border-color: ${theme.color.danger.actionHover};
+            }
+        }
+
+        &.disabled {
+            background-color: ${theme.color.neutral.textDisabled};
+            border-color: ${theme.color.neutral.border};
+        }
+    }
+`;

package/src/components/checkbox/checkbox.tsx

@@ -0,0 +1,89 @@
+import * as CheckboxPrimitiveReact from '@radix-ui/react-checkbox';
+import clsx from 'clsx';
+import { type ComponentPropsWithoutRef, type FC } from 'react';
+import styled from 'styled-components';
+
+import {
+    CheckIcon, MinusIcon,
+} from '@apify/ui-icons';
+
+import { theme } from '../../design_system/theme.js';
+import { checkboxStyle } from './checkbox.style.js';
+
+const StyledCheckbox = styled(CheckboxPrimitiveReact.Root)`
+    all: unset;
+    ${checkboxStyle};
+`;
+
+const StyledIndicator = styled(CheckboxPrimitiveReact.Indicator)`
+    color: ${theme.color.neutral.textOnPrimary};
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .disabled & {
+        color: ${theme.color.neutral.textMuted};
+    }
+`;
+
+const IndeterminateIndicator = styled(StyledIndicator)`
+    color: ${theme.color.neutral.textOnPrimary};
+`;
+
+type CheckboxBaseProps = Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitiveReact.Root>, 'checked' | 'onCheckedChange' | 'value'> & {
+    setValue: (checked: boolean) => void;
+    error?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+};
+
+export type CheckboxPrimitiveProps = CheckboxBaseProps & { value: boolean };
+export type IndeterminateCheckboxProps = CheckboxBaseProps & { value: boolean | null };
+
+const InternalCheckbox: FC<IndeterminateCheckboxProps> = ({
+    children,
+    value,
+    setValue,
+    error,
+    disabled,
+    readOnly,
+    className,
+    ...rest
+}) => (
+    <StyledCheckbox
+        {...rest}
+        checked={value == null ? 'indeterminate' : value}
+        onCheckedChange={setValue}
+        disabled={disabled || readOnly}
+        className={clsx(
+            className,
+            error && 'error',
+            (disabled || readOnly) && 'disabled',
+        )}
+    >
+        {children}
+    </StyledCheckbox>
+);
+
+export const CheckboxPrimitive: FC<CheckboxPrimitiveProps> = (props) => (
+    <InternalCheckbox {...props}>
+        <StyledIndicator>
+            <CheckIcon size="12" />
+        </StyledIndicator>
+    </InternalCheckbox>
+);
+
+export const IndeterminateCheckbox: FC<IndeterminateCheckboxProps> = (props) => (
+    <InternalCheckbox {...props} className="indeterminate">
+        {props.value == null ? (
+            <IndeterminateIndicator>
+                <MinusIcon size="12" />
+            </IndeterminateIndicator>
+        ) : (
+            <StyledIndicator>
+                <CheckIcon size="12" />
+            </StyledIndicator>
+        )}
+    </InternalCheckbox>
+);

package/src/components/checkbox/index.ts

@@ -0,0 +1 @@
+export * from './checkbox.js';

package/src/components/chip.tsx

@@ -104,6 +104,7 @@ export type ChipProps = RegularBoxProps & {
 
 /**
  * Component for displaying status and for labelling other components.
+ * @deprecated Use Tag or Badge
  */
 export const Chip = forwardRef(({
     type = CHIP_TYPES.DEFAULT,

package/src/components/index.ts

@@ -26,3 +26,4 @@ export * from './shortcut.js';
 export * from './icon_button.js';
 export * from './spinner.js';
 export * from './store/index.js';
+export * from './checkbox/index.js';

package/src/components/text/heading_content.stories.tsx

@@ -6,6 +6,7 @@ import { HeadingContent, type HeadingContentProps } from './heading_content.js';
 export default {
     title: 'Design Tokens/Typography/HeadingContent',
     component: HeadingContent,
+    tags: ['deprecated'],
     parameters: {
         docs: {
             description: {

package/src/components/text/heading_content.tsx

@@ -40,6 +40,9 @@ const StyledHeadingContent = styled(TextBaseComponent)<StyledHeadingContentProps
     ${(props) => getContentHeadingStyles(props.$type || 'heading1')}
 `;
 
+/**
+ * @deprecated Use Heading or HeadingMarketing from ui-library
+ */
 export const HeadingContent: React.FC<HeadingContentProps> = ({
     type,
     as,

package/src/components/text/text_content.stories.tsx

@@ -6,6 +6,7 @@ import { type ContentTextProps, TextContent } from './text_content.js';
 export default {
     title: 'Design Tokens/Typography/TextContent',
     component: TextContent,
+    tags: ['deprecated'],
     parameters: {
         docs: {
             description: {

package/src/components/text/text_content.tsx

@@ -79,6 +79,9 @@ const StyledTextContent = styled(TextBaseComponent)<StyledContentTextProps>`
     ${(props) => TEXT_SHARED_VARIANTS_CSS[props.$type || 'paragraph'][props.$weight || 'normal']}
 `;
 
+/**
+ * @deprecated Use Text or TextMarketing from ui-library
+ */
 export const TextContent = forwardRef<HTMLElement | undefined, ContentTextProps>(({
     type,
     weight,

package/src/components/to_consolidate/markdown.stories.tsx

@@ -5,6 +5,7 @@ import { Markdown, type MarkdownProps } from './markdown.js';
 export default {
     title: 'UI-Library/Markdown/Markdown',
     component: Markdown,
+    tags: ['deprecated'],
     argTypes: {
         markdown: {
             control: 'text',

package/src/components/to_consolidate/markdown.tsx

@@ -642,4 +642,7 @@ const Markdown = ({
 };
 
 const MemoizedMarkdown = React.memo(Markdown, (prevProps, nextProps) => _.isEqual(prevProps, nextProps));
+/**
+ * @deprecated Use SimpleMarkdown from ui-library
+ */
 export { MemoizedMarkdown as Markdown };