@wix/patterns-fields 1.0.0

package/src/components/address/input/address-input.tsx

@@ -0,0 +1,306 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useCallback,
+  useEffect,
+  useState,
+  useMemo,
+  useRef,
+} from 'react';
+
+import isEqual from 'lodash/isEqual';
+import debounce from 'lodash/debounce';
+import type { Address } from '../../../types/address';
+import type {
+  AddressInputProps as WDSAddressInputProps,
+  DropdownLayoutValueOption,
+} from '@wix/design-system';
+import type { AddressInputRef as WDSAddressInputRef } from '@wix/design-system/dist/types/AddressInput/AddressInput';
+import {
+  AddressInput as WDSAddressInput,
+  addressInputItemBuilder,
+} from '@wix/design-system';
+
+import type { AtlasAddress, AtlasService } from '../../../services/atlas';
+import { atlasAddressToAddress } from '../../../services/atlas/utils';
+import { WixAtlasService } from '../../../services/atlas/wix-atlas-service';
+import {
+  useControlledInput,
+  useReverseValue,
+  useClearValue,
+  useSetSelectionOnFocus,
+  useRequestFrameCallback,
+  useTranslations,
+} from '../../../hooks';
+import { noop } from '../../../utils';
+
+const SEARCH_ADDRESS_DEBOUNCE = 250;
+
+export interface AddressInputProps
+  extends Omit<
+    WDSAddressInputProps,
+    'value' | 'onChange' | 'onSelect' | 'disabled'
+  > {
+  value?: Address;
+  onChange?: (value?: Address) => void;
+  onInput?: () => void;
+  onSelectAddress?: () => void;
+  readOnly?: boolean;
+  reverseOnEscape?: boolean;
+  /** Optional atlas service for address search. Defaults to WixAtlasService. Useful for testing. */
+  atlasService?: AtlasService;
+}
+
+export interface AddressInputImperativeHandle {
+  focus: () => void;
+  clear: () => void;
+}
+
+export const AddressInput = forwardRef<
+  AddressInputImperativeHandle,
+  AddressInputProps
+>(
+  (
+    {
+      value,
+      onChange,
+      onInput,
+      readOnly,
+      onFocus,
+      onBlur,
+      status,
+      onSelectAddress = noop,
+      reverseOnEscape,
+      atlasService,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const atlas = useMemo(
+      () => atlasService ?? new WixAtlasService(),
+      [atlasService],
+    );
+    const { t } = useTranslations();
+
+    const [address, setAddress, prevAddressRef] = useControlledInput(value);
+    const reverseAddress = useReverseValue(setAddress, prevAddressRef);
+    const clearAddress = useClearValue(setAddress);
+
+    const triggerOnChange = useCallback(
+      (commonAddress?: AtlasAddress) => {
+        const changedValue =
+          commonAddress && atlasAddressToAddress(commonAddress);
+        !isEqual(value, changedValue) && onChange?.(changedValue);
+      },
+      [value, onChange],
+    );
+
+    const [inputValue, setInputValue, prevInputValueRef] = useControlledInput(
+      address?.formatted ?? '',
+    );
+    const reverseInputValue = useReverseValue(setInputValue, prevInputValueRef);
+    const clearInputValue = useClearValue(setInputValue, '');
+
+    const [isSearching, setIsSearching] = useState(false);
+    const [searchResults, setSearchResults] = useState<AtlasAddress[]>([]);
+    const [searchResultsError, setSearchResultsError] = useState<Error>();
+    const searchAddress = useMemo(
+      () =>
+        debounce((query: string) => {
+          setIsSearching(true);
+          setSearchResultsError(undefined);
+          return atlas
+            .searchAddress(query)
+            .then(setSearchResults)
+            .catch(setSearchResultsError)
+            .finally(() => setIsSearching(false));
+        }, SEARCH_ADDRESS_DEBOUNCE),
+      [atlas],
+    );
+    useEffect(
+      () => () => {
+        searchAddress.cancel();
+      },
+      [searchAddress],
+    );
+
+    const onInputChange = useCallback(
+      ({ target }: React.ChangeEvent<HTMLInputElement>) => {
+        onInput?.();
+        setInputValue(target.value);
+
+        const trimmedValue = target.value.trim();
+
+        if (trimmedValue) {
+          searchAddress(trimmedValue);
+        } else {
+          setAddress(undefined);
+          setSearchResults([]);
+
+          setIsSearching(false);
+          setSearchResultsError(undefined);
+        }
+      },
+      [onInput, setAddress, setInputValue, searchAddress],
+    );
+
+    const addressInputRef = useRef<WDSAddressInputRef>(null);
+    useImperativeHandle(
+      forwardedRef,
+      () => ({
+        focus: () => addressInputRef.current?.focus(),
+        clear: () => {
+          clearAddress();
+          clearInputValue();
+        },
+      }),
+      [clearAddress, clearInputValue],
+    );
+
+    const isFocusedRef = useRef(false);
+    const onSetSelection = useSetSelectionOnFocus();
+    const onInputFocus = useCallback(
+      (e?: React.FocusEvent<HTMLInputElement>) => {
+        isFocusedRef.current = true;
+        onSetSelection(e);
+        onFocus?.(e);
+      },
+      [onSetSelection, onFocus],
+    );
+    const onInputBlur = useCallback(
+      (e: React.FocusEvent<HTMLInputElement>) => {
+        setSearchResultsError(undefined);
+        isFocusedRef.current = false;
+        onBlur?.(e);
+      },
+      [onBlur],
+    );
+
+    const isMountedRef = useRef(true);
+    useEffect(
+      () => () => {
+        isMountedRef.current = false;
+      },
+      [],
+    );
+
+    const requestFrameCallback = useRequestFrameCallback();
+    const onSelect = useCallback(
+      async (option: DropdownLayoutValueOption) => {
+        const index = Number(option.id);
+        const selectedAddress = searchResults[index];
+
+        if (!selectedAddress) {
+          return;
+        }
+
+        onInput?.();
+        setInputValue(selectedAddress.formatted ?? '');
+        triggerOnChange(selectedAddress);
+        requestFrameCallback(onSelectAddress);
+      },
+      [
+        onInput,
+        onSelectAddress,
+        requestFrameCallback,
+        searchResults,
+        setInputValue,
+        triggerOnChange,
+      ],
+    );
+
+    const inputStatus = useMemo(() => {
+      if (isSearching) {
+        return 'loading';
+      }
+
+      if (searchResultsError) {
+        return 'error';
+      }
+
+      return status;
+    }, [isSearching, searchResultsError, status]);
+
+    const onMouseDown = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+      const target = e.target as HTMLElement;
+
+      if (target.tagName !== 'INPUT') {
+        e.preventDefault();
+      }
+    }, []);
+
+    const onKeyDown = useCallback(
+      (e: React.KeyboardEvent) => {
+        const target = e.target as HTMLInputElement;
+
+        if (target.tagName !== 'INPUT') {
+          return;
+        }
+
+        if (e.key === 'Escape') {
+          if (reverseOnEscape) {
+            reverseAddress();
+            reverseInputValue();
+            return;
+          }
+
+          if (target.value) {
+            triggerOnChange(prevAddressRef.current);
+          } else {
+            triggerOnChange(undefined);
+          }
+
+          onSelectAddress();
+        }
+      },
+      [
+        prevAddressRef,
+        triggerOnChange,
+        onSelectAddress,
+        reverseOnEscape,
+        reverseAddress,
+        reverseInputValue,
+      ],
+    );
+
+    const options = useMemo(
+      () =>
+        searchResults.map((addr, index) => {
+          const [mainLabel, ...secondaryLabelParts] =
+            addr?.formatted?.split(', ') ?? [];
+
+          return addressInputItemBuilder({
+            id: index,
+            displayLabel: addr.formatted ?? '',
+            mainLabel: mainLabel ?? '',
+            secondaryLabel: secondaryLabelParts.join(', '),
+            optionLayout: 'single-line',
+          });
+        }),
+      [searchResults],
+    );
+
+    return (
+      <div onMouseDown={onMouseDown} onKeyDown={onKeyDown}>
+        <WDSAddressInput
+          dataHook="address-input"
+          {...props}
+          ref={addressInputRef}
+          disabled={readOnly}
+          placeholder={t('auto-patterns.fields.field_type_address_placeholder')}
+          options={options}
+          clearButton={false}
+          onSelect={onSelect}
+          value={inputValue}
+          onChange={onInputChange}
+          onFocus={onInputFocus}
+          onBlur={onInputBlur}
+          autoSelect={false}
+          status={inputStatus}
+        />
+      </div>
+    );
+  },
+);
+
+AddressInput.displayName = 'AddressInput';

package/src/components/address/input/address-input.uni.driver.ts

@@ -0,0 +1,10 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/dist/types/unidriver';
+import { AddressInputUniDriver as WDSAddressInputUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+
+export function AddressInputUniDriver(base: UniDriver, body: UniDriver) {
+  const input = () => WDSAddressInputUniDriver(base, body);
+
+  return {
+    ...input(),
+  };
+}

package/src/components/address/input/form-address-input.tsx

@@ -0,0 +1,45 @@
+import React, { useRef } from 'react';
+
+import type { Address } from '../../../types/address';
+import type { FormInputProps } from '../../../types/form-input';
+import { Z_INDEX_MODAL_POPOVER } from '../../common';
+import { useAutoFocus } from '../../../hooks';
+
+import type { AddressInputImperativeHandle } from './address-input';
+import { AddressInput } from './address-input';
+
+const popoverProps = {
+  maxWidth: 540,
+  appendTo: 'window',
+  zIndex: Z_INDEX_MODAL_POPOVER,
+} as const;
+
+export type FormAddressInputProps = FormInputProps<Address>;
+
+export const FormAddressInput: React.FC<FormAddressInputProps> = ({
+  data,
+  onChange,
+  onInput,
+  autoFocus,
+  readOnly,
+  dataHook,
+}) => {
+  const inputRef = useRef<AddressInputImperativeHandle>(null);
+  useAutoFocus(inputRef, autoFocus);
+
+  return (
+    <AddressInput
+      ref={inputRef}
+      dataHook={dataHook}
+      value={data}
+      onChange={onChange}
+      onInput={onInput}
+      readOnly={readOnly}
+      border="standard"
+      popoverProps={popoverProps}
+    />
+  );
+};
+
+FormAddressInput.displayName = 'FormAddressInput';
+

package/src/components/address/input/index.ts

@@ -0,0 +1,3 @@
+export * from './address-input';
+export * from './form-address-input';
+

package/src/components/address/view/address-view.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { TextView } from '../../text';
+
+import { useFormattedAddress } from './hooks';
+import { Address } from '../../../types/address';
+import { TextProps } from '@wix/design-system';
+
+export type AddressViewProps = TextProps & {
+  data?: Address;
+};
+
+export const AddressView: React.FC<AddressViewProps> = ({ data, ...rest }) => {
+  const address = useFormattedAddress(data);
+  return <TextView dataHook="address-view" {...rest} data={address} />;
+};
+
+AddressView.displayName = 'AddressView';

package/src/components/address/view/address-view.uni.driver.ts

@@ -0,0 +1,9 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/dist/types/unidriver';
+import { baseUniDriverFactory } from '../../../testkit/base-driver';
+
+export function AddressViewUniDriver(base: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+    getText: () => base.text(),
+  };
+}

package/src/components/address/view/hooks.ts

@@ -0,0 +1,6 @@
+import type { Address } from '../../../types/address';
+
+export const useFormattedAddress = (address?: Address) => {
+  return address?.formatted ?? '';
+};
+

package/src/components/address/view/index.ts

@@ -0,0 +1,2 @@
+export * from './address-view';
+

package/src/components/audio/actions/actions-button/actions-button.tsx

@@ -0,0 +1,64 @@
+import type { FC } from 'react';
+import React, { useCallback } from 'react';
+
+import type { IconButtonProps } from '@wix/design-system';
+import { IconButton } from '@wix/design-system';
+import { More as MoreIcon } from '@wix/wix-ui-icons-common';
+
+import type { ActionsMenuProps } from '../actions-menu';
+import { ActionsMenu } from '../actions-menu';
+
+export type ActionsButtonProps = IconButtonProps & {
+  actionsMenuProps: Omit<ActionsMenuProps, 'children'>;
+  onClick?: React.MouseEventHandler;
+};
+
+export const ActionsButton: FC<ActionsButtonProps> = ({
+  actionsMenuProps,
+  priority = 'primary',
+  skin = 'standard',
+  size,
+  dataHook,
+  onClick,
+  disabled,
+  className,
+}) => {
+  const handleClick = useCallback<
+    (toggle: () => void) => React.MouseEventHandler
+  >(
+    (toggle) => (e) => {
+      onClick?.(e);
+      toggle();
+    },
+    [onClick],
+  );
+
+  const renderChildren = useCallback(
+    ({ toggle }) => {
+      return (
+        <IconButton
+          dataHook={dataHook}
+          priority={priority}
+          onClick={handleClick(toggle)}
+          skin={skin}
+          disabled={disabled}
+          size={size}
+          className={className}
+        >
+          <MoreIcon />
+        </IconButton>
+      );
+    },
+    [dataHook, priority, skin, size, disabled, handleClick, className],
+  );
+
+  return (
+    <ActionsMenu
+      placement="bottom"
+      {...actionsMenuProps}
+      children={renderChildren}
+    />
+  );
+};
+
+ActionsButton.displayName = 'ActionsButton';

package/src/components/audio/actions/actions-button/index.ts

@@ -0,0 +1 @@
+export * from './actions-button';

package/src/components/audio/actions/actions-menu/actions-menu.st.css

@@ -0,0 +1,5 @@
+@property st-global(--wds-space-100);
+
+.action {
+    margin-left: calc(var(--wds-space-100, 6px) * -1);
+}

package/src/components/audio/actions/actions-menu/actions-menu.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "actionsmenu3598247207";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style: import("@stylable/runtime").STFunction = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"actionsmenu3598247207__root","action":"actionsmenu3598247207__action"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wds-space-100":"--wds-space-100"}; 
+
+
+
+

package/src/components/audio/actions/actions-menu/actions-menu.tsx

@@ -0,0 +1,153 @@
+import omit from 'lodash/omit';
+import React, { useCallback, useEffect, useState, useRef } from 'react';
+
+import type {
+  BoxProps,
+  PopoverMenuProps,
+  PopoverMenuItemProps,
+} from '@wix/design-system';
+import { Box, PopoverMenu } from '@wix/design-system';
+
+import {
+  getAppPopoverMaxHeight,
+  preventEvent,
+  stopEvent,
+  isTruthy,
+} from '../../../../utils';
+import { useResizeEffect } from '../../../../hooks';
+
+import { Z_INDEX_POPOVER } from '../../../common';
+
+import { classes } from './actions-menu.st.css.js';
+
+export type ActionsMenuAction = Omit<
+  PopoverMenuItemProps,
+  'text' | 'subtitle' | 'prefixIcon'
+> & {
+  id?: string | number;
+} & (
+    | {
+        element: React.ReactElement;
+      }
+    | {
+        icon?: PopoverMenuItemProps['prefixIcon'];
+        label: string;
+      }
+  );
+
+export type ActionsMenuDivider = 'divider';
+export type ActionsMenuItem = ActionsMenuAction | ActionsMenuDivider;
+
+export const ACTIONS_MENU_DIVIDER: ActionsMenuDivider = 'divider';
+
+export const actionsFromSections = (
+  sections: (ActionsMenuAction | undefined)[][],
+): ActionsMenuItem[] =>
+  sections
+    .map((section) => section.filter(isTruthy) as ActionsMenuAction[])
+    .filter((section) => section.length > 0)
+    .flatMap((section) => [...section, ACTIONS_MENU_DIVIDER] as ActionsMenuItem[])
+    .slice(0, -1);
+
+export interface ActionsMenuProps
+  extends Omit<PopoverMenuProps, 'triggerElement'> {
+  actions: ActionsMenuItem[];
+  focusable?: boolean;
+  onKeyDown?: React.KeyboardEventHandler;
+  children: PopoverMenuProps['triggerElement'];
+}
+
+export interface ActionsMenuActionProps extends BoxProps {
+  icon?: React.ReactElement;
+}
+
+type ActionsMenuFC = React.FC<ActionsMenuProps> & {
+  Action: React.FC<ActionsMenuActionProps>;
+};
+
+const getActionsMenuOffset = (showArrow = true) => ({
+  up: showArrow ? 18 : 12,
+  down: showArrow ? 18 : 12,
+});
+
+export const ActionsMenu: ActionsMenuFC = ({
+  actions,
+  focusable = false,
+  onKeyDown,
+  children,
+  ...props
+}) => {
+  const anchorRef = useRef<HTMLDivElement>(null);
+
+  const [maxHeight, setMaxHeight] = useState<number>();
+  const updateMaxHeight = useCallback(
+    () =>
+      setMaxHeight(
+        getAppPopoverMaxHeight(
+          anchorRef.current,
+          props.flip,
+          getActionsMenuOffset(props.showArrow),
+        ),
+      ),
+    [props.flip, props.showArrow],
+  );
+
+  useResizeEffect(updateMaxHeight);
+  useEffect(() => {
+    const frameId = requestAnimationFrame(updateMaxHeight);
+    return () => cancelAnimationFrame(frameId);
+  }, [updateMaxHeight]);
+
+  return (
+    <div
+      ref={anchorRef}
+      onClick={!focusable ? stopEvent : undefined}
+      onMouseDown={!focusable ? preventEvent : undefined}
+      onKeyDownCapture={onKeyDown}
+    >
+      <PopoverMenu
+        placement="auto"
+        zIndex={Z_INDEX_POPOVER}
+        {...props}
+        triggerElement={children}
+        maxHeight={props.maxHeight ?? maxHeight}
+      >
+        {actions.map((action, index) => {
+          if (action === ACTIONS_MENU_DIVIDER) {
+            return <PopoverMenu.Divider key={`divider-${index}`} />;
+          }
+
+          const itemProps =
+            'label' in action
+              ? {
+                  text: action.label,
+                  prefixIcon: action.icon,
+                  ...omit(action, 'id', 'label', 'icon'),
+                }
+              : {
+                  text: action.element,
+                  ...omit(action, 'id', 'element'),
+                };
+
+          return (
+            <PopoverMenu.MenuItem
+              key={action.id ?? `item-${index}`}
+              {...itemProps}
+            />
+          );
+        })}
+      </PopoverMenu>
+    </div>
+  );
+};
+
+ActionsMenu.displayName = 'ActionsMenu';
+
+ActionsMenu.Action = ({ icon, children, ...props }) => (
+  <Box className={classes.action} verticalAlign="middle" gap="SP1" {...props}>
+    <Box>{icon}</Box>
+    {children}
+  </Box>
+);
+
+ActionsMenu.Action.displayName = 'ActionsMenu.Action';

package/src/components/audio/actions/actions-menu/index.ts

@@ -0,0 +1,2 @@
+export * from './actions-menu';
+export * from './types';

package/src/components/audio/actions/actions-menu/types.ts

@@ -0,0 +1,13 @@
+export interface UseActionProps {
+  dataHook: string;
+  actionText: string;
+  onAction?: () => void;
+  iconSize?: 'small' | 'medium';
+}
+
+export interface ActionsMenuTriggerProps {
+  toggle: () => void;
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+}