@workday/canvas-kit-labs-react 15.0.0-alpha.0064-next.0 → 15.0.0-alpha.0074-next.0

package/dist/es6/combobox/lib/Combobox.js

@@ -1,317 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useLayoutEffect, useRef, useState, useCallback } from 'react';
-import { jsx, keyframes } from '@emotion/react';
-import { useForkRef, styled, useUniqueId, filterOutProps, } from '@workday/canvas-kit-react/common';
-import { space, commonColors, borderRadius } from '@workday/canvas-kit-react/tokens';
-import { Card } from '@workday/canvas-kit-react/card';
-import { TertiaryButton } from '@workday/canvas-kit-react/button';
-import { xSmallIcon } from '@workday/canvas-system-icons-web';
-import flatten from 'lodash.flatten';
-import { AutocompleteList } from './AutocompleteList';
-import { Status } from './Status';
-const Container = styled('div')({
-    display: 'inline-block',
-}, ({ grow }) => ({
-    width: grow ? '100%' : 'auto',
-}));
-const InputContainer = styled('div')({
-    display: `flex`,
-    alignItems: `center`,
-    position: 'relative',
-});
-const fadeInKeyframes = keyframes({
-    '0%': {
-        opacity: 0,
-    },
-    '100%': {
-        opacity: 1,
-    },
-});
-const MenuContainer = styled(Card)({
-    position: 'absolute',
-    zIndex: 1,
-    left: 0,
-    top: '100%',
-    borderRadius: borderRadius.m,
-    background: commonColors.background,
-    border: `none`,
-    marginTop: `-${borderRadius.m}`,
-    width: '100%',
-    minWidth: 0,
-    animation: `${fadeInKeyframes} 200ms ease-out`,
-    maxHeight: 200,
-    overflow: 'hidden',
-});
-const ResetButton = styled(TertiaryButton, {
-    shouldForwardProp: filterOutProps(['shouldShow']),
-})({
-    position: 'absolute',
-    margin: `auto ${space.xxxs}`,
-    top: 0,
-    bottom: 0,
-    right: 0,
-    padding: 0,
-    zIndex: 2,
-    transition: 'opacity 120ms',
-}, ({ shouldShow }) => ({
-    visibility: shouldShow ? 'visible' : 'hidden',
-    opacity: shouldShow ? 1 : 0,
-}));
-/**
- * @deprecated ⚠️ `listBoxIdPart` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
- */
-export const listBoxIdPart = `listbox`;
-const optionIdPart = `option`;
-/**
- * @deprecated ⚠️ `getOptionId` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
- */
-export const getOptionId = (baseId, index) => `${baseId}-${optionIdPart}-${index}`;
-/**
- * @deprecated ⚠️ `getTextFromElement` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
- */
-export const getTextFromElement = (children) => {
-    let text = '';
-    React.Children.map(children, child => {
-        if (child == null || typeof child === 'boolean') {
-            text += '';
-        }
-        else if (typeof child === 'string' || typeof child === 'number') {
-            text += child.toString();
-        }
-        else if (Array.isArray(child)) {
-            text += getTextFromElement(child);
-        }
-        else if ('props' in child) {
-            text += getTextFromElement(child.props.children);
-        }
-    });
-    return text;
-};
-const buildStatusString = (listCount) => {
-    return `There ${listCount === 1 ? 'is' : 'are'} ${listCount} suggestion${listCount === 1 ? '' : 's'}.`;
-};
-const isValidSingleChild = (child) => {
-    return React.isValidElement(child) && React.Children.only(child);
-};
-/**
- * @deprecated ⚠️ `Combobox` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
- */
-export const Combobox = ({ autocompleteItems, children, grow, initialValue, onChange, onFocus, onBlur, showClearButton, clearButtonVariant = undefined, clearButtonAriaLabel = `Reset Search Input`, labelId, getStatusText = buildStatusString, id, ...elemProps }) => {
-    const [isOpened, setIsOpened] = useState(false);
-    const [value, _setValue] = useState(''); // Don't call _setValue directly instead call setInputValue to make sure onChange fires correctly
-    const [showingAutocomplete, setShowingAutocomplete] = useState(false);
-    const [selectedAutocompleteIndex, setSelectedAutocompleteIndex] = useState(null);
-    const [interactiveAutocompleteItems, setInteractiveAutocompleteItems] = useState([]);
-    const [announcementText, setAnnouncementText] = useState('');
-    // Create a ref to the soon-to-be-created TextInput clone for internal use.
-    // Use useForkRef to combine it with the ref already assigned to the original
-    // TextInput (if it exists) to create a single callback ref which can be
-    // forwarded to the TextInput clone.
-    const inputRef = useRef(null);
-    // We need access to the original TextInput's ref _property_ (not prop) so we
-    // can combine it with the internal inputRef using useForkRef. ref isn't
-    // listed in the ReactElement interface, but it's there, so we cast children
-    // to satisfy TS.
-    const elementRef = useForkRef(children.ref, inputRef);
-    const comboboxRef = useRef(null);
-    const randomComponentId = useUniqueId();
-    const randomLabelId = useUniqueId();
-    const componentId = id || randomComponentId;
-    const formLabelId = labelId || randomLabelId;
-    const [showGroupText, setShowGroupText] = useState(false);
-    // We're using LayoutEffect here because of an issue with the Synthetic event system and typing a key
-    // after the listbox has been closed. Somehow the key is ignored unless we use `useLayoutEffect`
-    useLayoutEffect(() => {
-        const shouldShow = interactiveAutocompleteItems.length > 0 && isOpened;
-        setShowingAutocomplete(shouldShow);
-        if (shouldShow) {
-            setAnnouncementText(getStatusText(interactiveAutocompleteItems.length));
-        }
-    }, [getStatusText, interactiveAutocompleteItems, isOpened]);
-    const setInputValue = useCallback((newValue) => {
-        _setValue(newValue);
-        const inputDomElement = inputRef.current;
-        // Changing value prop programmatically doesn't fire an Synthetic event or trigger native onChange.
-        // We can not just update .value= in setState because React library overrides input value setter
-        // but we can call the function directly on the input as context.
-        // This will cause onChange events to fire no matter how value is updated.
-        if (inputDomElement) {
-            const nativeInputValue = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(inputDomElement), 'value');
-            if (nativeInputValue && nativeInputValue.set) {
-                nativeInputValue.set.call(inputDomElement, newValue);
-            }
-            let event;
-            if (typeof Event === 'function') {
-                // modern browsers
-                event = new Event('input', { bubbles: true });
-            }
-            else {
-                // IE 11
-                event = document.createEvent('Event');
-                event.initEvent('input', true, true);
-            }
-            inputDomElement.dispatchEvent(event);
-        }
-    }, [inputRef]);
-    useEffect(() => {
-        if (initialValue !== null && initialValue !== undefined) {
-            setInputValue(initialValue);
-        }
-    }, [initialValue, setInputValue]);
-    useEffect(() => {
-        const getInteractiveAutocompleteItems = () => {
-            if (autocompleteItems &&
-                autocompleteItems.length &&
-                autocompleteItems[0].hasOwnProperty('header')) {
-                return flatten(autocompleteItems.map(group => group.items));
-            }
-            return autocompleteItems || [];
-        };
-        setInteractiveAutocompleteItems(getInteractiveAutocompleteItems());
-    }, [autocompleteItems]);
-    const handleAutocompleteClick = (event, menuItemProps) => {
-        if (menuItemProps.isDisabled || menuItemProps['aria-disabled']) {
-            return;
-        }
-        setShowingAutocomplete(false);
-        setIsOpened(false);
-        setInputValue(getTextFromElement(menuItemProps.children));
-        if (menuItemProps.onClick) {
-            menuItemProps.onClick(event);
-        }
-    };
-    const focusInput = () => {
-        if (inputRef.current) {
-            inputRef.current.focus();
-        }
-    };
-    const handleClick = (event) => {
-        if (!showingAutocomplete) {
-            setShowingAutocomplete(true);
-        }
-    };
-    const handleFocus = (event) => {
-        setIsOpened(true);
-        if (onFocus) {
-            onFocus(event);
-        }
-    };
-    const handleBlur = (event) => {
-        if (comboboxRef.current) {
-            const target = event.relatedTarget;
-            if (target && comboboxRef.current.contains(target)) {
-                return;
-            }
-        }
-        setIsOpened(false);
-        if (onBlur) {
-            onBlur(event);
-        }
-    };
-    const resetSearchInput = () => {
-        setInputValue('');
-        focusInput();
-    };
-    const getGroupIndex = (itemIndex) => {
-        if (itemIndex != null &&
-            autocompleteItems &&
-            autocompleteItems.length &&
-            autocompleteItems[0].hasOwnProperty('header')) {
-            let count = 0;
-            return autocompleteItems.findIndex(groups => {
-                count += groups.items.length;
-                return count > itemIndex;
-            });
-        }
-        else {
-            return -1;
-        }
-    };
-    const handleKeyboardShortcuts = (event) => {
-        if (event.ctrlKey || event.altKey || event.metaKey || !interactiveAutocompleteItems.length) {
-            return;
-        }
-        const autoCompleteItemCount = interactiveAutocompleteItems.length;
-        const firstItem = 0;
-        const lastItem = autoCompleteItemCount - 1;
-        let nextIndex = null;
-        setIsOpened(true);
-        switch (event.key) {
-            case 'ArrowUp':
-            case 'Up': // IE/Edge specific value
-                const upIndex = selectedAutocompleteIndex !== null ? selectedAutocompleteIndex - 1 : lastItem;
-                nextIndex = upIndex < 0 ? lastItem : upIndex;
-                event.stopPropagation();
-                event.preventDefault();
-                break;
-            case 'ArrowDown':
-            case 'Down': // IE/Edge specific value
-                const downIndex = selectedAutocompleteIndex !== null ? selectedAutocompleteIndex + 1 : firstItem;
-                nextIndex = downIndex >= autoCompleteItemCount ? firstItem : downIndex;
-                event.stopPropagation();
-                event.preventDefault();
-                break;
-            case 'Escape':
-            case 'Esc': // IE/Edge specific value
-                resetSearchInput();
-                break;
-            case 'Enter':
-                if (selectedAutocompleteIndex != null) {
-                    const item = interactiveAutocompleteItems[selectedAutocompleteIndex];
-                    handleAutocompleteClick(event, item.props);
-                    if (item.props.isDisabled || item.props['aria-disabled']) {
-                        nextIndex = selectedAutocompleteIndex;
-                    }
-                    event.stopPropagation();
-                    event.preventDefault();
-                }
-                break;
-            default:
-        }
-        const lastGroupIndex = getGroupIndex(selectedAutocompleteIndex);
-        const nextGroupIndex = getGroupIndex(nextIndex);
-        setShowGroupText(lastGroupIndex !== nextGroupIndex);
-        setSelectedAutocompleteIndex(nextIndex);
-    };
-    const handleSearchInputChange = (event) => {
-        if (onChange) {
-            onChange(event);
-        }
-        _setValue(event.target.value); // Calling set value directly only for on change event
-    };
-    const renderChildren = (inputElement) => {
-        let cssOverride = { ':focus': { zIndex: 2 } };
-        if (showClearButton) {
-            cssOverride = {
-                ...cssOverride,
-                paddingInlineEnd: space.xl,
-            };
-        }
-        const newTextInputProps = {
-            type: 'text',
-            grow: grow,
-            value: value,
-            ref: elementRef,
-            'aria-autocomplete': 'list',
-            'aria-activedescendant': selectedAutocompleteIndex !== null
-                ? getOptionId(componentId, selectedAutocompleteIndex)
-                : undefined,
-            onClick: handleClick,
-            onChange: handleSearchInputChange,
-            onKeyDown: handleKeyboardShortcuts,
-            onFocus: handleFocus,
-            onBlur: handleBlur,
-            css: cssOverride,
-            role: 'combobox',
-            'aria-owns': showingAutocomplete ? `${componentId}-${listBoxIdPart}` : undefined,
-            'aria-haspopup': true,
-            'aria-expanded': showingAutocomplete,
-        };
-        const cloneElement = (element, props) => jsx(element.type, {
-            ...element.props,
-            ...props,
-        });
-        return cloneElement(inputElement, { ...inputElement.props, ...newTextInputProps });
-    };
-    return (_jsxs(Container, { grow: grow, ...elemProps, children: [_jsxs(InputContainer, { ref: comboboxRef, children: [isValidSingleChild(children) && React.Children.map(children, renderChildren), showClearButton && (_jsx(ResetButton, { shouldShow: !!value, "aria-label": clearButtonAriaLabel, icon: xSmallIcon, variant: clearButtonVariant, onClick: resetSearchInput, onBlur: handleBlur, "data-part": "combobox-reset-button", size: "small", type: "button" })), showingAutocomplete && autocompleteItems && (_jsx(MenuContainer, { padding: space.zero, depth: 3, children: _jsx(Card.Body, { children: _jsx(AutocompleteList, { comboboxId: componentId, autocompleteItems: autocompleteItems, selectedIndex: selectedAutocompleteIndex, handleAutocompleteClick: handleAutocompleteClick, labelId: formLabelId, showGroupText: showGroupText }) }) }))] }), _jsx(Status, { announcementText: announcementText })] }));
-};

package/dist/es6/combobox/lib/Status.d.ts

@@ -1,16 +0,0 @@
-/**
- * @deprecated ⚠️ `StatusProps` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
- */
-export interface StatusProps {
-    ariaLive?: 'polite' | 'assertive' | 'off';
-    role?: 'log' | 'status' | 'alert' | 'progressbar' | 'marquee' | 'timer';
-    ariaRelevant?: 'additions' | 'additions text' | 'all' | 'removals' | 'text';
-    ariaAtomic?: boolean;
-    expireMilliseconds?: number;
-    announcementText?: string;
-}
-/**
- * @deprecated ⚠️ `Status` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
- */
-export declare const Status: ({ ariaLive, role, ariaRelevant, expireMilliseconds, announcementText, ariaAtomic, }: StatusProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Status.d.ts.map

package/dist/es6/combobox/lib/Status.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Status.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;IAC1C,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;IACxE,YAAY,CAAC,EAAE,WAAW,GAAG,gBAAgB,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,CAAC;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAID;;GAEG;AACH,eAAO,MAAM,MAAM,wFAOhB,WAAW,4CAuBb,CAAC"}

package/dist/es6/combobox/lib/Status.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import styled from '@emotion/styled';
-import { accessibleHide } from '@workday/canvas-kit-react/common';
-const Container = styled('div')(accessibleHide);
-/**
- * @deprecated ⚠️ `Status` in Labs has been deprecated and will be removed in a future major version. Please use [`Combobox` in Main](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) instead.
- */
-export const Status = ({ ariaLive = 'polite', role = 'status', ariaRelevant = 'additions', expireMilliseconds = 500, announcementText = '', ariaAtomic, }) => {
-    const [displayText, setDisplayText] = useState(announcementText);
-    useEffect(() => {
-        if (!announcementText) {
-            return;
-        }
-        setDisplayText(announcementText);
-        const clearText = setTimeout(() => setDisplayText(''), expireMilliseconds);
-        return () => {
-            clearTimeout(clearText);
-        };
-    }, [announcementText, expireMilliseconds]);
-    return (_jsx(Container, { "aria-live": ariaLive, role: role, "aria-relevant": ariaRelevant, "aria-atomic": ariaAtomic, children: displayText }));
-};

package/dist/es6/search-form/index.d.ts

@@ -1,3 +0,0 @@
-export * from './lib/SearchForm';
-export * from './lib/themes';
-//# sourceMappingURL=index.d.ts.map

package/dist/es6/search-form/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../search-form/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC"}

package/dist/es6/search-form/index.js

@@ -1,2 +0,0 @@
-export * from './lib/SearchForm';
-export * from './lib/themes';