TimeZonePicker

You can create a TimeZonePicker by using the useTimeZonePicker hook with a FilterMenu. The hook provides the necessary props to FilterMenu, making it easy to show and manage time zone selection.

Figma LibraryView in StorybookView in Playroom

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { TimeZonePicker } from '@adaptavant/eds-core';

useTimeZonePicker​

The useTimeZonePicker hook returns some state (such as the options that have been filtered based on the search query) and a series of prop 'getter' functions to be spread onto the sub-components that make up the FilterMenu.

, Australia –Sydney
const {
  filteredOptions,
  getFilterMenuProps,
  getFilterMenuTriggerProps,
  getFilterMenuSearchFieldProps,
  getFilterMenuSearchInputProps,
  getFilterMenuListboxProps,
  getFilterMenuItemProps,
} = useTimeZonePicker({ preferredTzIdentifier: 'Australia/Sydney' });

return (
  <Field className="w-full max-w-xs" label="Time zone" labelVisibility="hidden">
    <FilterMenu {...getFilterMenuProps()}>
      <FilterMenuTrigger {...getFilterMenuTriggerProps()} />
      <FilterMenuPopover>
        <FilterMenuSearchField {...getFilterMenuSearchFieldProps()}>
          <FilterMenuSearchInput {...getFilterMenuSearchInputProps()} />
        </FilterMenuSearchField>
        <FilterMenuListbox {...getFilterMenuListboxProps()}>
          {filteredOptions.map((option) => {
            const filterMenuItemProps = getFilterMenuItemProps(option);
            return (
              <FilterMenuItem
                {...filterMenuItemProps}
                key={filterMenuItemProps.id}
              />
            );
          })}
        </FilterMenuListbox>
      </FilterMenuPopover>
    </FilterMenu>
  </Field>
);
View in Playroom

useTimeZonePicker also accepts an options object. If you provide it a preferredTzIdentifier, it will use that as the default value; otherwise, it will attempt to detect the user’s local timezone.

Disabled​

Use the isDisabled prop for <Field/> to show that a TimeZonePicker isn't usable.

, Australia –Sydney
const {
  filteredOptions,
  getFilterMenuProps,
  getFilterMenuTriggerProps,
  getFilterMenuSearchFieldProps,
  getFilterMenuSearchInputProps,
  getFilterMenuListboxProps,
  getFilterMenuItemProps,
} = useTimeZonePicker({ preferredTzIdentifier: 'Australia/Sydney' });

return (
  <Field className="w-full max-w-xs" label="Time zone" labelVisibility="hidden" isDisabled>
    <FilterMenu {...getFilterMenuProps()}>
      <FilterMenuTrigger {...getFilterMenuTriggerProps()} />
      <FilterMenuPopover>
        <FilterMenuSearchField {...getFilterMenuSearchFieldProps()}>
          <FilterMenuSearchInput {...getFilterMenuSearchInputProps()} />
        </FilterMenuSearchField>
        <FilterMenuListbox {...getFilterMenuListboxProps()}>
          {filteredOptions.map((option) => {
            const filterMenuItemProps = getFilterMenuItemProps(option);
            return (
              <FilterMenuItem
                {...filterMenuItemProps}
                key={filterMenuItemProps.id}
              />
            );
          })}
        </FilterMenuListbox>
      </FilterMenuPopover>
    </FilterMenu>
  </Field>
);
View in Playroom

API Reference​

useTimeZonePicker​

PropsTypeDescriptionDefault
preferredTzIdentifier?stringAn optional identifier for a preferred time zone._

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.