Merge branch 'v4' into release/4.0.0rc4

KoolADE85 · KoolADE85 · commit 49fde0d990c4 · 2025-12-04T13:14:00.000-07:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 - Modernized `dcc.Tabs`
 - Modernized `dcc.DatePickerSingle` and `dcc.DatePickerRange`
 - DatePicker calendars can now accept translations as an external script, either with Dash's `external_scripts` or from the assets folder. See [documentation](https://date-fns.org/v4.1.0/docs/CDN) for the underlying library that supports this.
+- New `dcc.Button` component that mirrors `html.Button` but with default styles applied
 
 ## Changed
 - `dcc.Tab` now accepts a `width` prop which can be a pixel or percentage width for an individual tab.
diff --git a/components/dash-core-components/src/components/Button.tsx b/components/dash-core-components/src/components/Button.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import {ButtonProps} from '../types';
+import './css/button.css';
+
+/**
+ * Similar to dash.html.Button, but with theming and styles applied.
+ */
+const Button = ({
+    setProps,
+    n_blur = 0,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    n_blur_timestamp = -1,
+    n_clicks = 0,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    n_clicks_timestamp = -1,
+    type = 'button',
+    className,
+    children,
+    ...props
+}: ButtonProps) => {
+    const ctx = window.dash_component_api.useDashContext();
+    const isLoading = ctx.useLoading();
+
+    return (
+        <button
+            data-dash-is-loading={isLoading || undefined}
+            className={'dash-button ' + (className ?? '')}
+            onBlur={() => {
+                setProps({
+                    n_blur: n_blur + 1,
+                    n_blur_timestamp: Date.now(),
+                });
+            }}
+            onClick={() => {
+                setProps({
+                    n_clicks: n_clicks + 1,
+                    n_clicks_timestamp: Date.now(),
+                });
+            }}
+            type={type}
+            {...props}
+        >
+            {children}
+        </button>
+    );
+};
+
+export default Button;
diff --git a/components/dash-core-components/src/components/RadioItems.tsx b/components/dash-core-components/src/components/RadioItems.tsx
@@ -54,7 +54,9 @@ export default function RadioItems({
                     options={sanitizedOptions}
                     selected={isNil(value) ? [] : [value]}
                     onSelectionChange={selection => {
-                        setProps({value: selection[selection.length - 1]});
+                        if (selection.length) {
+                            setProps({value: selection[selection.length - 1]});
+                        }
                     }}
                     {...stylingProps}
                 />
diff --git a/components/dash-core-components/src/components/css/button.css b/components/dash-core-components/src/components/css/button.css
@@ -0,0 +1,55 @@
+.dash-button {
+    line-height: 32px;
+    background: color-mix(
+        in srgb,
+        var(--Dash-Fill-Interactive-Strong) 5%,
+        transparent
+    );
+    color: var(--Dash-Fill-Interactive-Strong);
+    padding: 0 calc(var(--Dash-Spacing) * 2);
+    border-radius: 4px;
+    border: 1px solid var(--Dash-Fill-Interactive-Strong);
+    box-sizing: border-box;
+    vertical-align: middle;
+}
+
+/* Hover state - stronger background */
+.dash-button:hover {
+    cursor: pointer;
+    background: var(--Dash-Fill-Inverse-Strong);
+    color: var(--Dash-Fill-Interactive-Strong);
+}
+
+/* Active state (clicking) - inverted colors */
+.dash-button:active {
+    background: var(--Dash-Fill-Interactive-Strong);
+    color: var(--Dash-Fill-Inverse-Strong);
+}
+
+/* Keyboard focus - inverted colors */
+.dash-button:focus-visible {
+    outline: none;
+    background: var(--Dash-Fill-Interactive-Strong);
+    color: var(--Dash-Fill-Inverse-Strong);
+}
+
+/* Hover after keyboard focus - keep inverted but acknowledge hover */
+.dash-button:focus-visible:hover {
+    background: var(--Dash-Fill-Interactive-Strong);
+    color: var(--Dash-Fill-Inverse-Strong);
+}
+
+/* Active state after keyboard focus - inverted colors */
+.dash-button:focus-visible:active {
+    background: var(--Dash-Fill-Interactive-Strong);
+    color: var(--Dash-Fill-Inverse-Strong);
+}
+
+/* Disabled state */
+.dash-button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    background: var(--Dash-Fill-Disabled);
+    color: var(--Dash-Text-Strong);
+    border-color: var(--Dash-Stroke-Weak);
+}
diff --git a/components/dash-core-components/src/components/css/datepickers.css b/components/dash-core-components/src/components/css/datepickers.css
@@ -20,23 +20,23 @@
     align-items: center;
     gap: calc(var(--Dash-Spacing) * 2);
     box-sizing: border-box;
-    padding: 0 calc(var(--Dash-Spacing) * 2);
+    padding: 0 12px;
 }
 
-.dash-datepicker-input-wrapper:has(:nth-child(3)) {
-    grid-template-columns: auto 1fr auto;
+.dash-datepicker-input-wrapper:has(> :nth-child(2)) {
+    grid-template-columns: 1fr auto;
 }
 
-.dash-datepicker-input-wrapper:has(:nth-child(4)) {
-    grid-template-columns: auto 1fr auto auto;
+.dash-datepicker-input-wrapper:has(> :nth-child(3)) {
+    grid-template-columns: 1fr auto auto;
 }
 
-.dash-datepicker-input-wrapper:has(:nth-child(5)) {
-    grid-template-columns: auto auto auto 1fr auto;
+.dash-datepicker-input-wrapper:has(> :nth-child(4)) {
+    grid-template-columns: auto auto 1fr auto;
 }
 
-.dash-datepicker-input-wrapper:has(:nth-child(6)) {
-    grid-template-columns: auto auto auto 1fr auto auto;
+.dash-datepicker-input-wrapper:has(> :nth-child(5)) {
+    grid-template-columns: auto auto 1fr auto auto;
 }
 
 .dash-datepicker-input-wrapper,
@@ -55,6 +55,7 @@
     border-radius: 4px;
     padding: 0;
     background-color: inherit;
+    color: inherit;
 }
 
 .dash-datepicker-input::selection,
diff --git a/components/dash-core-components/src/components/css/dropdown.css b/components/dash-core-components/src/components/css/dropdown.css
@@ -19,14 +19,14 @@
     grid-template-columns: auto 1fr;
     justify-items: start;
     align-items: center;
-    gap: 8px;
+    gap: calc(var(--Dash-Spacing) * 2);
 }
 
-.dash-dropdown-grid-container:has(:nth-child(3)) {
+.dash-dropdown-grid-container:has(> :nth-child(3)) {
     grid-template-columns: auto 1fr auto;
 }
 
-.dash-dropdown-grid-container:has(:nth-child(4)) {
+.dash-dropdown-grid-container:has(> :nth-child(4)) {
     grid-template-columns: auto 1fr auto auto;
 }
 
diff --git a/components/dash-core-components/src/fragments/DatePickerRange.tsx b/components/dash-core-components/src/fragments/DatePickerRange.tsx
@@ -3,7 +3,6 @@ import * as Popover from '@radix-ui/react-popover';
 import {
     ArrowLeftIcon,
     ArrowRightIcon,
-    CalendarIcon,
     CaretDownIcon,
     Cross1Icon,
 } from '@radix-ui/react-icons';
@@ -136,6 +135,12 @@ const DatePickerRange = ({
                 start_date: dateAsStr(internalStartDate),
                 end_date: dateAsStr(internalEndDate),
             });
+        } else if (!internalStartDate && !internalEndDate) {
+            // Both dates cleared - send undefined for both
+            setProps({
+                start_date: dateAsStr(internalStartDate),
+                end_date: dateAsStr(internalEndDate),
+            });
         } else if (updatemode === 'singledate' && internalStartDate) {
             // Only start changed - send just that one
             setProps({start_date: dateAsStr(internalStartDate)});
@@ -333,7 +338,6 @@ const DatePickerRange = ({
                             }
                         }}
                     >
-                        <CalendarIcon className="dash-datepicker-trigger-icon" />
                         <AutosizeInput
                             inputRef={node => {
                                 startInputRef.current = node;
diff --git a/components/dash-core-components/src/fragments/DatePickerSingle.tsx b/components/dash-core-components/src/fragments/DatePickerSingle.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import * as Popover from '@radix-ui/react-popover';
-import {CalendarIcon, CaretDownIcon, Cross1Icon} from '@radix-ui/react-icons';
+import {CaretDownIcon, Cross1Icon} from '@radix-ui/react-icons';
 import AutosizeInput from 'react-input-autosize';
 import uuid from 'uniqid';
 
@@ -170,7 +170,6 @@ const DatePickerSingle = ({
                             }
                         }}
                     >
-                        <CalendarIcon className="dash-datepicker-trigger-icon" />
                         <AutosizeInput
                             inputRef={node => {
                                 inputRef.current = node;
diff --git a/components/dash-core-components/src/fragments/Dropdown.tsx b/components/dash-core-components/src/fragments/Dropdown.tsx
@@ -264,7 +264,7 @@ const Dropdown = (props: DropdownProps) => {
                 searchInputRef.current.focus();
             }
         });
-    }, [isOpen, multi, displayOptions, sanitizedValues]);
+    }, [isOpen, multi, displayOptions]);
 
     // Handle keyboard navigation in popover
     const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
@@ -289,7 +289,7 @@ const Dropdown = (props: DropdownProps) => {
         }
 
         const focusableElements = e.currentTarget.querySelectorAll(
-            'input[type="search"], input[type="checkbox"]:not([disabled])'
+            'input[type="search"], input:not([disabled])'
         ) as NodeListOf<HTMLElement>;
 
         // Don't interfere with the event if there aren't any options that the user can interact with
@@ -505,6 +505,7 @@ const Dropdown = (props: DropdownProps) => {
                                 options={displayOptions}
                                 selected={sanitizedValues}
                                 onSelectionChange={updateSelection}
+                                inputType={multi ? 'checkbox' : 'radio'}
                                 className="dash-dropdown-options"
                                 optionClassName="dash-dropdown-option"
                                 optionStyle={{
diff --git a/components/dash-core-components/src/index.ts b/components/dash-core-components/src/index.ts
@@ -1,4 +1,5 @@
 /* eslint-disable import/prefer-default-export */
+import Button from './components/Button';
 import Checklist from './components/Checklist';
 import Clipboard from './components/Clipboard.react';
 import ConfirmDialog from './components/ConfirmDialog.react';
@@ -28,6 +29,7 @@ import Upload from './components/Upload.react';
 import './components/css/dcc.css';
 
 export {
+    Button,
     Checklist,
     Clipboard,
     ConfirmDialog,
diff --git a/components/dash-core-components/src/types.ts b/components/dash-core-components/src/types.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {ButtonHTMLAttributes, DetailedHTMLProps} from 'react';
 import {BaseDashProps, DashComponent} from '@dash-renderer/types';
 
 export enum PersistenceTypes {
@@ -52,6 +52,117 @@ export interface BaseDccProps<T>
     persistence_type?: PersistenceTypes;
 }
 
+export type ButtonProps = BaseDccProps<ButtonProps> & {
+    /**
+     * The children of this component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Defines the type of the element.
+     */
+    type?: 'submit' | 'reset' | 'button';
+    /**
+     * The element should be automatically focused after the page loaded.
+     */
+    autoFocus?: boolean;
+    /**
+     * Indicates whether the user can interact with the element.
+     */
+    disabled?: boolean;
+    /**
+     * Indicates the form that is the owner of the element.
+     */
+    form?: string;
+    /**
+     * Indicates the action of the element, overriding the action defined in the <form>.
+     */
+    formAction?: string;
+    /**
+     * If the button/input is a submit button (type="submit"), this attribute sets the encoding type to use during form submission. If this attribute is specified, it overrides the enctype attribute of the button's form owner.
+     */
+    formEncType?: string;
+    /**
+     * If the button/input is a submit button (type="submit"), this attribute sets the submission method to use during form submission (GET, POST, etc.). If this attribute is specified, it overrides the method attribute of the button's form owner.
+     */
+    formMethod?: string;
+    /**
+     * If the button/input is a submit button (type="submit"), this boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the novalidate attribute of the button's form owner.
+     */
+    formNoValidate?: boolean;
+    /**
+     * If the button/input is a submit button (type="submit"), this attribute specifies the browsing context (for example, tab, window, or inline frame) in which to display the response that is received after submitting the form. If this attribute is specified, it overrides the target attribute of the button's form owner.
+     */
+    formTarget?: string;
+    /**
+     * Name of the element. For example used by the server to identify the fields in form submits.
+     */
+    name?: string;
+    /**
+     * Defines a default value which will be displayed in the element on page load.
+     */
+    value?: string | string[] | number;
+    /**
+     * Keyboard shortcut to activate or add focus to the element.
+     */
+    accessKey?: string;
+    /**
+     * Indicates whether the element's content is editable.
+     */
+    contentEditable?: boolean | 'true' | 'false' | 'inherit';
+    /**
+     * Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left).
+     */
+    dir?: string;
+    /**
+     * Defines whether the element can be dragged.
+     */
+    draggable?: boolean;
+    /**
+     * Prevents rendering of given element, while keeping child elements, e.g. script elements, active.
+     */
+    hidden?: boolean;
+    /**
+     * Defines the language used in the element.
+     */
+    lang?: string;
+    /**
+     * Defines the role of an element in the context of accessibility.
+     */
+    role?: string;
+    /**
+     * Indicates whether spell checking is allowed for the element.
+     */
+    spellCheck?: boolean;
+    /**
+     * Defines CSS styles which will override styles previously set.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Overrides the browser's default tab order and follows the one specified instead.
+     */
+    tabIndex?: number;
+    /**
+     * Text to be displayed in a tooltip when hovering over the element.
+     */
+    title?: string;
+    /**
+     * Number of times the button lost focus.
+     */
+    n_blur?: number;
+    /**
+     * Last time the button lost focus.
+     */
+    n_blur_timestamp?: number;
+    /**
+     * Number of times the button has been clicked.
+     */
+    n_clicks?: number;
+    /**
+     * Last time the button was clicked.
+     */
+    n_clicks_timestamp?: number;
+};
+
 export enum HTMLInputTypes {
     // Only allowing the input types with wide browser compatibility
     'text' = 'text',
diff --git a/components/dash-core-components/src/utils/optionRendering.tsx b/components/dash-core-components/src/utils/optionRendering.tsx
diff --git a/components/dash-core-components/tests/integration/button/test_button.py b/components/dash-core-components/tests/integration/button/test_button.py
diff --git a/components/dash-core-components/tests/integration/calendar/test_calendar_props.py b/components/dash-core-components/tests/integration/calendar/test_calendar_props.py
diff --git a/components/dash-core-components/tests/integration/dropdown/test_a11y.py b/components/dash-core-components/tests/integration/dropdown/test_a11y.py
diff --git a/dash/dash-renderer/src/types/component.ts b/dash/dash-renderer/src/types/component.ts

Original file line number	Diff line number	Diff line change
`@@ -20,23 +20,23 @@`
`20`	`20`	`align-items: center;`
`21`	`21`	`gap: calc(var(--Dash-Spacing) * 2);`
`22`	`22`	`box-sizing: border-box;`
`23`		`- padding: 0 calc(var(--Dash-Spacing) * 2);`
	`23`	`+ padding: 0 12px;`
`24`	`24`	`}`
`25`	`25`
`26`		`-.dash-datepicker-input-wrapper:has(:nth-child(3)) {`
`27`		`- grid-template-columns: auto 1fr auto;`
	`26`	`+.dash-datepicker-input-wrapper:has(> :nth-child(2)) {`
	`27`	`+ grid-template-columns: 1fr auto;`
`28`	`28`	`}`
`29`	`29`
`30`		`-.dash-datepicker-input-wrapper:has(:nth-child(4)) {`
`31`		`- grid-template-columns: auto 1fr auto auto;`
	`30`	`+.dash-datepicker-input-wrapper:has(> :nth-child(3)) {`
	`31`	`+ grid-template-columns: 1fr auto auto;`
`32`	`32`	`}`
`33`	`33`
`34`		`-.dash-datepicker-input-wrapper:has(:nth-child(5)) {`
`35`		`- grid-template-columns: auto auto auto 1fr auto;`
	`34`	`+.dash-datepicker-input-wrapper:has(> :nth-child(4)) {`
	`35`	`+ grid-template-columns: auto auto 1fr auto;`
`36`	`36`	`}`
`37`	`37`
`38`		`-.dash-datepicker-input-wrapper:has(:nth-child(6)) {`
`39`		`- grid-template-columns: auto auto auto 1fr auto auto;`
	`38`	`+.dash-datepicker-input-wrapper:has(> :nth-child(5)) {`
	`39`	`+ grid-template-columns: auto auto 1fr auto auto;`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`.dash-datepicker-input-wrapper,`
`@@ -55,6 +55,7 @@`
`55`	`55`	`border-radius: 4px;`
`56`	`56`	`padding: 0;`
`57`	`57`	`background-color: inherit;`
	`58`	`+ color: inherit;`
`58`	`59`	`}`
`59`	`60`
`60`	`61`	`.dash-datepicker-input::selection,`
Original file line number	Diff line number	Diff line change
`@@ -19,14 +19,14 @@`
`19`	`19`	`grid-template-columns: auto 1fr;`
`20`	`20`	`justify-items: start;`
`21`	`21`	`align-items: center;`
`22`		`- gap: 8px;`
	`22`	`+ gap: calc(var(--Dash-Spacing) * 2);`
`23`	`23`	`}`
`24`	`24`
`25`		`-.dash-dropdown-grid-container:has(:nth-child(3)) {`
	`25`	`+.dash-dropdown-grid-container:has(> :nth-child(3)) {`
`26`	`26`	`grid-template-columns: auto 1fr auto;`
`27`	`27`	`}`
`28`	`28`
`29`		`-.dash-dropdown-grid-container:has(:nth-child(4)) {`
	`29`	`+.dash-dropdown-grid-container:has(> :nth-child(4)) {`
`30`	`30`	`grid-template-columns: auto 1fr auto auto;`
`31`	`31`	`}`
`32`	`32`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';`
`2`	`2`	`import * as Popover from '@radix-ui/react-popover';`
`3`		`-import {CalendarIcon, CaretDownIcon, Cross1Icon} from '@radix-ui/react-icons';`
	`3`	`+import {CaretDownIcon, Cross1Icon} from '@radix-ui/react-icons';`
`4`	`4`	`import AutosizeInput from 'react-input-autosize';`
`5`	`5`	`import uuid from 'uniqid';`
`6`	`6`
`@@ -170,7 +170,6 @@ const DatePickerSingle = ({`
`170`	`170`	`}`
`171`	`171`	`}}`
`172`	`172`	`>`
`173`		`- <CalendarIcon className="dash-datepicker-trigger-icon" />`
`174`	`173`	`<AutosizeInput`
`175`	`174`	`inputRef={node => {`
`176`	`175`	`inputRef.current = node;`