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 Library View in Storybook View 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.

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
        classNames={{
          sheetWrapper: "z-10"
        }}
      >
        <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.

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
        classNames={{
          sheetWrapper: "z-10"
        }}
      >
        <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

The TimeZonePicker is built entirely using our FilterMenu and the useTimeZonePicker hook, as demonstrated in the examples and usage above. For more details about the API, refer to the links below

FilterMenuSearchField

FilterMenuSearchInput

FilterMenuTrigger