@salt-ds/[email protected]

Patch Changes

• Updated dependencies [f3ae565]
  • @salt-ds/[email protected]

@salt-ds/[email protected]

Patch Changes

• f3ae565: Fixed format not working on DatePickerRangeInput. Closes #4474.

@salt-ds/[email protected]

Patch Changes

• 131dd9a: Undeprecate --salt-accent-background-disabled

• f6848dd: Fixed below tokens pointing to incorrect palette token, with underlying value not changing (transparent), from var(--salt-palette-interact-border-none) to var(--salt-palette-interact-background).

  • --salt-actionable-negative-background-disabled
  • --salt-actionable-negative-background
  • --salt-actionable-negative-subtle-background-disabled
  • --salt-actionable-negative-subtle-background
  • --salt-actionable-positive-background-disabled
  • --salt-actionable-positive-background
  • --salt-actionable-positive-subtle-background-disabled
  • --salt-actionable-positive-subtle-background
  • --salt-actionable-caution-background-disabled
  • --salt-actionable-caution-background
  • --salt-actionable-caution-subtle-background-disabled
  • --salt-actionable-caution-subtle-background

• 5af2978: Fixed titanium background color token was incorrected named

  - --salt-color-background-gradientlight
  + --salt-color-background-titanium

@salt-ds/[email protected]

Patch Changes

• Updated dependencies [5cf214c]
• Updated dependencies [bae6882]
• Updated dependencies [b272497]
• Updated dependencies [33c8da5]
• Updated dependencies [e7b0406]
  • @salt-ds/[email protected]
  • @salt-ds/[email protected]

@salt-ds/[email protected]

Patch Changes

• Updated dependencies [5cf214c]
• Updated dependencies [bae6882]
  • @salt-ds/[email protected]

@salt-ds/[email protected]

Patch Changes

• 5cf214c: Fixed input alignment issue in form field when more than one item is in a row and some do not have helper text.
• bae6882: Fixed aria-activedescendant not being removed when Dropdown or ComboBox is closed.

@salt-ds/[email protected]

Minor Changes

• b4a7888: Extended support to ag grid v32

  • Added support for new active button in floating filter, with adjusted floating filter focus style. Updated --ag-icon-font-code-filter to use outline version of filter icon to accommodate active state using filled version.
  • Fixed apply / reset panel buttons due to attribute change
  • Added "ag-grid-community" as peerDependencies to enforce minimum v28 support

Patch Changes

• Updated dependencies [131dd9a]
• Updated dependencies [f6848dd]
• Updated dependencies [5af2978]
  • @salt-ds/[email protected]

@salt-ds/[email protected]

Minor Changes

• e7b0406: Added OverlayHeader component to lab.

  <Overlay {...args}>
    <OverlayTrigger>
      <Button>Show Overlay</Button>
    </OverlayTrigger>
    <OverlayPanel aria-labelledby={id}>
      <OverlayHeader
        id={id}
        header="Title"
        actions={
          <Button
            aria-label="Close overlay"
            appearance="transparent"
            sentiment="neutral"
          >
            <CloseIcon aria-hidden />
          </Button>
        }
      />
      <OverlayPanelContent>Content of Overlay</OverlayPanelContent>
    </OverlayPanel>
  </Overlay>

Patch Changes

• b272497: DatePicker, DateInput, Calendar Lab updates

  We are excited to introduce a new Salt package, @salt-ds/date-adapters, currently in pre-release/lab status to gather your valuable feedback.

  This package includes supported adapters for Salt's date-based controls:

  • AdapterDateFns for date-fns
  • AdapterDayjs for dayjs
  • AdapterLuxon for luxon
  • AdapterMoment (legacy) for moment

  Note: As moment is no longer actively maintained by its creators, AdapterMoment is published in a deprecated form to assist in transitioning to a newer date framework.

  Salt adapters are integrated with a new LocalizationProvider, enabling a date-based API accessible through useLocalization. Typically, you only need to add one LocalizationProvider per application, although they can be nested if necessary.

  @salt-ds/adapters uses peer dependencies for the supported date libraries. It is the responsibility of the application author to include the required dependencies in their build. Additionally, the application author is responsible for configuring the date libraries, including any necessary extensions or loading dependencies for supported locales.

  Example Usage

  An app that renders a Salt date-based control may look like this:

  import { AdapterDateFns } from "@salt-ds/date-adapters";
  import {
    Calendar,
    CalendarNavigation,
    CalendarWeekHeader,
    CalendarGrid,
    LocalizationProvider,
  } from "@salt-ds/lab";
  
  const MyApp = () => (
    <SaltProvider density="high" mode="light">
      <LocalizationProvider DateAdapter={AdapterDateFns}>
        <Calendar selectionVariant="single">
          <CalendarNavigation />
          <CalendarWeekHeader />
          <CalendarGrid />
        </Calendar>
      </LocalizationProvider>
    </SaltProvider>
  );

  A DateInput within an app that uses LocalizationProvider might be implemented as follows:

  const MyDateInput = () => {
    const { dateAdapter } = useLocalization();
  
    function handleDateChange<TDate extends DateFrameworkType>(
      event: SyntheticEvent,
      date: TDate | null,
      details: DateInputSingleDetails
    ) {
      console.log(
        `Selected date: ${dateAdapter.isValid(date) ? dateAdapter.format(date, "DD MMM YYYY") : date}`
      );
  
      const { value, errors } = details;
      if (errors?.length && value) {
        console.log(
          `Error(s): ${errors
            .map(({ type, message }) => `type=${type} message=${message}`)
            .join(", ")}`
        );
        console.log(`Original Value: ${value}`);
      }
    }
  
    return <DateInputSingle onDateChange={handleDateChange} />;
  };

  A DatePicker within an app that uses LocalizationProvider might be implemented as follows:

  const MyDatePicker = () => {
    const { dateAdapter } = useLocalization();
    const handleSelectionChange = useCallback(
      (
        event: SyntheticEvent,
        date: SingleDateSelection<DateFrameworkType> | null,
        details: DateInputSingleDetails | undefined,
      ) => {
        const { value, errors } = details || {};
        console.log(
          `Selected date: ${dateAdapter.isValid(date) ? dateAdapter.format(date, "DD MMM YYYY") : date}`
        );
        if (errors?.length && value) {
          console.log(
            `Error(s): ${errors
              .map(({ type, message }) => `type=${type} message=${message}`)
              .join(", ")}`
          );
          console.log(`Original Value: ${value}`);
        }
      },
    );
  
    return (
      <DatePicker
        selectionVariant="single"
        onSelectionChange={handleSelectionChange}
      >
        <DatePickerTrigger>
          <DatePickerSingleInput />
        </DatePickerTrigger>
        <DatePickerOverlay>
          <DatePickerSinglePanel />
        </DatePickerOverlay>
      </DatePicker>
    );
  };

  In addition to configuring adapters, LocalizationProvider offers props to define locale and fallback min/max dates for all date-based controls.

  Additional date adapters can be added , as long as they conform to the SaltDateAdapter interface.

  For more detailed examples, please refer to the documentation for DateInput, Calendar, and DatePicker.

• 33c8da5: Fix system status icons in content from using the component styles override

• Updated dependencies [5cf214c]

• Updated dependencies [bae6882]

• Updated dependencies [b272497]

  • @salt-ds/[email protected]
  • @salt-ds/[email protected]

@salt-ds/[email protected]

Patch Changes

• b272497: DatePicker, DateInput, Calendar Lab updates

  We are excited to introduce a new Salt package, @salt-ds/date-adapters, currently in pre-release/lab status to gather your valuable feedback.

  This package includes supported adapters for Salt's date-based controls:

  • AdapterDateFns for date-fns
  • AdapterDayjs for dayjs
  • AdapterLuxon for luxon
  • AdapterMoment (legacy) for moment

  Note: As moment is no longer actively maintained by its creators, AdapterMoment is published in a deprecated form to assist in transitioning to a newer date framework.

  Salt adapters are integrated with a new LocalizationProvider, enabling a date-based API accessible through useLocalization. Typically, you only need to add one LocalizationProvider per application, although they can be nested if necessary.

  @salt-ds/adapters uses peer dependencies for the supported date libraries. It is the responsibility of the application author to include the required dependencies in their build. Additionally, the application author is responsible for configuring the date libraries, including any necessary extensions or loading dependencies for supported locales.

  Example Usage

  An app that renders a Salt date-based control may look like this:

  import { AdapterDateFns } from "@salt-ds/date-adapters";
  import {
    Calendar,
    CalendarNavigation,
    CalendarWeekHeader,
    CalendarGrid,
    LocalizationProvider,
  } from "@salt-ds/lab";
  
  const MyApp = () => (
    <SaltProvider density="high" mode="light">
      <LocalizationProvider DateAdapter={AdapterDateFns}>
        <Calendar selectionVariant="single">
          <CalendarNavigation />
          <CalendarWeekHeader />
          <CalendarGrid />
        </Calendar>
      </LocalizationProvider>
    </SaltProvider>
  );

  A DateInput within an app that uses LocalizationProvider might be implemented as follows:

  const MyDateInput = () => {
    const { dateAdapter } = useLocalization();
  
    function handleDateChange<TDate extends DateFrameworkType>(
      event: SyntheticEvent,
      date: TDate | null,
      details: DateInputSingleDetails
    ) {
      console.log(
        `Selected date: ${dateAdapter.isValid(date) ? dateAdapter.format(date, "DD MMM YYYY") : date}`
      );
  
      const { value, errors } = details;
      if (errors?.length && value) {
        console.log(
          `Error(s): ${errors
            .map(({ type, message }) => `type=${type} message=${message}`)
            .join(", ")}`
        );
        console.log(`Original Value: ${value}`);
      }
    }
  
    return <DateInputSingle onDateChange={handleDateChange} />;
  };

  A DatePicker within an app that uses LocalizationProvider might be implemented as follows:

  const MyDatePicker = () => {
    const { dateAdapter } = useLocalization();
    const handleSelectionChange = useCallback(
      (
        event: SyntheticEvent,
        date: SingleDateSelection<DateFrameworkType> | null,
        details: DateInputSingleDetails | undefined,
      ) => {
        const { value, errors } = details || {};
        console.log(
          `Selected date: ${dateAdapter.isValid(date) ? dateAdapter.format(date, "DD MMM YYYY") : date}`
        );
        if (errors?.length && value) {
          console.log(
            `Error(s): ${errors
              .map(({ type, message }) => `type=${type} message=${message}`)
              .join(", ")}`
          );
          console.log(`Original Value: ${value}`);
        }
      },
    );
  
    return (
      <DatePicker
        selectionVariant="single"
        onSelectionChange={handleSelectionChange}
      >
        <DatePickerTrigger>
          <DatePickerSingleInput />
        </DatePickerTrigger>
        <DatePickerOverlay>
          <DatePickerSinglePanel />
        </DatePickerOverlay>
      </DatePicker>
    );
  };

  In addition to configuring adapters, LocalizationProvider offers props to define locale and fallback min/max dates for all date-based controls.

  Additional date adapters can be added , as long as they conform to the SaltDateAdapter interface.

  For more detailed examples, please refer to the documentation for DateInput, Calendar, and DatePicker.

@salt-ds/[email protected]

Patch Changes

• 2f027e9: Fixed target characteristic tokens being incorrect in Salt Next.