@veeqo/ui 12.4.0-beta-2 → 12.4.0-beta-3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/SelectDropdown/SelectDropdown.cjs +2 -2
- package/dist/components/SelectDropdown/SelectDropdown.cjs.map +1 -1
- package/dist/components/SelectDropdown/SelectDropdown.js +2 -2
- package/dist/components/SelectDropdown/SelectDropdown.js.map +1 -1
- package/dist/components/SelectDropdown/SelectDropdown.module.scss.cjs +2 -2
- package/dist/components/SelectDropdown/SelectDropdown.module.scss.cjs.map +1 -1
- package/dist/components/SelectDropdown/SelectDropdown.module.scss.js +2 -2
- package/dist/components/SelectDropdown/SelectDropdown.module.scss.js.map +1 -1
- package/dist/components/SelectDropdown/components/GridItem/GridItem.cjs +2 -2
- package/dist/components/SelectDropdown/components/GridItem/GridItem.cjs.map +1 -1
- package/dist/components/SelectDropdown/components/GridItem/GridItem.js +2 -2
- package/dist/components/SelectDropdown/components/GridItem/GridItem.js.map +1 -1
- package/dist/components/SelectDropdown/components/GridItem/GridItem.module.scss.cjs +9 -0
- package/dist/components/SelectDropdown/components/GridItem/GridItem.module.scss.cjs.map +1 -0
- package/dist/components/SelectDropdown/components/GridItem/GridItem.module.scss.js +7 -0
- package/dist/components/SelectDropdown/components/GridItem/GridItem.module.scss.js.map +1 -0
- package/dist/components/SelectDropdown/components/SelectDropdownState.cjs +11 -3
- package/dist/components/SelectDropdown/components/SelectDropdownState.cjs.map +1 -1
- package/dist/components/SelectDropdown/components/SelectDropdownState.js +11 -3
- package/dist/components/SelectDropdown/components/SelectDropdownState.js.map +1 -1
- package/dist/components/SelectDropdown/components/item.module.scss.cjs +2 -2
- package/dist/components/SelectDropdown/components/item.module.scss.cjs.map +1 -1
- package/dist/components/SelectDropdown/components/item.module.scss.js +2 -2
- package/dist/components/SelectDropdown/components/item.module.scss.js.map +1 -1
- package/package.json +1 -1
|
@@ -49,10 +49,10 @@ const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple =
|
|
|
49
49
|
React__default.default.createElement("hr", { className: SelectDropdown_module.separator }))),
|
|
50
50
|
topAction && (React__default.default.createElement(React.Fragment, { key: topAction.label },
|
|
51
51
|
React__default.default.createElement(Button.Button, { className: SelectDropdown_module.ctaButton, key: topAction.label, variant: "flat", ...topAction }),
|
|
52
|
-
React__default.default.createElement("hr", { className: SelectDropdown_module.separator, key: `
|
|
52
|
+
React__default.default.createElement("hr", { className: SelectDropdown_module.separator, key: `separator-${topAction.label}` }))),
|
|
53
53
|
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 :
|
|
54
54
|
actions.map(({ label, ...actionProps }) => (React__default.default.createElement(React.Fragment, { key: label },
|
|
55
|
-
React__default.default.createElement("hr", { className: SelectDropdown_module.separator, key: `
|
|
55
|
+
React__default.default.createElement("hr", { className: SelectDropdown_module.separator, key: `separator-${label}` }),
|
|
56
56
|
React__default.default.createElement(Button.Button, { className: SelectDropdown_module.ctaButton, variant: "flat", key: label, ...actionProps }))))));
|
|
57
57
|
};
|
|
58
58
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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 '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 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 {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={`
|
|
1
|
+
{"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 '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 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 {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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"}
|
|
@@ -43,10 +43,10 @@ const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple =
|
|
|
43
43
|
React__default.createElement("hr", { className: styles.separator }))),
|
|
44
44
|
topAction && (React__default.createElement(Fragment, { key: topAction.label },
|
|
45
45
|
React__default.createElement(Button, { className: styles.ctaButton, key: topAction.label, variant: "flat", ...topAction }),
|
|
46
|
-
React__default.createElement("hr", { className: styles.separator, key: `
|
|
46
|
+
React__default.createElement("hr", { className: styles.separator, key: `separator-${topAction.label}` }))),
|
|
47
47
|
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 :
|
|
48
48
|
actions.map(({ label, ...actionProps }) => (React__default.createElement(Fragment, { key: label },
|
|
49
|
-
React__default.createElement("hr", { className: styles.separator, key: `
|
|
49
|
+
React__default.createElement("hr", { className: styles.separator, key: `separator-${label}` }),
|
|
50
50
|
React__default.createElement(Button, { className: styles.ctaButton, variant: "flat", key: label, ...actionProps }))))));
|
|
51
51
|
};
|
|
52
52
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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 '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 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 {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={`
|
|
1
|
+
{"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 '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 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 {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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"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var styles = {"listBox":"
|
|
5
|
+
___$insertStyle("._listBox_b2lud_1 {\n overflow-y: scroll;\n max-height: 300px;\n padding: var(--sizes-sm);\n scroll-padding: var(--sizes-xs) 0;\n}\n._listBox_b2lud_1[data-empty] {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n._dropdown_b2lud_13 {\n padding: var(--sizes-none) !important;\n}\n\n._dropdownTrigger_b2lud_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_b2lud_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_b2lud_33 {\n margin: var(--sizes-sm) !important;\n}\n\n._ctaButton_b2lud_37 {\n justify-content: start !important;\n padding-left: var(--sizes-sm) !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_b2lud_37 svg {\n width: var(--sizes-md) !important;\n height: var(--sizes-md) !important;\n}\n._ctaButton_b2lud_37 > span {\n gap: var(--sizes-base);\n padding: 0 var(--sizes-xs);\n}");
|
|
6
|
+
var styles = {"listBox":"_listBox_b2lud_1","dropdown":"_dropdown_b2lud_13","dropdownTrigger":"_dropdownTrigger_b2lud_17","separator":"_separator_b2lud_25","search":"_search_b2lud_33","ctaButton":"_ctaButton_b2lud_37"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=SelectDropdown.module.scss.cjs.map
|
|
@@ -1 +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-sm) !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,
|
|
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 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-left: var(--sizes-sm) !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 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"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,k7CAAA;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;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"listBox":"
|
|
3
|
+
insertStyle("._listBox_b2lud_1 {\n overflow-y: scroll;\n max-height: 300px;\n padding: var(--sizes-sm);\n scroll-padding: var(--sizes-xs) 0;\n}\n._listBox_b2lud_1[data-empty] {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n._dropdown_b2lud_13 {\n padding: var(--sizes-none) !important;\n}\n\n._dropdownTrigger_b2lud_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_b2lud_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_b2lud_33 {\n margin: var(--sizes-sm) !important;\n}\n\n._ctaButton_b2lud_37 {\n justify-content: start !important;\n padding-left: var(--sizes-sm) !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_b2lud_37 svg {\n width: var(--sizes-md) !important;\n height: var(--sizes-md) !important;\n}\n._ctaButton_b2lud_37 > span {\n gap: var(--sizes-base);\n padding: 0 var(--sizes-xs);\n}");
|
|
4
|
+
var styles = {"listBox":"_listBox_b2lud_1","dropdown":"_dropdown_b2lud_13","dropdownTrigger":"_dropdownTrigger_b2lud_17","separator":"_separator_b2lud_25","search":"_search_b2lud_33","ctaButton":"_ctaButton_b2lud_37"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=SelectDropdown.module.scss.js.map
|
|
@@ -1 +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-sm) !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,
|
|
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 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-left: var(--sizes-sm) !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 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"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,k7CAAA;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;;;;"}
|
|
@@ -12,12 +12,12 @@ require('../../../../hooks/useFocusVisible.cjs');
|
|
|
12
12
|
var useId = require('../../../../hooks/useId.cjs');
|
|
13
13
|
require('lodash.throttle');
|
|
14
14
|
var item_module = require('../item.module.scss.cjs');
|
|
15
|
+
var GridItem_module = require('./GridItem.module.scss.cjs');
|
|
15
16
|
|
|
16
17
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
17
18
|
|
|
18
19
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
19
20
|
|
|
20
|
-
// import styles from './GridItem.module.scss';
|
|
21
21
|
function GridItem({ id, label, href, appearance = 'primary', className, onClickRowAction, rowActionAriaLabel, isRowActionDisabled = false, ...props }) {
|
|
22
22
|
const idComputed = useId.useId({ id, prefix: 'grid-item' });
|
|
23
23
|
return (React__default.default.createElement(reactAriaComponents.GridListItem, { id: idComputed, textValue: label, href: href, className: buildClassnames.buildClassnames([
|
|
@@ -30,7 +30,7 @@ function GridItem({ id, label, href, appearance = 'primary', className, onClickR
|
|
|
30
30
|
/** onPointerDown event prevents click events from bubbling up to the GridListItem.
|
|
31
31
|
* onKeyDown event prevents keyboard events from bubbling up to the GridListItem.
|
|
32
32
|
*/
|
|
33
|
-
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
|
|
33
|
+
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 }))))));
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
exports.GridItem = GridItem;
|
|
@@ -1 +1 @@
|
|
|
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';\
|
|
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 }: GridListItemRenderProps) => (\n <FlexRow flexWrap=\"nowrap\" justifyContent=\"space-between\">\n <ItemContent\n selectionMode={selectionMode}\n allowsDragging={allowsDragging}\n isSelected={isSelected}\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,EAA2B,MACtEH,sBAAC,CAAA,aAAA,CAAAI,eAAO,EAAC,EAAA,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAA;AACvD,QAAAJ,sBAAA,CAAA,aAAA,CAACK,uBAAW,EAAA,EACV,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,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;;;;"}
|
|
@@ -10,8 +10,8 @@ import '../../../../hooks/useFocusVisible.js';
|
|
|
10
10
|
import { useId } from '../../../../hooks/useId.js';
|
|
11
11
|
import 'lodash.throttle';
|
|
12
12
|
import itemStyles from '../item.module.scss.js';
|
|
13
|
+
import styles from './GridItem.module.scss.js';
|
|
13
14
|
|
|
14
|
-
// import styles from './GridItem.module.scss';
|
|
15
15
|
function GridItem({ id, label, href, appearance = 'primary', className, onClickRowAction, rowActionAriaLabel, isRowActionDisabled = false, ...props }) {
|
|
16
16
|
const idComputed = useId({ id, prefix: 'grid-item' });
|
|
17
17
|
return (React__default.createElement(GridListItem, { id: idComputed, textValue: label, href: href, className: buildClassnames([
|
|
@@ -24,7 +24,7 @@ function GridItem({ id, label, href, appearance = 'primary', className, onClickR
|
|
|
24
24
|
/** onPointerDown event prevents click events from bubbling up to the GridListItem.
|
|
25
25
|
* onKeyDown event prevents keyboard events from bubbling up to the GridListItem.
|
|
26
26
|
*/
|
|
27
|
-
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
|
|
27
|
+
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 }))))));
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
export { GridItem };
|
|
@@ -1 +1 @@
|
|
|
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';\
|
|
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 }: GridListItemRenderProps) => (\n <FlexRow flexWrap=\"nowrap\" justifyContent=\"space-between\">\n <ItemContent\n selectionMode={selectionMode}\n allowsDragging={allowsDragging}\n isSelected={isSelected}\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,EAA2B,MACtEA,cAAC,CAAA,aAAA,CAAA,OAAO,EAAC,EAAA,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAA;AACvD,QAAAA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,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;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var ___$insertStyle = require('../../../../_virtual/____insertStyle.cjs');
|
|
4
|
+
|
|
5
|
+
___$insertStyle("._actionButton_bip91_1:hover {\n outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n}");
|
|
6
|
+
var styles = {"actionButton":"_actionButton_bip91_1"};
|
|
7
|
+
|
|
8
|
+
module.exports = styles;
|
|
9
|
+
//# sourceMappingURL=GridItem.module.scss.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import insertStyle from '../../../../_virtual/____insertStyle.js';
|
|
2
|
+
|
|
3
|
+
insertStyle("._actionButton_bip91_1:hover {\n outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n}");
|
|
4
|
+
var styles = {"actionButton":"_actionButton_bip91_1"};
|
|
5
|
+
|
|
6
|
+
export { styles as default };
|
|
7
|
+
//# sourceMappingURL=GridItem.module.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;;"}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var
|
|
4
|
+
var FlexCol = require('../../Flex/FlexCol/FlexCol.cjs');
|
|
5
|
+
var Skeleton = require('../../Skeleton/Skeleton.cjs');
|
|
6
|
+
var Text = require('../../Text/Text.cjs');
|
|
7
|
+
var InboxIcon = require('../../../icons/design-system/components/InboxIcon.cjs');
|
|
5
8
|
|
|
6
9
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
7
10
|
|
|
@@ -9,10 +12,15 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
|
9
12
|
|
|
10
13
|
const SelectDropdownState = ({ isLoading, emptyStateSlot }) => {
|
|
11
14
|
if (isLoading)
|
|
12
|
-
return React__default.default.createElement(
|
|
15
|
+
return (React__default.default.createElement(FlexCol.FlexCol, { flexGrow: "1" },
|
|
16
|
+
React__default.default.createElement(Skeleton.Skeleton, { width: "100%", height: "32px" }),
|
|
17
|
+
React__default.default.createElement(Skeleton.Skeleton, { width: "100%", height: "32px" }),
|
|
18
|
+
React__default.default.createElement(Skeleton.Skeleton, { width: "100%", height: "32px" })));
|
|
13
19
|
if (emptyStateSlot)
|
|
14
20
|
return emptyStateSlot;
|
|
15
|
-
return React__default.default.createElement("
|
|
21
|
+
return (React__default.default.createElement(FlexCol.FlexCol, { flexGrow: "1", alignItems: "center", justifyContent: "center", gap: "sm" },
|
|
22
|
+
React__default.default.createElement(InboxIcon.ReactComponent, null),
|
|
23
|
+
React__default.default.createElement(Text.Text, null, "No items found")));
|
|
16
24
|
};
|
|
17
25
|
|
|
18
26
|
exports.SelectDropdownState = SelectDropdownState;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectDropdownState.cjs","sources":["../../../../src/components/SelectDropdown/components/SelectDropdownState.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"SelectDropdownState.cjs","sources":["../../../../src/components/SelectDropdown/components/SelectDropdownState.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { Skeleton } from '../../Skeleton';\nimport { Text } from '../../Text';\nimport { InboxIcon } from '../../../icons';\n\ntype SelectDropdownStateProps = {\n isLoading: boolean;\n emptyStateSlot?: ReactElement;\n};\n\nexport const SelectDropdownState = ({ isLoading, emptyStateSlot }: SelectDropdownStateProps) => {\n if (isLoading)\n return (\n <FlexCol flexGrow=\"1\">\n <Skeleton width=\"100%\" height=\"32px\" />\n <Skeleton width=\"100%\" height=\"32px\" />\n <Skeleton width=\"100%\" height=\"32px\" />\n </FlexCol>\n );\n if (emptyStateSlot) return emptyStateSlot;\n\n return (\n <FlexCol flexGrow=\"1\" alignItems=\"center\" justifyContent=\"center\" gap=\"sm\">\n <InboxIcon />\n <Text>No items found</Text>\n </FlexCol>\n );\n};\n"],"names":["React","FlexCol","Skeleton","InboxIcon","Text"],"mappings":";;;;;;;;;;;;AAWa,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,EAA4B,KAAI;AAC7F,IAAA,IAAI,SAAS;AACX,QAAA,QACEA,sBAAC,CAAA,aAAA,CAAAC,eAAO,EAAC,EAAA,QAAQ,EAAC,GAAG,EAAA;YACnBD,sBAAC,CAAA,aAAA,CAAAE,iBAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAG,CAAA;YACvCF,sBAAC,CAAA,aAAA,CAAAE,iBAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAG,CAAA;AACvC,YAAAF,sBAAA,CAAA,aAAA,CAACE,iBAAQ,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAA,CAAG,CAC/B;AAEd,IAAA,IAAI,cAAc;AAAE,QAAA,OAAO,cAAc;AAEzC,IAAA,QACEF,sBAAC,CAAA,aAAA,CAAAC,eAAO,IAAC,QAAQ,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAA;AACxE,QAAAD,sBAAA,CAAA,aAAA,CAACG,wBAAS,EAAG,IAAA,CAAA;AACb,QAAAH,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAA,IAAA,EAAA,gBAAA,CAAsB,CACnB;AAEd;;;;"}
|
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { FlexCol } from '../../Flex/FlexCol/FlexCol.js';
|
|
3
|
+
import { Skeleton } from '../../Skeleton/Skeleton.js';
|
|
4
|
+
import { Text } from '../../Text/Text.js';
|
|
5
|
+
import { ReactComponent as InboxIcon } from '../../../icons/design-system/components/InboxIcon.js';
|
|
3
6
|
|
|
4
7
|
const SelectDropdownState = ({ isLoading, emptyStateSlot }) => {
|
|
5
8
|
if (isLoading)
|
|
6
|
-
return React__default.createElement(
|
|
9
|
+
return (React__default.createElement(FlexCol, { flexGrow: "1" },
|
|
10
|
+
React__default.createElement(Skeleton, { width: "100%", height: "32px" }),
|
|
11
|
+
React__default.createElement(Skeleton, { width: "100%", height: "32px" }),
|
|
12
|
+
React__default.createElement(Skeleton, { width: "100%", height: "32px" })));
|
|
7
13
|
if (emptyStateSlot)
|
|
8
14
|
return emptyStateSlot;
|
|
9
|
-
return React__default.createElement("
|
|
15
|
+
return (React__default.createElement(FlexCol, { flexGrow: "1", alignItems: "center", justifyContent: "center", gap: "sm" },
|
|
16
|
+
React__default.createElement(InboxIcon, null),
|
|
17
|
+
React__default.createElement(Text, null, "No items found")));
|
|
10
18
|
};
|
|
11
19
|
|
|
12
20
|
export { SelectDropdownState };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectDropdownState.js","sources":["../../../../src/components/SelectDropdown/components/SelectDropdownState.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"SelectDropdownState.js","sources":["../../../../src/components/SelectDropdown/components/SelectDropdownState.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { Skeleton } from '../../Skeleton';\nimport { Text } from '../../Text';\nimport { InboxIcon } from '../../../icons';\n\ntype SelectDropdownStateProps = {\n isLoading: boolean;\n emptyStateSlot?: ReactElement;\n};\n\nexport const SelectDropdownState = ({ isLoading, emptyStateSlot }: SelectDropdownStateProps) => {\n if (isLoading)\n return (\n <FlexCol flexGrow=\"1\">\n <Skeleton width=\"100%\" height=\"32px\" />\n <Skeleton width=\"100%\" height=\"32px\" />\n <Skeleton width=\"100%\" height=\"32px\" />\n </FlexCol>\n );\n if (emptyStateSlot) return emptyStateSlot;\n\n return (\n <FlexCol flexGrow=\"1\" alignItems=\"center\" justifyContent=\"center\" gap=\"sm\">\n <InboxIcon />\n <Text>No items found</Text>\n </FlexCol>\n );\n};\n"],"names":["React"],"mappings":";;;;;;AAWa,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,EAA4B,KAAI;AAC7F,IAAA,IAAI,SAAS;AACX,QAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EAAC,EAAA,QAAQ,EAAC,GAAG,EAAA;YACnBA,cAAC,CAAA,aAAA,CAAA,QAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAG,CAAA;YACvCA,cAAC,CAAA,aAAA,CAAA,QAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAG,CAAA;AACvC,YAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAA,CAAG,CAC/B;AAEd,IAAA,IAAI,cAAc;AAAE,QAAA,OAAO,cAAc;AAEzC,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,QAAQ,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAA;AACxE,QAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAG,IAAA,CAAA;AACb,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,IAAA,EAAA,gBAAA,CAAsB,CACnB;AAEd;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var itemStyles = {"item":"
|
|
5
|
+
___$insertStyle("._item_worob_1 {\n border-radius: var(--radius-base);\n cursor: pointer;\n background-color: #ffffff;\n text-decoration: none;\n}\n._item_worob_1._appearance-secondary_worob_7 {\n background-color: var(--colors-neutral-grey-lightest);\n}\n._item_worob_1[data-hovered] > div, ._item_worob_1[data-hovered] > div:first-of-type[role=gridcell] > :first-child {\n background-color: var(--colors-neutral-grey-light);\n}\n._item_worob_1[data-pressed] > div, ._item_worob_1[data-pressed] > div:first-of-type[role=gridcell] > :first-child {\n background-color: #e3f0fa;\n}\n._item_worob_1[data-focused] {\n outline: 0;\n}\n._item_worob_1[data-focus-visible] > div, ._item_worob_1[data-focus-visible] > div:first-of-type[role=gridcell] > :first-child {\n outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n z-index: 1;\n position: relative;\n}\n._item_worob_1[data-dragging] {\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--color-secondary-blue-base);\n}\n._item_worob_1[data-drop-target] {\n background-color: var(--colors-secondary-green-base);\n border-color: var(--colors-secondary-green-base);\n}\n._item_worob_1[data-disabled] {\n cursor: not-allowed;\n background-color: var(--colors-neutral-grey-light);\n opacity: 0.75;\n}\n._item_worob_1 > div,\n._item_worob_1 > div:first-of-type[role=gridcell] > :first-child {\n padding: var(--sizes-sm);\n border-radius: var(--radius-base);\n}");
|
|
6
|
+
var itemStyles = {"item":"_item_worob_1","appearance-secondary":"_appearance-secondary_worob_7"};
|
|
7
7
|
|
|
8
8
|
module.exports = itemStyles;
|
|
9
9
|
//# sourceMappingURL=item.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.module.scss.cjs","sources":["../../../../src/components/SelectDropdown/components/item.module.scss"],"sourcesContent":[".item {\n border-radius: var(--radius-base);\n cursor: pointer;\n background-color: #ffffff;\n text-decoration: none;\n\n &.appearance-secondary {\n background-color: var(--colors-neutral-grey-lightest);\n }\n\n &[data-hovered] > div,\n &[data-hovered] > div:first-of-type[role='gridcell'] > :first-child {\n background-color:
|
|
1
|
+
{"version":3,"file":"item.module.scss.cjs","sources":["../../../../src/components/SelectDropdown/components/item.module.scss"],"sourcesContent":[".item {\n border-radius: var(--radius-base);\n cursor: pointer;\n background-color: #ffffff;\n text-decoration: none;\n\n &.appearance-secondary {\n background-color: var(--colors-neutral-grey-lightest);\n }\n\n &[data-hovered] > div,\n &[data-hovered] > div:first-of-type[role='gridcell'] > :first-child {\n background-color: var(--colors-neutral-grey-light);\n }\n\n &[data-pressed] > div,\n &[data-pressed] > div:first-of-type[role='gridcell'] > :first-child {\n background-color: #e3f0fa;\n }\n\n &[data-focused] {\n outline: 0;\n }\n\n &[data-focus-visible] > div,\n &[data-focus-visible] > div:first-of-type[role='gridcell'] > :first-child {\n outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n z-index: 1;\n position: relative;\n }\n\n &[data-dragging] {\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--color-secondary-blue-base);\n }\n\n &[data-drop-target] {\n background-color: var(--colors-secondary-green-base);\n border-color: var(--colors-secondary-green-base);\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n background-color: var(--colors-neutral-grey-light);\n opacity: 0.75;\n }\n\n > div,\n > div:first-of-type[role='gridcell'] > :first-child {\n padding: var(--sizes-sm);\n border-radius: var(--radius-base);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,s6CAAA;AACA,iBAAA,CAAA,MAAA,CAAA,eAAA,CAAA,sBAAA,CAAA,+BAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var itemStyles = {"item":"
|
|
3
|
+
insertStyle("._item_worob_1 {\n border-radius: var(--radius-base);\n cursor: pointer;\n background-color: #ffffff;\n text-decoration: none;\n}\n._item_worob_1._appearance-secondary_worob_7 {\n background-color: var(--colors-neutral-grey-lightest);\n}\n._item_worob_1[data-hovered] > div, ._item_worob_1[data-hovered] > div:first-of-type[role=gridcell] > :first-child {\n background-color: var(--colors-neutral-grey-light);\n}\n._item_worob_1[data-pressed] > div, ._item_worob_1[data-pressed] > div:first-of-type[role=gridcell] > :first-child {\n background-color: #e3f0fa;\n}\n._item_worob_1[data-focused] {\n outline: 0;\n}\n._item_worob_1[data-focus-visible] > div, ._item_worob_1[data-focus-visible] > div:first-of-type[role=gridcell] > :first-child {\n outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n z-index: 1;\n position: relative;\n}\n._item_worob_1[data-dragging] {\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--color-secondary-blue-base);\n}\n._item_worob_1[data-drop-target] {\n background-color: var(--colors-secondary-green-base);\n border-color: var(--colors-secondary-green-base);\n}\n._item_worob_1[data-disabled] {\n cursor: not-allowed;\n background-color: var(--colors-neutral-grey-light);\n opacity: 0.75;\n}\n._item_worob_1 > div,\n._item_worob_1 > div:first-of-type[role=gridcell] > :first-child {\n padding: var(--sizes-sm);\n border-radius: var(--radius-base);\n}");
|
|
4
|
+
var itemStyles = {"item":"_item_worob_1","appearance-secondary":"_appearance-secondary_worob_7"};
|
|
5
5
|
|
|
6
6
|
export { itemStyles as default };
|
|
7
7
|
//# sourceMappingURL=item.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.module.scss.js","sources":["../../../../src/components/SelectDropdown/components/item.module.scss"],"sourcesContent":[".item {\n border-radius: var(--radius-base);\n cursor: pointer;\n background-color: #ffffff;\n text-decoration: none;\n\n &.appearance-secondary {\n background-color: var(--colors-neutral-grey-lightest);\n }\n\n &[data-hovered] > div,\n &[data-hovered] > div:first-of-type[role='gridcell'] > :first-child {\n background-color:
|
|
1
|
+
{"version":3,"file":"item.module.scss.js","sources":["../../../../src/components/SelectDropdown/components/item.module.scss"],"sourcesContent":[".item {\n border-radius: var(--radius-base);\n cursor: pointer;\n background-color: #ffffff;\n text-decoration: none;\n\n &.appearance-secondary {\n background-color: var(--colors-neutral-grey-lightest);\n }\n\n &[data-hovered] > div,\n &[data-hovered] > div:first-of-type[role='gridcell'] > :first-child {\n background-color: var(--colors-neutral-grey-light);\n }\n\n &[data-pressed] > div,\n &[data-pressed] > div:first-of-type[role='gridcell'] > :first-child {\n background-color: #e3f0fa;\n }\n\n &[data-focused] {\n outline: 0;\n }\n\n &[data-focus-visible] > div,\n &[data-focus-visible] > div:first-of-type[role='gridcell'] > :first-child {\n outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n z-index: 1;\n position: relative;\n }\n\n &[data-dragging] {\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--color-secondary-blue-base);\n }\n\n &[data-drop-target] {\n background-color: var(--colors-secondary-green-base);\n border-color: var(--colors-secondary-green-base);\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n background-color: var(--colors-neutral-grey-light);\n opacity: 0.75;\n }\n\n > div,\n > div:first-of-type[role='gridcell'] > :first-child {\n padding: var(--sizes-sm);\n border-radius: var(--radius-base);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,s6CAAA;AACA,iBAAA,CAAA,MAAA,CAAA,eAAA,CAAA,sBAAA,CAAA,+BAAA;;;;"}
|