@apify/ui-library 1.127.2 → 1.127.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.127.2",
+    "version": "1.127.4",
     "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": "adb06b929bf8fe2bfb782570ae11800131861e83"
+    "gitHead": "63e5464863de833c981f4cca2369aea22b735b53"
 }

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/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/to_consolidate/markdown.tsx

@@ -124,7 +124,7 @@ const StyledMarkdownWrapper = styled(Box)<StyledReadmeProps>`
             ${theme.typography.content.desktop.paragraph}
         }
         a {
-            overflow-wrap: break-word;
+            overflow-wrap: anywhere;
             text-decoration: none;
             &:hover {
                 text-decoration: underline;