@economic/taco 1.1.7 → 1.1.9

package/dist/esm/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,119 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { useMemo, Children, isValidElement, forwardRef, createElement, createContext, useContext } from 'react';
+import cn from 'classnames';
+import { Root, Item, Indicator } from '@radix-ui/react-radio-group';
+
+var _excluded = ["children", "value"],
+    _excluded2 = ["children", "defaultValue", "disabled", "invalid", "onChange", "orientation", "value"];
+var getRadioGroupItemValueAsString = function getRadioGroupItemValueAsString(value) {
+  return String(value !== null && value !== void 0 ? value : '');
+};
+var findByValue = function findByValue(values, valueAsString) {
+  return values.find(function (value) {
+    return getRadioGroupItemValueAsString(value) === valueAsString;
+  });
+};
+var RadioGroupContext = /*#__PURE__*/createContext({
+  disabled: false,
+  invalid: false
+});
+var RadioGroupItem = /*#__PURE__*/forwardRef(function RadioGroupItem(props, ref) {
+  var context = useContext(RadioGroupContext);
+
+  var children = props.children,
+      value = props.value,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var isDisabled = context.disabled || props.disabled;
+  var className = cn('flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mt-[0.2rem] rounded-full bg-white border-2', {
+    'border-grey-dark hover:border-4 focus:yt-focus aria-checked:bg-blue aria-checked:border-blue hover:aria-checked:border-blue-light': !isDisabled && !context.invalid,
+    'border-grey cursor-not-allowed aria-checked:bg-blue-light aria-checked:border-blue-light ': isDisabled,
+    'border-red hover:border-4 text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red': context.invalid && !isDisabled
+  });
+  var labelClassName = cn('flex items-center gap-2', {
+    'cursor-pointer': !isDisabled,
+    'cursor-not-allowed text-grey-dark': isDisabled
+  }, props.className);
+  return createElement("label", {
+    className: labelClassName
+  }, createElement(Item, Object.assign({}, otherProps, {
+    className: className,
+    disabled: isDisabled,
+    ref: ref,
+    value: getRadioGroupItemValueAsString(value)
+  }), createElement(Indicator, {
+    className: "h-2 w-2 rounded-full bg-white"
+  })), children);
+});
+var useRadioGroup = function useRadioGroup(props) {
+  var children = props.children,
+      defaultValue = props.defaultValue,
+      disabled = props.disabled,
+      invalid = props.invalid,
+      onChange = props.onChange,
+      _props$orientation = props.orientation,
+      orientation = _props$orientation === void 0 ? 'vertical' : _props$orientation,
+      value = props.value,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
+
+  var values = useMemo(function () {
+    var radioGroupItemValues = [];
+    Children.forEach(children, function (child) {
+      if (isValidElement(child)) {
+        radioGroupItemValues.push(child.props.value);
+      }
+    });
+    return radioGroupItemValues;
+  }, [children]);
+  var context = useMemo(function () {
+    return {
+      disabled: disabled !== null && disabled !== void 0 ? disabled : false,
+      invalid: invalid !== null && invalid !== void 0 ? invalid : false
+    };
+  }, [disabled, invalid]);
+  var valueProps;
+
+  if (onChange !== undefined) {
+    var handleChange = function handleChange(value) {
+      return onChange(findByValue(values, value));
+    };
+
+    valueProps = {
+      onValueChange: handleChange,
+      value: value !== undefined ? getRadioGroupItemValueAsString(value) : undefined
+    };
+  } else {
+    valueProps = {
+      defaultValue: defaultValue !== undefined ? getRadioGroupItemValueAsString(defaultValue) : undefined
+    };
+  }
+
+  return {
+    context: context,
+    props: _extends({}, otherProps, valueProps, {
+      children: children,
+      orientation: orientation
+    })
+  };
+};
+var RadioGroup = /*#__PURE__*/forwardRef(function RadioGroup(props, ref) {
+  var _useRadioGroup = useRadioGroup(props),
+      context = _useRadioGroup.context,
+      otherProps = _useRadioGroup.props;
+
+  var className = cn('flex items-start gap-y-2', {
+    'flex-wrap gap-x-4 ': otherProps.orientation === 'horizontal',
+    'flex-col': otherProps.orientation === 'vertical'
+  }, otherProps.className);
+  return createElement(RadioGroupContext.Provider, {
+    value: context
+  }, createElement(Root, Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "radio-group",
+    ref: ref
+  })));
+});
+RadioGroup.Item = RadioGroupItem;
+
+export { RadioGroup, findByValue, getRadioGroupItemValueAsString, useRadioGroup };
+//# sourceMappingURL=RadioGroup.js.map

package/dist/esm/components/RadioGroup/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\nimport { Orientation } from '../../types';\n\nexport type RadioGroupItemValue = string | number | boolean | null;\n\nexport const getRadioGroupItemValueAsString = (value: RadioGroupItemValue): string => String(value ?? '');\n\nexport const findByValue = (values: RadioGroupItemValue[], valueAsString: string): RadioGroupItemValue =>\n    values.find(value => getRadioGroupItemValueAsString(value) === valueAsString) as RadioGroupItemValue;\n\nconst RadioGroupContext = React.createContext({ disabled: false, invalid: false });\n\nexport type RadioGroupItemProps<T = HTMLButtonElement> = Omit<\n    React.ButtonHTMLAttributes<T>,\n    'children' | 'onSelect' | 'value'\n> & {\n    /** Label for the radio group item */\n    children: React.ReactNode;\n    /* Whether the radio group item is disabled */\n    disabled?: boolean;\n    /** Value of the radio button */\n    value: RadioGroupItemValue;\n};\n\nconst RadioGroupItem = React.forwardRef(function RadioGroupItem(props: RadioGroupItemProps, ref: React.Ref<HTMLButtonElement>) {\n    const context = React.useContext(RadioGroupContext);\n    const { children, value, ...otherProps } = props;\n\n    const isDisabled = context.disabled || props.disabled;\n\n    const className = cn(\n        'flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mt-[0.2rem] rounded-full bg-white border-2',\n        {\n            'border-grey-dark hover:border-4 focus:yt-focus aria-checked:bg-blue aria-checked:border-blue hover:aria-checked:border-blue-light':\n                !isDisabled && !context.invalid,\n            'border-grey cursor-not-allowed aria-checked:bg-blue-light aria-checked:border-blue-light ': isDisabled,\n            'border-red hover:border-4 text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red':\n                context.invalid && !isDisabled,\n        }\n    );\n    const labelClassName = cn(\n        'flex items-center gap-2',\n        {\n            'cursor-pointer': !isDisabled,\n            'cursor-not-allowed text-grey-dark': isDisabled,\n        },\n        props.className\n    );\n\n    return (\n        <label className={labelClassName}>\n            <RadioGroupPrimitive.Item\n                {...otherProps}\n                className={className}\n                disabled={isDisabled}\n                ref={ref}\n                value={getRadioGroupItemValueAsString(value)}\n            >\n                <RadioGroupPrimitive.Indicator className=\"h-2 w-2 rounded-full bg-white\" />\n            </RadioGroupPrimitive.Item>\n            {children}\n        </label>\n    );\n});\n\ntype ReactGroupBaseChild = React.ReactElement<RadioGroupItemProps> | boolean | null;\n\ntype RadioGroupBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n    children: ReactGroupBaseChild[];\n    /* Whether the radio group is disabled */\n    disabled?: boolean;\n    /* Whether the radio group is in an invalid state */\n    invalid?: boolean;\n    /** The name of the radio group, used when submitting an HTML form */\n    name?: string;\n    /**\n     * Orientation of the radio group\n     * @defaultValue vertical\n     */\n    orientation?: Orientation;\n    /* Whether the radio group requires user input */\n    required?: boolean;\n};\n\ninterface UncontrolledRadioGroupProps extends RadioGroupBaseProps {\n    /* The default value (uncontrolled) */\n    defaultValue?: RadioGroupItemValue;\n    onChange?: never;\n    value?: never;\n}\n\ninterface ControlledRadioGroupProps extends RadioGroupBaseProps {\n    defaultValue?: never;\n    /** Handler called when the value changes */\n    onChange: (value: RadioGroupItemValue) => void;\n    /** The current value (controlled) */\n    value?: RadioGroupItemValue;\n}\n\nexport type RadioGroupProps = UncontrolledRadioGroupProps | ControlledRadioGroupProps;\n\nexport type ForwardedRadioGroupWithStatics = React.ForwardRefExoticComponent<\n    RadioGroupProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Item component rendered in a `RadioGroup` component */\n    Item: React.ForwardRefExoticComponent<RadioGroupItemProps>;\n};\n\nexport const useRadioGroup = (props: RadioGroupProps) => {\n    const { children, defaultValue, disabled, invalid, onChange, orientation = 'vertical', value, ...otherProps } = props;\n\n    const values = React.useMemo<RadioGroupItemValue[]>(() => {\n        const radioGroupItemValues: RadioGroupItemValue[] = [];\n\n        React.Children.forEach(children, child => {\n            if (React.isValidElement(child)) {\n                radioGroupItemValues.push(child.props.value);\n            }\n        });\n\n        return radioGroupItemValues;\n    }, [children]);\n\n    const context = React.useMemo(() => ({ disabled: disabled ?? false, invalid: invalid ?? false }), [disabled, invalid]);\n\n    let valueProps;\n\n    if (onChange !== undefined) {\n        const handleChange = (value: string): void => onChange(findByValue(values, value));\n\n        valueProps = {\n            onValueChange: handleChange,\n            value: value !== undefined ? getRadioGroupItemValueAsString(value) : undefined,\n        };\n    } else {\n        valueProps = {\n            defaultValue: defaultValue !== undefined ? getRadioGroupItemValueAsString(defaultValue) : undefined,\n        };\n    }\n\n    return {\n        context,\n        props: {\n            ...otherProps,\n            ...valueProps,\n            children,\n            orientation,\n        },\n    };\n};\n\nexport const RadioGroup = React.forwardRef(function RadioGroup(props: RadioGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { context, props: otherProps } = useRadioGroup(props);\n    const className = cn(\n        'flex items-start gap-y-2',\n        {\n            'flex-wrap gap-x-4 ': otherProps.orientation === 'horizontal',\n            'flex-col': otherProps.orientation === 'vertical',\n        },\n        otherProps.className\n    );\n\n    return (\n        <RadioGroupContext.Provider value={context}>\n            <RadioGroupPrimitive.Root {...otherProps} className={className} data-taco=\"radio-group\" ref={ref} />\n        </RadioGroupContext.Provider>\n    );\n}) as ForwardedRadioGroupWithStatics;\nRadioGroup.Item = RadioGroupItem;\n"],"names":["getRadioGroupItemValueAsString","value","String","findByValue","values","valueAsString","find","RadioGroupContext","React","disabled","invalid","RadioGroupItem","props","ref","context","children","otherProps","isDisabled","className","cn","labelClassName","RadioGroupPrimitive","useRadioGroup","defaultValue","onChange","orientation","radioGroupItemValues","forEach","child","push","valueProps","undefined","handleChange","onValueChange","RadioGroup","Provider","Item"],"mappings":"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"}

package/dist/esm/components/SearchInput/SearchInput.js

@@ -0,0 +1,96 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, createElement } from 'react';
+import '../Icon/components/index.js';
+import '../Icon/Icon.js';
+import '../Accordion/Accordion.js';
+import '../Backdrop/Backdrop.js';
+import '../VisuallyHidden/VisuallyHidden.js';
+import '../Badge/Badge.js';
+import '../Tooltip/Tooltip.js';
+import { IconButton } from '../IconButton/IconButton.js';
+import '../Banner/Banner.js';
+import '../Button/Button.js';
+import '../Spinner/Spinner.js';
+import '../Toast/Toaster.js';
+import { useLocalization } from '../Provider/Provider.js';
+import '../Calendar/Calendar.js';
+import '../Card/Card.js';
+import '../Checkbox/Checkbox.js';
+import { Input } from '../Input/Input.js';
+import keycode from 'keycode';
+import '../../utils/hooks/useListKeyboardNavigation.js';
+import '../../utils/hooks/useListScrollTo.js';
+import '../../utils/hooks/useBoundingClientRectListener.js';
+import '../Combobox/Combobox.js';
+import '../../utils/date.js';
+import '../Popover/Popover.js';
+import '../Datepicker/Datepicker.js';
+import '../Dialog/Dialog.js';
+import '../Field/Field.js';
+import '../Form/Form.js';
+import '../Group/Group.js';
+import '../Hanger/Hanger.js';
+import '../HoverCard/HoverCard.js';
+import '../Listbox/Listbox.js';
+import '../RadioGroup/RadioGroup.js';
+import '../Menu/Menu.js';
+import '../Treeview/Treeview.js';
+import '../Navigation/Navigation.js';
+import '../Select/Select.js';
+import '../Pagination/usePagination.js';
+import '../Pagination/Pagination.js';
+import '../Progress/Progress.js';
+import '../Table/components/Table.js';
+import '../Table/components/PaginatedTable.js';
+import '../Table/components/WindowedTable.js';
+import '../Table/util/rowIndexPath.js';
+import '../Table/hooks/useRowCreation.js';
+import '../Tabs/Tabs.js';
+import '../Textarea/Textarea.js';
+import '../Switch/Switch.js';
+import '../Tour/Tour.js';
+import '../../utils/hooks/useOnClickOutside.js';
+
+var _excluded = ["onSearch"];
+var SearchInput = /*#__PURE__*/forwardRef(function SearchInput(_ref, ref) {
+  var onSearch = _ref.onSearch,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var _useLocalization = useLocalization(),
+      texts = _useLocalization.texts;
+
+  var handleClick = function handleClick() {
+    if (!props.disabled) {
+      onSearch === null || onSearch === void 0 ? void 0 : onSearch(props.value);
+    }
+  };
+
+  var handleKeyDown = function handleKeyDown(event) {
+    var _props$onKeyDown;
+
+    var isEnterKeyPressed = event.keyCode === keycode('enter');
+
+    if (isEnterKeyPressed) {
+      handleClick();
+    }
+
+    (_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 ? void 0 : _props$onKeyDown.call(props, event);
+  };
+
+  return createElement(Input, Object.assign({
+    "aria-label": texts.searchInput.inputLabel
+  }, props, {
+    button: createElement(IconButton, {
+      icon: "search",
+      className: "!border-transparent !bg-transparent focus:!border-transparent peer-focus:!border-transparent peer-focus:peer-active:!border-transparent",
+      disabled: props.disabled,
+      onClick: handleClick
+    }),
+    onKeyDown: handleKeyDown,
+    ref: ref,
+    type: "search"
+  }));
+});
+
+export { SearchInput };
+//# sourceMappingURL=SearchInput.js.map

package/dist/esm/components/SearchInput/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sources":["../../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\n\nexport type SearchInputTexts = {\n    /**\n     * aria-label text for input\n     */\n    inputLabel: string;\n};\n\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\n    /** Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined */\n    onSearch?: (value: string | number | readonly string[] | undefined) => void;\n};\n\nexport const SearchInput = React.forwardRef(function SearchInput(\n    { onSearch, ...props }: SearchInputProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { texts } = useLocalization();\n\n    const handleClick = (): void => {\n        if (!props.disabled) {\n            onSearch?.(props.value);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        const isEnterKeyPressed = event.keyCode === keycode('enter');\n\n        if (isEnterKeyPressed) {\n            handleClick();\n        }\n\n        props.onKeyDown?.(event);\n    };\n\n    return (\n        <Input\n            aria-label={texts.searchInput.inputLabel}\n            {...props}\n            button={\n                <IconButton\n                    icon=\"search\"\n                    className=\"!border-transparent !bg-transparent focus:!border-transparent peer-focus:!border-transparent peer-focus:peer-active:!border-transparent\"\n                    disabled={props.disabled}\n                    onClick={handleClick}\n                />\n            }\n            onKeyDown={handleKeyDown}\n            ref={ref}\n            type=\"search\"\n        />\n    );\n});\n"],"names":["SearchInput","React","ref","onSearch","props","useLocalization","texts","handleClick","disabled","value","handleKeyDown","event","isEnterKeyPressed","keyCode","keycode","onKeyDown","Input","searchInput","inputLabel","button","IconButton","icon","className","onClick","type"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgBaA,WAAW,gBAAGC,UAAA,CAAiB,SAASD,WAAT,OAExCE,GAFwC;MACtCC,gBAAAA;MAAaC;;EAGf,uBAAkBC,eAAe,EAAjC;MAAQC,KAAR,oBAAQA,KAAR;;EAEA,IAAMC,WAAW,GAAG,SAAdA,WAAc;IAChB,IAAI,CAACH,KAAK,CAACI,QAAX,EAAqB;MACjBL,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGC,KAAK,CAACK,KAAT,CAAR;;GAFR;;EAMA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD;;;IAClB,IAAMC,iBAAiB,GAAGD,KAAK,CAACE,OAAN,KAAkBC,OAAO,CAAC,OAAD,CAAnD;;IAEA,IAAIF,iBAAJ,EAAuB;MACnBL,WAAW;;;IAGf,oBAAAH,KAAK,CAACW,SAAN,2EAAAX,KAAK,EAAaO,KAAb,CAAL;GAPJ;;EAUA,OACIV,aAAA,CAACe,KAAD;kBACgBV,KAAK,CAACW,WAAN,CAAkBC;KAC1Bd;IACJe,MAAM,EACFlB,aAAA,CAACmB,UAAD;MACIC,IAAI,EAAC;MACLC,SAAS,EAAC;MACVd,QAAQ,EAAEJ,KAAK,CAACI;MAChBe,OAAO,EAAEhB;KAJb;IAOJQ,SAAS,EAAEL;IACXR,GAAG,EAAEA;IACLsB,IAAI,EAAC;IAbT,CADJ;AAiBH,CAvC0B;;;;"}

package/dist/esm/components/Select/Select.js

@@ -0,0 +1,101 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, createElement, useRef, useEffect, Fragment } from 'react';
+import cn from 'classnames';
+import { Icon } from '../Icon/Icon.js';
+import { Badge } from '../Badge/Badge.js';
+import { Root, Trigger, Content } from '@radix-ui/react-popover';
+import { getInputClasses } from '../Input/util.js';
+import { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener.js';
+import { Combobox } from '../Combobox/Combobox.js';
+import { MultiListbox, Listbox } from '../Listbox/Listbox.js';
+import { useSelect } from './useSelect.js';
+
+var _excluded = ["autoFocus", "className", "highlighted", "style"],
+    _excluded2 = ["editable"];
+var BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
+  var autoFocus = props.autoFocus,
+      externalClassName = props.className,
+      style = props.style,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var _useSelect = useSelect(otherProps, ref),
+      button = _useSelect.button,
+      listbox = _useSelect.listbox,
+      popover = _useSelect.popover,
+      input = _useSelect.input,
+      text = _useSelect.text,
+      _useSelect$more = _useSelect.more,
+      more = _useSelect$more === void 0 ? 0 : _useSelect$more;
+
+  var internalRef = useRef(null);
+  var selectDimensions = useBoundingClientRectListener(internalRef);
+  var className = cn('inline-flex relative w-full', {
+    'yt-select--readonly': props.readOnly
+  }, externalClassName);
+  var inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
+    'border-blue': popover.open
+  });
+  useEffect(function () {
+    if (autoFocus && internalRef.current) {
+      internalRef.current.focus();
+    }
+  }, []);
+
+  var renderMultiSelection = function renderMultiSelection() {
+    return createElement(Fragment, null, createElement("span", {
+      className: "flex-grow truncate text-left"
+    }, text), more > 0 && createElement(Badge, {
+      className: "ml-2"
+    }, "+" + more));
+  };
+
+  var commonListboxProps = _extends({}, listbox, {
+    className: 'w-auto',
+    invalid: undefined,
+    style: {
+      minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
+    },
+    tabIndex: popover.open ? 0 : -1
+  });
+
+  return createElement("span", {
+    className: className,
+    "data-taco": "select",
+    style: style
+  }, createElement(Root, Object.assign({}, popover), createElement(Trigger, Object.assign({}, button, {
+    className: inputClassname,
+    ref: internalRef
+  }), props.multiselect ? renderMultiSelection() : createElement("span", {
+    className: "flex-grow truncate text-left"
+  }, text), createElement("span", {
+    className: "flex h-8 w-8 items-center justify-center"
+  }, createElement(Icon, {
+    className: "pointer-events-none",
+    name: popover.open ? 'chevron-up' : 'chevron-down'
+  }))), createElement(Content, {
+    align: "start",
+    sideOffset: 4
+  }, props.multiselect ? createElement(MultiListbox, Object.assign({}, commonListboxProps)) : createElement(Listbox, Object.assign({}, commonListboxProps))), createElement("input", Object.assign({}, input, {
+    className: "hidden",
+    type: "text"
+  }))));
+});
+var Select = /*#__PURE__*/forwardRef(function Select(props, ref) {
+  var editable = props.editable,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
+
+  if (editable) {
+    return createElement(Combobox, Object.assign({}, otherProps, {
+      dialog: undefined,
+      inline: true,
+      ref: ref
+    }));
+  }
+
+  return createElement(BaseSelect, Object.assign({}, otherProps, {
+    ref: ref
+  }));
+});
+
+export { Select };
+//# sourceMappingURL=Select.js.map

package/dist/esm/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Icon } from '../Icon/Icon';\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { useSelect } from './useSelect';\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\nimport { Badge } from '../Badge/Badge';\nimport { getInputClasses } from '../Input/util';\n\nexport type SelectTexts = {\n    /**\n     * The text displayed when all options are selected when multiselect mode in on.\n     */\n    allOptionsSelected: string;\n};\n\nexport type BaseSelectProps = Omit<ListboxProps, 'dialog'> &\n    Omit<ComboboxProps, 'inline'> & {\n        /**\n         * Allows to select multiple values.\n         * All the selected values will be combined in a comma-seperated string as the value of the input.\n         */\n        multiselect?: boolean;\n    };\n\nexport type SelectProps = BaseSelectProps & {\n    /**\n     * Creates an editable select.\n     * Setting this will render a inline Combobox which will display the provided data on click/focus,\n     * even if there is no value in the input.\n     * After user starts typing, matching data will be displayed.\n     */\n    editable?: boolean;\n};\n\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\n    const { autoFocus, className: externalClassName, highlighted, style, ...otherProps } = props;\n    const { button, listbox, popover, input, text, more = 0 } = useSelect(otherProps, ref);\n    const internalRef = React.useRef<HTMLButtonElement>(null);\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn('inline-flex relative w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\n    const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {\n        'border-blue': popover.open,\n    });\n\n    React.useEffect(() => {\n        if (autoFocus && internalRef.current) {\n            internalRef.current.focus();\n        }\n    }, []);\n\n    const renderMultiSelection = (): React.ReactNode => {\n        return (\n            <>\n                <span className=\"flex-grow truncate text-left\">{text}</span>\n                {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\n            </>\n        );\n    };\n\n    const commonListboxProps: ListboxProps = {\n        ...listbox,\n        className: 'w-auto',\n        invalid: undefined,\n        style: { minWidth: selectDimensions?.width },\n        tabIndex: popover.open ? 0 : -1,\n    };\n\n    return (\n        <span className={className} data-taco=\"select\" style={style}>\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Trigger {...button} className={inputClassname} ref={internalRef}>\n                    {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow truncate text-left\">{text}</span>}\n                    <span className=\"flex h-8 w-8 items-center justify-center\">\n                        <Icon className=\"pointer-events-none\" name={popover.open ? 'chevron-up' : 'chevron-down'} />\n                    </span>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content align=\"start\" sideOffset={4}>\n                    {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\n                </PopoverPrimitive.Content>\n                <input {...input} className=\"hidden\" type=\"text\" />\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\n\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\n    const { editable, ...otherProps } = props;\n\n    if (editable) {\n        return <Combobox {...otherProps} dialog={undefined} inline ref={ref} />;\n    }\n\n    return <BaseSelect {...otherProps} ref={ref} />;\n});\n"],"names":["BaseSelect","React","props","ref","autoFocus","externalClassName","className","style","otherProps","useSelect","button","listbox","popover","input","text","more","internalRef","selectDimensions","useBoundingClientRectListener","cn","readOnly","inputClassname","getInputClasses","open","current","focus","renderMultiSelection","Badge","commonListboxProps","invalid","undefined","minWidth","width","tabIndex","PopoverPrimitive","multiselect","Icon","name","align","sideOffset","MultiListbox","Listbox","type","Select","editable","Combobox","dialog","inline"],"mappings":"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"}

package/dist/esm/components/Select/useSelect.js

@@ -0,0 +1,230 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { useState, useMemo, useRef, useEffect, createElement, Fragment, cloneElement } from 'react';
+import cn from 'classnames';
+import { v4 } from 'uuid';
+import { useLocalization } from '../Provider/Provider.js';
+import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
+import keycode from 'keycode';
+import { createCustomEvent } from '../../utils/input.js';
+import { useFlattenedData, findByValue, setInputValueByRef, sanitizeItem } from '../Listbox/util.js';
+
+var _excluded = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "emptyValue", "id", "multiselect", "onBlur", "onClick", "onChange", "readOnly", "value"];
+var useSelect = function useSelect(_ref, ref) {
+  var ariaLabel = _ref['aria-label'],
+      ariaLabelledBy = _ref['aria-labelledby'],
+      _ref$data = _ref.data,
+      data = _ref$data === void 0 ? [] : _ref$data,
+      defaultValue = _ref.defaultValue,
+      disabled = _ref.disabled,
+      emptyValue = _ref.emptyValue,
+      nativeId = _ref.id,
+      multiselect = _ref.multiselect,
+      onBlur = _ref.onBlur,
+      onChange = _ref.onChange,
+      readOnly = _ref.readOnly,
+      value = _ref.value,
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var _useLocalization = useLocalization(),
+      texts = _useLocalization.texts;
+
+  var flattenedData = useFlattenedData(data);
+  var listboxInputRef = useProxiedRef(ref);
+
+  var _React$useState = useState(false),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
+
+  var id = useMemo(function () {
+    return nativeId || "select_" + v4();
+  }, [nativeId]);
+  var inputRef = useRef(null);
+  var buttonId = id + "-button"; // support 'escape' resetting to the value that was set when the listbox opened
+
+  var _React$useState2 = useState(value),
+      lastValue = _React$useState2[0],
+      setLastValue = _React$useState2[1];
+
+  useEffect(function () {
+    setLastValue(value);
+  }, [open]);
+  useEffect(function () {
+    if (value === undefined) {
+      if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {
+        setInputValueByRef(inputRef.current, defaultValue);
+      } else {
+        if (emptyValue !== undefined) {
+          setInputValueByRef(inputRef.current, emptyValue);
+        } else if (data.length > 0) {
+          setInputValueByRef(inputRef.current, data[0].value);
+        }
+      }
+    } else {
+      if (!multiselect && !findByValue(flattenedData, value)) {
+        if (emptyValue !== undefined) {
+          setInputValueByRef(inputRef.current, emptyValue);
+        } else if (data.length > 0) {
+          setInputValueByRef(inputRef.current, data[0].value);
+        }
+      }
+    }
+  }, []); // event handlers
+
+  var handleButtonKeyDown = function handleButtonKeyDown(event) {
+    if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {
+      event.preventDefault();
+      setOpen(true);
+    }
+  };
+
+  var handleListboxKeyDown = function handleListboxKeyDown(event) {
+    switch (event.keyCode) {
+      case keycode('escape'):
+        {
+          event.preventDefault();
+
+          if (lastValue !== undefined) {
+            setInputValueByRef(listboxInputRef.current, lastValue);
+          }
+
+          setOpen(false);
+          break;
+        }
+
+      case keycode('tab'):
+      case keycode('enter'):
+        {
+          if (event.keyCode !== keycode('tab')) {
+            event.preventDefault();
+          }
+
+          setOpen(false);
+          break;
+        }
+    }
+
+    if (otherProps.onKeyDown) {
+      otherProps.onKeyDown(event);
+    }
+  };
+
+  var handleListboxClick = function handleListboxClick(event) {
+    event.preventDefault();
+
+    if (!multiselect) {
+      setOpen(false);
+
+      if (onBlur) {
+        onBlur(createCustomEvent('blur'));
+      }
+    }
+  };
+
+  var text = '';
+  var more = 0;
+
+  if (value !== undefined) {
+    if (multiselect) {
+      var selectedValues = (value === null || value === void 0 ? void 0 : value.toString().split(',')) || [];
+
+      if (selectedValues.length === flattenedData.filter(function (item) {
+        return !item.disabled;
+      }).length) {
+        text = texts.select.allOptionsSelected;
+      } else {
+        var _findByValue$text, _findByValue;
+
+        text = (_findByValue$text = (_findByValue = findByValue(flattenedData, selectedValues[0])) === null || _findByValue === void 0 ? void 0 : _findByValue.text) !== null && _findByValue$text !== void 0 ? _findByValue$text : '';
+        more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;
+      }
+    } else {
+      var item = findByValue(flattenedData, value);
+
+      if (item) {
+        text = item.icon ? createElement(Fragment, null, cloneElement(item.icon, {
+          className: cn(item.icon.props.className, 'mr-1 -mt-px')
+        }), item.text) : item.text;
+      }
+    }
+  }
+
+  var handleInputChange = function handleInputChange(event) {
+    event.persist();
+
+    if (onChange) {
+      var _item$path$split, _item$path;
+
+      var _item = findByValue(flattenedData, event.target.value);
+
+      event.detail = sanitizeItem(_item);
+      var indexes = (_item$path$split = _item === null || _item === void 0 ? void 0 : (_item$path = _item.path) === null || _item$path === void 0 ? void 0 : _item$path.split('.')) !== null && _item$path$split !== void 0 ? _item$path$split : [];
+
+      if (indexes.length > 1) {
+        // we don't want to map the current item
+        indexes.pop(); // we need to rebuild the path as we map
+
+        var lastPath;
+        event.detail.parents = indexes.map(function (i) {
+          lastPath = lastPath ? [lastPath, i].join('.') : i;
+          return sanitizeItem(flattenedData.find(function (i) {
+            return i.path === lastPath;
+          }));
+        });
+      }
+
+      onChange(event);
+    }
+  };
+
+  var button = {
+    'aria-haspopup': 'listbox',
+    'aria-label': ariaLabel ? ariaLabel + " " + text : undefined,
+    'aria-labelledby': ariaLabelledBy ? ariaLabelledBy + " " + buttonId : undefined,
+    disabled: disabled || readOnly,
+    id: buttonId,
+    onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,
+    type: 'button'
+  };
+
+  var listbox = _extends({}, otherProps, {
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    data: data,
+    disabled: disabled,
+    emptyValue: emptyValue,
+    onBlur: onBlur,
+    onClick: handleListboxClick,
+    onChange: function onChange(event) {
+      setInputValueByRef(inputRef.current, event.target.value);
+    },
+    onKeyDown: handleListboxKeyDown,
+    ref: listboxInputRef,
+    value: value
+  });
+
+  var input = {
+    onChange: handleInputChange,
+    ref: inputRef,
+    value: String(value !== null && value !== void 0 ? value : '')
+  };
+  return {
+    button: button,
+    listbox: listbox,
+    input: input,
+    popover: {
+      open: open,
+      onOpenChange: function onOpenChange(open) {
+        if (!open && onBlur) {
+          onBlur(createCustomEvent('blur'));
+        }
+
+        setOpen(open);
+      }
+    },
+    text: text,
+    more: more
+  };
+};
+
+export { useSelect };
+//# sourceMappingURL=useSelect.js.map

package/dist/esm/components/Select/useSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelect.js","sources":["../../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport cn from 'classnames';\nimport { v4 as uuid } from 'uuid';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { useLocalization } from '../Provider/Provider';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { createCustomEvent } from '../../utils/input';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n    button: InternalButtonProps;\n    listbox: InternalListboxProps;\n    input: InternalInputProps;\n    popover: Pick<PopoverPrimitive.PopoverProps, 'onOpenChange' | 'open'>;\n    text: string | JSX.Element;\n    more?: number;\n};\n\nexport const useSelect = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        multiselect,\n        onBlur,\n        onClick,\n        onChange,\n        readOnly,\n        value,\n        ...otherProps\n    }: SelectProps,\n    ref: React.Ref<HTMLInputElement>\n): useSelect => {\n    const { texts } = useLocalization();\n    const flattenedData = useFlattenedData(data);\n    const listboxInputRef = useProxiedRef<HTMLInputElement>(ref);\n    const [open, setOpen] = React.useState(false);\n    const id = React.useMemo(() => nativeId || `select_${uuid()}`, [nativeId]);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const buttonId = `${id}-button`;\n    // support 'escape' resetting to the value that was set when the listbox opened\n    const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n    React.useEffect(() => {\n        setLastValue(value);\n    }, [open]);\n\n    React.useEffect(() => {\n        if (value === undefined) {\n            if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n                setInputValueByRef(inputRef.current, defaultValue);\n            } else {\n                if (emptyValue !== undefined) {\n                    setInputValueByRef(inputRef.current, emptyValue);\n                } else if (data.length > 0) {\n                    setInputValueByRef(inputRef.current, data[0].value);\n                }\n            }\n        } else {\n            if (!multiselect && !findByValue(flattenedData, value)) {\n                if (emptyValue !== undefined) {\n                    setInputValueByRef(inputRef.current, emptyValue);\n                } else if (data.length > 0) {\n                    setInputValueByRef(inputRef.current, data[0].value);\n                }\n            }\n        }\n    }, []);\n\n    // event handlers\n    const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n        if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {\n            event.preventDefault();\n            setOpen(true);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        switch (event.keyCode) {\n            case keycode('escape'): {\n                event.preventDefault();\n                if (lastValue !== undefined) {\n                    setInputValueByRef(listboxInputRef.current, lastValue);\n                }\n\n                setOpen(false);\n                break;\n            }\n\n            case keycode('tab'):\n            case keycode('enter'): {\n                if (event.keyCode !== keycode('tab')) {\n                    event.preventDefault();\n                }\n                setOpen(false);\n                break;\n            }\n\n            default:\n        }\n\n        if (otherProps.onKeyDown) {\n            otherProps.onKeyDown(event);\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n        event.preventDefault();\n        if (!multiselect) {\n            setOpen(false);\n            if (onBlur) {\n                onBlur(createCustomEvent('blur'));\n            }\n        }\n    };\n\n    let text: string | JSX.Element = '';\n    let more = 0;\n\n    if (value !== undefined) {\n        if (multiselect) {\n            const selectedValues = value?.toString().split(',') || [];\n\n            if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n                text = texts.select.allOptionsSelected;\n            } else {\n                text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n                more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n            }\n        } else {\n            const item = findByValue(flattenedData, value);\n\n            if (item) {\n                text = item.icon ? (\n                    <>\n                        {React.cloneElement(item.icon, {\n                            className: cn(item.icon.props.className, 'mr-1 -mt-px'),\n                        })}\n                        {item.text}\n                    </>\n                ) : (\n                    item.text\n                );\n            }\n        }\n    }\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const button: InternalButtonProps = {\n        'aria-haspopup': 'listbox' as const,\n        'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n        'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n        disabled: disabled || readOnly,\n        id: buttonId,\n        onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n        type: 'button',\n    };\n\n    const listbox: InternalListboxProps = {\n        ...otherProps,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        emptyValue,\n        onBlur,\n        onClick: handleListboxClick,\n        onChange: event => {\n            setInputValueByRef(inputRef.current, event.target.value);\n        },\n        onKeyDown: handleListboxKeyDown,\n        ref: listboxInputRef,\n        value,\n    };\n\n    const input: InternalInputProps = {\n        onChange: handleInputChange,\n        ref: inputRef,\n        value: String(value ?? ''),\n    };\n\n    return {\n        button,\n        listbox,\n        input,\n        popover: {\n            open,\n            onOpenChange: open => {\n                if (!open && onBlur) {\n                    onBlur(createCustomEvent('blur'));\n                }\n                setOpen(open);\n            },\n        },\n        text,\n        more,\n    };\n};\n"],"names":["useSelect","ref","ariaLabel","ariaLabelledBy","data","defaultValue","disabled","emptyValue","nativeId","id","multiselect","onBlur","onChange","readOnly","value","otherProps","useLocalization","texts","flattenedData","useFlattenedData","listboxInputRef","useProxiedRef","React","open","setOpen","uuid","inputRef","buttonId","lastValue","setLastValue","undefined","findByValue","setInputValueByRef","current","length","handleButtonKeyDown","event","keyCode","keycode","preventDefault","handleListboxKeyDown","onKeyDown","handleListboxClick","createCustomEvent","text","more","selectedValues","toString","split","filter","item","select","allOptionsSelected","icon","className","cn","props","handleInputChange","persist","target","detail","sanitizeItem","indexes","path","pop","lastPath","parents","map","i","join","find","button","type","listbox","onClick","input","String","popover","onOpenChange"],"mappings":"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"}