@apify/ui-library 1.127.8 → 1.127.10

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.127.8",
+    "version": "1.127.10",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -68,5 +68,5 @@
         "src",
         "style"
     ],
-    "gitHead": "106d8b4d4f6c9005254f2b5f4e096270ac246c0c"
+    "gitHead": "0bec6b696f986df3fa2f677f3b2a11023b02077d"
 }

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

@@ -44,6 +44,11 @@ const getIndeterminateLabel = (value: boolean | null) => {
     return value ? 'Checked' : 'Unchecked';
 };
 
+const SectionLabel = styled.div`
+    font-weight: bold;
+    margin-top: 1rem;
+`;
+
 export const Indeterminate = () => {
     const [value, setValue] = useState<boolean | null>(null);
     return (
@@ -52,6 +57,21 @@ export const Indeterminate = () => {
                 <IndeterminateCheckbox value={value} setValue={setValue} />
                 {getIndeterminateLabel(value)} (click to toggle)
             </Row>
+
+            <SectionLabel>Indeterminate</SectionLabel>
+            <Row><IndeterminateCheckbox value={null} setValue={() => {}} /> Default</Row>
+            <Row><IndeterminateCheckbox value={null} setValue={() => {}} disabled /> Disabled</Row>
+            <Row><IndeterminateCheckbox value={null} setValue={() => {}} error="Some error" /> Error</Row>
+
+            <SectionLabel>Checked</SectionLabel>
+            <Row><IndeterminateCheckbox value={true} setValue={() => {}} /> Default</Row>
+            <Row><IndeterminateCheckbox value={true} setValue={() => {}} disabled /> Disabled</Row>
+            <Row><IndeterminateCheckbox value={true} setValue={() => {}} error="Some error" /> Error</Row>
+
+            <SectionLabel>Unchecked</SectionLabel>
+            <Row><IndeterminateCheckbox value={false} setValue={() => {}} /> Default</Row>
+            <Row><IndeterminateCheckbox value={false} setValue={() => {}} disabled /> Disabled</Row>
+            <Row><IndeterminateCheckbox value={false} setValue={() => {}} error="Some error" /> Error</Row>
         </Grid>
     );
 };

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

@@ -30,11 +30,7 @@ export const checkboxStyle = css`
         border-color: ${theme.color.danger.text};
     }
 
-    &.indeterminate {
-        background-color: ${theme.color.primary.action};
-        border-color: ${theme.color.primary.action};
-    }
-
+    &[data-state="indeterminate"],
     &[data-state="checked"] {
         background-color: ${theme.color.primary.action};
         border-color: ${theme.color.primary.action};

package/src/components/checkbox/checkbox.tsx

@@ -75,7 +75,7 @@ export const CheckboxPrimitive: FC<CheckboxPrimitiveProps> = (props) => (
 );
 
 export const IndeterminateCheckbox: FC<IndeterminateCheckboxProps> = (props) => (
-    <InternalCheckbox {...props} className="indeterminate">
+    <InternalCheckbox {...props}>
         {props.value == null ? (
             <IndeterminateIndicator>
                 <MinusIcon size="12" />

package/src/components/collapsible_card/collapsible_card.tsx

@@ -32,11 +32,8 @@ export type CollapsibleCardProps = {
     topSection?: ReactNode;
     isClosedHeaderGrey?: boolean;
     isHeaderGreyOnHover?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
     as?: React.ElementType;
-    id?: string;
-} & TransientWrapperProps;
+} & TransientWrapperProps & Omit<React.HTMLAttributes<HTMLElement>, 'children'>;
 
 export const collapsibleCardClassNames = {
     TOP_SECTION: 'CollapsibleCard-TopSection',
@@ -115,6 +112,11 @@ export const CollapsibleCard: FC<CollapsibleCardProps> = ({
     onIsExpandedChanged,
     noChevron,
     topSection,
+    hideOuterBorder,
+    hasShadow,
+    isClosedHeaderGrey,
+    isHeaderGreyOnHover,
+    as: Element,
     ...rest
 }) => {
     const isUncontrolled = isExpanded === undefined;
@@ -126,20 +128,18 @@ export const CollapsibleCard: FC<CollapsibleCardProps> = ({
 
     return (
         <StyledCardWrapper
-            forwardedAs={rest.as || 'section'}
-            $hideOuterBorder={rest.hideOuterBorder}
-            $hasShadow={rest.hasShadow}
-            className={rest.className}
-            style={rest.style}
-            id={rest.id}
+            forwardedAs={Element || 'section'}
+            $hideOuterBorder={hideOuterBorder}
+            $hasShadow={hasShadow}
+            {...rest}
         >
             {topSection && <StyledTopSection className={collapsibleCardClassNames.TOP_SECTION} data-test='collapsible-card-top-section'>
                 {topSection}
             </StyledTopSection>}
             <StyledHeader
-                $hideOuterBorder={rest.hideOuterBorder}
-                $isHeaderGrey={rest.isClosedHeaderGrey && !isOpen && !isExpanded}
-                $isHeaderGreyOnHover={rest.isHeaderGreyOnHover}
+                $hideOuterBorder={hideOuterBorder}
+                $isHeaderGrey={isClosedHeaderGrey && !isOpen && !isExpanded}
+                $isHeaderGreyOnHover={isHeaderGreyOnHover}
                 onClick={onHeaderClick}
             >
                 {!noChevron && <ChevronDownIcon size="16" className={clsx('chevron', (isExpanded ?? isOpen) ? 'chevron-open' : 'chevron-closed')} />}