v0.2.0-rc.7

What's Changed

• chore: 🤖 replace deprecated yarn flag frozen-lockfile by @punkbit in #967
• docs: 📝 add note for version format handling by @punkbit in #968
• feat(NumberField): add startContent and endContent props to NumberField by @minodudd in #969
• fix(Dialog): Use Radix Dialog Primitives for Accessibility by @dustinhealy in #973
• chore: 🤖 add mexican flag by @punkbit in #977
• fix(Dialog): Suppress Missing Description Warning by @dustinhealy in #976
• chore(css-modules): 🤖 initial css modules setup by @punkbit in #810
• chore(css-modules): 🤖 support local visual regression testing via docker by @punkbit in #931
• chore(css-modules): 🤖 GitHub action for visual regression (development environment based [initial version]) by @punkbit in #932
• chore(css-modules): 🤖 Enable linter on CSS files by @punkbit in #945
• chore(css-modules): 🤖 ship pre-compiled CSS alongside components by @punkbit in #956
• chore(css-modules): 🤖 Prevent duplicate CSS imports in build watcher by @punkbit in #981
• chore: 🤖 add normalisation pass in SVG convertor process/tool by @punkbit in #978
• chore: 🤖 add new icons expand-all and collapse-all by @kunalpanchal in #995
• fix(vercel-cli): 🐛 pin version to prevent broken @vercel/hono dependency install by @punkbit in #999
• feat(DatePicker): add allowOnlyDatesList prop to DatePicker by @vickiwyang in #994
• feat(datetimerangepicker): fix background transparency; allow setting default date tab by @hoorayimhelping in #1006
• chore(publish.yml): remove upgrading npm step by @hoorayimhelping in #1007
• fix(publish.yml): add registry-url to old publish workflow by @DreaminDani in #1009
• fix(publish.yml): revert OIDC support change by @DreaminDani in #1010
• chore(publish.yml): update node version to 23 by @hoorayimhelping in #1011
• fix(publish.yml): globally install node. use correct github action name by @DreaminDani in #1012

New Contributors

• @minodudd made their first contribution in #969
• @vickiwyang made their first contribution in #994

Full Changelog: v0.2.0-test.0...v0.2.0-rc.7

v0.2.0-rc.6

Minor Changes

• f05a810: Adds optional allowOnlyDatesList prop to DatePicker, which enables the user to provide a predefined allowlist of dates that can be selected.

  How to use?

  <DatePicker
    allowOnlyDatesList={[
      new Date('2026-01-15'),
      new Date('2026-01-20'),
      new Date('2026-02-01'),
    ]}
    onSelectDate={date => console.log('Selected:', date)}
  />

  Only the dates in allowOnlyDatesList will be selectable. All other dates will be disabled.

v0.2.0-rc.5

Patch Changes

• 1174257: Add CollapseAll and ExpandAll icons

v0.2.0-rc.4

Patch Changes

• 58918d4: Suppress Radix Missing Description console warning when no description prop is provided to Dialog.Content. A hidden RadixDialog.Description is now rendered by default so Radix's accessibility check passes silently.

v0.2.0-rc.3

Patch Changes

• b675f2e: Add Mexico flag

v0.2.0-rc.2

Patch Changes

• 9c9e92b: Use Radix Dialog primitives for accessibility compliance.

  • Changed Dialog title from styled.h2 to styled(RadixDialog.Title) so Radix recognizes it as a proper DialogTitle
  • Added optional description prop to Dialog.Content that renders as RadixDialog.Description

  Before

  <Dialog.Content
    title="Confirm Action"
    showClose
  >
    <Text color="muted">Dialog body content goes here</Text>
    <Spacer />
    <Separator size="lg" />
    <ActionArea>
      <Dialog.Close label="Close" />
      <Button iconRight="arrow-right">Continue</Button>
    </ActionArea>
  </Dialog.Content>

  After

  <Dialog.Content
    title="Confirm Action"
    description="Dialog body content goes here"
    showClose
  >
    <Spacer />
    <Separator size="lg" />
    <ActionArea>
      <Dialog.Close label="Cancel" />
      <Button type="primary">Confirm</Button>
    </ActionArea>
  </Dialog.Content>

v0.2.0-rc.1

Minor Changes

• ec4d35d: Adds startContent and endContent props to NumberField, matching the existing TextField API. This enables rendering additional elements (e.g., unit labels, currency symbols) inside the input field without absolute-positioning hacks.

  What has changed?

  • New startContent prop for rendering content to the left of the input
  • New endContent prop for rendering content to the right of the input
  • Clicking on startContent focuses the input field
  • endContent is displayed alongside the existing loading indicator when both are present
  • Added WithEndContent and WithStartContent stories

  How to use?

  With a currency symbol prefix:

  import { NumberField, Text } from '`@clickhouse`/click-ui';
  
  <NumberField
    label="Price"
    placeholder="0.00"
    hideControls
    startContent={
      <Text
        color="muted"
        size="sm"
      >
        $
      </Text>
    }
  />;

  With a unit suffix:

  import { NumberField, Text } from '`@clickhouse`/click-ui';
  
  <NumberField
    label="Spend limit"
    placeholder="0"
    hideControls
    endContent={
      <Text
        color="muted"
        size="sm"
      >
        dollars / credits
      </Text>
    }
  />;

v0.2.0-test.0

Minor Changes

• b307591: Add BigLake Metastore logo

  Added the BigLakeMetastore logo to the logo library:

  • New Biglake-Metastore.tsx SVG component under src/components/Assets/Logos/
  • Registered in both LogosDark and LogosLight system files
  • Added BigLakeMetastore to the logo types

Patch Changes

• 8936ef2: Fix missing focus tokens in theme configuration

  Added missing focus tokens to the design token source files to prevent them from being removed during token generation:

  • Added card.promotion.color.stroke.focus with semantic reference {click.global.color.accent.default} (resolves to #151515 in light theme and #faff69 in dark theme)
  • Added genericMenu.item.color.default.stroke.focus with value #437eef (light theme) and #faff69 (dark theme)
  • Added genericMenu.item.color.danger.stroke.focus with value #437eef (light theme) and #faff69 (dark theme)

  These tokens are required by the GenericMenu and CardPromotion components for keyboard focus outlines and were previously being lost when regenerating the theme tokens.

• 5cda186: Add missing 'warning' color option to TextColor type and design tokens.

  The warning value was available in theme tokens but missing from the TextColor type definition, causing TypeScript errors when using <Text color="warning">. This fix:

  • Adds 'warning' to the TextColor type union in Text.tsx
  • Adds warning color tokens to both light (#a33c00) and dark (#ffb88f) theme variables
  • Adds warning token definitions to light.json and dark.json design token files

v0.1.0

Minor Changes

• a4a16b8: Added new icon components: ChartCloud and ChartSquare.

• 4c4105f: Add Lakekeeper logo

  How to use?

  import { Logo } from '@clickhouse/click-ui';
  
  <Logo name="lakekeeper" />;

• 9dad00d: Add PlanetScale logo

• d936174: Add convert:regenerate command to regenerate asset types (logos, icons, flags, payments) without adding new components. This allows refreshing types.ts and registry files (Light/Dark) when the converter script is updated or when imports need to be standardized.

  How to use?

  Regenerate all asset types:

  yarn convert:regenerate
  

  Regenerate a specific asset type only:

  yarn convert:regenerate --type=icons
  

  Supported values for --type: logos, icons, flags, payments

• a54b59d: Adds a new DateTimePicker component for selecting date and time ranges with precision control. This component combines calendar-based date selection with time input fields, supporting both predefined time ranges and custom selections.

  What has changed?

  • New DateTimePicker component for selecting date-time ranges
  • Support for predefined time periods (e.g., "Past 15 minutes", "Past hour")
  • Custom date range selection with start/end calendars
  • Time input with hours, minutes, and optional seconds
  • AM/PM meridiem toggle for 12-hour format
  • Calendar can open to the left or right via openDirection prop
  • Time selection is retained when changing dates
  • Support for disabling future dates
  • Maximum range length constraint support
  • Helper function "predefined time periods for DateTimePicker" for common time ranges

  How to use?

  Basic usage with custom date range selection:

  import { DateTimePicker } from '@clickhouse/click-ui';
  
  <DateTimePicker
    onSelectDateRange={(startDate, endDate) => {
      console.log('Selected range:', startDate, endDate);
    }}
    placeholder="Select date range"
  />;

  With predefined time periods:

  import {
    DateTimePicker,
    getPredefinedTimePeriodsForDateTimePicker,
  } from '@clickhouse/click-ui';
  
  <DateTimePicker
    predefinedTimesList={getPredefinedTimePeriodsForDateTimePicker()}
    onSelectDateRange={(startDate, endDate) => {
      console.log('Selected range:', startDate, endDate);
    }}
  />;

  With all options:

  <DateTimePicker
    startDate={new Date()}
    endDate={new Date()}
    disabled={false}
    futureDatesDisabled={true}
    futureStartDatesDisabled={false}
    maxRangeLength={30}
    onSelectDateRange={(startDate, endDate) => handleRangeChange(startDate, endDate)}
    openDirection="left"
    placeholder="start date – end date"
    predefinedTimesList={customPredefinedList}
    shouldShowSeconds={true}
  />

• 11a8c47: The useLayoutEffect watching headers.length wasn't triggered when headers were reordered (e.g., in sysadmin EntitiesTable with column selection), causing Column widths to be misaligned after reordering, NaN values appearing during resize operations and an incorrect null check (-1 !== null) that was always true.

• bbdfb43: Truncate filenames by shortening the middle revealing critical parts.

  Assume you have:

  console.clickhouse.cloud_Archive.01-01-1975.lorem-ipsum-a-very-long-filename-001.csv
  console.clickhouse.cloud_Archive.01-01-1975.lorem-ipsum-a-very-long-filename-005.csv
  dashboard.mongodb.atlas_Export.12-15-2024.customer-data-analysis-report-final-v2.json
  admin.postgresql.heroku_Backup.03-22-2023.transaction-logs-monthly-summary-march.sql
  

  In the current faulty version you'd get something like:

  console.clickhouse.cloud_Archive.01-~.csv
  console.clickhouse.cloud_Archive.01-~.csv
  dashboard.mongodb.atlas_Export.12-1~.csv
  admin.postgresql.heroku_Backup.03-2~.csv
  

  Notice that the first two filenames, when presented truncated, have the same shortened name, making it hard to differentiate.

  In the PR proposed version you'd find easier to identify files if these are named in a maintainable way:

  console.clickh...filename-001.csv
  console.clickh...filename-005.csv
  dashboard.mong...ort-final-v2.json
  admin.postgres...ummary-march.sql
  

  Notice that the first and last digits help identify the file more concisely, allowing for a shorter length.

• e0c3541: Makes the distributed files "unbundled", effectively moving optimisation to a consumer app concern, e.g. obfuscation, compression, bundling MUST be consumer concerns, the library SHOULD NOT make the consumer bundling process more difficult, it MUST facilitate it! It resolves cyclic imports or circular dependencies, enhances linting to prevent imports from barrel files, making the barrel files more of a public API than an internal API to help prevent circular dependencies.

  From now on, bundling preserves the file tree, externalises packages based on the package.json dependency declaration automatically, instead of managing them manually as the current version does. It allows deep imports, e.g. @clickhouse/click-ui/components/Button.

  Exports files are placed by target resolution, e.g. dist/esm|cjs. It has removed UMD until further notice (why is the original version providing UMD, what's the use-case?). As a component library, in principle, it should be ESM and CJS (due to NodeJS SSR) compatible in the worse case scenarios.

  It reduces build times from > 1 minute to < 22 seconds.

  More importantly, this initial revision provides tree-shaking support, helping reduce file size. Which can now be assessed with an optional builder feature to analyse and visualise the package dependency graph, file sizes, etc.

• 1869f03: Removes react-dom/server renderToStaticMarkup from copy grid elements of Grid to favour the recommended createRoot approach suggested by React's official documentation.

  According to React renderToStaticMarkup "The renderToStaticMarkup works in the browser, but using it in the client code is not recommended. If you need to render a component to HTML in the browser" and React renderToString "Importing react-dom/server on the client unnecessarily increases your bundle size and should be avoided. If you need to render some component to HTML in the browser, use createRoot and read HTML from the DOM".

• d3b40ae: Reconcile FileUpload and FileMultiUpload to prevent and reduce concurrent implementations, e.g. behaviour, features, styles, etc. In the previous version, the multiple file upload component was recreating the file upload in its file context which is prone to mistakes and hard to maintain.

• 970cdfb: Cleans up the build configuration, token generation and related processes. By removing legacy styling setups and simplifying the token generation to only the required setup. This work is important before starting to migrate off styled components. Effectively, reducing technical debt.

  For example, the SCSS setup is not providing any value, e.g. there was an unused 320KB file named src/styles/tokens-light-dark.scss.

  It seems that the setup is promoted as offering "tree-shaking" benefits, but I suspect this is not correct from what I could assess. With that being said, even if the consumer app, only use a single variable, the entire 320KB of CSS custom properties would be spit into the final CSS bundle!

  Considering that variables change with time, and if not managed correctly, might increase dramatically, the file size would increase and make the app's distributed bundle size increase for no additional value. Think that tree shaking means a sort of static analysis that has to determine which tokens (bits of code) are not used, to remove them safely. It's not the case here with the current setup, e.g. the whole ":root" stuff would go in.

  Other changes might have extended to removing legacy, unused or orphaned CSS files found in the project.

  Finally, the changes here help to clear or reduce some of the technical debt, e.g. taking a step back before jumping much further. There are other pending PR, which once merged will allow further progress to improve the code base.

• 133282b: Prevent dayjs mismatch version blocking package dependency install.
  On CI run, there's a step which installs with flag "immutable". Because there's a dayjs mismatch version, the install process errors.

• d0c50c0: A version maintenance branch strategy enables the Click UI team to support older versions simultaneously, which is important since consumer applications, e.g. control plane or hyperdx might depend on stable versions and cannot immediately upgrade to the latest release.

  The introduction of this branching strategy conceptually and in the release workflow, practically, allows the team to support active development, incentivise experimentation, change, improvements, iteration, etc while shipping critical bug fixes or security patches to older versions (as long as compatible). This ensures that "stable" versions still receive necessary fixes without forcing potential breaking changes or showing new untested features.

  In the release workflow, implemented automation for it by handling the tedious parts to help reduce human errors and ensure a consistent release flow; But also for our own sanity, as otherwise it'd cause overwhelming version/release management.

  How to use?

  To create a new release, locate the create release and use the interface to select the release type, e.g. release candidate (rc), testing, stable or latest.

  It'll create a new Pull request for review, e.g. ...

v0.1.0-rc.80

📝 See CHANGELOG.md for details.