@flipdish/ui-library 0.10.0 → 0.11.0
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/atoms/Button/index.cjs +4 -1
- package/dist/components/atoms/Button/index.cjs.map +1 -1
- package/dist/components/atoms/Button/index.d.ts +2 -0
- package/dist/components/atoms/Button/index.d.ts.map +1 -1
- package/dist/components/atoms/Button/index.js +4 -1
- package/dist/components/atoms/Button/index.js.map +1 -1
- package/dist/components/atoms/Checkbox/index.cjs +4 -2
- package/dist/components/atoms/Checkbox/index.cjs.map +1 -1
- package/dist/components/atoms/Checkbox/index.d.ts +3 -1
- package/dist/components/atoms/Checkbox/index.d.ts.map +1 -1
- package/dist/components/atoms/Checkbox/index.js +4 -2
- package/dist/components/atoms/Checkbox/index.js.map +1 -1
- package/dist/components/atoms/Input/index.cjs +7 -4
- package/dist/components/atoms/Input/index.cjs.map +1 -1
- package/dist/components/atoms/Input/index.d.ts +6 -2
- package/dist/components/atoms/Input/index.d.ts.map +1 -1
- package/dist/components/atoms/Input/index.js +7 -4
- package/dist/components/atoms/Input/index.js.map +1 -1
- package/dist/components/atoms/RadioButton/index.cjs +8 -4
- package/dist/components/atoms/RadioButton/index.cjs.map +1 -1
- package/dist/components/atoms/RadioButton/index.d.ts +8 -3
- package/dist/components/atoms/RadioButton/index.d.ts.map +1 -1
- package/dist/components/atoms/RadioButton/index.js +8 -4
- package/dist/components/atoms/RadioButton/index.js.map +1 -1
- package/dist/components/atoms/Toggle/index.cjs +4 -2
- package/dist/components/atoms/Toggle/index.cjs.map +1 -1
- package/dist/components/atoms/Toggle/index.d.ts +3 -1
- package/dist/components/atoms/Toggle/index.d.ts.map +1 -1
- package/dist/components/atoms/Toggle/index.js +4 -2
- package/dist/components/atoms/Toggle/index.js.map +1 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-account-item.cjs +3 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-account-item.cjs.map +1 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-account-item.d.ts.map +1 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-account-item.js +3 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-account-item.js.map +1 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.cjs +9 -5
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.cjs.map +1 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.d.ts +5 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.d.ts.map +1 -1
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.js +9 -5
- package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.js.map +1 -1
- package/dist/components/molecules/Breadcrumbs/index.cjs +4 -2
- package/dist/components/molecules/Breadcrumbs/index.cjs.map +1 -1
- package/dist/components/molecules/Breadcrumbs/index.d.ts +8 -2
- package/dist/components/molecules/Breadcrumbs/index.d.ts.map +1 -1
- package/dist/components/molecules/Breadcrumbs/index.js +4 -2
- package/dist/components/molecules/Breadcrumbs/index.js.map +1 -1
- package/dist/components/molecules/Pagination/components/pagination-base.cjs +11 -4
- package/dist/components/molecules/Pagination/components/pagination-base.cjs.map +1 -1
- package/dist/components/molecules/Pagination/components/pagination-base.d.ts +8 -1
- package/dist/components/molecules/Pagination/components/pagination-base.d.ts.map +1 -1
- package/dist/components/molecules/Pagination/components/pagination-base.js +11 -4
- package/dist/components/molecules/Pagination/components/pagination-base.js.map +1 -1
- package/dist/components/molecules/ProgressSteps/components/progress-step-base.cjs +16 -16
- package/dist/components/molecules/ProgressSteps/components/progress-step-base.cjs.map +1 -1
- package/dist/components/molecules/ProgressSteps/components/progress-step-base.d.ts +8 -8
- package/dist/components/molecules/ProgressSteps/components/progress-step-base.d.ts.map +1 -1
- package/dist/components/molecules/ProgressSteps/components/progress-step-base.js +16 -16
- package/dist/components/molecules/ProgressSteps/components/progress-step-base.js.map +1 -1
- package/dist/components/molecules/ProgressSteps/index.cjs +19 -12
- package/dist/components/molecules/ProgressSteps/index.cjs.map +1 -1
- package/dist/components/molecules/ProgressSteps/index.d.ts +3 -3
- package/dist/components/molecules/ProgressSteps/index.d.ts.map +1 -1
- package/dist/components/molecules/ProgressSteps/index.js +19 -12
- package/dist/components/molecules/ProgressSteps/index.js.map +1 -1
- package/dist/components/molecules/ProgressSteps/progressSteps.types.d.ts +10 -0
- package/dist/components/molecules/ProgressSteps/progressSteps.types.d.ts.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-avatar.cjs +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-avatar.cjs.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-avatar.d.ts +3 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-avatar.d.ts.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-avatar.js +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-avatar.js.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-checkbox.cjs +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-checkbox.cjs.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-checkbox.d.ts +3 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-checkbox.d.ts.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-checkbox.js +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-checkbox.js.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-card.cjs +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-card.cjs.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-card.d.ts +3 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-card.d.ts.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-card.js +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-card.js.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-simple.cjs +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-simple.cjs.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-simple.d.ts +3 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-simple.d.ts.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-simple.js +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-icon-simple.js.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-payment-icon.cjs +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-payment-icon.cjs.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-payment-icon.d.ts +3 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-payment-icon.d.ts.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-payment-icon.js +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-payment-icon.js.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-radio-button.cjs +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-radio-button.cjs.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-radio-button.d.ts +3 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-radio-button.d.ts.map +1 -1
- package/dist/components/molecules/RadioGroup/components/radio-group-radio-button.js +4 -2
- package/dist/components/molecules/RadioGroup/components/radio-group-radio-button.js.map +1 -1
- package/dist/components/molecules/Select/components/multi-select.cjs +4 -2
- package/dist/components/molecules/Select/components/multi-select.cjs.map +1 -1
- package/dist/components/molecules/Select/components/multi-select.d.ts +1 -1
- package/dist/components/molecules/Select/components/multi-select.d.ts.map +1 -1
- package/dist/components/molecules/Select/components/multi-select.js +4 -2
- package/dist/components/molecules/Select/components/multi-select.js.map +1 -1
- package/dist/components/molecules/Select/components/select-item.cjs +6 -3
- package/dist/components/molecules/Select/components/select-item.cjs.map +1 -1
- package/dist/components/molecules/Select/components/select-item.d.ts +3 -1
- package/dist/components/molecules/Select/components/select-item.d.ts.map +1 -1
- package/dist/components/molecules/Select/components/select-item.js +6 -3
- package/dist/components/molecules/Select/components/select-item.js.map +1 -1
- package/dist/components/molecules/Select/components/select-shared.cjs.map +1 -1
- package/dist/components/molecules/Select/components/select-shared.d.ts +6 -0
- package/dist/components/molecules/Select/components/select-shared.d.ts.map +1 -1
- package/dist/components/molecules/Select/components/select-shared.js.map +1 -1
- package/dist/components/molecules/Select/index.cjs +6 -4
- package/dist/components/molecules/Select/index.cjs.map +1 -1
- package/dist/components/molecules/Select/index.d.ts +1 -1
- package/dist/components/molecules/Select/index.d.ts.map +1 -1
- package/dist/components/molecules/Select/index.js +6 -4
- package/dist/components/molecules/Select/index.js.map +1 -1
- package/dist/components/molecules/Tabs/index.cjs +24 -8
- package/dist/components/molecules/Tabs/index.cjs.map +1 -1
- package/dist/components/molecules/Tabs/index.d.ts +17 -7
- package/dist/components/molecules/Tabs/index.d.ts.map +1 -1
- package/dist/components/molecules/Tabs/index.js +24 -8
- package/dist/components/molecules/Tabs/index.js.map +1 -1
- package/dist/components/organisms/ActivityFeed/index.cjs +8 -2
- package/dist/components/organisms/ActivityFeed/index.cjs.map +1 -1
- package/dist/components/organisms/ActivityFeed/index.d.ts +3 -1
- package/dist/components/organisms/ActivityFeed/index.d.ts.map +1 -1
- package/dist/components/organisms/ActivityFeed/index.js +8 -2
- package/dist/components/organisms/ActivityFeed/index.js.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-menu-item.cjs +5 -1
- package/dist/components/organisms/CommandMenu/components/command-menu-item.cjs.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-menu-item.d.ts +2 -0
- package/dist/components/organisms/CommandMenu/components/command-menu-item.d.ts.map +1 -1
- package/dist/components/organisms/CommandMenu/components/command-menu-item.js +5 -1
- package/dist/components/organisms/CommandMenu/components/command-menu-item.js.map +1 -1
- package/dist/components/organisms/CommandMenu/index.cjs +6 -4
- package/dist/components/organisms/CommandMenu/index.cjs.map +1 -1
- package/dist/components/organisms/CommandMenu/index.d.ts +8 -2
- package/dist/components/organisms/CommandMenu/index.d.ts.map +1 -1
- package/dist/components/organisms/CommandMenu/index.js +6 -4
- package/dist/components/organisms/CommandMenu/index.js.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/mobile-header.cjs +3 -2
- package/dist/components/organisms/HeaderNavigation/components/mobile-header.cjs.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/mobile-header.d.ts +6 -1
- package/dist/components/organisms/HeaderNavigation/components/mobile-header.d.ts.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/mobile-header.js +3 -2
- package/dist/components/organisms/HeaderNavigation/components/mobile-header.js.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.cjs +9 -6
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.cjs.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.d.ts +10 -2
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.d.ts.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.js +9 -6
- package/dist/components/organisms/HeaderNavigation/components/nav-account-card.js.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-button.cjs +2 -2
- package/dist/components/organisms/HeaderNavigation/components/nav-button.cjs.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-button.d.ts +3 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-button.d.ts.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-button.js +2 -2
- package/dist/components/organisms/HeaderNavigation/components/nav-button.js.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-item.cjs +4 -4
- package/dist/components/organisms/HeaderNavigation/components/nav-item.cjs.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-item.d.ts +3 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-item.d.ts.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-item.js +4 -4
- package/dist/components/organisms/HeaderNavigation/components/nav-item.js.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-list.cjs +9 -3
- package/dist/components/organisms/HeaderNavigation/components/nav-list.cjs.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-list.d.ts +3 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-list.d.ts.map +1 -1
- package/dist/components/organisms/HeaderNavigation/components/nav-list.js +9 -3
- package/dist/components/organisms/HeaderNavigation/components/nav-list.js.map +1 -1
- package/dist/components/organisms/HeaderNavigation/headerNavigation.types.d.ts +17 -8
- package/dist/components/organisms/HeaderNavigation/headerNavigation.types.d.ts.map +1 -1
- package/dist/components/organisms/HeaderNavigation/index.cjs +9 -2
- package/dist/components/organisms/HeaderNavigation/index.cjs.map +1 -1
- package/dist/components/organisms/HeaderNavigation/index.d.ts +10 -1
- package/dist/components/organisms/HeaderNavigation/index.d.ts.map +1 -1
- package/dist/components/organisms/HeaderNavigation/index.js +10 -3
- package/dist/components/organisms/HeaderNavigation/index.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/mobile-header.cjs +2 -2
- package/dist/components/organisms/SidebarNavigation/components/mobile-header.cjs.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/mobile-header.d.ts +8 -2
- package/dist/components/organisms/SidebarNavigation/components/mobile-header.d.ts.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/mobile-header.js +2 -2
- package/dist/components/organisms/SidebarNavigation/components/mobile-header.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.cjs +15 -5
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.cjs.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.d.ts +12 -2
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.d.ts.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.js +15 -5
- package/dist/components/organisms/SidebarNavigation/components/nav-account-card.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-button.cjs +2 -2
- package/dist/components/organisms/SidebarNavigation/components/nav-button.cjs.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-button.d.ts +3 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-button.d.ts.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-button.js +2 -2
- package/dist/components/organisms/SidebarNavigation/components/nav-button.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-item.cjs +4 -4
- package/dist/components/organisms/SidebarNavigation/components/nav-item.cjs.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-item.d.ts +3 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-item.d.ts.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-item.js +4 -4
- package/dist/components/organisms/SidebarNavigation/components/nav-item.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-list.cjs +9 -3
- package/dist/components/organisms/SidebarNavigation/components/nav-list.cjs.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-list.d.ts +3 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-list.d.ts.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/nav-list.js +9 -3
- package/dist/components/organisms/SidebarNavigation/components/nav-list.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/sidebar-menu-button.cjs +1 -1
- package/dist/components/organisms/SidebarNavigation/components/sidebar-menu-button.cjs.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/sidebar-menu-button.d.ts +3 -1
- package/dist/components/organisms/SidebarNavigation/components/sidebar-menu-button.d.ts.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/sidebar-menu-button.js +1 -1
- package/dist/components/organisms/SidebarNavigation/components/sidebar-menu-button.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/index.cjs +10 -6
- package/dist/components/organisms/SidebarNavigation/index.cjs.map +1 -1
- package/dist/components/organisms/SidebarNavigation/index.d.ts +7 -1
- package/dist/components/organisms/SidebarNavigation/index.d.ts.map +1 -1
- package/dist/components/organisms/SidebarNavigation/index.js +11 -7
- package/dist/components/organisms/SidebarNavigation/index.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/sidebarNavigation.types.d.ts +21 -8
- package/dist/components/organisms/SidebarNavigation/sidebarNavigation.types.d.ts.map +1 -1
- package/dist/components/organisms/Table/index.cjs +13 -8
- package/dist/components/organisms/Table/index.cjs.map +1 -1
- package/dist/components/organisms/Table/index.d.ts +17 -3
- package/dist/components/organisms/Table/index.d.ts.map +1 -1
- package/dist/components/organisms/Table/index.js +13 -8
- package/dist/components/organisms/Table/index.js.map +1 -1
- package/dist/utilities/testIdUtils/index.cjs +70 -0
- package/dist/utilities/testIdUtils/index.cjs.map +1 -0
- package/dist/utilities/testIdUtils/index.d.ts +57 -0
- package/dist/utilities/testIdUtils/index.d.ts.map +1 -0
- package/dist/utilities/testIdUtils/index.js +58 -0
- package/dist/utilities/testIdUtils/index.js.map +1 -0
- package/package.json +1 -1
|
@@ -3,10 +3,12 @@ import { BadgeWithDot } from '@flipdish/ui-library/components/atoms/Badge';
|
|
|
3
3
|
import { CheckboxBase } from '@flipdish/ui-library/components/atoms/Checkbox';
|
|
4
4
|
import { FeaturedIcon } from '@flipdish/ui-library/components/atoms/FeaturedIcon';
|
|
5
5
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
6
|
+
import { useResolvedTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
6
7
|
import { RadioGroup, Radio } from 'react-aria-components';
|
|
7
8
|
|
|
8
|
-
const RadioGroupIconCard = ({ items, size = 'sm', className, ...props }) => {
|
|
9
|
-
|
|
9
|
+
const RadioGroupIconCard = ({ items, size = 'sm', className, 'data-testid': dataTestId, ...props }) => {
|
|
10
|
+
const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'radio-group', rootName: 'radio-group' });
|
|
11
|
+
return (jsx(RadioGroup, { ...props, "data-testid": rootTestId, className: (state) => cx('flex flex-col gap-3', typeof className === 'function' ? className(state) : className), children: items.map((plan) => (jsx(Radio, { isDisabled: plan.disabled, value: plan.value, "data-testid": joinTestId(rootTestId, `option-${plan.value}`), className: ({ isDisabled, isSelected, isFocusVisible }) => cx('relative block cursor-pointer rounded-xl bg-primary outline-focus-ring ring-inset', isSelected ? 'ring-2 ring-brand' : 'ring-1 ring-secondary', isDisabled && 'cursor-not-allowed bg-disabled_subtle ring-disabled', isSelected && isDisabled && 'ring-disabled_subtle', isFocusVisible && 'outline-2 outline-offset-2'), children: ({ isDisabled, isSelected, isFocusVisible }) => (jsxs(Fragment, { children: [jsxs("div", { className: cx('flex items-center gap-3 rounded-t-xl p-3 pr-5 ring-inset', isSelected ? 'ring-2 ring-brand' : 'ring-1 ring-secondary', isDisabled && 'ring-disabled', isSelected && isDisabled && 'ring-disabled_subtle', isFocusVisible && 'outline-hidden'), children: [jsx(FeaturedIcon, { size: size === 'md' ? 'md' : 'sm', icon: plan.icon, color: "gray", theme: "modern", className: cx(isDisabled && 'bg-disabled text-fg-disabled') }), jsx("span", { className: cx('mr-1 text-secondary', size === 'md' ? 'text-lg font-semibold' : 'text-md font-semibold'), children: plan.title }), jsx(CheckboxBase, { size: size === 'md' ? 'md' : 'sm', className: "ml-auto", isDisabled: isDisabled, isSelected: isSelected, isFocusVisible: isFocusVisible })] }), jsxs("div", { className: "flex flex-col-reverse items-start justify-between gap-4 rounded-b-lg p-4 sm:flex-row sm:gap-1", children: [jsxs("div", { className: cx('flex flex-col', size === 'md' ? 'gap-2' : 'gap-1'), children: [jsxs("p", { className: "flex items-baseline gap-1", children: [jsx("span", { className: cx('text-secondary', size === 'md' ? 'text-display-md font-semibold' : 'text-display-sm font-semibold'), children: plan.price }), jsx("span", { className: cx('text-tertiary', size === 'md' ? 'text-md' : 'text-sm'), children: plan.secondaryTitle })] }), jsx("p", { className: cx('text-tertiary', size === 'md' ? 'text-md' : 'text-sm'), children: plan.description })] }), plan.badge && (jsx(BadgeWithDot, { size: "sm", type: "modern", color: "success", children: plan.badge }))] })] })) }, plan.value))) }));
|
|
10
12
|
};
|
|
11
13
|
|
|
12
14
|
export { RadioGroupIconCard };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group-icon-card.js","sources":["../../../../../src/components/molecules/RadioGroup/components/radio-group-icon-card.tsx"],"sourcesContent":[null],"names":["_jsx","AriaRadioGroup","AriaRadio","_jsxs","_Fragment"],"mappings":"
|
|
1
|
+
{"version":3,"file":"radio-group-icon-card.js","sources":["../../../../../src/components/molecules/RadioGroup/components/radio-group-icon-card.tsx"],"sourcesContent":[null],"names":["_jsx","AriaRadioGroup","AriaRadio","_jsxs","_Fragment"],"mappings":"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"}
|
|
@@ -4,10 +4,12 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var Checkbox = require('@flipdish/ui-library/components/atoms/Checkbox');
|
|
5
5
|
var FeaturedIcon = require('@flipdish/ui-library/components/atoms/FeaturedIcon');
|
|
6
6
|
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
7
|
+
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
7
8
|
var reactAriaComponents = require('react-aria-components');
|
|
8
9
|
|
|
9
|
-
const RadioGroupIconSimple = ({ items, size = 'sm', className, ...props }) => {
|
|
10
|
-
|
|
10
|
+
const RadioGroupIconSimple = ({ items, size = 'sm', className, 'data-testid': dataTestId, ...props }) => {
|
|
11
|
+
const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'radio-group', rootName: 'radio-group' });
|
|
12
|
+
return (jsxRuntime.jsx(reactAriaComponents.RadioGroup, { ...props, "data-testid": rootTestId, className: (state) => cx.cx('flex flex-col gap-3', typeof className === 'function' ? className(state) : className), children: items.map((plan) => (jsxRuntime.jsx(reactAriaComponents.Radio, { isDisabled: plan.disabled, value: plan.value, "data-testid": testIdUtils.joinTestId(rootTestId, `option-${plan.value}`), className: ({ isDisabled, isSelected, isFocusVisible }) => cx.cx('relative flex cursor-pointer items-start gap-1 rounded-xl bg-primary p-4 outline-focus-ring ring-inset', isSelected ? 'ring-2 ring-brand' : 'ring-1 ring-secondary', isDisabled && 'cursor-not-allowed bg-disabled_subtle ring-disabled', isFocusVisible && 'outline-2 outline-offset-2'), children: ({ isDisabled, isSelected, isFocusVisible }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "flex flex-1 gap-3", children: [jsxRuntime.jsx(FeaturedIcon.FeaturedIcon, { icon: plan.icon, size: size === 'md' ? 'md' : 'sm', color: "gray", theme: "modern", className: cx.cx(isDisabled && 'bg-disabled text-fg-disabled') }), jsxRuntime.jsxs("div", { className: cx.cx('flex flex-col', size === 'md' ? 'gap-0.5' : ''), children: [jsxRuntime.jsxs(reactAriaComponents.Label, { className: cx.cx('pointer-events-none flex', size === 'md' ? 'gap-1.5' : 'gap-1'), children: [jsxRuntime.jsx("span", { className: cx.cx('text-secondary', size === 'md' ? 'text-md font-medium' : 'text-sm font-medium'), children: plan.title }), jsxRuntime.jsx("span", { className: cx.cx('text-tertiary', size === 'md' ? 'text-md' : 'text-sm'), children: plan.secondaryTitle })] }), jsxRuntime.jsx(reactAriaComponents.Text, { slot: "description", className: cx.cx('text-tertiary', size === 'md' ? 'text-md' : 'text-sm'), children: plan.description })] })] }), jsxRuntime.jsx(Checkbox.CheckboxBase, { size: size === 'md' ? 'md' : 'sm', isDisabled: isDisabled, isSelected: isSelected, isFocusVisible: isFocusVisible })] })) }, plan.value))) }));
|
|
11
13
|
};
|
|
12
14
|
|
|
13
15
|
exports.RadioGroupIconSimple = RadioGroupIconSimple;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group-icon-simple.cjs","sources":["../../../../../src/components/molecules/RadioGroup/components/radio-group-icon-simple.tsx"],"sourcesContent":[null],"names":["_jsx","AriaRadioGroup","cx","AriaRadio","_jsxs","_Fragment","FeaturedIcon","AriaLabel","AriaText","CheckboxBase"],"mappings":"
|
|
1
|
+
{"version":3,"file":"radio-group-icon-simple.cjs","sources":["../../../../../src/components/molecules/RadioGroup/components/radio-group-icon-simple.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","_jsx","AriaRadioGroup","cx","AriaRadio","joinTestId","_jsxs","_Fragment","FeaturedIcon","AriaLabel","AriaText","CheckboxBase"],"mappings":"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"}
|
|
@@ -3,7 +3,9 @@ import type { RadioGroupItemType } from '../radioGroup.types';
|
|
|
3
3
|
interface RadioGroupIconSimpleProps extends RadioGroupProps {
|
|
4
4
|
size?: 'sm' | 'md';
|
|
5
5
|
items: RadioGroupItemType[];
|
|
6
|
+
/** Overrides the root `data-testid`. Options derive from it (e.g. `<root>--option-<value>`). */
|
|
7
|
+
'data-testid'?: string;
|
|
6
8
|
}
|
|
7
|
-
export declare const RadioGroupIconSimple: ({ items, size, className, ...props }: RadioGroupIconSimpleProps) => import("react").JSX.Element;
|
|
9
|
+
export declare const RadioGroupIconSimple: ({ items, size, className, "data-testid": dataTestId, ...props }: RadioGroupIconSimpleProps) => import("react").JSX.Element;
|
|
8
10
|
export {};
|
|
9
11
|
//# sourceMappingURL=radio-group-icon-simple.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group-icon-simple.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/RadioGroup/components/radio-group-icon-simple.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"radio-group-icon-simple.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/RadioGroup/components/radio-group-icon-simple.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,UAAU,yBAA0B,SAAQ,eAAe;IACzD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,gGAAgG;IAChG,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,oBAAoB,GAAI,iEAAwE,yBAAyB,gCAqDrI,CAAC"}
|
|
@@ -2,10 +2,12 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
|
2
2
|
import { CheckboxBase } from '@flipdish/ui-library/components/atoms/Checkbox';
|
|
3
3
|
import { FeaturedIcon } from '@flipdish/ui-library/components/atoms/FeaturedIcon';
|
|
4
4
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
5
|
+
import { useResolvedTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
5
6
|
import { RadioGroup, Radio, Label, Text } from 'react-aria-components';
|
|
6
7
|
|
|
7
|
-
const RadioGroupIconSimple = ({ items, size = 'sm', className, ...props }) => {
|
|
8
|
-
|
|
8
|
+
const RadioGroupIconSimple = ({ items, size = 'sm', className, 'data-testid': dataTestId, ...props }) => {
|
|
9
|
+
const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'radio-group', rootName: 'radio-group' });
|
|
10
|
+
return (jsx(RadioGroup, { ...props, "data-testid": rootTestId, className: (state) => cx('flex flex-col gap-3', typeof className === 'function' ? className(state) : className), children: items.map((plan) => (jsx(Radio, { isDisabled: plan.disabled, value: plan.value, "data-testid": joinTestId(rootTestId, `option-${plan.value}`), className: ({ isDisabled, isSelected, isFocusVisible }) => cx('relative flex cursor-pointer items-start gap-1 rounded-xl bg-primary p-4 outline-focus-ring ring-inset', isSelected ? 'ring-2 ring-brand' : 'ring-1 ring-secondary', isDisabled && 'cursor-not-allowed bg-disabled_subtle ring-disabled', isFocusVisible && 'outline-2 outline-offset-2'), children: ({ isDisabled, isSelected, isFocusVisible }) => (jsxs(Fragment, { children: [jsxs("div", { className: "flex flex-1 gap-3", children: [jsx(FeaturedIcon, { icon: plan.icon, size: size === 'md' ? 'md' : 'sm', color: "gray", theme: "modern", className: cx(isDisabled && 'bg-disabled text-fg-disabled') }), jsxs("div", { className: cx('flex flex-col', size === 'md' ? 'gap-0.5' : ''), children: [jsxs(Label, { className: cx('pointer-events-none flex', size === 'md' ? 'gap-1.5' : 'gap-1'), children: [jsx("span", { className: cx('text-secondary', size === 'md' ? 'text-md font-medium' : 'text-sm font-medium'), children: plan.title }), jsx("span", { className: cx('text-tertiary', size === 'md' ? 'text-md' : 'text-sm'), children: plan.secondaryTitle })] }), jsx(Text, { slot: "description", className: cx('text-tertiary', size === 'md' ? 'text-md' : 'text-sm'), children: plan.description })] })] }), jsx(CheckboxBase, { size: size === 'md' ? 'md' : 'sm', isDisabled: isDisabled, isSelected: isSelected, isFocusVisible: isFocusVisible })] })) }, plan.value))) }));
|
|
9
11
|
};
|
|
10
12
|
|
|
11
13
|
export { RadioGroupIconSimple };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group-icon-simple.js","sources":["../../../../../src/components/molecules/RadioGroup/components/radio-group-icon-simple.tsx"],"sourcesContent":[null],"names":["_jsx","AriaRadioGroup","AriaRadio","_jsxs","_Fragment","AriaLabel","AriaText"],"mappings":"
|
|
1
|
+
{"version":3,"file":"radio-group-icon-simple.js","sources":["../../../../../src/components/molecules/RadioGroup/components/radio-group-icon-simple.tsx"],"sourcesContent":[null],"names":["_jsx","AriaRadioGroup","AriaRadio","_jsxs","_Fragment","AriaLabel","AriaText"],"mappings":"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"}
|
|
@@ -4,10 +4,12 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var Button = require('@flipdish/ui-library/components/atoms/Button');
|
|
5
5
|
var Checkbox = require('@flipdish/ui-library/components/atoms/Checkbox');
|
|
6
6
|
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
7
|
+
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
7
8
|
var reactAriaComponents = require('react-aria-components');
|
|
8
9
|
|
|
9
|
-
const RadioGroupPaymentIcon = ({ items, size = 'sm', className, ...props }) => {
|
|
10
|
-
|
|
10
|
+
const RadioGroupPaymentIcon = ({ items, size = 'sm', className, 'data-testid': dataTestId, ...props }) => {
|
|
11
|
+
const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'radio-group', rootName: 'radio-group' });
|
|
12
|
+
return (jsxRuntime.jsx(reactAriaComponents.RadioGroup, { ...props, "data-testid": rootTestId, className: (state) => cx.cx('flex flex-col gap-3', typeof className === 'function' ? className(state) : className), children: items.map((card) => (jsxRuntime.jsx(reactAriaComponents.Radio, { isDisabled: card.disabled, value: card.value, "data-testid": testIdUtils.joinTestId(rootTestId, `option-${card.value}`), className: ({ isDisabled, isSelected, isFocusVisible }) => cx.cx('relative flex cursor-pointer items-start gap-1 rounded-xl bg-primary p-4 outline-focus-ring ring-inset', isSelected ? 'ring-2 ring-brand' : 'ring-1 ring-secondary', isDisabled && 'bg-disabled_subtle ring-disabled_subtle cursor-not-allowed', isFocusVisible && 'outline-2 outline-offset-2'), children: ({ isDisabled, isSelected, isFocusVisible }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: cx.cx('flex flex-1', size === 'md' ? 'gap-3 md:gap-4' : 'gap-3'), children: [jsxRuntime.jsx("span", { className: "shrink-0", children: card.logo }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: cx.cx('flex flex-col', size === 'md' ? 'gap-0.5' : ''), children: [jsxRuntime.jsx(reactAriaComponents.Label, { className: cx.cx('pointer-events-none text-secondary', size === 'md' ? 'text-md font-medium' : 'text-sm font-medium'), children: card.title }), jsxRuntime.jsx(reactAriaComponents.Text, { slot: "description", className: cx.cx('text-tertiary', size === 'md' ? 'text-md' : 'text-sm'), children: card.description })] }), jsxRuntime.jsxs("div", { className: cx.cx('flex gap-3', size === 'md' ? 'mt-3' : 'mt-2'), children: [jsxRuntime.jsx(Button.Button, { color: "link-gray", size: size === 'md' ? 'md' : 'sm', isDisabled: isDisabled, children: "Set as default" }), jsxRuntime.jsx(Button.Button, { color: "link-color", size: size === 'md' ? 'md' : 'sm', isDisabled: isDisabled, children: "Edit" })] })] })] }), jsxRuntime.jsx(Checkbox.CheckboxBase, { size: size === 'md' ? 'md' : 'sm', isDisabled: isDisabled, isSelected: isSelected, isFocusVisible: isFocusVisible })] })) }, card.value))) }));
|
|
11
13
|
};
|
|
12
14
|
|
|
13
15
|
exports.RadioGroupPaymentIcon = RadioGroupPaymentIcon;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group-payment-icon.cjs","sources":["../../../../../src/components/molecules/RadioGroup/components/radio-group-payment-icon.tsx"],"sourcesContent":[null],"names":["_jsx","AriaRadioGroup","cx","AriaRadio","
|
|
1
|
+
{"version":3,"file":"radio-group-payment-icon.cjs","sources":["../../../../../src/components/molecules/RadioGroup/components/radio-group-payment-icon.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","_jsx","AriaRadioGroup","cx","AriaRadio","joinTestId","_jsxs","AriaLabel","AriaText","Button","CheckboxBase"],"mappings":"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"}
|
|
@@ -10,7 +10,9 @@ interface PaymentCardItemType {
|
|
|
10
10
|
interface RadioGroupPaymentIconProps extends RadioGroupProps {
|
|
11
11
|
size?: 'sm' | 'md';
|
|
12
12
|
items: PaymentCardItemType[];
|
|
13
|
+
/** Overrides the root `data-testid`. Options derive from it (e.g. `<root>--option-<value>`). */
|
|
14
|
+
'data-testid'?: string;
|
|
13
15
|
}
|
|
14
|
-
export declare const RadioGroupPaymentIcon: ({ items, size, className, ...props }: RadioGroupPaymentIconProps) => import("react").JSX.Element;
|
|
16
|
+
export declare const RadioGroupPaymentIcon: ({ items, size, className, "data-testid": dataTestId, ...props }: RadioGroupPaymentIconProps) => import("react").JSX.Element;
|
|
15
17
|
export {};
|
|
16
18
|
//# sourceMappingURL=radio-group-payment-icon.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group-payment-icon.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/RadioGroup/components/radio-group-payment-icon.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"radio-group-payment-icon.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/RadioGroup/components/radio-group-payment-icon.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAG7D,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,0BAA2B,SAAQ,eAAe;IAC1D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,gGAAgG;IAChG,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,qBAAqB,GAAI,iEAAwE,0BAA0B,gCAuDvI,CAAC"}
|
|
@@ -2,10 +2,12 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
|
2
2
|
import { Button } from '@flipdish/ui-library/components/atoms/Button';
|
|
3
3
|
import { CheckboxBase } from '@flipdish/ui-library/components/atoms/Checkbox';
|
|
4
4
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
5
|
+
import { useResolvedTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
5
6
|
import { RadioGroup, Radio, Label, Text } from 'react-aria-components';
|
|
6
7
|
|
|
7
|
-
const RadioGroupPaymentIcon = ({ items, size = 'sm', className, ...props }) => {
|
|
8
|
-
|
|
8
|
+
const RadioGroupPaymentIcon = ({ items, size = 'sm', className, 'data-testid': dataTestId, ...props }) => {
|
|
9
|
+
const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'radio-group', rootName: 'radio-group' });
|
|
10
|
+
return (jsx(RadioGroup, { ...props, "data-testid": rootTestId, className: (state) => cx('flex flex-col gap-3', typeof className === 'function' ? className(state) : className), children: items.map((card) => (jsx(Radio, { isDisabled: card.disabled, value: card.value, "data-testid": joinTestId(rootTestId, `option-${card.value}`), className: ({ isDisabled, isSelected, isFocusVisible }) => cx('relative flex cursor-pointer items-start gap-1 rounded-xl bg-primary p-4 outline-focus-ring ring-inset', isSelected ? 'ring-2 ring-brand' : 'ring-1 ring-secondary', isDisabled && 'bg-disabled_subtle ring-disabled_subtle cursor-not-allowed', isFocusVisible && 'outline-2 outline-offset-2'), children: ({ isDisabled, isSelected, isFocusVisible }) => (jsxs(Fragment, { children: [jsxs("div", { className: cx('flex flex-1', size === 'md' ? 'gap-3 md:gap-4' : 'gap-3'), children: [jsx("span", { className: "shrink-0", children: card.logo }), jsxs("div", { children: [jsxs("div", { className: cx('flex flex-col', size === 'md' ? 'gap-0.5' : ''), children: [jsx(Label, { className: cx('pointer-events-none text-secondary', size === 'md' ? 'text-md font-medium' : 'text-sm font-medium'), children: card.title }), jsx(Text, { slot: "description", className: cx('text-tertiary', size === 'md' ? 'text-md' : 'text-sm'), children: card.description })] }), jsxs("div", { className: cx('flex gap-3', size === 'md' ? 'mt-3' : 'mt-2'), children: [jsx(Button, { color: "link-gray", size: size === 'md' ? 'md' : 'sm', isDisabled: isDisabled, children: "Set as default" }), jsx(Button, { color: "link-color", size: size === 'md' ? 'md' : 'sm', isDisabled: isDisabled, children: "Edit" })] })] })] }), jsx(CheckboxBase, { size: size === 'md' ? 'md' : 'sm', isDisabled: isDisabled, isSelected: isSelected, isFocusVisible: isFocusVisible })] })) }, card.value))) }));
|
|
9
11
|
};
|
|
10
12
|
|
|
11
13
|
export { RadioGroupPaymentIcon };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group-payment-icon.js","sources":["../../../../../src/components/molecules/RadioGroup/components/radio-group-payment-icon.tsx"],"sourcesContent":[null],"names":["_jsx","AriaRadioGroup","AriaRadio","_jsxs","
|
|
1
|
+
{"version":3,"file":"radio-group-payment-icon.js","sources":["../../../../../src/components/molecules/RadioGroup/components/radio-group-payment-icon.tsx"],"sourcesContent":[null],"names":["_jsx","AriaRadioGroup","AriaRadio","_jsxs","AriaLabel","AriaText"],"mappings":"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"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
5
|
+
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
5
6
|
var reactAriaComponents = require('react-aria-components');
|
|
6
7
|
|
|
7
8
|
/**
|
|
@@ -10,8 +11,9 @@ var reactAriaComponents = require('react-aria-components');
|
|
|
10
11
|
*
|
|
11
12
|
* @summary radio-button card group for plan or tier selection
|
|
12
13
|
*/
|
|
13
|
-
const RadioGroupRadioButton = ({ items, size = 'sm', className, ...props }) => {
|
|
14
|
-
|
|
14
|
+
const RadioGroupRadioButton = ({ items, size = 'sm', className, 'data-testid': dataTestId, ...props }) => {
|
|
15
|
+
const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'radio-group', rootName: 'radio-group' });
|
|
16
|
+
return (jsxRuntime.jsx(reactAriaComponents.RadioGroup, { ...props, "data-testid": rootTestId, className: (state) => cx.cx('flex flex-col gap-3', typeof className === 'function' ? className(state) : className), children: items.map((plan) => (jsxRuntime.jsx(reactAriaComponents.Radio, { isDisabled: plan.disabled, value: plan.value, "data-testid": testIdUtils.joinTestId(rootTestId, `option-${plan.value}`), className: ({ isDisabled, isSelected, isFocusVisible }) => cx.cx('relative flex cursor-pointer rounded-xl bg-primary p-4 outline-focus-ring ring-inset', size === 'md' ? 'gap-3' : 'gap-2', isSelected ? 'ring-2 ring-brand' : 'ring-1 ring-secondary', isDisabled && 'cursor-not-allowed bg-disabled_subtle ring-disabled_subtle', isFocusVisible && 'outline-2 outline-offset-2'), children: ({ isSelected, isDisabled, isFocusVisible }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cx.cx('relative mt-0.5 inline-flex shrink-0 items-center justify-center rounded-full ring-inset', size === 'md' ? 'size-5' : 'size-4', isSelected ? 'bg-brand-solid' : 'ring-1 ring-primary', isDisabled && 'bg-disabled_subtle ring-1 ring-disabled', isFocusVisible && 'outline-2 outline-offset-2 outline-focus-ring'), children: jsxRuntime.jsx("div", { className: cx.cx('absolute rounded-full bg-fg-white opacity-0', size === 'md' ? 'size-2' : 'size-1.5', isSelected ? 'opacity-100' : 'opacity-0', isDisabled && 'bg-fg-disabled_subtle') }) }), jsxRuntime.jsxs("div", { className: cx.cx('flex flex-col', size === 'md' ? 'gap-0.5' : ''), children: [jsxRuntime.jsxs(reactAriaComponents.Label, { className: cx.cx('pointer-events-none flex', size === 'md' ? 'gap-1.5' : 'gap-1'), children: [jsxRuntime.jsx("span", { className: cx.cx('text-sm font-medium text-secondary', size === 'md' ? 'text-md font-medium' : 'text-sm font-medium'), children: plan.title }), jsxRuntime.jsx("span", { className: cx.cx('text-tertiary', size === 'md' ? 'text-md' : 'text-sm'), children: plan.secondaryTitle })] }), jsxRuntime.jsx(reactAriaComponents.Text, { slot: "description", className: cx.cx('text-sm text-tertiary', size === 'md' ? 'text-md' : 'text-sm'), children: plan.description })] })] })) }, plan.value))) }));
|
|
15
17
|
};
|
|
16
18
|
|
|
17
19
|
exports.RadioGroupRadioButton = RadioGroupRadioButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group-radio-button.cjs","sources":["../../../../../src/components/molecules/RadioGroup/components/radio-group-radio-button.tsx"],"sourcesContent":[null],"names":["_jsx","AriaRadioGroup","cx","AriaRadio","_jsxs","AriaLabel","AriaText"],"mappings":"
|
|
1
|
+
{"version":3,"file":"radio-group-radio-button.cjs","sources":["../../../../../src/components/molecules/RadioGroup/components/radio-group-radio-button.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","_jsx","AriaRadioGroup","cx","AriaRadio","joinTestId","_jsxs","AriaLabel","AriaText"],"mappings":"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"}
|
|
@@ -3,6 +3,8 @@ import type { RadioGroupItemType } from '../radioGroup.types';
|
|
|
3
3
|
export interface RadioGroupRadioButtonProps extends RadioGroupProps {
|
|
4
4
|
size?: 'sm' | 'md';
|
|
5
5
|
items: RadioGroupItemType[];
|
|
6
|
+
/** Overrides the root `data-testid`. Options derive from it (e.g. `<root>--option-<value>`). */
|
|
7
|
+
'data-testid'?: string;
|
|
6
8
|
}
|
|
7
9
|
/**
|
|
8
10
|
* Mutually exclusive option group rendered as stacked radio-button cards with a
|
|
@@ -10,5 +12,5 @@ export interface RadioGroupRadioButtonProps extends RadioGroupProps {
|
|
|
10
12
|
*
|
|
11
13
|
* @summary radio-button card group for plan or tier selection
|
|
12
14
|
*/
|
|
13
|
-
export declare const RadioGroupRadioButton: ({ items, size, className, ...props }: RadioGroupRadioButtonProps) => import("react").JSX.Element;
|
|
15
|
+
export declare const RadioGroupRadioButton: ({ items, size, className, "data-testid": dataTestId, ...props }: RadioGroupRadioButtonProps) => import("react").JSX.Element;
|
|
14
16
|
//# sourceMappingURL=radio-group-radio-button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group-radio-button.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/RadioGroup/components/radio-group-radio-button.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"radio-group-radio-button.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/RadioGroup/components/radio-group-radio-button.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,MAAM,WAAW,0BAA2B,SAAQ,eAAe;IACjE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,gGAAgG;IAChG,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,iEAAwE,0BAA0B,gCA+DvI,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
3
|
+
import { useResolvedTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
3
4
|
import { RadioGroup, Radio, Label, Text } from 'react-aria-components';
|
|
4
5
|
|
|
5
6
|
/**
|
|
@@ -8,8 +9,9 @@ import { RadioGroup, Radio, Label, Text } from 'react-aria-components';
|
|
|
8
9
|
*
|
|
9
10
|
* @summary radio-button card group for plan or tier selection
|
|
10
11
|
*/
|
|
11
|
-
const RadioGroupRadioButton = ({ items, size = 'sm', className, ...props }) => {
|
|
12
|
-
|
|
12
|
+
const RadioGroupRadioButton = ({ items, size = 'sm', className, 'data-testid': dataTestId, ...props }) => {
|
|
13
|
+
const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'radio-group', rootName: 'radio-group' });
|
|
14
|
+
return (jsx(RadioGroup, { ...props, "data-testid": rootTestId, className: (state) => cx('flex flex-col gap-3', typeof className === 'function' ? className(state) : className), children: items.map((plan) => (jsx(Radio, { isDisabled: plan.disabled, value: plan.value, "data-testid": joinTestId(rootTestId, `option-${plan.value}`), className: ({ isDisabled, isSelected, isFocusVisible }) => cx('relative flex cursor-pointer rounded-xl bg-primary p-4 outline-focus-ring ring-inset', size === 'md' ? 'gap-3' : 'gap-2', isSelected ? 'ring-2 ring-brand' : 'ring-1 ring-secondary', isDisabled && 'cursor-not-allowed bg-disabled_subtle ring-disabled_subtle', isFocusVisible && 'outline-2 outline-offset-2'), children: ({ isSelected, isDisabled, isFocusVisible }) => (jsxs(Fragment, { children: [jsx("div", { className: cx('relative mt-0.5 inline-flex shrink-0 items-center justify-center rounded-full ring-inset', size === 'md' ? 'size-5' : 'size-4', isSelected ? 'bg-brand-solid' : 'ring-1 ring-primary', isDisabled && 'bg-disabled_subtle ring-1 ring-disabled', isFocusVisible && 'outline-2 outline-offset-2 outline-focus-ring'), children: jsx("div", { className: cx('absolute rounded-full bg-fg-white opacity-0', size === 'md' ? 'size-2' : 'size-1.5', isSelected ? 'opacity-100' : 'opacity-0', isDisabled && 'bg-fg-disabled_subtle') }) }), jsxs("div", { className: cx('flex flex-col', size === 'md' ? 'gap-0.5' : ''), children: [jsxs(Label, { className: cx('pointer-events-none flex', size === 'md' ? 'gap-1.5' : 'gap-1'), children: [jsx("span", { className: cx('text-sm font-medium text-secondary', size === 'md' ? 'text-md font-medium' : 'text-sm font-medium'), children: plan.title }), jsx("span", { className: cx('text-tertiary', size === 'md' ? 'text-md' : 'text-sm'), children: plan.secondaryTitle })] }), jsx(Text, { slot: "description", className: cx('text-sm text-tertiary', size === 'md' ? 'text-md' : 'text-sm'), children: plan.description })] })] })) }, plan.value))) }));
|
|
13
15
|
};
|
|
14
16
|
|
|
15
17
|
export { RadioGroupRadioButton };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group-radio-button.js","sources":["../../../../../src/components/molecules/RadioGroup/components/radio-group-radio-button.tsx"],"sourcesContent":[null],"names":["_jsx","AriaRadioGroup","AriaRadio","_jsxs","AriaLabel","AriaText"],"mappings":"
|
|
1
|
+
{"version":3,"file":"radio-group-radio-button.js","sources":["../../../../../src/components/molecules/RadioGroup/components/radio-group-radio-button.tsx"],"sourcesContent":[null],"names":["_jsx","AriaRadioGroup","AriaRadio","_jsxs","AriaLabel","AriaText"],"mappings":";;;;;AAeA;;;;;AAKG;MACU,qBAAqB,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAA8B,KAAI;AAC1I,IAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC;AAE7G,IAAA,QACEA,GAAA,CAACC,UAAc,EAAA,EAAA,GACT,KAAK,iBACI,UAAU,EACvB,SAAS,EAAE,CAAC,KAAK,KAAK,EAAE,CAAC,qBAAqB,EAAE,OAAO,SAAS,KAAK,UAAU,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC,YAE9G,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACdD,GAAA,CAACE,KAAS,IACR,UAAU,EAAE,IAAI,CAAC,QAAQ,EAEzB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,aAAA,EACJ,UAAU,CAAC,UAAU,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,KAAK,CAAA,CAAE,CAAC,EAC3D,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,KACpD,EAAE,CACA,sFAAsF,EACtF,IAAI,KAAK,IAAI,GAAG,OAAO,GAAG,OAAO,EACjC,UAAU,GAAG,mBAAmB,GAAG,uBAAuB,EAC1D,UAAU,IAAI,4DAA4D,EAC1E,cAAc,IAAI,4BAA4B,CAC/C,EAAA,QAAA,EAGF,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,MAC1CC,4BACEH,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,0FAA0F,EAC1F,IAAI,KAAK,IAAI,GAAG,QAAQ,GAAG,QAAQ,EACnC,UAAU,GAAG,gBAAgB,GAAG,qBAAqB,EACrD,UAAU,IAAI,yCAAyC,EACvD,cAAc,IAAI,+CAA+C,CAClE,EAAA,QAAA,EAEDA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,6CAA6C,EAC7C,IAAI,KAAK,IAAI,GAAG,QAAQ,GAAG,UAAU,EACrC,UAAU,GAAG,aAAa,GAAG,WAAW,EACxC,UAAU,IAAI,uBAAuB,CACtC,EAAA,CACD,GACE,EAENG,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,IAAI,KAAK,IAAI,GAAG,SAAS,GAAG,EAAE,CAAC,aACjEA,IAAA,CAACC,KAAS,IAAC,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,IAAI,KAAK,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,aACvFJ,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,EAAE,CAAC,oCAAoC,EAAE,IAAI,KAAK,IAAI,GAAG,qBAAqB,GAAG,qBAAqB,CAAC,EAAA,QAAA,EACrH,IAAI,CAAC,KAAK,GACN,EACPA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,IAAI,KAAK,IAAI,GAAG,SAAS,GAAG,SAAS,CAAC,EAAA,QAAA,EAAG,IAAI,CAAC,cAAc,GAAQ,CAAA,EAAA,CAC/F,EACZA,GAAA,CAACK,IAAQ,IAAC,IAAI,EAAC,aAAa,EAAC,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,IAAI,KAAK,IAAI,GAAG,SAAS,GAAG,SAAS,CAAC,EAAA,QAAA,EACvG,IAAI,CAAC,WAAW,EAAA,CACR,IACP,CAAA,EAAA,CACL,CACJ,EAAA,EA9CI,IAAI,CAAC,KAAK,CA+CL,CACb,CAAC,EAAA,CACa;AAErB;;;;"}
|
|
@@ -6,6 +6,7 @@ var Button = require('@flipdish/ui-library/components/atoms/Button');
|
|
|
6
6
|
var FeaturedIcon = require('@flipdish/ui-library/components/atoms/FeaturedIcon');
|
|
7
7
|
var Input = require('@flipdish/ui-library/components/atoms/Input');
|
|
8
8
|
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
9
|
+
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
9
10
|
var React = require('react');
|
|
10
11
|
var reactAriaComponents = require('react-aria-components');
|
|
11
12
|
var selectItem = require('./select-item.cjs');
|
|
@@ -31,9 +32,10 @@ const MultiSelectFooter = ({ size = 'sm', onReset, onSelectAll, className }) =>
|
|
|
31
32
|
return (jsxRuntime.jsxs("div", { className: cx.cx('flex items-center justify-between border-t border-secondary p-3', className), children: [jsxRuntime.jsx(Button.Button, { size: btnSize, color: "secondary", onClick: onReset, children: "Reset" }), jsxRuntime.jsx(Button.Button, { size: btnSize, color: "secondary", onClick: onSelectAll, children: "Select all" })] }));
|
|
32
33
|
};
|
|
33
34
|
const MultiSelectEmptyState = ({ title = 'No results found', description = 'Please try a different search term.', onClearSearch, className, }) => (jsxRuntime.jsxs("div", { className: cx.cx('flex flex-col items-center gap-3 px-4 py-4', className), children: [jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3", children: [jsxRuntime.jsx(FeaturedIcon.FeaturedIcon, { icon: uiIcons.SearchLg, size: "sm", color: "gray", theme: "modern" }), jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0.5 text-center text-sm", children: [jsxRuntime.jsx("p", { className: "font-semibold text-primary", children: title }), jsxRuntime.jsx("p", { className: "text-tertiary", children: description })] })] }), onClearSearch && (jsxRuntime.jsx(Button.Button, { size: "sm", color: "link-color", onClick: onClearSearch, children: "Clear search" }))] }));
|
|
34
|
-
const MultiSelectRoot = ({ items, children, size = 'md', selectedKeys, defaultSelectedKeys, onSelectionChange, isDisabled, isRequired, isInvalid, 'aria-label': ariaLabel, placeholder = 'Select', label, hint, tooltip, hideRequiredIndicator, popoverClassName, className, onReset, onSelectAll, showFooter = true, showSearch = true, emptyStateTitle, emptyStateDescription, selectedCountFormatter, supportingText, ref, }) => {
|
|
35
|
+
const MultiSelectRoot = ({ items, children, size = 'md', selectedKeys, defaultSelectedKeys, onSelectionChange, isDisabled, isRequired, isInvalid, 'aria-label': ariaLabel, placeholder = 'Select', label, hint, tooltip, hideRequiredIndicator, popoverClassName, className, onReset, onSelectAll, showFooter = true, showSearch = true, emptyStateTitle, emptyStateDescription, selectedCountFormatter, supportingText, ref, 'data-testid': dataTestId, }) => {
|
|
35
36
|
const { contains } = reactAriaComponents.useFilter({ sensitivity: 'base' });
|
|
36
37
|
const [searchValue, setSearchValue] = React.useState('');
|
|
38
|
+
const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'multi-select', rootName: 'multi-select' });
|
|
37
39
|
const triggerRef = React.useRef(null);
|
|
38
40
|
const [popoverWidth, setPopoverWidth] = React.useState('');
|
|
39
41
|
const onResize = React.useCallback(() => {
|
|
@@ -80,7 +82,7 @@ const MultiSelectRoot = ({ items, children, size = 'md', selectedKeys, defaultSe
|
|
|
80
82
|
const handleClearSearch = React.useCallback(() => {
|
|
81
83
|
setSearchValue('');
|
|
82
84
|
}, []);
|
|
83
|
-
return (jsxRuntime.jsx(selectShared.SelectContext.Provider, { value: { size }, children: jsxRuntime.jsxs("div", { ref: ref, className: cx.cx('flex flex-col gap-1.5', className), children: [label && (jsxRuntime.jsx(Input.Label, { isRequired: hideRequiredIndicator ? false : isRequired, isInvalid: isInvalid, tooltip: tooltip, children: label })), jsxRuntime.jsxs(reactAriaComponents.DialogTrigger, { children: [jsxRuntime.jsx(reactAriaComponents.Button, { ref: triggerRef, isDisabled: isDisabled, "aria-label": label ? undefined : ariaLabel, "aria-invalid": isInvalid || undefined, "aria-required": isRequired || undefined, onClick: onResize, className: (state) => cx.cx('relative flex w-full cursor-pointer items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition duration-100 ease-linear ring-inset', (state.isFocusVisible || state.isPressed) && 'ring-2 ring-brand', state.isDisabled && 'cursor-not-allowed opacity-50'), children: jsxRuntime.jsxs("span", { className: cx.cx('flex w-full items-center truncate text-left', selectShared.sizes[size].root, '*:data-icon:shrink-0 *:data-icon:text-fg-quaternary'), children: [hasSelection ? (jsxRuntime.jsxs("span", { className: cx.cx('flex items-center', selectShared.sizes[size].textContainer), children: [jsxRuntime.jsx("span", { className: cx.cx('font-medium text-primary', selectShared.sizes[size].text), children: selectedCountFormatter ? selectedCountFormatter(selectedCount) : `${selectedCount} selected` }), supportingText && jsxRuntime.jsx("span", { className: cx.cx('text-tertiary', selectShared.sizes[size].text), children: supportingText })] })) : (jsxRuntime.jsx("span", { className: cx.cx('text-placeholder', selectShared.sizes[size].text), children: placeholder })), jsxRuntime.jsx(uiIcons.ChevronDown, { "aria-hidden": "true", className: cx.cx('ml-auto shrink-0 text-fg-quaternary', size === 'lg' ? 'size-5' : 'size-4 stroke-[2.25px]') })] }) }), jsxRuntime.jsx(reactAriaComponents.Popover, { placement: "bottom", offset: 4, containerPadding: 0, style: { width: popoverWidth || undefined }, className: (state) => cx.cx('w-(--trigger-width) origin-(--trigger-anchor-point) overflow-hidden rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt outline-hidden will-change-transform', state.isEntering &&
|
|
85
|
+
return (jsxRuntime.jsx(selectShared.SelectContext.Provider, { value: { size, testIdPrefix: rootTestId }, children: jsxRuntime.jsxs("div", { ref: ref, "data-testid": rootTestId, className: cx.cx('flex flex-col gap-1.5', className), children: [label && (jsxRuntime.jsx(Input.Label, { isRequired: hideRequiredIndicator ? false : isRequired, isInvalid: isInvalid, tooltip: tooltip, children: label })), jsxRuntime.jsxs(reactAriaComponents.DialogTrigger, { children: [jsxRuntime.jsx(reactAriaComponents.Button, { ref: triggerRef, "data-testid": testIdUtils.joinTestId(rootTestId, 'trigger'), isDisabled: isDisabled, "aria-label": label ? undefined : ariaLabel, "aria-invalid": isInvalid || undefined, "aria-required": isRequired || undefined, onClick: onResize, className: (state) => cx.cx('relative flex w-full cursor-pointer items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition duration-100 ease-linear ring-inset', (state.isFocusVisible || state.isPressed) && 'ring-2 ring-brand', state.isDisabled && 'cursor-not-allowed opacity-50'), children: jsxRuntime.jsxs("span", { className: cx.cx('flex w-full items-center truncate text-left', selectShared.sizes[size].root, '*:data-icon:shrink-0 *:data-icon:text-fg-quaternary'), children: [hasSelection ? (jsxRuntime.jsxs("span", { className: cx.cx('flex items-center', selectShared.sizes[size].textContainer), children: [jsxRuntime.jsx("span", { className: cx.cx('font-medium text-primary', selectShared.sizes[size].text), children: selectedCountFormatter ? selectedCountFormatter(selectedCount) : `${selectedCount} selected` }), supportingText && jsxRuntime.jsx("span", { className: cx.cx('text-tertiary', selectShared.sizes[size].text), children: supportingText })] })) : (jsxRuntime.jsx("span", { className: cx.cx('text-placeholder', selectShared.sizes[size].text), children: placeholder })), jsxRuntime.jsx(uiIcons.ChevronDown, { "aria-hidden": "true", className: cx.cx('ml-auto shrink-0 text-fg-quaternary', size === 'lg' ? 'size-5' : 'size-4 stroke-[2.25px]') })] }) }), jsxRuntime.jsx(reactAriaComponents.Popover, { placement: "bottom", offset: 4, containerPadding: 0, style: { width: popoverWidth || undefined }, className: (state) => cx.cx('w-(--trigger-width) origin-(--trigger-anchor-point) overflow-hidden rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt outline-hidden will-change-transform', state.isEntering &&
|
|
84
86
|
'duration-150 ease-out animate-in fade-in placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5', state.isExiting &&
|
|
85
87
|
'duration-100 ease-in animate-out fade-out placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5', popoverClassName), children: jsxRuntime.jsxs(reactAriaComponents.Dialog, { className: "outline-hidden", children: [jsxRuntime.jsxs(reactAriaComponents.Autocomplete, { filter: contains, inputValue: searchValue, onInputChange: setSearchValue, children: [showSearch && (jsxRuntime.jsx("div", { className: cx.cx('border-b border-secondary', searchSizes[size].wrapper), children: jsxRuntime.jsx(reactAriaComponents.SearchField, { "aria-label": "Search", value: searchValue, onChange: setSearchValue, autoFocus: true, children: jsxRuntime.jsxs("div", { className: cx.cx('flex items-center', searchSizes[size].root), children: [jsxRuntime.jsx(uiIcons.SearchLg, { "data-icon": true, "aria-hidden": "true", className: "shrink-0 text-fg-quaternary" }), jsxRuntime.jsx(reactAriaComponents.Input, { placeholder: "Search", className: cx.cx('w-full appearance-none bg-transparent text-primary caret-alpha-black/90 outline-hidden placeholder:text-placeholder', searchSizes[size].text) })] }) }) })), jsxRuntime.jsx(reactAriaComponents.ListBox, { "aria-label": label || 'Options', items: items, selectionMode: "multiple", selectedKeys: currentSelectedKeys, onSelectionChange: handleSelectionChange, renderEmptyState: () => (jsxRuntime.jsx(MultiSelectEmptyState, { title: emptyStateTitle, description: emptyStateDescription, onClearSearch: searchValue ? handleClearSearch : undefined })), className: cx.cx('overflow-y-auto py-1 outline-hidden', popoverMaxHeights[size]), children: children })] }), showFooter && jsxRuntime.jsx(MultiSelectFooter, { size: size, onReset: handleReset, onSelectAll: handleSelectAll })] }) })] }), hint && (jsxRuntime.jsx(Input.HintText, { isInvalid: isInvalid, className: cx.cx(size === 'sm' && 'text-xs'), children: hint }))] }) }));
|
|
86
88
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multi-select.cjs","sources":["../../../../../src/components/molecules/Select/components/multi-select.tsx"],"sourcesContent":[null],"names":["_jsxs","cx","_jsx","Button","FeaturedIcon","SearchLg","useFilter","useState","useRef","useCallback","Children","isValidElement","SelectContext","Label","AriaDialogTrigger","AriaButton","sizes","ChevronDown","AriaPopover","AriaDialog","AriaAutocomplete","AriaSearchField","AriaInput","AriaListBox","HintText","SelectItem"],"mappings":"
|
|
1
|
+
{"version":3,"file":"multi-select.cjs","sources":["../../../../../src/components/molecules/Select/components/multi-select.tsx"],"sourcesContent":[null],"names":["_jsxs","cx","_jsx","Button","FeaturedIcon","SearchLg","useFilter","useState","useResolvedTestId","useRef","useCallback","Children","isValidElement","SelectContext","Label","AriaDialogTrigger","AriaButton","joinTestId","sizes","ChevronDown","AriaPopover","AriaDialog","AriaAutocomplete","AriaSearchField","AriaInput","AriaListBox","HintText","SelectItem"],"mappings":";;;;;;;;;;;;;;AAyBA,MAAM,WAAW,GAAG;AAClB,IAAA,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gEAAgE,EAAE,IAAI,EAAE,SAAS,EAAE;AAChH,IAAA,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,oCAAoC,EAAE,IAAI,EAAE,SAAS,EAAE;AACtF,IAAA,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,wCAAwC,EAAE,IAAI,EAAE,SAAS,EAAE;CAC3F;AAED,MAAM,gBAAgB,GAAG;AACvB,IAAA,EAAE,EAAE,IAAa;AACjB,IAAA,EAAE,EAAE,IAAa;AACjB,IAAA,EAAE,EAAE,IAAa;CAClB;AAED,MAAM,iBAAiB,GAAG;AACxB,IAAA,EAAE,EAAE,UAAU;AACd,IAAA,EAAE,EAAE,UAAU;AACd,IAAA,EAAE,EAAE,UAAU;CACf;AAgBD,MAAM,iBAAiB,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAA0B,KAAI;AACrG,IAAA,MAAM,OAAO,GAAG,gBAAgB,CAAC,IAAI,CAAC;IAEtC,QACEA,yBAAK,SAAS,EAAEC,KAAE,CAAC,iEAAiE,EAAE,SAAS,CAAC,aAC9FC,cAAA,CAACC,aAAM,IAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,sBAEhD,EACTD,cAAA,CAACC,aAAM,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,WAAW,EAAA,QAAA,EAAA,YAAA,EAAA,CAEpD,CAAA,EAAA,CACL;AAEV,CAAC;AAmBD,MAAM,qBAAqB,GAAG,CAAC,EAC7B,KAAK,GAAG,kBAAkB,EAC1B,WAAW,GAAG,qCAAqC,EACnD,aAAa,EACb,SAAS,GACkB,MAC3BH,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,KAAE,CAAC,4CAA4C,EAAE,SAAS,CAAC,aACzED,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,CAC/CE,cAAA,CAACE,yBAAY,EAAA,EAAC,IAAI,EAAEC,gBAAQ,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,EAAA,CAAG,EACtEL,yBAAK,SAAS,EAAC,wDAAwD,EAAA,QAAA,EAAA,CACrEE,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAE,KAAK,EAAA,CAAK,EACrDA,sBAAG,SAAS,EAAC,eAAe,EAAA,QAAA,EAAE,WAAW,EAAA,CAAK,IAC1C,CAAA,EAAA,CACF,EACL,aAAa,KACZA,eAACC,aAAM,EAAA,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,aAAa,EAAA,QAAA,EAAA,cAAA,EAAA,CAElD,CACV,CAAA,EAAA,CACG,CACP;AAiDD,MAAM,eAAe,GAAG,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,EACjB,UAAU,EACV,UAAU,EACV,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,WAAW,GAAG,QAAQ,EACtB,KAAK,EACL,IAAI,EACJ,OAAO,EACP,qBAAqB,EACrB,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,WAAW,EACX,UAAU,GAAG,IAAI,EACjB,UAAU,GAAG,IAAI,EACjB,eAAe,EACf,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACd,GAAG,EACH,aAAa,EAAE,UAAU,GACR,KAAI;AACrB,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAGG,6BAAS,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC;IACvD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGC,cAAQ,CAAC,EAAE,CAAC;AAClD,IAAA,MAAM,UAAU,GAAGC,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC;AAE/G,IAAA,MAAM,UAAU,GAAGC,YAAM,CAAoB,IAAI,CAAC;IAClD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAGF,cAAQ,CAAC,EAAE,CAAC;AAEpD,IAAA,MAAM,QAAQ,GAAGG,iBAAW,CAAC,MAAK;QAChC,IAAI,CAAC,UAAU,CAAC,OAAO;YAAE;QACzB,MAAM,IAAI,GAAG,UAAU,CAAC,OAAO,CAAC,qBAAqB,EAAE;AACvD,QAAA,eAAe,CAAC,CAAA,EAAG,IAAI,CAAC,KAAK,CAAA,EAAA,CAAI,CAAC;IACpC,CAAC,EAAE,EAAE,CAAC;;;;AAKN,IAAA,MAAM,YAAY,GAAG,YAAY,KAAK,SAAS;AAC/C,IAAA,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAGH,cAAQ,CAAY,mBAAmB,IAAI,IAAI,GAAG,EAAE,CAAC;IAC7G,MAAM,mBAAmB,GAAG,YAAY,GAAG,YAAY,GAAG,oBAAoB;AAE9E,IAAA,MAAM,qBAAqB,GAAG,CAAC,IAAe,KAAI;AAChD,QAAA,IAAI,CAAC,YAAY;YAAE,uBAAuB,CAAC,IAAI,CAAC;AAChD,QAAA,iBAAiB,GAAG,IAAI,CAAC;AAC3B,IAAA,CAAC;IAED,MAAM,WAAW,GAAG,MAAK;AACvB,QAAA,IAAI,CAAC,YAAY;AAAE,YAAA,uBAAuB,CAAC,IAAI,GAAG,EAAE,CAAC;QACrD,OAAO,IAAI;AACb,IAAA,CAAC;;;IAID,MAAM,iBAAiB,GAAG,MAA2B;AACnD,QAAA,IAAI,KAAK;AAAE,YAAA,OAAO,IAAI,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;QACvD,IAAI,OAAO,QAAQ,KAAK,UAAU;YAAE,OAAO,IAAI,GAAG,EAAE;QACpD,OAAO,IAAI,GAAG,CACZI,cAAQ,CAAC,OAAO,CAAC,QAAQ;aACtB,MAAM,CAACC,oBAAc;aACrB,GAAG,CAAC,CAAC,KAAK,KAAM,KAAK,CAAC,KAAkC,CAAC,EAAE;aAC3D,MAAM,CAAC,CAAC,EAAE,KAA4B,EAAE,IAAI,IAAI,CAAC,CACrD;AACH,IAAA,CAAC;IAED,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,IAAI,CAAC,YAAY;AAAE,YAAA,uBAAuB,CAAC,iBAAiB,EAAE,CAAC;QAC/D,WAAW,IAAI;AACjB,IAAA,CAAC;AAED,IAAA,MAAM,aAAa,GAAG,mBAAmB,YAAY,GAAG,GAAG,mBAAmB,CAAC,IAAI,GAAG,mBAAmB,KAAK,KAAK,IAAI,KAAK,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC;AAC9I,IAAA,MAAM,YAAY,GAAG,aAAa,GAAG,CAAC;AAEtC,IAAA,MAAM,iBAAiB,GAAGF,iBAAW,CAAC,MAAK;QACzC,cAAc,CAAC,EAAE,CAAC;IACpB,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACER,cAAA,CAACW,0BAAa,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,EAAA,QAAA,EAC/Db,eAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAA,aAAA,EAAe,UAAU,EAAE,SAAS,EAAEC,KAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CACtF,KAAK,KACJC,cAAA,CAACY,WAAK,EAAA,EAAC,UAAU,EAAE,qBAAqB,GAAG,KAAK,GAAG,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAA,QAAA,EAClG,KAAK,GACA,CACT,EAEDd,eAAA,CAACe,iCAAiB,eAChBb,cAAA,CAACc,0BAAU,EAAA,EACT,GAAG,EAAE,UAAU,EAAA,aAAA,EACFC,sBAAU,CAAC,UAAU,EAAE,SAAS,CAAC,EAC9C,UAAU,EAAE,UAAU,EAAA,YAAA,EACV,KAAK,GAAG,SAAS,GAAG,SAAS,EAAA,cAAA,EAC3B,SAAS,IAAI,SAAS,EAAA,eAAA,EACrB,UAAU,IAAI,SAAS,EACtC,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAE,CAAC,KAAK,KACfhB,KAAE,CACA,oKAAoK,EACpK,CAAC,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,SAAS,KAAK,mBAAmB,EAChE,KAAK,CAAC,UAAU,IAAI,+BAA+B,CACpD,EAAA,QAAA,EAGHD,eAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAEC,KAAE,CAAC,6CAA6C,EAAEiB,kBAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,qDAAqD,CAAC,EAAA,QAAA,EAAA,CAEpI,YAAY,IACXlB,eAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEC,KAAE,CAAC,mBAAmB,EAAEiB,kBAAK,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC,EAAA,QAAA,EAAA,CACjEhB,yBAAM,SAAS,EAAED,KAAE,CAAC,0BAA0B,EAAEiB,kBAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAA,QAAA,EAC9D,sBAAsB,GAAG,sBAAsB,CAAC,aAAa,CAAC,GAAG,CAAA,EAAG,aAAa,CAAA,SAAA,CAAW,EAAA,CACxF,EACN,cAAc,IAAIhB,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAED,KAAE,CAAC,eAAe,EAAEiB,kBAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAA,QAAA,EAAG,cAAc,EAAA,CAAQ,IAC7F,KAEPhB,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAED,KAAE,CAAC,kBAAkB,EAAEiB,kBAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAA,QAAA,EAAG,WAAW,EAAA,CAAQ,CAChF,EAEDhB,cAAA,CAACiB,mBAAW,EAAA,EAAA,aAAA,EACE,MAAM,EAClB,SAAS,EAAElB,KAAE,CAAC,qCAAqC,EAAE,IAAI,KAAK,IAAI,GAAG,QAAQ,GAAG,wBAAwB,CAAC,EAAA,CACzG,IACG,EAAA,CACI,EAEbC,cAAA,CAACkB,2BAAW,IACV,SAAS,EAAC,QAAQ,EAClB,MAAM,EAAE,CAAC,EACT,gBAAgB,EAAE,CAAC,EACnB,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,IAAI,SAAS,EAAE,EAC3C,SAAS,EAAE,CAAC,KAAK,KACfnB,KAAE,CACA,oKAAoK,EACpK,KAAK,CAAC,UAAU;gCACd,wHAAwH,EAC1H,KAAK,CAAC,SAAS;gCACb,uHAAuH,EACzH,gBAAgB,CACjB,EAAA,QAAA,EAGHD,eAAA,CAACqB,0BAAU,EAAA,EAAC,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAAA,CACpCrB,eAAA,CAACsB,gCAAgB,EAAA,EAAC,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,cAAc,EAAA,QAAA,EAAA,CACvF,UAAU,KACTpB,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAED,KAAE,CAAC,2BAA2B,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,EAAA,QAAA,EACxEC,cAAA,CAACqB,+BAAe,EAAA,EAAA,YAAA,EAAY,QAAQ,EAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAA,IAAA,EAAA,QAAA,EAC1FvB,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,KAAE,CAAC,mBAAmB,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAA,QAAA,EAAA,CAC7DC,cAAA,CAACG,gBAAQ,EAAA,EAAA,WAAA,EAAA,IAAA,EAAA,aAAA,EAAuB,MAAM,EAAC,SAAS,EAAC,6BAA6B,EAAA,CAAG,EACjFH,cAAA,CAACsB,yBAAS,EAAA,EACR,WAAW,EAAC,QAAQ,EACpB,SAAS,EAAEvB,KAAE,CACX,qHAAqH,EACrH,WAAW,CAAC,IAAI,CAAC,CAAC,IAAI,CACvB,EAAA,CACD,CAAA,EAAA,CACE,EAAA,CACU,EAAA,CACd,CACP,EAEDC,cAAA,CAACuB,2BAAW,EAAA,EAAA,YAAA,EACE,KAAK,IAAI,SAAS,EAC9B,KAAK,EAAE,KAAK,EACZ,aAAa,EAAC,UAAU,EACxB,YAAY,EAAE,mBAAmB,EACjC,iBAAiB,EAAE,qBAAqB,EACxC,gBAAgB,EAAE,OAChBvB,cAAA,CAAC,qBAAqB,EAAA,EACpB,KAAK,EAAE,eAAe,EACtB,WAAW,EAAE,qBAAqB,EAClC,aAAa,EAAE,WAAW,GAAG,iBAAiB,GAAG,SAAS,EAAA,CAC1D,CACH,EACD,SAAS,EAAED,KAAE,CAAC,qCAAqC,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC,EAAA,QAAA,EAE5E,QAAQ,EAAA,CACG,CAAA,EAAA,CACG,EAElB,UAAU,IAAIC,cAAA,CAAC,iBAAiB,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAA,CAAI,CAAA,EAAA,CACzF,EAAA,CACD,CAAA,EAAA,CACI,EAEnB,IAAI,KACHA,cAAA,CAACwB,cAAQ,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAEzB,KAAE,CAAC,IAAI,KAAK,IAAI,IAAI,SAAS,CAAC,EAAA,QAAA,EACtE,IAAI,EAAA,CACI,CACZ,CAAA,EAAA,CACG,EAAA,CACiB;AAE7B,CAAC;AAED,MAAM,WAAW,GAAG;AAMpB,WAAW,CAAC,IAAI,GAAG0B,qBAAU;AAC7B,WAAW,CAAC,MAAM,GAAG,iBAAiB;AACtC,WAAW,CAAC,UAAU,GAAG,qBAAqB;;;;"}
|
|
@@ -79,7 +79,7 @@ export interface MultiSelectProps extends RefAttributes<HTMLDivElement>, CommonP
|
|
|
79
79
|
/** Supporting text displayed next to the selected count in the trigger. */
|
|
80
80
|
supportingText?: ReactNode;
|
|
81
81
|
}
|
|
82
|
-
declare const MultiSelectRoot: ({ items, children, size, selectedKeys, defaultSelectedKeys, onSelectionChange, isDisabled, isRequired, isInvalid, "aria-label": ariaLabel, placeholder, label, hint, tooltip, hideRequiredIndicator, popoverClassName, className, onReset, onSelectAll, showFooter, showSearch, emptyStateTitle, emptyStateDescription, selectedCountFormatter, supportingText, ref, }: MultiSelectProps) => import("react").JSX.Element;
|
|
82
|
+
declare const MultiSelectRoot: ({ items, children, size, selectedKeys, defaultSelectedKeys, onSelectionChange, isDisabled, isRequired, isInvalid, "aria-label": ariaLabel, placeholder, label, hint, tooltip, hideRequiredIndicator, popoverClassName, className, onReset, onSelectAll, showFooter, showSearch, emptyStateTitle, emptyStateDescription, selectedCountFormatter, supportingText, ref, "data-testid": dataTestId, }: MultiSelectProps) => import("react").JSX.Element;
|
|
83
83
|
declare const MultiSelect: typeof MultiSelectRoot & {
|
|
84
84
|
Item: typeof SelectItem;
|
|
85
85
|
Footer: typeof MultiSelectFooter;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Select/components/multi-select.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Select/components/multi-select.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAYvD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,KAAK,WAAW,EAAiB,KAAK,cAAc,EAAS,MAAM,iBAAiB,CAAC;AAoB9F,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,iBAAiB,GAAI,2CAAkD,sBAAsB,gCAalG,CAAC;AAEF,MAAM,WAAW,0BAA0B;IACzC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,qBAAqB,GAAI,mDAK5B,0BAA0B,gCAe5B,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,aAAa,CAAC,cAAc,CAAC,EAAE,WAAW;IAClF,2CAA2C;IAC3C,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,4CAA4C;IAC5C,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,cAAc,KAAK,SAAS,CAAC,CAAC;IAC5D,gDAAgD;IAChD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,gDAAgD;IAChD,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAC9C,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gFAAgF;IAChF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2DAA2D;IAC3D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iEAAiE;IACjE,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mEAAmE;IACnE,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACtD,2EAA2E;IAC3E,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,eAAe,GAAI,mYA4BtB,gBAAgB,gCA0KlB,CAAC;AAEF,QAAA,MAAM,WAAW,EAAsB,OAAO,eAAe,GAAG;IAC9D,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,MAAM,EAAE,OAAO,iBAAiB,CAAC;IACjC,UAAU,EAAE,OAAO,qBAAqB,CAAC;CAC1C,CAAC;AAMF,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -4,6 +4,7 @@ import { Button as Button$1 } from '@flipdish/ui-library/components/atoms/Button
|
|
|
4
4
|
import { FeaturedIcon } from '@flipdish/ui-library/components/atoms/FeaturedIcon';
|
|
5
5
|
import { Label, HintText } from '@flipdish/ui-library/components/atoms/Input';
|
|
6
6
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
7
|
+
import { useResolvedTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
7
8
|
import { useState, useRef, useCallback, Children, isValidElement } from 'react';
|
|
8
9
|
import { useFilter, DialogTrigger, Button, Popover, Dialog, Autocomplete, SearchField, Input, ListBox } from 'react-aria-components';
|
|
9
10
|
import { SelectItem } from './select-item.js';
|
|
@@ -29,9 +30,10 @@ const MultiSelectFooter = ({ size = 'sm', onReset, onSelectAll, className }) =>
|
|
|
29
30
|
return (jsxs("div", { className: cx('flex items-center justify-between border-t border-secondary p-3', className), children: [jsx(Button$1, { size: btnSize, color: "secondary", onClick: onReset, children: "Reset" }), jsx(Button$1, { size: btnSize, color: "secondary", onClick: onSelectAll, children: "Select all" })] }));
|
|
30
31
|
};
|
|
31
32
|
const MultiSelectEmptyState = ({ title = 'No results found', description = 'Please try a different search term.', onClearSearch, className, }) => (jsxs("div", { className: cx('flex flex-col items-center gap-3 px-4 py-4', className), children: [jsxs("div", { className: "flex flex-col items-center gap-3", children: [jsx(FeaturedIcon, { icon: SearchLg, size: "sm", color: "gray", theme: "modern" }), jsxs("div", { className: "flex flex-col items-center gap-0.5 text-center text-sm", children: [jsx("p", { className: "font-semibold text-primary", children: title }), jsx("p", { className: "text-tertiary", children: description })] })] }), onClearSearch && (jsx(Button$1, { size: "sm", color: "link-color", onClick: onClearSearch, children: "Clear search" }))] }));
|
|
32
|
-
const MultiSelectRoot = ({ items, children, size = 'md', selectedKeys, defaultSelectedKeys, onSelectionChange, isDisabled, isRequired, isInvalid, 'aria-label': ariaLabel, placeholder = 'Select', label, hint, tooltip, hideRequiredIndicator, popoverClassName, className, onReset, onSelectAll, showFooter = true, showSearch = true, emptyStateTitle, emptyStateDescription, selectedCountFormatter, supportingText, ref, }) => {
|
|
33
|
+
const MultiSelectRoot = ({ items, children, size = 'md', selectedKeys, defaultSelectedKeys, onSelectionChange, isDisabled, isRequired, isInvalid, 'aria-label': ariaLabel, placeholder = 'Select', label, hint, tooltip, hideRequiredIndicator, popoverClassName, className, onReset, onSelectAll, showFooter = true, showSearch = true, emptyStateTitle, emptyStateDescription, selectedCountFormatter, supportingText, ref, 'data-testid': dataTestId, }) => {
|
|
33
34
|
const { contains } = useFilter({ sensitivity: 'base' });
|
|
34
35
|
const [searchValue, setSearchValue] = useState('');
|
|
36
|
+
const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'multi-select', rootName: 'multi-select' });
|
|
35
37
|
const triggerRef = useRef(null);
|
|
36
38
|
const [popoverWidth, setPopoverWidth] = useState('');
|
|
37
39
|
const onResize = useCallback(() => {
|
|
@@ -78,7 +80,7 @@ const MultiSelectRoot = ({ items, children, size = 'md', selectedKeys, defaultSe
|
|
|
78
80
|
const handleClearSearch = useCallback(() => {
|
|
79
81
|
setSearchValue('');
|
|
80
82
|
}, []);
|
|
81
|
-
return (jsx(SelectContext.Provider, { value: { size }, children: jsxs("div", { ref: ref, className: cx('flex flex-col gap-1.5', className), children: [label && (jsx(Label, { isRequired: hideRequiredIndicator ? false : isRequired, isInvalid: isInvalid, tooltip: tooltip, children: label })), jsxs(DialogTrigger, { children: [jsx(Button, { ref: triggerRef, isDisabled: isDisabled, "aria-label": label ? undefined : ariaLabel, "aria-invalid": isInvalid || undefined, "aria-required": isRequired || undefined, onClick: onResize, className: (state) => cx('relative flex w-full cursor-pointer items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition duration-100 ease-linear ring-inset', (state.isFocusVisible || state.isPressed) && 'ring-2 ring-brand', state.isDisabled && 'cursor-not-allowed opacity-50'), children: jsxs("span", { className: cx('flex w-full items-center truncate text-left', sizes[size].root, '*:data-icon:shrink-0 *:data-icon:text-fg-quaternary'), children: [hasSelection ? (jsxs("span", { className: cx('flex items-center', sizes[size].textContainer), children: [jsx("span", { className: cx('font-medium text-primary', sizes[size].text), children: selectedCountFormatter ? selectedCountFormatter(selectedCount) : `${selectedCount} selected` }), supportingText && jsx("span", { className: cx('text-tertiary', sizes[size].text), children: supportingText })] })) : (jsx("span", { className: cx('text-placeholder', sizes[size].text), children: placeholder })), jsx(ChevronDown, { "aria-hidden": "true", className: cx('ml-auto shrink-0 text-fg-quaternary', size === 'lg' ? 'size-5' : 'size-4 stroke-[2.25px]') })] }) }), jsx(Popover, { placement: "bottom", offset: 4, containerPadding: 0, style: { width: popoverWidth || undefined }, className: (state) => cx('w-(--trigger-width) origin-(--trigger-anchor-point) overflow-hidden rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt outline-hidden will-change-transform', state.isEntering &&
|
|
83
|
+
return (jsx(SelectContext.Provider, { value: { size, testIdPrefix: rootTestId }, children: jsxs("div", { ref: ref, "data-testid": rootTestId, className: cx('flex flex-col gap-1.5', className), children: [label && (jsx(Label, { isRequired: hideRequiredIndicator ? false : isRequired, isInvalid: isInvalid, tooltip: tooltip, children: label })), jsxs(DialogTrigger, { children: [jsx(Button, { ref: triggerRef, "data-testid": joinTestId(rootTestId, 'trigger'), isDisabled: isDisabled, "aria-label": label ? undefined : ariaLabel, "aria-invalid": isInvalid || undefined, "aria-required": isRequired || undefined, onClick: onResize, className: (state) => cx('relative flex w-full cursor-pointer items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition duration-100 ease-linear ring-inset', (state.isFocusVisible || state.isPressed) && 'ring-2 ring-brand', state.isDisabled && 'cursor-not-allowed opacity-50'), children: jsxs("span", { className: cx('flex w-full items-center truncate text-left', sizes[size].root, '*:data-icon:shrink-0 *:data-icon:text-fg-quaternary'), children: [hasSelection ? (jsxs("span", { className: cx('flex items-center', sizes[size].textContainer), children: [jsx("span", { className: cx('font-medium text-primary', sizes[size].text), children: selectedCountFormatter ? selectedCountFormatter(selectedCount) : `${selectedCount} selected` }), supportingText && jsx("span", { className: cx('text-tertiary', sizes[size].text), children: supportingText })] })) : (jsx("span", { className: cx('text-placeholder', sizes[size].text), children: placeholder })), jsx(ChevronDown, { "aria-hidden": "true", className: cx('ml-auto shrink-0 text-fg-quaternary', size === 'lg' ? 'size-5' : 'size-4 stroke-[2.25px]') })] }) }), jsx(Popover, { placement: "bottom", offset: 4, containerPadding: 0, style: { width: popoverWidth || undefined }, className: (state) => cx('w-(--trigger-width) origin-(--trigger-anchor-point) overflow-hidden rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt outline-hidden will-change-transform', state.isEntering &&
|
|
82
84
|
'duration-150 ease-out animate-in fade-in placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5', state.isExiting &&
|
|
83
85
|
'duration-100 ease-in animate-out fade-out placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5', popoverClassName), children: jsxs(Dialog, { className: "outline-hidden", children: [jsxs(Autocomplete, { filter: contains, inputValue: searchValue, onInputChange: setSearchValue, children: [showSearch && (jsx("div", { className: cx('border-b border-secondary', searchSizes[size].wrapper), children: jsx(SearchField, { "aria-label": "Search", value: searchValue, onChange: setSearchValue, autoFocus: true, children: jsxs("div", { className: cx('flex items-center', searchSizes[size].root), children: [jsx(SearchLg, { "data-icon": true, "aria-hidden": "true", className: "shrink-0 text-fg-quaternary" }), jsx(Input, { placeholder: "Search", className: cx('w-full appearance-none bg-transparent text-primary caret-alpha-black/90 outline-hidden placeholder:text-placeholder', searchSizes[size].text) })] }) }) })), jsx(ListBox, { "aria-label": label || 'Options', items: items, selectionMode: "multiple", selectedKeys: currentSelectedKeys, onSelectionChange: handleSelectionChange, renderEmptyState: () => (jsx(MultiSelectEmptyState, { title: emptyStateTitle, description: emptyStateDescription, onClearSearch: searchValue ? handleClearSearch : undefined })), className: cx('overflow-y-auto py-1 outline-hidden', popoverMaxHeights[size]), children: children })] }), showFooter && jsx(MultiSelectFooter, { size: size, onReset: handleReset, onSelectAll: handleSelectAll })] }) })] }), hint && (jsx(HintText, { isInvalid: isInvalid, className: cx(size === 'sm' && 'text-xs'), children: hint }))] }) }));
|
|
84
86
|
};
|