@veeqo/ui 13.4.4 → 13.4.5
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 -1
- package/dist/components/SelectDropdown/SelectDropdown.cjs.map +1 -1
- package/dist/components/SelectDropdown/SelectDropdown.d.ts +1 -1
- package/dist/components/SelectDropdown/SelectDropdown.js +2 -1
- 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/types.d.ts +1 -0
- package/package.json +1 -1
|
@@ -17,7 +17,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
17
17
|
|
|
18
18
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
19
19
|
|
|
20
|
-
const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, disabled, options, value, actions, isLoading = false, searchValue, emptyStateSlot, selectedSlot, onSearchChange, onSelectionChange, topAction, isSelectOpen, setIsSelectOpen, hasSection, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
|
|
20
|
+
const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, disabled, options, value, actions, isLoading = false, searchValue, headerSlot, emptyStateSlot, selectedSlot, onSearchChange, onSelectionChange, topAction, isSelectOpen, setIsSelectOpen, hasSection, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
|
|
21
21
|
const classNames = utils.generateClassNames(className);
|
|
22
22
|
const selectedValues = utils.getSelectedValues(options, hasSection, value);
|
|
23
23
|
const selectionMode = multiple ? 'multiple' : 'single';
|
|
@@ -32,6 +32,7 @@ const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple =
|
|
|
32
32
|
compact && form_module.compact,
|
|
33
33
|
]) }, selectedSlot || (React__default.default.createElement(SelectedOption.SelectedOption, { placeholder: placeholder, options: selectedValues, selectionMode: selectionMode }))));
|
|
34
34
|
} },
|
|
35
|
+
headerSlot && React__default.default.createElement("div", { className: SelectDropdown_module.headerContainer }, headerSlot),
|
|
35
36
|
onSearchChange && (React__default.default.createElement(React__default.default.Fragment, null,
|
|
36
37
|
React__default.default.createElement(Search.Search, { className: SelectDropdown_module.search, value: searchValue, onChange: onSearchChange }),
|
|
37
38
|
React__default.default.createElement("hr", { className: SelectDropdown_module.separator }))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectDropdown.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { Fragment } from 'react';\nimport { Selection } from 'react-aria-components';\nimport { Search } from '../Search';\nimport { Button } from '../Button';\n\nimport { GridList } from './components/OptionsContainers/GridList';\nimport { GridItemProps } from './components/GridItem/types';\nimport { SelectDropdownProps } from './types';\nimport { ListBox } from './components/OptionsContainers/ListBox';\nimport { Dropdown } from '../Dropdown';\nimport { buildClassnames } from '../../utils';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport { SelectedOption } from './components/SelectedOption';\n\nimport styles from './SelectDropdown.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\ntype SelectDropdownElementProps = Omit<SelectDropdownProps, 'onChange'> & {\n isSelectOpen: boolean;\n setIsSelectOpen: (isOpen: boolean) => void;\n onSelectionChange: (keys: Selection) => void;\n hasSection: boolean;\n};\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 selectedSlot,\n onSearchChange,\n onSelectionChange,\n topAction,\n isSelectOpen,\n setIsSelectOpen,\n hasSection,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n ...otherProps\n}: SelectDropdownElementProps) => {\n const classNames = generateClassNames(className);\n\n const selectedValues = getSelectedValues(options, hasSection, value);\n const selectionMode = multiple ? 'multiple' : 'single';\n\n const hasRowAction = options.some(\n (option) => 'onClickRowAction' in option && option.onClickRowAction,\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 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 {selectedSlot || (\n <SelectedOption\n placeholder={placeholder}\n options={selectedValues}\n selectionMode={selectionMode}\n />\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","getSelectedValues","React","Dropdown","buildClassnames","styles","formStyles","SelectedOption","Search","Fragment","Button","GridList","ListBox"],"mappings":";;;;;;;;;;;;;;;;;;;AAwBO,MAAM,cAAc,GAAG,CAAC,EAC7B,EAAE,EACF,SAAS,EACT,WAAW,GAAG,aAAa,EAC3B,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,OAAO,EACP,KAAK,EACL,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,cAAc,EACd,YAAY,EACZ,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,YAAY,EACZ,eAAe,EACf,UAAU,EACV,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,GAAG,UAAU,EACc,KAAI;AAC/B,IAAA,MAAM,UAAU,GAAGA,wBAAkB,CAAC,SAAS,CAAC;IAEhD,MAAM,cAAc,GAAGC,uBAAiB,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,CAAC;IACpE,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ;AAEtD,IAAA,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAC/B,CAAC,MAAM,KAAK,kBAAkB,IAAI,MAAM,IAAI,MAAM,CAAC,gBAAgB,CACpE;IAED,QACEC,sBAAC,CAAA,aAAA,CAAAC,iBAAQ,EACP,EAAA,EAAE,EAAE,CAAmB,gBAAA,EAAA,EAAE,CAAE,CAAA,EAC3B,SAAS,EAAEC,+BAAe,CAAC,CAAC,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,SAAA,GAAA,SAAA,GAAV,UAAU,CAAE,OAAO,EAAEC,qBAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,EAC7E,UAAU,EAAE,YAAY,EACxB,aAAa,EAAE,eAAe,EAC9B,cAAc,QACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,CAAC,WAAW,EAAE,SAAS,KAAI;AACpC,YAAA,QACEH,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,WAAW,EACf,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,SAAS,EACd,SAAS,EAAEE,+BAAe,CAAC;oBACzB,SAAS;AACT,oBAAAC,qBAAM,CAAC,eAAe;AACtB,oBAAAC,WAAU,CAAC,UAAU;AACrB,oBAAAA,WAAU,CAAC,IAAI;oBACf,QAAQ,IAAIA,WAAU,CAAC,KAAK;oBAC5B,OAAO,IAAIA,WAAU,CAAC,OAAO;iBAC9B,CAAC,EAAA,EAED,YAAY,KACXJ,qCAACK,6BAAc,EAAA,EACb,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,cAAc,EACvB,aAAa,EAAE,aAAa,EAC5B,CAAA,CACH,CACM;SAEZ,EAAA;
|
|
1
|
+
{"version":3,"file":"SelectDropdown.cjs","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { Fragment } from 'react';\nimport { Selection } from 'react-aria-components';\nimport { Search } from '../Search';\nimport { Button } from '../Button';\n\nimport { GridList } from './components/OptionsContainers/GridList';\nimport { GridItemProps } from './components/GridItem/types';\nimport { SelectDropdownProps } from './types';\nimport { ListBox } from './components/OptionsContainers/ListBox';\nimport { Dropdown } from '../Dropdown';\nimport { buildClassnames } from '../../utils';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport { SelectedOption } from './components/SelectedOption';\n\nimport styles from './SelectDropdown.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\ntype SelectDropdownElementProps = Omit<SelectDropdownProps, 'onChange'> & {\n isSelectOpen: boolean;\n setIsSelectOpen: (isOpen: boolean) => void;\n onSelectionChange: (keys: Selection) => void;\n hasSection: boolean;\n};\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 headerSlot,\n emptyStateSlot,\n selectedSlot,\n onSearchChange,\n onSelectionChange,\n topAction,\n isSelectOpen,\n setIsSelectOpen,\n hasSection,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n ...otherProps\n}: SelectDropdownElementProps) => {\n const classNames = generateClassNames(className);\n\n const selectedValues = getSelectedValues(options, hasSection, value);\n const selectionMode = multiple ? 'multiple' : 'single';\n\n const hasRowAction = options.some(\n (option) => 'onClickRowAction' in option && option.onClickRowAction,\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 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 {selectedSlot || (\n <SelectedOption\n placeholder={placeholder}\n options={selectedValues}\n selectionMode={selectionMode}\n />\n )}\n </button>\n );\n }}\n >\n {headerSlot && <div className={styles.headerContainer}>{headerSlot}</div>}\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","getSelectedValues","React","Dropdown","buildClassnames","styles","formStyles","SelectedOption","Search","Fragment","Button","GridList","ListBox"],"mappings":"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"}
|
|
@@ -7,5 +7,5 @@ type SelectDropdownElementProps = Omit<SelectDropdownProps, 'onChange'> & {
|
|
|
7
7
|
onSelectionChange: (keys: Selection) => void;
|
|
8
8
|
hasSection: boolean;
|
|
9
9
|
};
|
|
10
|
-
export declare const SelectDropdown: ({ id, className, placeholder, multiple, compact, hasError, disabled, options, value, actions, isLoading, searchValue, emptyStateSlot, selectedSlot, onSearchChange, onSelectionChange, topAction, isSelectOpen, setIsSelectOpen, hasSection, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...otherProps }: SelectDropdownElementProps) => React.JSX.Element;
|
|
10
|
+
export declare const SelectDropdown: ({ id, className, placeholder, multiple, compact, hasError, disabled, options, value, actions, isLoading, searchValue, headerSlot, emptyStateSlot, selectedSlot, onSearchChange, onSelectionChange, topAction, isSelectOpen, setIsSelectOpen, hasSection, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...otherProps }: SelectDropdownElementProps) => React.JSX.Element;
|
|
11
11
|
export {};
|
|
@@ -11,7 +11,7 @@ import { SelectedOption } from './components/SelectedOption.js';
|
|
|
11
11
|
import styles from './SelectDropdown.module.scss.js';
|
|
12
12
|
import formStyles from '../../utils/forms/form.module.scss.js';
|
|
13
13
|
|
|
14
|
-
const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, disabled, options, value, actions, isLoading = false, searchValue, emptyStateSlot, selectedSlot, onSearchChange, onSelectionChange, topAction, isSelectOpen, setIsSelectOpen, hasSection, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
|
|
14
|
+
const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple = false, compact = false, hasError = false, disabled, options, value, actions, isLoading = false, searchValue, headerSlot, emptyStateSlot, selectedSlot, onSearchChange, onSelectionChange, topAction, isSelectOpen, setIsSelectOpen, hasSection, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...otherProps }) => {
|
|
15
15
|
const classNames = generateClassNames(className);
|
|
16
16
|
const selectedValues = getSelectedValues(options, hasSection, value);
|
|
17
17
|
const selectionMode = multiple ? 'multiple' : 'single';
|
|
@@ -26,6 +26,7 @@ const SelectDropdown = ({ id, className, placeholder = 'Select item', multiple =
|
|
|
26
26
|
compact && formStyles.compact,
|
|
27
27
|
]) }, selectedSlot || (React__default.createElement(SelectedOption, { placeholder: placeholder, options: selectedValues, selectionMode: selectionMode }))));
|
|
28
28
|
} },
|
|
29
|
+
headerSlot && React__default.createElement("div", { className: styles.headerContainer }, headerSlot),
|
|
29
30
|
onSearchChange && (React__default.createElement(React__default.Fragment, null,
|
|
30
31
|
React__default.createElement(Search, { className: styles.search, value: searchValue, onChange: onSearchChange }),
|
|
31
32
|
React__default.createElement("hr", { className: styles.separator }))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectDropdown.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { Fragment } from 'react';\nimport { Selection } from 'react-aria-components';\nimport { Search } from '../Search';\nimport { Button } from '../Button';\n\nimport { GridList } from './components/OptionsContainers/GridList';\nimport { GridItemProps } from './components/GridItem/types';\nimport { SelectDropdownProps } from './types';\nimport { ListBox } from './components/OptionsContainers/ListBox';\nimport { Dropdown } from '../Dropdown';\nimport { buildClassnames } from '../../utils';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport { SelectedOption } from './components/SelectedOption';\n\nimport styles from './SelectDropdown.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\ntype SelectDropdownElementProps = Omit<SelectDropdownProps, 'onChange'> & {\n isSelectOpen: boolean;\n setIsSelectOpen: (isOpen: boolean) => void;\n onSelectionChange: (keys: Selection) => void;\n hasSection: boolean;\n};\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 selectedSlot,\n onSearchChange,\n onSelectionChange,\n topAction,\n isSelectOpen,\n setIsSelectOpen,\n hasSection,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n ...otherProps\n}: SelectDropdownElementProps) => {\n const classNames = generateClassNames(className);\n\n const selectedValues = getSelectedValues(options, hasSection, value);\n const selectionMode = multiple ? 'multiple' : 'single';\n\n const hasRowAction = options.some(\n (option) => 'onClickRowAction' in option && option.onClickRowAction,\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 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 {selectedSlot || (\n <SelectedOption\n placeholder={placeholder}\n options={selectedValues}\n selectionMode={selectionMode}\n />\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":";;;;;;;;;;;;;AAwBO,MAAM,cAAc,GAAG,CAAC,EAC7B,EAAE,EACF,SAAS,EACT,WAAW,GAAG,aAAa,EAC3B,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,OAAO,EACP,KAAK,EACL,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,cAAc,EACd,YAAY,EACZ,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,YAAY,EACZ,eAAe,EACf,UAAU,EACV,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,GAAG,UAAU,EACc,KAAI;AAC/B,IAAA,MAAM,UAAU,GAAG,kBAAkB,CAAC,SAAS,CAAC;IAEhD,MAAM,cAAc,GAAG,iBAAiB,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,CAAC;IACpE,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ;AAEtD,IAAA,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAC/B,CAAC,MAAM,KAAK,kBAAkB,IAAI,MAAM,IAAI,MAAM,CAAC,gBAAgB,CACpE;IAED,QACEA,cAAC,CAAA,aAAA,CAAA,QAAQ,EACP,EAAA,EAAE,EAAE,CAAmB,gBAAA,EAAA,EAAE,CAAE,CAAA,EAC3B,SAAS,EAAE,eAAe,CAAC,CAAC,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,SAAA,GAAA,SAAA,GAAV,UAAU,CAAE,OAAO,EAAE,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,EAC7E,UAAU,EAAE,YAAY,EACxB,aAAa,EAAE,eAAe,EAC9B,cAAc,QACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,CAAC,WAAW,EAAE,SAAS,KAAI;AACpC,YAAA,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,WAAW,EACf,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,eAAe,CAAC;oBACzB,SAAS;AACT,oBAAA,MAAM,CAAC,eAAe;AACtB,oBAAA,UAAU,CAAC,UAAU;AACrB,oBAAA,UAAU,CAAC,IAAI;oBACf,QAAQ,IAAI,UAAU,CAAC,KAAK;oBAC5B,OAAO,IAAI,UAAU,CAAC,OAAO;iBAC9B,CAAC,EAAA,EAED,YAAY,KACXA,6BAAC,cAAc,EAAA,EACb,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,cAAc,EACvB,aAAa,EAAE,aAAa,EAC5B,CAAA,CACH,CACM;SAEZ,EAAA;
|
|
1
|
+
{"version":3,"file":"SelectDropdown.js","sources":["../../../src/components/SelectDropdown/SelectDropdown.tsx"],"sourcesContent":["import React, { Fragment } from 'react';\nimport { Selection } from 'react-aria-components';\nimport { Search } from '../Search';\nimport { Button } from '../Button';\n\nimport { GridList } from './components/OptionsContainers/GridList';\nimport { GridItemProps } from './components/GridItem/types';\nimport { SelectDropdownProps } from './types';\nimport { ListBox } from './components/OptionsContainers/ListBox';\nimport { Dropdown } from '../Dropdown';\nimport { buildClassnames } from '../../utils';\nimport { generateClassNames, getSelectedValues } from './utils';\nimport { SelectedOption } from './components/SelectedOption';\n\nimport styles from './SelectDropdown.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\ntype SelectDropdownElementProps = Omit<SelectDropdownProps, 'onChange'> & {\n isSelectOpen: boolean;\n setIsSelectOpen: (isOpen: boolean) => void;\n onSelectionChange: (keys: Selection) => void;\n hasSection: boolean;\n};\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 headerSlot,\n emptyStateSlot,\n selectedSlot,\n onSearchChange,\n onSelectionChange,\n topAction,\n isSelectOpen,\n setIsSelectOpen,\n hasSection,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n ...otherProps\n}: SelectDropdownElementProps) => {\n const classNames = generateClassNames(className);\n\n const selectedValues = getSelectedValues(options, hasSection, value);\n const selectionMode = multiple ? 'multiple' : 'single';\n\n const hasRowAction = options.some(\n (option) => 'onClickRowAction' in option && option.onClickRowAction,\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 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 {selectedSlot || (\n <SelectedOption\n placeholder={placeholder}\n options={selectedValues}\n selectionMode={selectionMode}\n />\n )}\n </button>\n );\n }}\n >\n {headerSlot && <div className={styles.headerContainer}>{headerSlot}</div>}\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_1rgmd_1 {\n overflow-y: scroll;\n max-height: 300px;\n padding: var(--sizes-sm);\n scroll-padding: var(--sizes-xs) 0;\n}\n._listBox_1rgmd_1[data-empty] {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n._dropdown_1rgmd_13 {\n padding: var(--sizes-none) !important;\n}\n\n._dropdownTrigger_1rgmd_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_1rgmd_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_1rgmd_33 {\n margin: var(--sizes-sm) !important;\n}\n\n._ctaButton_1rgmd_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_1rgmd_37 svg {\n width: var(--sizes-md) !important;\n height: var(--sizes-md) !important;\n}\n._ctaButton_1rgmd_37 > span {\n gap: var(--sizes-base);\n padding: 0 var(--sizes-xs);\n}\n._ctaButton_1rgmd_37:hover {\n background-color: var(--colors-neutral-grey-lightest) !important;\n font-weight: var(--text-body-bold-font-weight) !important;\n}\n\n._headerContainer_1rgmd_57 {\n padding: var(--sizes-sm) var(--sizes-base);\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n}");
|
|
6
|
+
var styles = {"listBox":"_listBox_1rgmd_1","dropdown":"_dropdown_1rgmd_13","dropdownTrigger":"_dropdownTrigger_1rgmd_17","separator":"_separator_1rgmd_25","search":"_search_1rgmd_33","ctaButton":"_ctaButton_1rgmd_37","headerContainer":"_headerContainer_1rgmd_57"};
|
|
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 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,
|
|
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: 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\n.headerContainer {\n padding: var(--sizes-sm) var(--sizes-base);\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,osDAAA;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,CAAA,iBAAA,CAAA,2BAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"listBox":"
|
|
3
|
+
insertStyle("._listBox_1rgmd_1 {\n overflow-y: scroll;\n max-height: 300px;\n padding: var(--sizes-sm);\n scroll-padding: var(--sizes-xs) 0;\n}\n._listBox_1rgmd_1[data-empty] {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n._dropdown_1rgmd_13 {\n padding: var(--sizes-none) !important;\n}\n\n._dropdownTrigger_1rgmd_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_1rgmd_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_1rgmd_33 {\n margin: var(--sizes-sm) !important;\n}\n\n._ctaButton_1rgmd_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_1rgmd_37 svg {\n width: var(--sizes-md) !important;\n height: var(--sizes-md) !important;\n}\n._ctaButton_1rgmd_37 > span {\n gap: var(--sizes-base);\n padding: 0 var(--sizes-xs);\n}\n._ctaButton_1rgmd_37:hover {\n background-color: var(--colors-neutral-grey-lightest) !important;\n font-weight: var(--text-body-bold-font-weight) !important;\n}\n\n._headerContainer_1rgmd_57 {\n padding: var(--sizes-sm) var(--sizes-base);\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n}");
|
|
4
|
+
var styles = {"listBox":"_listBox_1rgmd_1","dropdown":"_dropdown_1rgmd_13","dropdownTrigger":"_dropdownTrigger_1rgmd_17","separator":"_separator_1rgmd_25","search":"_search_1rgmd_33","ctaButton":"_ctaButton_1rgmd_37","headerContainer":"_headerContainer_1rgmd_57"};
|
|
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 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,
|
|
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: 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\n.headerContainer {\n padding: var(--sizes-sm) var(--sizes-base);\n border-bottom: 1px solid var(--colors-neutral-grey-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,osDAAA;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,CAAA,iBAAA,CAAA,2BAAA;;;;"}
|
|
@@ -26,6 +26,7 @@ export type SelectDropdownControlledProps = (SelectDropdownSingleProps | SelectD
|
|
|
26
26
|
hasError?: boolean;
|
|
27
27
|
disabled?: boolean;
|
|
28
28
|
options: SelectDropdownItem[];
|
|
29
|
+
headerSlot?: ReactNode;
|
|
29
30
|
emptyStateSlot?: ReactElement;
|
|
30
31
|
isLoading?: boolean;
|
|
31
32
|
placeholder?: string;
|