@veeqo/ui 12.4.0 → 12.5.0

package/dist/components/SelectDropdown/SelectDropdown.cjs

@@ -1,31 +1,29 @@
 'use strict';
 
 var React = require('react');
-var reactAriaComponents = require('react-aria-components');
 var buildClassnames = require('../../utils/buildClassnames.cjs');
 require('uid/secure');
 var SelectedOption = require('./components/SelectedOption.cjs');
 var utils = require('./utils.cjs');
-var ListItemSection = require('./components/ListItemSection/ListItemSection.cjs');
-var ListItem = require('./components/ListItem/ListItem.cjs');
-var SelectDropdownState = require('./components/SelectDropdownState.cjs');
 var Dropdown = require('../Dropdown/Dropdown.cjs');
 var Search = require('../Search/Search.cjs');
 var Button = require('../Button/Button.cjs');
 var SelectDropdown_module = require('./SelectDropdown.module.scss.cjs');
 var form_module = require('../../utils/forms/form.module.scss.cjs');
+var ListBox = require('./components/OptionsContainers/ListBox.cjs');
+var GridList = require('./components/OptionsContainers/GridList.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-/* eslint-disable react/destructuring-assignment */
-const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, disabled, options, value, actions, isLoading = false, searchValue, emptyStateSlot, onSearchChange, onChange, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
+const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, disabled, options, value, actions, isLoading = false, searchValue, emptyStateSlot, onSearchChange, onChange, topAction, isSelectDropdownOpen = false, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
     const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);
     const classNames = utils.generateClassNames(className);
     const [isSelectOpen, setIsSelectOpen] = React.useState(false);
     const selectedValues = utils.getSelectedValues(options, hasSection, value);
     const selectionMode = multiple ? 'multiple' : 'single';
+    const hasRowAction = options.some((option) => 'onClickRowAction' in option && option.onClickRowAction);
     const onSelectionChange = React.useCallback((keys) => {
         const selectedKeys = Array.from(keys);
         const newSelectedValues = utils.getSelectedValues(options, hasSection, selectedKeys);
@@ -34,24 +32,34 @@ const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple =
         }
         else {
             onChange(newSelectedValues[0]);
-            setIsSelectOpen(false);
+            if (!isSelectDropdownOpen) {
+                setIsSelectOpen(false);
+            }
         }
-    }, [options, hasSection, multiple, onChange]);
-    return (React__default.default.createElement(Dropdown.Dropdown, { id: `select-dropdown-${id}`, className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.popover, SelectDropdown_module.dropdown, className]), shouldShow: isSelectOpen, setShouldShow: setIsSelectOpen, useAnchorWidth: true, disabled: disabled, renderCta: (buttonProps, anchorRef) => (React__default.default.createElement("button", { ...buttonProps, type: "button", ref: anchorRef, className: buildClassnames.buildClassnames([
-                className,
-                SelectDropdown_module.dropdownTrigger,
-                form_module.fullStyles,
-                form_module.base,
-                hasError && form_module.error,
-                compact && form_module.compact,
-            ]) },
-            React__default.default.createElement(SelectedOption.SelectedOption, { placeholder: placeholder, options: selectedValues, selectionMode: selectionMode }))) },
+    }, [options, hasSection, multiple, onChange, isSelectDropdownOpen]);
+    return (React__default.default.createElement(Dropdown.Dropdown, { id: `select-dropdown-${id}`, className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.popover, SelectDropdown_module.dropdown, className]), shouldShow: isSelectOpen, setShouldShow: setIsSelectOpen, useAnchorWidth: true, disabled: disabled, renderCta: (buttonProps, anchorRef) => {
+            if (anchorRef && isSelectDropdownOpen) {
+                setIsSelectOpen(isSelectDropdownOpen);
+            }
+            return (React__default.default.createElement("button", { ...buttonProps, type: "button", ref: anchorRef, className: buildClassnames.buildClassnames([
+                    className,
+                    SelectDropdown_module.dropdownTrigger,
+                    form_module.fullStyles,
+                    form_module.base,
+                    hasError && form_module.error,
+                    compact && form_module.compact,
+                ]) },
+                React__default.default.createElement(SelectedOption.SelectedOption, { placeholder: placeholder, options: selectedValues, selectionMode: selectionMode })));
+        } },
         onSearchChange && (React__default.default.createElement(React__default.default.Fragment, null,
             React__default.default.createElement(Search.Search, { className: SelectDropdown_module.search, value: searchValue, onChange: onSearchChange }),
             React__default.default.createElement("hr", { className: SelectDropdown_module.separator }))),
-        React__default.default.createElement(reactAriaComponents.ListBox, { className: buildClassnames.buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.optionsContainer, SelectDropdown_module.listBox, className]), "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, "aria-describedby": ariaDescribedBy !== null && ariaDescribedBy !== undefined ? ariaDescribedBy : `${id}-hint`, selectionMode: selectionMode, items: options, onSelectionChange: onSelectionChange, selectedKeys: selectedValues.map((selectedValue) => selectedValue.id), renderEmptyState: () => (React__default.default.createElement(SelectDropdownState.SelectDropdownState, { isLoading: isLoading, emptyStateSlot: emptyStateSlot })), ...otherProps }, (item) => hasSection ? (React__default.default.createElement(ListItemSection.ListItemSection, { ...item })) : (React__default.default.createElement(ListItem.ListItem, { ...item }))), actions === null || actions === undefined ? undefined :
+        topAction && (React__default.default.createElement(React.Fragment, { key: topAction.label },
+            React__default.default.createElement(Button.Button, { className: SelectDropdown_module.ctaButton, key: topAction.label, variant: "flat", ...topAction }),
+            React__default.default.createElement("hr", { className: SelectDropdown_module.separator, key: `separator-${topAction.label}` }))),
+        hasRowAction ? (React__default.default.createElement(GridList.GridList, { id: id, className: classNames === null || classNames === undefined ? undefined : classNames.optionsContainer, ariaLabelledBy: ariaLabelledBy, ariaDescribedBy: ariaDescribedBy, selectionMode: selectionMode, options: options, onSelectionChange: onSelectionChange, selectedValues: selectedValues, isLoading: isLoading, emptyStateSlot: emptyStateSlot, ...otherProps })) : (React__default.default.createElement(ListBox.ListBox, { id: id, className: classNames === null || classNames === undefined ? undefined : classNames.optionsContainer, ariaLabelledBy: ariaLabelledBy, ariaDescribedBy: ariaDescribedBy, selectionMode: selectionMode, options: options, onSelectionChange: onSelectionChange, selectedValues: selectedValues, isLoading: isLoading, emptyStateSlot: emptyStateSlot, hasSection: hasSection, ...otherProps })), actions === null || actions === undefined ? undefined :
         actions.map(({ label, ...actionProps }) => (React__default.default.createElement(React.Fragment, { key: label },
-            React__default.default.createElement("hr", { className: SelectDropdown_module.separator, key: `seperator-${label}` }),
+            React__default.default.createElement("hr", { className: SelectDropdown_module.separator, key: `separator-${label}` }),
             React__default.default.createElement(Button.Button, { className: SelectDropdown_module.ctaButton, variant: "flat", key: label, ...actionProps }))))));
 };
 

package/dist/components/SelectDropdown/SelectDropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { Fragment, useCallback, useState } from 'react';\nimport { Key, ListBox, Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport { SelectDropdownItem, SelectDropdownProps } from './types';\nimport {\n  ListItemSection,\n  ListItemSectionProps,\n} from './components/ListItemSection/ListItemSection';\nimport { ListItem } from './components/ListItem';\nimport { ListItemProps } from './components/ListItem/types';\nimport { SelectDropdownState } from './components/SelectDropdownState';\nimport { Dropdown } from '../Dropdown';\nimport { Search } from '../Search';\nimport { Button } from '../Button';\nimport styles from './SelectDropdown.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  disabled,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  emptyStateSlot,\n  onSearchChange,\n  onChange,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownProps) => {\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n  const classNames = generateClassNames(className);\n\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n\n  const selectedValues = getSelectedValues(options, hasSection, value);\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys);\n      const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);\n\n      if (multiple) {\n        (onChange as (items: SelectDropdownItem[]) => void)(newSelectedValues);\n      } else {\n        (onChange as (item: SelectDropdownItem) => void)(newSelectedValues[0]);\n        setIsSelectOpen(false);\n      }\n    },\n    [options, hasSection, multiple, onChange],\n  );\n\n  return (\n    <Dropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, styles.dropdown, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      disabled={disabled}\n      renderCta={(buttonProps, anchorRef) => (\n        <button\n          {...buttonProps}\n          type=\"button\"\n          ref={anchorRef}\n          className={buildClassnames([\n            className,\n            styles.dropdownTrigger,\n            formStyles.fullStyles,\n            formStyles.base,\n            hasError && formStyles.error,\n            compact && formStyles.compact,\n          ])}\n        >\n          <SelectedOption\n            placeholder={placeholder}\n            options={selectedValues}\n            selectionMode={selectionMode}\n          />\n        </button>\n      )}\n    >\n      {onSearchChange && (\n        <>\n          <Search className={styles.search} value={searchValue} onChange={onSearchChange} />\n          <hr className={styles.separator} />\n        </>\n      )}\n      <ListBox\n        className={buildClassnames([classNames?.optionsContainer, styles.listBox, className])}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        aria-describedby={ariaDescribedBy ?? `${id}-hint`}\n        selectionMode={selectionMode}\n        items={options}\n        onSelectionChange={onSelectionChange}\n        selectedKeys={selectedValues.map((selectedValue) => selectedValue.id) as Key[]}\n        renderEmptyState={() => (\n          <SelectDropdownState isLoading={isLoading} emptyStateSlot={emptyStateSlot} />\n        )}\n        {...otherProps}\n      >\n        {(item) =>\n          hasSection ? (\n            <ListItemSection {...(item as ListItemSectionProps)} />\n          ) : (\n            <ListItem {...(item as ListItemProps)} />\n          )\n        }\n      </ListBox>\n      {actions?.map(({ label, ...actionProps }) => (\n        <Fragment key={label}>\n          <hr className={styles.separator} key={`seperator-${label}`} />\n          <Button className={styles.ctaButton} variant=\"flat\" key={label} {...actionProps} />\n        </Fragment>\n      ))}\n    </Dropdown>\n  );\n};\n"],"names":["generateClassNames","useState","getSelectedValues","useCallback","React","Dropdown","buildClassnames","styles","formStyles","SelectedOption","Search","ListBox","SelectDropdownState","ListItemSection","ListItem","Fragment","Button"],"mappings":"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"}
+{"version":3,"file":"SelectDropdown.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useState } from 'react';\nimport { Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport { SelectDropdownItem, SelectDropdownProps } from './types';\nimport { GridItemProps } from './components/GridItem/types';\nimport { Dropdown } from '../Dropdown';\nimport { Search } from '../Search';\nimport { Button } from '../Button';\nimport styles from './SelectDropdown.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\nimport { ListBox } from './components/OptionsContainers/ListBox';\nimport { GridList } from './components/OptionsContainers/GridList';\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  disabled,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  emptyStateSlot,\n  onSearchChange,\n  onChange,\n  topAction,\n  isSelectDropdownOpen = false,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownProps) => {\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n  const classNames = generateClassNames(className);\n\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n\n  const selectedValues = getSelectedValues(options, hasSection, value);\n  const selectionMode = multiple ? 'multiple' : 'single';\n  const hasRowAction = options.some(\n    (option) => 'onClickRowAction' in option && option.onClickRowAction,\n  );\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys);\n      const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);\n\n      if (multiple) {\n        (onChange as (items: SelectDropdownItem[]) => void)(newSelectedValues);\n      } else {\n        (onChange as (item: SelectDropdownItem) => void)(newSelectedValues[0]);\n        if (!isSelectDropdownOpen) {\n          setIsSelectOpen(false);\n        }\n      }\n    },\n    [options, hasSection, multiple, onChange, isSelectDropdownOpen],\n  );\n\n  return (\n    <Dropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, styles.dropdown, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      disabled={disabled}\n      renderCta={(buttonProps, anchorRef) => {\n        if (anchorRef && isSelectDropdownOpen) {\n          setIsSelectOpen(isSelectDropdownOpen);\n        }\n\n        return (\n          <button\n            {...buttonProps}\n            type=\"button\"\n            ref={anchorRef}\n            className={buildClassnames([\n              className,\n              styles.dropdownTrigger,\n              formStyles.fullStyles,\n              formStyles.base,\n              hasError && formStyles.error,\n              compact && formStyles.compact,\n            ])}\n          >\n            <SelectedOption\n              placeholder={placeholder}\n              options={selectedValues}\n              selectionMode={selectionMode}\n            />\n          </button>\n        );\n      }}\n    >\n      {onSearchChange && (\n        <>\n          <Search className={styles.search} value={searchValue} onChange={onSearchChange} />\n          <hr className={styles.separator} />\n        </>\n      )}\n      {topAction && (\n        <Fragment key={topAction.label}>\n          <Button\n            className={styles.ctaButton}\n            key={topAction.label}\n            variant=\"flat\"\n            {...topAction}\n          />\n          <hr className={styles.separator} key={`separator-${topAction.label}`} />\n        </Fragment>\n      )}\n      {hasRowAction ? (\n        <GridList\n          id={id}\n          className={classNames?.optionsContainer}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedBy={ariaDescribedBy}\n          selectionMode={selectionMode}\n          options={options as GridItemProps[]}\n          onSelectionChange={onSelectionChange}\n          selectedValues={selectedValues as GridItemProps[]}\n          isLoading={isLoading}\n          emptyStateSlot={emptyStateSlot}\n          {...otherProps}\n        />\n      ) : (\n        <ListBox\n          id={id}\n          className={classNames?.optionsContainer}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedBy={ariaDescribedBy}\n          selectionMode={selectionMode}\n          options={options}\n          onSelectionChange={onSelectionChange}\n          selectedValues={selectedValues}\n          isLoading={isLoading}\n          emptyStateSlot={emptyStateSlot}\n          hasSection={hasSection}\n          {...otherProps}\n        />\n      )}\n      {actions?.map(({ label, ...actionProps }) => (\n        <Fragment key={label}>\n          <hr className={styles.separator} key={`separator-${label}`} />\n          <Button className={styles.ctaButton} variant=\"flat\" key={label} {...actionProps} />\n        </Fragment>\n      ))}\n    </Dropdown>\n  );\n};\n"],"names":["generateClassNames","useState","getSelectedValues","useCallback","React","Dropdown","buildClassnames","styles","formStyles","SelectedOption","Search","Fragment","Button","GridList","ListBox"],"mappings":"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"}

package/dist/components/SelectDropdown/SelectDropdown.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { SelectDropdownProps } from './types';
-export declare const SelectDropdown: ({ id, className, placeholder, multiple, compact, hasError, disabled, options, value, actions, isLoading, searchValue, emptyStateSlot, onSearchChange, onChange, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...otherProps }: SelectDropdownProps) => React.JSX.Element;
+export declare const SelectDropdown: ({ id, className, placeholder, multiple, compact, hasError, disabled, options, value, actions, isLoading, searchValue, emptyStateSlot, onSearchChange, onChange, topAction, isSelectDropdownOpen, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...otherProps }: SelectDropdownProps) => React.JSX.Element;

package/dist/components/SelectDropdown/SelectDropdown.js

@@ -1,25 +1,23 @@
 import React__default, { useState, useCallback, Fragment } from 'react';
-import { ListBox } from 'react-aria-components';
 import { buildClassnames } from '../../utils/buildClassnames.js';
 import 'uid/secure';
 import { SelectedOption } from './components/SelectedOption.js';
 import { getSelectedValues, generateClassNames } from './utils.js';
-import { ListItemSection } from './components/ListItemSection/ListItemSection.js';
-import { ListItem } from './components/ListItem/ListItem.js';
-import { SelectDropdownState } from './components/SelectDropdownState.js';
 import { Dropdown } from '../Dropdown/Dropdown.js';
 import { Search } from '../Search/Search.js';
 import { Button } from '../Button/Button.js';
 import styles from './SelectDropdown.module.scss.js';
 import formStyles from '../../utils/forms/form.module.scss.js';
+import { ListBox } from './components/OptionsContainers/ListBox.js';
+import { GridList } from './components/OptionsContainers/GridList.js';
 
-/* eslint-disable react/destructuring-assignment */
-const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, disabled, options, value, actions, isLoading = false, searchValue, emptyStateSlot, onSearchChange, onChange, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
+const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, disabled, options, value, actions, isLoading = false, searchValue, emptyStateSlot, onSearchChange, onChange, topAction, isSelectDropdownOpen = false, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
     const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);
     const classNames = generateClassNames(className);
     const [isSelectOpen, setIsSelectOpen] = useState(false);
     const selectedValues = getSelectedValues(options, hasSection, value);
     const selectionMode = multiple ? 'multiple' : 'single';
+    const hasRowAction = options.some((option) => 'onClickRowAction' in option && option.onClickRowAction);
     const onSelectionChange = useCallback((keys) => {
         const selectedKeys = Array.from(keys);
         const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);
@@ -28,24 +26,34 @@ const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple =
         }
         else {
             onChange(newSelectedValues[0]);
-            setIsSelectOpen(false);
+            if (!isSelectDropdownOpen) {
+                setIsSelectOpen(false);
+            }
         }
-    }, [options, hasSection, multiple, onChange]);
-    return (React__default.createElement(Dropdown, { id: `select-dropdown-${id}`, className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.popover, styles.dropdown, className]), shouldShow: isSelectOpen, setShouldShow: setIsSelectOpen, useAnchorWidth: true, disabled: disabled, renderCta: (buttonProps, anchorRef) => (React__default.createElement("button", { ...buttonProps, type: "button", ref: anchorRef, className: buildClassnames([
-                className,
-                styles.dropdownTrigger,
-                formStyles.fullStyles,
-                formStyles.base,
-                hasError && formStyles.error,
-                compact && formStyles.compact,
-            ]) },
-            React__default.createElement(SelectedOption, { placeholder: placeholder, options: selectedValues, selectionMode: selectionMode }))) },
+    }, [options, hasSection, multiple, onChange, isSelectDropdownOpen]);
+    return (React__default.createElement(Dropdown, { id: `select-dropdown-${id}`, className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.popover, styles.dropdown, className]), shouldShow: isSelectOpen, setShouldShow: setIsSelectOpen, useAnchorWidth: true, disabled: disabled, renderCta: (buttonProps, anchorRef) => {
+            if (anchorRef && isSelectDropdownOpen) {
+                setIsSelectOpen(isSelectDropdownOpen);
+            }
+            return (React__default.createElement("button", { ...buttonProps, type: "button", ref: anchorRef, className: buildClassnames([
+                    className,
+                    styles.dropdownTrigger,
+                    formStyles.fullStyles,
+                    formStyles.base,
+                    hasError && formStyles.error,
+                    compact && formStyles.compact,
+                ]) },
+                React__default.createElement(SelectedOption, { placeholder: placeholder, options: selectedValues, selectionMode: selectionMode })));
+        } },
         onSearchChange && (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(Search, { className: styles.search, value: searchValue, onChange: onSearchChange }),
             React__default.createElement("hr", { className: styles.separator }))),
-        React__default.createElement(ListBox, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.optionsContainer, styles.listBox, className]), "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, "aria-describedby": ariaDescribedBy !== null && ariaDescribedBy !== undefined ? ariaDescribedBy : `${id}-hint`, selectionMode: selectionMode, items: options, onSelectionChange: onSelectionChange, selectedKeys: selectedValues.map((selectedValue) => selectedValue.id), renderEmptyState: () => (React__default.createElement(SelectDropdownState, { isLoading: isLoading, emptyStateSlot: emptyStateSlot })), ...otherProps }, (item) => hasSection ? (React__default.createElement(ListItemSection, { ...item })) : (React__default.createElement(ListItem, { ...item }))), actions === null || actions === undefined ? undefined :
+        topAction && (React__default.createElement(Fragment, { key: topAction.label },
+            React__default.createElement(Button, { className: styles.ctaButton, key: topAction.label, variant: "flat", ...topAction }),
+            React__default.createElement("hr", { className: styles.separator, key: `separator-${topAction.label}` }))),
+        hasRowAction ? (React__default.createElement(GridList, { id: id, className: classNames === null || classNames === undefined ? undefined : classNames.optionsContainer, ariaLabelledBy: ariaLabelledBy, ariaDescribedBy: ariaDescribedBy, selectionMode: selectionMode, options: options, onSelectionChange: onSelectionChange, selectedValues: selectedValues, isLoading: isLoading, emptyStateSlot: emptyStateSlot, ...otherProps })) : (React__default.createElement(ListBox, { id: id, className: classNames === null || classNames === undefined ? undefined : classNames.optionsContainer, ariaLabelledBy: ariaLabelledBy, ariaDescribedBy: ariaDescribedBy, selectionMode: selectionMode, options: options, onSelectionChange: onSelectionChange, selectedValues: selectedValues, isLoading: isLoading, emptyStateSlot: emptyStateSlot, hasSection: hasSection, ...otherProps })), actions === null || actions === undefined ? undefined :
         actions.map(({ label, ...actionProps }) => (React__default.createElement(Fragment, { key: label },
-            React__default.createElement("hr", { className: styles.separator, key: `seperator-${label}` }),
+            React__default.createElement("hr", { className: styles.separator, key: `separator-${label}` }),
             React__default.createElement(Button, { className: styles.ctaButton, variant: "flat", key: label, ...actionProps }))))));
 };
 

package/dist/components/SelectDropdown/SelectDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\nimport React, { Fragment, useCallback, useState } from 'react';\nimport { Key, ListBox, Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport { SelectDropdownItem, SelectDropdownProps } from './types';\nimport {\n  ListItemSection,\n  ListItemSectionProps,\n} from './components/ListItemSection/ListItemSection';\nimport { ListItem } from './components/ListItem';\nimport { ListItemProps } from './components/ListItem/types';\nimport { SelectDropdownState } from './components/SelectDropdownState';\nimport { Dropdown } from '../Dropdown';\nimport { Search } from '../Search';\nimport { Button } from '../Button';\nimport styles from './SelectDropdown.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  disabled,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  emptyStateSlot,\n  onSearchChange,\n  onChange,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownProps) => {\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n  const classNames = generateClassNames(className);\n\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n\n  const selectedValues = getSelectedValues(options, hasSection, value);\n  const selectionMode = multiple ? 'multiple' : 'single';\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys);\n      const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);\n\n      if (multiple) {\n        (onChange as (items: SelectDropdownItem[]) => void)(newSelectedValues);\n      } else {\n        (onChange as (item: SelectDropdownItem) => void)(newSelectedValues[0]);\n        setIsSelectOpen(false);\n      }\n    },\n    [options, hasSection, multiple, onChange],\n  );\n\n  return (\n    <Dropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, styles.dropdown, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      disabled={disabled}\n      renderCta={(buttonProps, anchorRef) => (\n        <button\n          {...buttonProps}\n          type=\"button\"\n          ref={anchorRef}\n          className={buildClassnames([\n            className,\n            styles.dropdownTrigger,\n            formStyles.fullStyles,\n            formStyles.base,\n            hasError && formStyles.error,\n            compact && formStyles.compact,\n          ])}\n        >\n          <SelectedOption\n            placeholder={placeholder}\n            options={selectedValues}\n            selectionMode={selectionMode}\n          />\n        </button>\n      )}\n    >\n      {onSearchChange && (\n        <>\n          <Search className={styles.search} value={searchValue} onChange={onSearchChange} />\n          <hr className={styles.separator} />\n        </>\n      )}\n      <ListBox\n        className={buildClassnames([classNames?.optionsContainer, styles.listBox, className])}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        aria-describedby={ariaDescribedBy ?? `${id}-hint`}\n        selectionMode={selectionMode}\n        items={options}\n        onSelectionChange={onSelectionChange}\n        selectedKeys={selectedValues.map((selectedValue) => selectedValue.id) as Key[]}\n        renderEmptyState={() => (\n          <SelectDropdownState isLoading={isLoading} emptyStateSlot={emptyStateSlot} />\n        )}\n        {...otherProps}\n      >\n        {(item) =>\n          hasSection ? (\n            <ListItemSection {...(item as ListItemSectionProps)} />\n          ) : (\n            <ListItem {...(item as ListItemProps)} />\n          )\n        }\n      </ListBox>\n      {actions?.map(({ label, ...actionProps }) => (\n        <Fragment key={label}>\n          <hr className={styles.separator} key={`seperator-${label}`} />\n          <Button className={styles.ctaButton} variant=\"flat\" key={label} {...actionProps} />\n        </Fragment>\n      ))}\n    </Dropdown>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"SelectDropdown.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useState } from 'react';\nimport { Selection } from 'react-aria-components';\n\nimport { buildClassnames } from '../../utils';\nimport { SelectedOption } from './components/SelectedOption';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport { SelectDropdownItem, SelectDropdownProps } from './types';\nimport { GridItemProps } from './components/GridItem/types';\nimport { Dropdown } from '../Dropdown';\nimport { Search } from '../Search';\nimport { Button } from '../Button';\nimport styles from './SelectDropdown.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\nimport { ListBox } from './components/OptionsContainers/ListBox';\nimport { GridList } from './components/OptionsContainers/GridList';\n\nexport const SelectDropdown = ({\n  id,\n  className,\n  placeholder = 'Select item',\n  multiple = false,\n  compact = false,\n  hasError = false,\n  disabled,\n  options,\n  value,\n  actions,\n  isLoading = false,\n  searchValue,\n  emptyStateSlot,\n  onSearchChange,\n  onChange,\n  topAction,\n  isSelectDropdownOpen = false,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...otherProps\n}: SelectDropdownProps) => {\n  const hasSection = options.flatMap((option) => option).some((item) => 'items' in item);\n  const classNames = generateClassNames(className);\n\n  const [isSelectOpen, setIsSelectOpen] = useState(false);\n\n  const selectedValues = getSelectedValues(options, hasSection, value);\n  const selectionMode = multiple ? 'multiple' : 'single';\n  const hasRowAction = options.some(\n    (option) => 'onClickRowAction' in option && option.onClickRowAction,\n  );\n\n  const onSelectionChange = useCallback(\n    (keys: Selection) => {\n      const selectedKeys = Array.from(keys);\n      const newSelectedValues = getSelectedValues(options, hasSection, selectedKeys);\n\n      if (multiple) {\n        (onChange as (items: SelectDropdownItem[]) => void)(newSelectedValues);\n      } else {\n        (onChange as (item: SelectDropdownItem) => void)(newSelectedValues[0]);\n        if (!isSelectDropdownOpen) {\n          setIsSelectOpen(false);\n        }\n      }\n    },\n    [options, hasSection, multiple, onChange, isSelectDropdownOpen],\n  );\n\n  return (\n    <Dropdown\n      id={`select-dropdown-${id}`}\n      className={buildClassnames([classNames?.popover, styles.dropdown, className])}\n      shouldShow={isSelectOpen}\n      setShouldShow={setIsSelectOpen}\n      useAnchorWidth\n      disabled={disabled}\n      renderCta={(buttonProps, anchorRef) => {\n        if (anchorRef && isSelectDropdownOpen) {\n          setIsSelectOpen(isSelectDropdownOpen);\n        }\n\n        return (\n          <button\n            {...buttonProps}\n            type=\"button\"\n            ref={anchorRef}\n            className={buildClassnames([\n              className,\n              styles.dropdownTrigger,\n              formStyles.fullStyles,\n              formStyles.base,\n              hasError && formStyles.error,\n              compact && formStyles.compact,\n            ])}\n          >\n            <SelectedOption\n              placeholder={placeholder}\n              options={selectedValues}\n              selectionMode={selectionMode}\n            />\n          </button>\n        );\n      }}\n    >\n      {onSearchChange && (\n        <>\n          <Search className={styles.search} value={searchValue} onChange={onSearchChange} />\n          <hr className={styles.separator} />\n        </>\n      )}\n      {topAction && (\n        <Fragment key={topAction.label}>\n          <Button\n            className={styles.ctaButton}\n            key={topAction.label}\n            variant=\"flat\"\n            {...topAction}\n          />\n          <hr className={styles.separator} key={`separator-${topAction.label}`} />\n        </Fragment>\n      )}\n      {hasRowAction ? (\n        <GridList\n          id={id}\n          className={classNames?.optionsContainer}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedBy={ariaDescribedBy}\n          selectionMode={selectionMode}\n          options={options as GridItemProps[]}\n          onSelectionChange={onSelectionChange}\n          selectedValues={selectedValues as GridItemProps[]}\n          isLoading={isLoading}\n          emptyStateSlot={emptyStateSlot}\n          {...otherProps}\n        />\n      ) : (\n        <ListBox\n          id={id}\n          className={classNames?.optionsContainer}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedBy={ariaDescribedBy}\n          selectionMode={selectionMode}\n          options={options}\n          onSelectionChange={onSelectionChange}\n          selectedValues={selectedValues}\n          isLoading={isLoading}\n          emptyStateSlot={emptyStateSlot}\n          hasSection={hasSection}\n          {...otherProps}\n        />\n      )}\n      {actions?.map(({ label, ...actionProps }) => (\n        <Fragment key={label}>\n          <hr className={styles.separator} key={`separator-${label}`} />\n          <Button className={styles.ctaButton} variant=\"flat\" key={label} {...actionProps} />\n        </Fragment>\n      ))}\n    </Dropdown>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/SelectDropdown/SelectDropdown.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._listBox_fnslz_1 {\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: var(--sizes-sm);\n  scroll-padding: var(--sizes-xs) 0;\n}\n._listBox_fnslz_1[data-empty] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n._dropdown_fnslz_13 {\n  padding: var(--sizes-none) !important;\n}\n\n._dropdownTrigger_fnslz_17 {\n  padding-right: var(--sizes-9);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%;\n}\n\n._separator_fnslz_24 {\n  height: var(--sizes-line);\n  background: var(--colors-neutral-grey-base);\n  border: none;\n  margin: var(--sizes-none) var(--sizes-none);\n  width: 100%;\n}\n\n._search_fnslz_32 {\n  margin: var(--sizes-sm) !important;\n}\n\n._ctaButton_fnslz_36 {\n  justify-content: start !important;\n  padding-left: var(--sizes-xs) !important;\n  margin: var(--sizes-sm) var(--sizes-xs) !important;\n  border-radius: var(--radius-base) !important;\n  font-size: var(--text-body-font-size) !important;\n}\n._ctaButton_fnslz_36 svg {\n  width: var(--sizes-md) !important;\n  height: var(--sizes-md) !important;\n}");
-var styles = {"listBox":"_listBox_fnslz_1","dropdown":"_dropdown_fnslz_13","dropdownTrigger":"_dropdownTrigger_fnslz_17","separator":"_separator_fnslz_24","search":"_search_fnslz_32","ctaButton":"_ctaButton_fnslz_36"};
+___$insertStyle("._listBox_1fva9_1 {\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: var(--sizes-sm);\n  scroll-padding: var(--sizes-xs) 0;\n}\n._listBox_1fva9_1[data-empty] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n._dropdown_1fva9_13 {\n  padding: var(--sizes-none) !important;\n}\n\n._dropdownTrigger_1fva9_17 {\n  padding-right: var(--sizes-9);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%;\n  width: 100%;\n}\n\n._separator_1fva9_25 {\n  height: var(--sizes-line);\n  background: var(--colors-neutral-grey-base);\n  border: none;\n  margin: var(--sizes-none) var(--sizes-none);\n  width: 100%;\n}\n\n._search_1fva9_33 {\n  margin: var(--sizes-sm) !important;\n}\n\n._ctaButton_1fva9_37 {\n  justify-content: start !important;\n  padding: var(--sizes-sm) var(--sizes-xs) !important;\n  margin: var(--sizes-sm) !important;\n  border-radius: var(--radius-base) !important;\n  border: 0 !important;\n}\n._ctaButton_1fva9_37 svg {\n  width: var(--sizes-md) !important;\n  height: var(--sizes-md) !important;\n}\n._ctaButton_1fva9_37 > span {\n  gap: var(--sizes-base);\n  padding: 0 var(--sizes-xs);\n}\n._ctaButton_1fva9_37:hover {\n  background-color: var(--colors-neutral-grey-lightest) !important;\n  font-weight: var(--text-body-bold-font-weight) !important;\n}");
+var styles = {"listBox":"_listBox_1fva9_1","dropdown":"_dropdown_1fva9_13","dropdownTrigger":"_dropdownTrigger_1fva9_17","separator":"_separator_1fva9_25","search":"_search_1fva9_33","ctaButton":"_ctaButton_1fva9_37"};
 
 module.exports = styles;
 //# sourceMappingURL=SelectDropdown.module.scss.cjs.map

package/dist/components/SelectDropdown/SelectDropdown.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.module.scss.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.module.scss"],"sourcesContent":[".listBox {\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: var(--sizes-sm);\n  scroll-padding: var(--sizes-xs) 0;\n\n  &[data-empty] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n}\n\n// used important to override styled-component styles from Dropdown\n.dropdown {\n  padding: var(--sizes-none) !important;\n}\n\n.dropdownTrigger {\n  padding-right: var(--sizes-9);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%;\n}\n\n.separator {\n  height: var(--sizes-line);\n  background: var(--colors-neutral-grey-base);\n  border: none;\n  margin: var(--sizes-none) var(--sizes-none);\n  width: 100%;\n}\n\n// used important to override styled-component styles from Search\n.search {\n  margin: var(--sizes-sm) !important;\n}\n\n// used important to override styled-component styles from Button\n.ctaButton {\n  justify-content: start !important;\n  padding-left: var(--sizes-xs) !important;\n  margin: var(--sizes-sm) var(--sizes-xs) !important;\n  border-radius: var(--radius-base) !important;\n  font-size: var(--text-body-font-size) !important;\n  svg {\n    width: var(--sizes-md) !important;\n    height: var(--sizes-md) !important;\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,s0CAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,WAAA,CAAA,qBAAA;;;;"}
+{"version":3,"file":"SelectDropdown.module.scss.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.module.scss"],"sourcesContent":[".listBox {\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: var(--sizes-sm);\n  scroll-padding: var(--sizes-xs) 0;\n\n  &[data-empty] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n}\n\n// used important to override styled-component styles from Dropdown\n.dropdown {\n  padding: var(--sizes-none) !important;\n}\n\n.dropdownTrigger {\n  padding-right: var(--sizes-9);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%;\n  width: 100%;\n}\n\n.separator {\n  height: var(--sizes-line);\n  background: var(--colors-neutral-grey-base);\n  border: none;\n  margin: var(--sizes-none) var(--sizes-none);\n  width: 100%;\n}\n\n// used important to override styled-component styles from Search\n.search {\n  margin: var(--sizes-sm) !important;\n}\n\n// used important to override styled-component styles from Button\n.ctaButton {\n  justify-content: start !important;\n  padding: var(--sizes-sm) var(--sizes-xs) !important;\n  margin: var(--sizes-sm) !important;\n  border-radius: var(--radius-base) !important;\n  border: 0 !important;\n\n  svg {\n    width: var(--sizes-md) !important;\n    height: var(--sizes-md) !important;\n  }\n\n  > span {\n    gap: var(--sizes-base);\n    padding: 0 var(--sizes-xs);\n  }\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest) !important;\n    font-weight: var(--text-body-bold-font-weight) !important;\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,qjDAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,WAAA,CAAA,qBAAA;;;;"}

package/dist/components/SelectDropdown/SelectDropdown.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._listBox_fnslz_1 {\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: var(--sizes-sm);\n  scroll-padding: var(--sizes-xs) 0;\n}\n._listBox_fnslz_1[data-empty] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n._dropdown_fnslz_13 {\n  padding: var(--sizes-none) !important;\n}\n\n._dropdownTrigger_fnslz_17 {\n  padding-right: var(--sizes-9);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%;\n}\n\n._separator_fnslz_24 {\n  height: var(--sizes-line);\n  background: var(--colors-neutral-grey-base);\n  border: none;\n  margin: var(--sizes-none) var(--sizes-none);\n  width: 100%;\n}\n\n._search_fnslz_32 {\n  margin: var(--sizes-sm) !important;\n}\n\n._ctaButton_fnslz_36 {\n  justify-content: start !important;\n  padding-left: var(--sizes-xs) !important;\n  margin: var(--sizes-sm) var(--sizes-xs) !important;\n  border-radius: var(--radius-base) !important;\n  font-size: var(--text-body-font-size) !important;\n}\n._ctaButton_fnslz_36 svg {\n  width: var(--sizes-md) !important;\n  height: var(--sizes-md) !important;\n}");
-var styles = {"listBox":"_listBox_fnslz_1","dropdown":"_dropdown_fnslz_13","dropdownTrigger":"_dropdownTrigger_fnslz_17","separator":"_separator_fnslz_24","search":"_search_fnslz_32","ctaButton":"_ctaButton_fnslz_36"};
+insertStyle("._listBox_1fva9_1 {\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: var(--sizes-sm);\n  scroll-padding: var(--sizes-xs) 0;\n}\n._listBox_1fva9_1[data-empty] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n._dropdown_1fva9_13 {\n  padding: var(--sizes-none) !important;\n}\n\n._dropdownTrigger_1fva9_17 {\n  padding-right: var(--sizes-9);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%;\n  width: 100%;\n}\n\n._separator_1fva9_25 {\n  height: var(--sizes-line);\n  background: var(--colors-neutral-grey-base);\n  border: none;\n  margin: var(--sizes-none) var(--sizes-none);\n  width: 100%;\n}\n\n._search_1fva9_33 {\n  margin: var(--sizes-sm) !important;\n}\n\n._ctaButton_1fva9_37 {\n  justify-content: start !important;\n  padding: var(--sizes-sm) var(--sizes-xs) !important;\n  margin: var(--sizes-sm) !important;\n  border-radius: var(--radius-base) !important;\n  border: 0 !important;\n}\n._ctaButton_1fva9_37 svg {\n  width: var(--sizes-md) !important;\n  height: var(--sizes-md) !important;\n}\n._ctaButton_1fva9_37 > span {\n  gap: var(--sizes-base);\n  padding: 0 var(--sizes-xs);\n}\n._ctaButton_1fva9_37:hover {\n  background-color: var(--colors-neutral-grey-lightest) !important;\n  font-weight: var(--text-body-bold-font-weight) !important;\n}");
+var styles = {"listBox":"_listBox_1fva9_1","dropdown":"_dropdown_1fva9_13","dropdownTrigger":"_dropdownTrigger_1fva9_17","separator":"_separator_1fva9_25","search":"_search_1fva9_33","ctaButton":"_ctaButton_1fva9_37"};
 
 export { styles as default };
 //# sourceMappingURL=SelectDropdown.module.scss.js.map

package/dist/components/SelectDropdown/SelectDropdown.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDropdown.module.scss.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.module.scss"],"sourcesContent":[".listBox {\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: var(--sizes-sm);\n  scroll-padding: var(--sizes-xs) 0;\n\n  &[data-empty] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n}\n\n// used important to override styled-component styles from Dropdown\n.dropdown {\n  padding: var(--sizes-none) !important;\n}\n\n.dropdownTrigger {\n  padding-right: var(--sizes-9);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%;\n}\n\n.separator {\n  height: var(--sizes-line);\n  background: var(--colors-neutral-grey-base);\n  border: none;\n  margin: var(--sizes-none) var(--sizes-none);\n  width: 100%;\n}\n\n// used important to override styled-component styles from Search\n.search {\n  margin: var(--sizes-sm) !important;\n}\n\n// used important to override styled-component styles from Button\n.ctaButton {\n  justify-content: start !important;\n  padding-left: var(--sizes-xs) !important;\n  margin: var(--sizes-sm) var(--sizes-xs) !important;\n  border-radius: var(--radius-base) !important;\n  font-size: var(--text-body-font-size) !important;\n  svg {\n    width: var(--sizes-md) !important;\n    height: var(--sizes-md) !important;\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,s0CAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,WAAA,CAAA,qBAAA;;;;"}
+{"version":3,"file":"SelectDropdown.module.scss.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.module.scss"],"sourcesContent":[".listBox {\n  overflow-y: scroll;\n  max-height: 300px;\n  padding: var(--sizes-sm);\n  scroll-padding: var(--sizes-xs) 0;\n\n  &[data-empty] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n}\n\n// used important to override styled-component styles from Dropdown\n.dropdown {\n  padding: var(--sizes-none) !important;\n}\n\n.dropdownTrigger {\n  padding-right: var(--sizes-9);\n  background-image: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right var(--sizes-3) top 50%;\n  width: 100%;\n}\n\n.separator {\n  height: var(--sizes-line);\n  background: var(--colors-neutral-grey-base);\n  border: none;\n  margin: var(--sizes-none) var(--sizes-none);\n  width: 100%;\n}\n\n// used important to override styled-component styles from Search\n.search {\n  margin: var(--sizes-sm) !important;\n}\n\n// used important to override styled-component styles from Button\n.ctaButton {\n  justify-content: start !important;\n  padding: var(--sizes-sm) var(--sizes-xs) !important;\n  margin: var(--sizes-sm) !important;\n  border-radius: var(--radius-base) !important;\n  border: 0 !important;\n\n  svg {\n    width: var(--sizes-md) !important;\n    height: var(--sizes-md) !important;\n  }\n\n  > span {\n    gap: var(--sizes-base);\n    padding: 0 var(--sizes-xs);\n  }\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest) !important;\n    font-weight: var(--text-body-bold-font-weight) !important;\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,qjDAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,WAAA,CAAA,qBAAA;;;;"}

package/dist/components/SelectDropdown/components/GridItem/GridItem.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var FlexRow = require('../../../Flex/FlexRow/FlexRow.cjs');
+var Button = require('../../../Button/Button.cjs');
+var ArrowRightIcon = require('../../../../icons/design-system/components/ArrowRightIcon.cjs');
+var ItemContent = require('../ItemContent/ItemContent.cjs');
+var buildClassnames = require('../../../../utils/buildClassnames.cjs');
+require('uid/secure');
+require('../../../../hooks/useFocusVisible.cjs');
+var useId = require('../../../../hooks/useId.cjs');
+require('lodash.throttle');
+var item_module = require('../item.module.scss.cjs');
+var GridItem_module = require('./GridItem.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+function GridItem({ id, label, href, appearance = 'primary', className, onClickRowAction, rowActionAriaLabel, isRowActionDisabled = false, ...props }) {
+    const idComputed = useId.useId({ id, prefix: 'grid-item' });
+    return (React__default.default.createElement(reactAriaComponents.GridListItem, { id: idComputed, textValue: label, href: href, className: buildClassnames.buildClassnames([
+            item_module.item,
+            item_module[`appearance-${appearance}`],
+            className,
+        ]), ...props }, ({ selectionMode, allowsDragging, isSelected, isHovered }) => (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", justifyContent: "space-between" },
+        React__default.default.createElement(ItemContent.ItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, isHovered: isHovered, label: label, isLink: Boolean(href), appearance: appearance, itemType: "grid", ...props }),
+        onClickRowAction && (
+        /** onPointerDown event prevents click events from bubbling up to the GridListItem.
+         *  onKeyDown event prevents keyboard events from bubbling up to the GridListItem.
+         */
+        React__default.default.createElement(Button.Button, { onClick: onClickRowAction, disabled: isRowActionDisabled, onPointerDown: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), variant: "flat", iconSlot: React__default.default.createElement(ArrowRightIcon.ReactComponent, null), "aria-label": rowActionAriaLabel || `${label} row action`, className: GridItem_module.actionButton }))))));
+}
+
+exports.GridItem = GridItem;
+//# sourceMappingURL=GridItem.cjs.map

package/dist/components/SelectDropdown/components/GridItem/GridItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridItem.cjs","sources":["../../../../../src/components/SelectDropdown/components/GridItem/GridItem.tsx"],"sourcesContent":["import React from 'react';\nimport { GridListItem, GridListItemRenderProps } from 'react-aria-components';\nimport { FlexRow } from '../../../Flex/FlexRow';\nimport { Button } from '../../../Button';\nimport { ArrowRightIcon } from '../../../../icons';\nimport { ItemContent } from '../ItemContent';\nimport { GridItemProps } from './types';\nimport { buildClassnames } from '../../../../utils';\nimport { useId } from '../../../../hooks';\n\nimport itemStyles from '../item.module.scss';\nimport styles from './GridItem.module.scss';\n\nexport function GridItem({\n  id,\n  label,\n  href,\n  appearance = 'primary',\n  className,\n  onClickRowAction,\n  rowActionAriaLabel,\n  isRowActionDisabled = false,\n  ...props\n}: GridItemProps) {\n  const idComputed = useId({ id, prefix: 'grid-item' });\n\n  return (\n    <GridListItem\n      id={idComputed}\n      textValue={label}\n      href={href}\n      className={buildClassnames([\n        itemStyles.item,\n        itemStyles[`appearance-${appearance}`],\n        className,\n      ])}\n      {...props}\n    >\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected, isHovered }: GridListItemRenderProps) => (\n        <FlexRow flexWrap=\"nowrap\" justifyContent=\"space-between\">\n          <ItemContent\n            selectionMode={selectionMode}\n            allowsDragging={allowsDragging}\n            isSelected={isSelected}\n            isHovered={isHovered}\n            label={label}\n            isLink={Boolean(href)}\n            appearance={appearance}\n            itemType=\"grid\"\n            {...props}\n          />\n          {onClickRowAction && (\n            /** onPointerDown event prevents click events from bubbling up to the GridListItem.\n             *  onKeyDown event prevents keyboard events from bubbling up to the GridListItem.\n             */\n            <Button\n              onClick={onClickRowAction}\n              disabled={isRowActionDisabled}\n              onPointerDown={(event) => event.stopPropagation()}\n              onKeyDown={(event) => event.stopPropagation()}\n              variant=\"flat\"\n              iconSlot={<ArrowRightIcon />}\n              aria-label={rowActionAriaLabel || `${label} row action`}\n              className={styles.actionButton}\n            />\n          )}\n        </FlexRow>\n      )}\n    </GridListItem>\n  );\n}\n"],"names":["useId","React","GridListItem","buildClassnames","itemStyles","FlexRow","ItemContent","Button","ArrowRightIcon","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;AAaM,SAAU,QAAQ,CAAC,EACvB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAU,GAAG,SAAS,EACtB,SAAS,EACT,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,GAAG,KAAK,EAC3B,GAAG,KAAK,EACM,EAAA;AACd,IAAA,MAAM,UAAU,GAAGA,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AAErD,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,gCAAY,IACX,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,WAAU,CAAC,IAAI;AACf,YAAAA,WAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;YACtC,SAAS;SACV,CAAC,EAAA,GACE,KAAK,EAAA,EAGR,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAA2B,MACjFH,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAA;AACvD,QAAAJ,sBAAA,CAAA,aAAA,CAACK,uBAAW,EACV,EAAA,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EACrB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAC,MAAM,EAAA,GACX,KAAK,EACT,CAAA;AACD,QAAA,gBAAgB;AACf;;AAEG;AACH,QAAAL,sBAAA,CAAA,aAAA,CAACM,aAAM,EAAA,EACL,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,mBAAmB,EAC7B,aAAa,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,eAAe,EAAE,EACjD,SAAS,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,eAAe,EAAE,EAC7C,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEN,sBAAC,CAAA,aAAA,CAAAO,6BAAc,EAAG,IAAA,CAAA,EAAA,YAAA,EAChB,kBAAkB,IAAI,CAAG,EAAA,KAAK,CAAa,WAAA,CAAA,EACvD,SAAS,EAAEC,eAAM,CAAC,YAAY,EAAA,CAC9B,CACH,CACO,CACX,CACY;AAEnB;;;;"}

package/dist/components/SelectDropdown/components/GridItem/GridItem.js

@@ -0,0 +1,31 @@
+import React__default from 'react';
+import { GridListItem } from 'react-aria-components';
+import { FlexRow } from '../../../Flex/FlexRow/FlexRow.js';
+import { Button } from '../../../Button/Button.js';
+import { ReactComponent as ArrowRightIcon } from '../../../../icons/design-system/components/ArrowRightIcon.js';
+import { ItemContent } from '../ItemContent/ItemContent.js';
+import { buildClassnames } from '../../../../utils/buildClassnames.js';
+import 'uid/secure';
+import '../../../../hooks/useFocusVisible.js';
+import { useId } from '../../../../hooks/useId.js';
+import 'lodash.throttle';
+import itemStyles from '../item.module.scss.js';
+import styles from './GridItem.module.scss.js';
+
+function GridItem({ id, label, href, appearance = 'primary', className, onClickRowAction, rowActionAriaLabel, isRowActionDisabled = false, ...props }) {
+    const idComputed = useId({ id, prefix: 'grid-item' });
+    return (React__default.createElement(GridListItem, { id: idComputed, textValue: label, href: href, className: buildClassnames([
+            itemStyles.item,
+            itemStyles[`appearance-${appearance}`],
+            className,
+        ]), ...props }, ({ selectionMode, allowsDragging, isSelected, isHovered }) => (React__default.createElement(FlexRow, { flexWrap: "nowrap", justifyContent: "space-between" },
+        React__default.createElement(ItemContent, { selectionMode: selectionMode, allowsDragging: allowsDragging, isSelected: isSelected, isHovered: isHovered, label: label, isLink: Boolean(href), appearance: appearance, itemType: "grid", ...props }),
+        onClickRowAction && (
+        /** onPointerDown event prevents click events from bubbling up to the GridListItem.
+         *  onKeyDown event prevents keyboard events from bubbling up to the GridListItem.
+         */
+        React__default.createElement(Button, { onClick: onClickRowAction, disabled: isRowActionDisabled, onPointerDown: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), variant: "flat", iconSlot: React__default.createElement(ArrowRightIcon, null), "aria-label": rowActionAriaLabel || `${label} row action`, className: styles.actionButton }))))));
+}
+
+export { GridItem };
+//# sourceMappingURL=GridItem.js.map

package/dist/components/SelectDropdown/components/GridItem/GridItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridItem.js","sources":["../../../../../src/components/SelectDropdown/components/GridItem/GridItem.tsx"],"sourcesContent":["import React from 'react';\nimport { GridListItem, GridListItemRenderProps } from 'react-aria-components';\nimport { FlexRow } from '../../../Flex/FlexRow';\nimport { Button } from '../../../Button';\nimport { ArrowRightIcon } from '../../../../icons';\nimport { ItemContent } from '../ItemContent';\nimport { GridItemProps } from './types';\nimport { buildClassnames } from '../../../../utils';\nimport { useId } from '../../../../hooks';\n\nimport itemStyles from '../item.module.scss';\nimport styles from './GridItem.module.scss';\n\nexport function GridItem({\n  id,\n  label,\n  href,\n  appearance = 'primary',\n  className,\n  onClickRowAction,\n  rowActionAriaLabel,\n  isRowActionDisabled = false,\n  ...props\n}: GridItemProps) {\n  const idComputed = useId({ id, prefix: 'grid-item' });\n\n  return (\n    <GridListItem\n      id={idComputed}\n      textValue={label}\n      href={href}\n      className={buildClassnames([\n        itemStyles.item,\n        itemStyles[`appearance-${appearance}`],\n        className,\n      ])}\n      {...props}\n    >\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected, isHovered }: GridListItemRenderProps) => (\n        <FlexRow flexWrap=\"nowrap\" justifyContent=\"space-between\">\n          <ItemContent\n            selectionMode={selectionMode}\n            allowsDragging={allowsDragging}\n            isSelected={isSelected}\n            isHovered={isHovered}\n            label={label}\n            isLink={Boolean(href)}\n            appearance={appearance}\n            itemType=\"grid\"\n            {...props}\n          />\n          {onClickRowAction && (\n            /** onPointerDown event prevents click events from bubbling up to the GridListItem.\n             *  onKeyDown event prevents keyboard events from bubbling up to the GridListItem.\n             */\n            <Button\n              onClick={onClickRowAction}\n              disabled={isRowActionDisabled}\n              onPointerDown={(event) => event.stopPropagation()}\n              onKeyDown={(event) => event.stopPropagation()}\n              variant=\"flat\"\n              iconSlot={<ArrowRightIcon />}\n              aria-label={rowActionAriaLabel || `${label} row action`}\n              className={styles.actionButton}\n            />\n          )}\n        </FlexRow>\n      )}\n    </GridListItem>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;AAaM,SAAU,QAAQ,CAAC,EACvB,EAAE,EACF,KAAK,EACL,IAAI,EACJ,UAAU,GAAG,SAAS,EACtB,SAAS,EACT,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,GAAG,KAAK,EAC3B,GAAG,KAAK,EACM,EAAA;AACd,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AAErD,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,YAAY,IACX,EAAE,EAAE,UAAU,EACd,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,UAAU,CAAC,IAAI;AACf,YAAA,UAAU,CAAC,CAAA,WAAA,EAAc,UAAU,CAAA,CAAE,CAAC;YACtC,SAAS;SACV,CAAC,EAAA,GACE,KAAK,EAAA,EAGR,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAA2B,MACjFA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAA;AACvD,QAAAA,cAAA,CAAA,aAAA,CAAC,WAAW,EACV,EAAA,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EACrB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAC,MAAM,EAAA,GACX,KAAK,EACT,CAAA;AACD,QAAA,gBAAgB;AACf;;AAEG;AACH,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,mBAAmB,EAC7B,aAAa,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,eAAe,EAAE,EACjD,SAAS,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,eAAe,EAAE,EAC7C,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,cAAc,EAAG,IAAA,CAAA,EAAA,YAAA,EAChB,kBAAkB,IAAI,CAAG,EAAA,KAAK,CAAa,WAAA,CAAA,EACvD,SAAS,EAAE,MAAM,CAAC,YAAY,EAAA,CAC9B,CACH,CACO,CACX,CACY;AAEnB;;;;"}

package/dist/components/SelectDropdown/components/GridItem/GridItem.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._actionButton_bip91_1:hover {\n  outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n}");
+var styles = {"actionButton":"_actionButton_bip91_1"};
+
+module.exports = styles;
+//# sourceMappingURL=GridItem.module.scss.cjs.map

package/dist/components/SelectDropdown/components/GridItem/GridItem.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridItem.module.scss.cjs","sources":["../../../../../src/components/SelectDropdown/components/GridItem/GridItem.module.scss"],"sourcesContent":[".actionButton {\n  &:hover {\n    outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n  }\n}\n"],"names":[],"mappings":";;;;AAEI,eAAA,CAAA,yGAAA;;;;;"}

package/dist/components/SelectDropdown/components/GridItem/GridItem.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../../../_virtual/____insertStyle.js';
+
+insertStyle("._actionButton_bip91_1:hover {\n  outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n}");
+var styles = {"actionButton":"_actionButton_bip91_1"};
+
+export { styles as default };
+//# sourceMappingURL=GridItem.module.scss.js.map

package/dist/components/SelectDropdown/components/GridItem/GridItem.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridItem.module.scss.js","sources":["../../../../../src/components/SelectDropdown/components/GridItem/GridItem.module.scss"],"sourcesContent":[".actionButton {\n  &:hover {\n    outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AAEIA,WAAA,CAAA,yGAAA;;;;;"}

package/dist/components/SelectDropdown/components/ItemContent/ItemContent.cjs

@@ -17,7 +17,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const ItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging = false, selectionMode = 'single', isLink, isSelected = false, itemType, }) => {
+const ItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging = false, selectionMode = 'single', isLink, isSelected = false, isHovered = false, itemType, }) => {
     const infoContainerClassNames = React.useMemo(() => {
         const base = ItemContent_module.infoContainer;
         if (itemInfoSlot && endInfoSlot) {
@@ -38,12 +38,12 @@ const ItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot,
             mediaSlot,
             React__default.default.createElement(FlexCol.FlexCol, { gap: "xs", style: { flexGrow: 1 } },
                 React__default.default.createElement("div", { className: infoContainerClassNames, "data-testid": "info-container" },
-                    itemType === 'grid' ? (React__default.default.createElement(Text.Text, { variant: "body" }, label)) : (React__default.default.createElement(reactAriaComponents.Text, { slot: "label" },
-                        React__default.default.createElement(Text.Text, { variant: "body" }, label))),
+                    itemType === 'grid' ? (React__default.default.createElement(Text.Text, { variant: isHovered ? 'bodyBold' : 'body' }, label)) : (React__default.default.createElement(reactAriaComponents.Text, { slot: "label" },
+                        React__default.default.createElement(Text.Text, { variant: isHovered ? 'bodyBold' : 'body' }, label))),
                     itemInfoSlot,
                     endInfoSlot && (React__default.default.createElement("div", { className: endInfoSlot ? ItemContent_module.justifyEnd : ItemContent_module.justifyStart }, endInfoSlot))),
                 hint && (React__default.default.createElement(reactAriaComponents.Text, { slot: "description" },
-                    React__default.default.createElement(Text.Text, { variant: "hintText" }, hint))),
+                    React__default.default.createElement(Text.Text, { variant: "body" }, hint))),
                 alert && React__default.default.createElement(MiniAlert.MiniAlert, { title: alert.title, variant: alert.variant }))),
         isLink && React__default.default.createElement(ArrowRightIcon.ReactComponent, { className: ItemContent_module.linkIcon, "data-testid": "link-icon" })));
 };

package/dist/components/SelectDropdown/components/ItemContent/ItemContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ItemContent.cjs","sources":["../../../../../src/components/SelectDropdown/components/ItemContent/ItemContent.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Text } from 'react-aria-components';\nimport { buildClassnames } from '../../../../utils';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { ArrowRightIcon, DragIndicatorIcon } from '../../../../icons';\nimport { ItemContentProps } from './types';\nimport { Text as VeeqoText } from '../../../Text';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\nimport styles from './ItemContent.module.scss';\nimport { FlexRow } from '../../../Flex/FlexRow';\n\nexport const ItemContent = ({\n  label,\n  hint,\n  itemInfoSlot,\n  endInfoSlot,\n  alert,\n  mediaSlot,\n  allowsDragging = false,\n  selectionMode = 'single',\n  isLink,\n  isSelected = false,\n  itemType,\n}: ItemContentProps) => {\n  const infoContainerClassNames = useMemo(() => {\n    const base = styles.infoContainer;\n\n    if (itemInfoSlot && endInfoSlot) {\n      return buildClassnames([base, styles.hasItemInfoAndEndInfo]);\n    }\n\n    if (itemInfoSlot) {\n      return buildClassnames([base, styles.hasItemInfoOnly]);\n    }\n\n    if (endInfoSlot) {\n      return buildClassnames([base, styles.hasEndInfoOnly]);\n    }\n\n    return buildClassnames([base]);\n  }, [endInfoSlot, itemInfoSlot]);\n\n  return (\n    <FlexRow\n      flexWrap=\"nowrap\"\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      gap=\"base\"\n      style={{ flexGrow: 1 }}\n    >\n      <FlexRow flexWrap=\"nowrap\" gap=\"base\" style={{ flexGrow: 1 }}>\n        {allowsDragging && <DragIndicatorIcon data-testid=\"drag-icon\" />}\n        <SelectionType selectionMode={selectionMode} isSelected={isSelected} isLink={isLink} />\n        {mediaSlot}\n        <FlexCol gap=\"xs\" style={{ flexGrow: 1 }}>\n          <div className={infoContainerClassNames} data-testid=\"info-container\">\n            {itemType === 'grid' ? (\n              <VeeqoText variant=\"body\">{label}</VeeqoText>\n            ) : (\n              <Text slot=\"label\">\n                <VeeqoText variant=\"body\">{label}</VeeqoText>\n              </Text>\n            )}\n            {itemInfoSlot}\n            {endInfoSlot && (\n              <div className={endInfoSlot ? styles.justifyEnd : styles.justifyStart}>\n                {endInfoSlot}\n              </div>\n            )}\n          </div>\n\n          {hint && (\n            <Text slot=\"description\">\n              <VeeqoText variant=\"hintText\">{hint}</VeeqoText>\n            </Text>\n          )}\n          {alert && <MiniAlert title={alert.title} variant={alert.variant} />}\n        </FlexCol>\n      </FlexRow>\n      {isLink && <ArrowRightIcon className={styles.linkIcon} data-testid=\"link-icon\" />}\n    </FlexRow>\n  );\n};\n"],"names":["useMemo","styles","buildClassnames","React","FlexRow","DragIndicatorIcon","SelectionType","FlexCol","VeeqoText","Text","MiniAlert","ArrowRightIcon"],"mappings":"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"}
+{"version":3,"file":"ItemContent.cjs","sources":["../../../../../src/components/SelectDropdown/components/ItemContent/ItemContent.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { Text } from 'react-aria-components';\nimport { buildClassnames } from '../../../../utils';\nimport { FlexCol } from '../../../Flex/FlexCol';\nimport { ArrowRightIcon, DragIndicatorIcon } from '../../../../icons';\nimport { ItemContentProps } from './types';\nimport { Text as VeeqoText } from '../../../Text';\nimport { MiniAlert } from '../../../Alerts/MiniAlert';\nimport { SelectionType } from './SelectionType';\nimport styles from './ItemContent.module.scss';\nimport { FlexRow } from '../../../Flex/FlexRow';\n\nexport const ItemContent = ({\n  label,\n  hint,\n  itemInfoSlot,\n  endInfoSlot,\n  alert,\n  mediaSlot,\n  allowsDragging = false,\n  selectionMode = 'single',\n  isLink,\n  isSelected = false,\n  isHovered = false,\n  itemType,\n}: ItemContentProps) => {\n  const infoContainerClassNames = useMemo(() => {\n    const base = styles.infoContainer;\n\n    if (itemInfoSlot && endInfoSlot) {\n      return buildClassnames([base, styles.hasItemInfoAndEndInfo]);\n    }\n\n    if (itemInfoSlot) {\n      return buildClassnames([base, styles.hasItemInfoOnly]);\n    }\n\n    if (endInfoSlot) {\n      return buildClassnames([base, styles.hasEndInfoOnly]);\n    }\n\n    return buildClassnames([base]);\n  }, [endInfoSlot, itemInfoSlot]);\n\n  return (\n    <FlexRow\n      flexWrap=\"nowrap\"\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      gap=\"base\"\n      style={{ flexGrow: 1 }}\n    >\n      <FlexRow flexWrap=\"nowrap\" gap=\"base\" style={{ flexGrow: 1 }}>\n        {allowsDragging && <DragIndicatorIcon data-testid=\"drag-icon\" />}\n        <SelectionType selectionMode={selectionMode} isSelected={isSelected} isLink={isLink} />\n        {mediaSlot}\n        <FlexCol gap=\"xs\" style={{ flexGrow: 1 }}>\n          <div className={infoContainerClassNames} data-testid=\"info-container\">\n            {itemType === 'grid' ? (\n              <VeeqoText variant={isHovered ? 'bodyBold' : 'body'}>{label}</VeeqoText>\n            ) : (\n              <Text slot=\"label\">\n                <VeeqoText variant={isHovered ? 'bodyBold' : 'body'}>{label}</VeeqoText>\n              </Text>\n            )}\n            {itemInfoSlot}\n            {endInfoSlot && (\n              <div className={endInfoSlot ? styles.justifyEnd : styles.justifyStart}>\n                {endInfoSlot}\n              </div>\n            )}\n          </div>\n\n          {hint && (\n            <Text slot=\"description\">\n              <VeeqoText variant=\"body\">{hint}</VeeqoText>\n            </Text>\n          )}\n          {alert && <MiniAlert title={alert.title} variant={alert.variant} />}\n        </FlexCol>\n      </FlexRow>\n      {isLink && <ArrowRightIcon className={styles.linkIcon} data-testid=\"link-icon\" />}\n    </FlexRow>\n  );\n};\n"],"names":["useMemo","styles","buildClassnames","React","FlexRow","DragIndicatorIcon","SelectionType","FlexCol","VeeqoText","Text","MiniAlert","ArrowRightIcon"],"mappings":"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"}

package/dist/components/SelectDropdown/components/ItemContent/ItemContent.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { ItemContentProps } from './types';
-export declare const ItemContent: ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging, selectionMode, isLink, isSelected, itemType, }: ItemContentProps) => React.JSX.Element;
+export declare const ItemContent: ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging, selectionMode, isLink, isSelected, isHovered, itemType, }: ItemContentProps) => React.JSX.Element;

package/dist/components/SelectDropdown/components/ItemContent/ItemContent.js

@@ -11,7 +11,7 @@ import { SelectionType } from './SelectionType.js';
 import styles from './ItemContent.module.scss.js';
 import { FlexRow } from '../../../Flex/FlexRow/FlexRow.js';
 
-const ItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging = false, selectionMode = 'single', isLink, isSelected = false, itemType, }) => {
+const ItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot, allowsDragging = false, selectionMode = 'single', isLink, isSelected = false, isHovered = false, itemType, }) => {
     const infoContainerClassNames = useMemo(() => {
         const base = styles.infoContainer;
         if (itemInfoSlot && endInfoSlot) {
@@ -32,12 +32,12 @@ const ItemContent = ({ label, hint, itemInfoSlot, endInfoSlot, alert, mediaSlot,
             mediaSlot,
             React__default.createElement(FlexCol, { gap: "xs", style: { flexGrow: 1 } },
                 React__default.createElement("div", { className: infoContainerClassNames, "data-testid": "info-container" },
-                    itemType === 'grid' ? (React__default.createElement(Text, { variant: "body" }, label)) : (React__default.createElement(Text$1, { slot: "label" },
-                        React__default.createElement(Text, { variant: "body" }, label))),
+                    itemType === 'grid' ? (React__default.createElement(Text, { variant: isHovered ? 'bodyBold' : 'body' }, label)) : (React__default.createElement(Text$1, { slot: "label" },
+                        React__default.createElement(Text, { variant: isHovered ? 'bodyBold' : 'body' }, label))),
                     itemInfoSlot,
                     endInfoSlot && (React__default.createElement("div", { className: endInfoSlot ? styles.justifyEnd : styles.justifyStart }, endInfoSlot))),
                 hint && (React__default.createElement(Text$1, { slot: "description" },
-                    React__default.createElement(Text, { variant: "hintText" }, hint))),
+                    React__default.createElement(Text, { variant: "body" }, hint))),
                 alert && React__default.createElement(MiniAlert, { title: alert.title, variant: alert.variant }))),
         isLink && React__default.createElement(ArrowRightIcon, { className: styles.linkIcon, "data-testid": "link-icon" })));
 };