@redsift/design-system 12.6.6 → 13.0.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/CONTRIBUTING.md +20 -8
- package/_internal/AppContainer.js +1 -1
- package/_internal/AppContainer.js.map +1 -1
- package/_internal/Button2.js +1 -1
- package/_internal/Button2.js.map +1 -1
- package/_internal/Checkbox2.js +8 -3
- package/_internal/Checkbox2.js.map +1 -1
- package/_internal/DetailedCard.js +17 -1352
- package/_internal/DetailedCard.js.map +1 -1
- package/_internal/DetailedCardCollapsibleSectionItems.js +14 -4
- package/_internal/DetailedCardCollapsibleSectionItems.js.map +1 -1
- package/_internal/DetailedCardSection.js +4 -2
- package/_internal/DetailedCardSection.js.map +1 -1
- package/_internal/IconButton.js +1 -1
- package/_internal/IconButton.js.map +1 -1
- package/_internal/Item2.js +2 -2
- package/_internal/Item2.js.map +1 -1
- package/_internal/LinkButton.js +1 -1
- package/_internal/LinkButton.js.map +1 -1
- package/_internal/Listbox2.js +5 -5
- package/_internal/Listbox2.js.map +1 -1
- package/_internal/NumberField.js +2 -0
- package/_internal/NumberField.js.map +1 -1
- package/_internal/Radio2.js +14 -7
- package/_internal/Radio2.js.map +1 -1
- package/_internal/RadioGroup.js +6 -1
- package/_internal/RadioGroup.js.map +1 -1
- package/_internal/SideNavigationMenu.js +9 -4
- package/_internal/SideNavigationMenu.js.map +1 -1
- package/_internal/SideNavigationMenuItem.js +2 -2
- package/_internal/SideNavigationMenuItem.js.map +1 -1
- package/_internal/Switch2.js +8 -3
- package/_internal/Switch2.js.map +1 -1
- package/_internal/Tabs2.js.map +1 -1
- package/_internal/TextArea.js +5 -1
- package/_internal/TextArea.js.map +1 -1
- package/_internal/TextField.js +5 -1
- package/_internal/TextField.js.map +1 -1
- package/_internal/context.js.map +1 -1
- package/_internal/filterComponents.js +3 -0
- package/_internal/filterComponents.js.map +1 -1
- package/_internal/getElementRef.js +25 -0
- package/_internal/getElementRef.js.map +1 -0
- package/_internal/getTextWidth.js +32 -0
- package/_internal/getTextWidth.js.map +1 -0
- package/_internal/isComponent.js +3 -0
- package/_internal/isComponent.js.map +1 -1
- package/_internal/reactVersion.js +14 -0
- package/_internal/reactVersion.js.map +1 -0
- package/_internal/styles4.js +72 -72
- package/_internal/styles4.js.map +1 -1
- package/_internal/types.js.map +1 -1
- package/_internal/useFocusOnListItem.js +1 -1
- package/_internal/useFocusOnListItem.js.map +1 -1
- package/_internal/useId.js +1 -1
- package/_internal/useId.js.map +1 -1
- package/_internal/useListboxItem.js.map +1 -1
- package/_internal/useSideNavigationMenuBar.js +2 -2
- package/_internal/useSideNavigationMenuBar.js.map +1 -1
- package/_internal/warnIfNoAccessibleLabelFound.js.map +1 -1
- package/index.d.ts +48 -24
- package/index.js +3 -31
- package/index.js.map +1 -1
- package/package.json +18 -26
|
@@ -2,6 +2,8 @@ import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBab
|
|
|
2
2
|
import React__default, { forwardRef } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import styled, { css } from 'styled-components';
|
|
5
|
+
import { T as Theme } from './colors.js';
|
|
6
|
+
import { u as useTheme } from './useTheme.js';
|
|
5
7
|
|
|
6
8
|
/**
|
|
7
9
|
* Component style.
|
|
@@ -9,19 +11,25 @@ import styled, { css } from 'styled-components';
|
|
|
9
11
|
const StyledDetailedCardCollapsibleSectionItems = styled.div`
|
|
10
12
|
${_ref => {
|
|
11
13
|
let {
|
|
12
|
-
$hideBackground
|
|
14
|
+
$hideBackground,
|
|
15
|
+
$theme
|
|
13
16
|
} = _ref;
|
|
14
17
|
return $hideBackground ? css`
|
|
15
18
|
background: none;
|
|
16
19
|
` : css`
|
|
17
|
-
background-color: var(--redsift-color-neutral-x-light-grey);
|
|
20
|
+
background-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'dark-grey' : 'x-light-grey'});
|
|
18
21
|
margin: 8px -16px;
|
|
19
22
|
padding: 8px 16px;
|
|
20
23
|
`;
|
|
21
24
|
}}
|
|
22
25
|
|
|
23
26
|
.redsift-detailed-card-collapsible-section-items__caption {
|
|
24
|
-
color: var(--redsift-color-neutral
|
|
27
|
+
color: var(--redsift-color-neutral-${_ref2 => {
|
|
28
|
+
let {
|
|
29
|
+
$theme
|
|
30
|
+
} = _ref2;
|
|
31
|
+
return $theme === Theme.dark ? 'white' : 'x-dark-grey';
|
|
32
|
+
}});
|
|
25
33
|
display: flex;
|
|
26
34
|
font-family: var(--redsift-typography-font-family-poppins);
|
|
27
35
|
font-size: 12px;
|
|
@@ -49,10 +57,12 @@ const DetailedCardCollapsibleSectionItems = /*#__PURE__*/forwardRef((props, ref)
|
|
|
49
57
|
hideBackground
|
|
50
58
|
} = props,
|
|
51
59
|
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
60
|
+
const theme = useTheme();
|
|
52
61
|
return /*#__PURE__*/React__default.createElement(StyledDetailedCardCollapsibleSectionItems, _extends({}, forwardedProps, {
|
|
53
62
|
className: classNames(DetailedCardCollapsibleSectionItems.className, className),
|
|
54
63
|
ref: ref,
|
|
55
|
-
$hideBackground: hideBackground
|
|
64
|
+
$hideBackground: hideBackground,
|
|
65
|
+
$theme: theme
|
|
56
66
|
}), children, caption ? /*#__PURE__*/React__default.createElement("div", {
|
|
57
67
|
className: `${DetailedCardCollapsibleSectionItems.className}__caption`
|
|
58
68
|
}, caption) : null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DetailedCardCollapsibleSectionItems.js","sources":["../../src/components/detailed-card-collapsible-section-items/styles.ts","../../src/components/detailed-card-collapsible-section-items/DetailedCardCollapsibleSectionItems.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledDetailedCardCollapsibleSectionItemsProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledDetailedCardCollapsibleSectionItems = styled.div<StyledDetailedCardCollapsibleSectionItemsProps>`\n ${({ $hideBackground }) =>\n $hideBackground\n ? css`\n background: none;\n `\n : css`\n background-color: var(--redsift-color-neutral-x-light-grey);\n margin: 8px -16px;\n padding: 8px 16px;\n `}\n\n .redsift-detailed-card-collapsible-section-items__caption {\n color: var(--redsift-color-neutral
|
|
1
|
+
{"version":3,"file":"DetailedCardCollapsibleSectionItems.js","sources":["../../src/components/detailed-card-collapsible-section-items/styles.ts","../../src/components/detailed-card-collapsible-section-items/DetailedCardCollapsibleSectionItems.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledDetailedCardCollapsibleSectionItemsProps } from './types';\nimport { Theme } from '../../types';\n\n/**\n * Component style.\n */\nexport const StyledDetailedCardCollapsibleSectionItems = styled.div<StyledDetailedCardCollapsibleSectionItemsProps>`\n ${({ $hideBackground, $theme }) =>\n $hideBackground\n ? css`\n background: none;\n `\n : css`\n background-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'dark-grey' : 'x-light-grey'});\n margin: 8px -16px;\n padding: 8px 16px;\n `}\n\n .redsift-detailed-card-collapsible-section-items__caption {\n color: var(--redsift-color-neutral-${({ $theme }) => ($theme === Theme.dark ? 'white' : 'x-dark-grey')});\n display: flex;\n font-family: var(--redsift-typography-font-family-poppins);\n font-size: 12px;\n font-weight: 300;\n justify-content: flex-end;\n line-height: 14px;\n margin: 8px 0px;\n padding-top: 8px;\n border-top: 1px solid var(--redsift-color-neutral-mid-grey);\n }\n`;\n","import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp } from '../../types';\nimport { DetailedCardCollapsibleSectionItemsProps } from './types';\nimport { StyledDetailedCardCollapsibleSectionItems } from './styles';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'DetailedCardCollapsibleSectionItems';\nconst CLASSNAME = 'redsift-detailed-card-collapsible-section-items';\n\n/**\n * The DetailedCardCollapsibleSectionItems Section component.\n */\nexport const DetailedCardCollapsibleSectionItems: Comp<DetailedCardCollapsibleSectionItemsProps, HTMLDivElement> =\n forwardRef((props, ref) => {\n const { caption, children, className, hideBackground, ...forwardedProps } = props;\n const theme = useTheme();\n\n return (\n <StyledDetailedCardCollapsibleSectionItems\n {...forwardedProps}\n className={classNames(DetailedCardCollapsibleSectionItems.className, className)}\n ref={ref as RefObject<HTMLDivElement>}\n $hideBackground={hideBackground}\n $theme={theme}\n >\n {children}\n {caption ? <div className={`${DetailedCardCollapsibleSectionItems.className}__caption`}>{caption}</div> : null}\n </StyledDetailedCardCollapsibleSectionItems>\n );\n });\nDetailedCardCollapsibleSectionItems.className = CLASSNAME;\nDetailedCardCollapsibleSectionItems.displayName = COMPONENT_NAME;\n"],"names":["StyledDetailedCardCollapsibleSectionItems","styled","div","_ref","$hideBackground","$theme","css","Theme","dark","_ref2","COMPONENT_NAME","CLASSNAME","DetailedCardCollapsibleSectionItems","forwardRef","props","ref","caption","children","className","hideBackground","forwardedProps","_objectWithoutProperties","_excluded","theme","useTheme","React","createElement","_extends","classNames","displayName"],"mappings":";;;;;;;AAIA;AACA;AACA;AACO,MAAMA,yCAAyC,GAAGC,MAAM,CAACC,GAAoD,CAAA;AACpH,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IAAEC,eAAe;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAF,IAAA,CAAA;EAAA,OAC5BC,eAAe,GACXE,GAAI,CAAA;AACZ;AACA,QAAA,CAAS,GACDA,GAAI,CAAA;AACZ,wDAA0DD,EAAAA,MAAM,KAAKE,KAAK,CAACC,IAAI,GAAG,WAAW,GAAG,cAAe,CAAA;AAC/G;AACA;AACA,QAAS,CAAA,CAAA;AAAA,CAAC,CAAA;AACV;AACA;AACA,uCAAA,EAAyCC,KAAA,IAAA;EAAA,IAAC;AAAEJ,IAAAA,MAAAA;AAAO,GAAC,GAAAI,KAAA,CAAA;EAAA,OAAMJ,MAAM,KAAKE,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,aAAa,CAAA;AAAA,CAAE,CAAA;AAC3G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;;ACvBD,MAAME,cAAc,GAAG,qCAAqC,CAAA;AAC5D,MAAMC,SAAS,GAAG,iDAAiD,CAAA;;AAEnE;AACA;AACA;AACO,MAAMC,mCAAmG,gBAC9GC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACzB,MAAM;MAAEC,OAAO;MAAEC,QAAQ;MAAEC,SAAS;AAAEC,MAAAA,cAAAA;AAAkC,KAAC,GAAGL,KAAK;AAAxBM,IAAAA,cAAc,GAAAC,wBAAA,CAAKP,KAAK,EAAAQ,SAAA,CAAA,CAAA;AACjF,EAAA,MAAMC,KAAK,GAAGC,QAAQ,EAAE,CAAA;EAExB,oBACEC,cAAA,CAAAC,aAAA,CAAC1B,yCAAyC,EAAA2B,QAAA,KACpCP,cAAc,EAAA;IAClBF,SAAS,EAAEU,UAAU,CAAChB,mCAAmC,CAACM,SAAS,EAAEA,SAAS,CAAE;AAChFH,IAAAA,GAAG,EAAEA,GAAiC;AACtCX,IAAAA,eAAe,EAAEe,cAAe;AAChCd,IAAAA,MAAM,EAAEkB,KAAAA;AAAM,GAAA,CAAA,EAEbN,QAAQ,EACRD,OAAO,gBAAGS,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKR,IAAAA,SAAS,EAAG,CAAA,EAAEN,mCAAmC,CAACM,SAAU,CAAA,SAAA,CAAA;AAAW,GAAA,EAAEF,OAAa,CAAC,GAAG,IACjE,CAAC,CAAA;AAEhD,CAAC,EAAC;AACJJ,mCAAmC,CAACM,SAAS,GAAGP,SAAS,CAAA;AACzDC,mCAAmC,CAACiB,WAAW,GAAGnB,cAAc;;;;"}
|
|
@@ -4,9 +4,10 @@ import classNames from 'classnames';
|
|
|
4
4
|
import { mdiChevronDown, mdiChevronUp } from '@redsift/icons';
|
|
5
5
|
import { i as isComponent } from './isComponent.js';
|
|
6
6
|
import styled, { css } from 'styled-components';
|
|
7
|
-
import { N as NotificationsColorPalette, e as ProductColorPalette } from './colors.js';
|
|
7
|
+
import { N as NotificationsColorPalette, e as ProductColorPalette, T as Theme } from './colors.js';
|
|
8
8
|
import { u as useMessageFormatter } from './useMessageFormatter.js';
|
|
9
9
|
import { D as DetailedCardCollapsibleSectionItems } from './DetailedCardCollapsibleSectionItems.js';
|
|
10
|
+
import { u as useTheme } from './useTheme.js';
|
|
10
11
|
import { F as Flexbox } from './Flexbox2.js';
|
|
11
12
|
import { S as Skeleton } from './Skeleton2.js';
|
|
12
13
|
import { T as Text } from './Text2.js';
|
|
@@ -129,6 +130,7 @@ const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
129
130
|
} = props,
|
|
130
131
|
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
131
132
|
const format = useMessageFormatter(intlMessages);
|
|
133
|
+
const theme = useTheme();
|
|
132
134
|
|
|
133
135
|
// If isCollapsible is explicitly true/false, use that value
|
|
134
136
|
// If undefined, auto-detect based on whether children contain collapsible sections
|
|
@@ -161,7 +163,7 @@ const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
161
163
|
gap: "8px"
|
|
162
164
|
}, typeof header === 'string' ? /*#__PURE__*/React__default.createElement(Text, {
|
|
163
165
|
className: `${DetailedCardSection.className}-header__title`,
|
|
164
|
-
color:
|
|
166
|
+
color: theme === Theme.dark ? 'white' : 'black',
|
|
165
167
|
fontSize: "18px",
|
|
166
168
|
lineHeight: "22px"
|
|
167
169
|
}, header) : /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DetailedCardSection.js","sources":["../../src/components/detailed-card-section/intl/index.ts","../../src/components/detailed-card-section/styles.ts","../../src/components/detailed-card-section/DetailedCardSection.tsx"],"sourcesContent":["import enUS from './en-US.json';\nimport frFR from './fr-FR.json';\n\nexport default {\n 'en-US': enUS,\n 'fr-FR': frFR,\n};\n","import styled, { css } from 'styled-components';\nimport { StyledDetailedCardSectionProps } from './types';\nimport { NotificationsColorPalette, ProductColorPalette } from '../../types';\n\n/**\n * Component style.\n */\nexport const StyledDetailedCardSection = styled.div<StyledDetailedCardSectionProps>`\n margin: 8px 0;\n\n &:first-child {\n margin-top: 0;\n }\n\n .redsift-detailed-card-section__header {\n ${({ $color }) =>\n $color && Object.keys(NotificationsColorPalette).indexOf($color) !== -1\n ? css`\n border-bottom: 1px solid var(--redsift-color-notifications-${$color}-primary);\n `\n : $color && Object.keys(ProductColorPalette).indexOf($color) !== -1\n ? css`\n border-bottom: 1px solid var(--redsift-color-product-${$color});\n `\n : css`\n border-bottom: 1px solid ${$color || css`var(--redsift-color-neutral-mid-grey)`};\n `}\n margin-bottom: 8px;\n }\n\n .redsift-detailed-card-section-header__title {\n font-size: 18px;\n font-weight: 500;\n lineheight: 22px;\n padding: 6px 0px;\n }\n\n .redsift-detailed-card-section-header__collapse-button {\n color: var(--redsift-color-neutral-x-dark-grey);\n }\n\n .redsift-detailed-card-collapsible-section-items {\n visibility: ${({ $isCollapsed }) => (!$isCollapsed ? 'visible' : 'hidden')};\n overflow: ${({ $isCollapsed }) => (!$isCollapsed ? 'visible' : 'hidden')};\n height: ${({ $isCollapsed }) => (!$isCollapsed ? 'auto' : '0px')};\n ${({ $isCollapsed }) =>\n $isCollapsed\n ? css`\n margin: unset;\n padding: unset;\n `\n : ''};\n }\n`;\n","import React, { forwardRef, ReactNode, RefObject, useState, useEffect } from 'react';\nimport classNames from 'classnames';\n\nimport { useMessageFormatter } from '../../react-aria/react-aria/i18n';\nimport intlMessages from './intl';\n\nimport { mdiChevronDown, mdiChevronUp } from '@redsift/icons';\nimport { Comp } from '../../types';\nimport { Flexbox } from '../flexbox';\nimport { IconButton } from '../icon-button';\nimport { DetailedCardSectionProps } from './types';\nimport { isComponent } from '../../utils/isComponent';\nimport { DetailedCardCollapsibleSectionItems } from '../detailed-card-collapsible-section-items';\nimport { StyledDetailedCardSection } from './styles';\nimport { Skeleton } from '../skeleton';\nimport { Text } from '../text';\nimport { Badge, BadgeVariant } from '../badge';\n\nconst COMPONENT_NAME = 'DetailedCardSection';\nconst CLASSNAME = 'redsift-detailed-card-section';\n\nconst hasCollapsibleChildren = (children: ReactNode): boolean => {\n let hasCollapsible = false;\n\n React.Children.map(children, (child) => {\n if (isComponent(DetailedCardCollapsibleSectionItems)(child)) {\n hasCollapsible = true;\n }\n });\n\n return hasCollapsible;\n};\n\n/**\n * The DetailedCardSection component.\n */\nexport const DetailedCardSection: Comp<DetailedCardSectionProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n badge,\n color,\n children,\n className,\n header,\n isCollapsed: propsIsCollapsed,\n isCollapsible: propsIsCollapsible,\n isLoading,\n ...forwardedProps\n } = props;\n\n const format = useMessageFormatter(intlMessages);\n\n // If isCollapsible is explicitly true/false, use that value\n // If undefined, auto-detect based on whether children contain collapsible sections\n const isCollapsible = propsIsCollapsible ?? hasCollapsibleChildren(children);\n\n const [isCollapsed, setIsCollapsed] = useState<boolean>(Boolean(propsIsCollapsed));\n\n // Sync internal state with prop changes (for collapse all/expand all functionality)\n useEffect(() => {\n if (propsIsCollapsed !== undefined) {\n setIsCollapsed(Boolean(propsIsCollapsed));\n }\n }, [propsIsCollapsed]);\n\n return (\n <StyledDetailedCardSection\n {...forwardedProps}\n className={classNames(DetailedCardSection.className, className)}\n ref={ref as RefObject<HTMLDivElement>}\n $color={color}\n $isCollapsed={isCollapsed}\n >\n <Flexbox justifyContent=\"space-between\" className={`${DetailedCardSection.className}__header`}>\n {header ? (\n <Skeleton.Text\n variant=\"body\"\n isLoaded={!isLoading}\n fontSize=\"18px\"\n lineHeight=\"22px\"\n marginTop=\"6px\"\n marginBottom=\"12px\"\n >\n <Flexbox alignItems=\"center\" gap=\"8px\">\n {typeof header === 'string' ? (\n <Text\n className={`${DetailedCardSection.className}-header__title`}\n color=\"black\"\n fontSize=\"18px\"\n lineHeight=\"22px\"\n >\n {header}\n </Text>\n ) : (\n <div className={`${DetailedCardSection.className}-header__title`}>{header}</div>\n )}\n {badge ? <Badge variant={BadgeVariant.standard} {...badge} /> : null}\n </Flexbox>\n </Skeleton.Text>\n ) : null}\n {isCollapsible && !isLoading ? (\n <IconButton\n marginLeft=\"auto\"\n aria-label={format(isCollapsed ? 'expand' : 'collapse')}\n aria-expanded={!isCollapsed}\n className={`${DetailedCardSection.className}-header__collapse-button`}\n color=\"grey\"\n icon={isCollapsed ? mdiChevronDown : mdiChevronUp}\n onClick={() => {\n setIsCollapsed((isCollapsed) => !isCollapsed);\n }}\n />\n ) : null}\n </Flexbox>\n\n {children}\n </StyledDetailedCardSection>\n );\n});\nDetailedCardSection.className = CLASSNAME;\nDetailedCardSection.displayName = COMPONENT_NAME;\n"],"names":["enUS","frFR","StyledDetailedCardSection","styled","div","_ref","$color","Object","keys","NotificationsColorPalette","indexOf","css","ProductColorPalette","_ref2","$isCollapsed","_ref3","_ref4","_ref5","COMPONENT_NAME","CLASSNAME","hasCollapsibleChildren","children","hasCollapsible","React","Children","map","child","isComponent","DetailedCardCollapsibleSectionItems","DetailedCardSection","forwardRef","props","ref","badge","color","className","header","isCollapsed","propsIsCollapsed","isCollapsible","propsIsCollapsible","isLoading","forwardedProps","_objectWithoutProperties","_excluded","format","useMessageFormatter","intlMessages","setIsCollapsed","useState","Boolean","useEffect","undefined","createElement","_extends","classNames","Flexbox","justifyContent","Skeleton","Text","variant","isLoaded","fontSize","lineHeight","marginTop","marginBottom","alignItems","gap","Badge","BadgeVariant","standard","IconButton","marginLeft","icon","mdiChevronDown","mdiChevronUp","onClick","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DetailedCardSection.js","sources":["../../src/components/detailed-card-section/intl/index.ts","../../src/components/detailed-card-section/styles.ts","../../src/components/detailed-card-section/DetailedCardSection.tsx"],"sourcesContent":["import enUS from './en-US.json';\nimport frFR from './fr-FR.json';\n\nexport default {\n 'en-US': enUS,\n 'fr-FR': frFR,\n};\n","import styled, { css } from 'styled-components';\nimport { StyledDetailedCardSectionProps } from './types';\nimport { NotificationsColorPalette, ProductColorPalette } from '../../types';\n\n/**\n * Component style.\n */\nexport const StyledDetailedCardSection = styled.div<StyledDetailedCardSectionProps>`\n margin: 8px 0;\n\n &:first-child {\n margin-top: 0;\n }\n\n .redsift-detailed-card-section__header {\n ${({ $color }) =>\n $color && Object.keys(NotificationsColorPalette).indexOf($color) !== -1\n ? css`\n border-bottom: 1px solid var(--redsift-color-notifications-${$color}-primary);\n `\n : $color && Object.keys(ProductColorPalette).indexOf($color) !== -1\n ? css`\n border-bottom: 1px solid var(--redsift-color-product-${$color});\n `\n : css`\n border-bottom: 1px solid ${$color || css`var(--redsift-color-neutral-mid-grey)`};\n `}\n margin-bottom: 8px;\n }\n\n .redsift-detailed-card-section-header__title {\n font-size: 18px;\n font-weight: 500;\n lineheight: 22px;\n padding: 6px 0px;\n }\n\n .redsift-detailed-card-section-header__collapse-button {\n color: var(--redsift-color-neutral-x-dark-grey);\n }\n\n .redsift-detailed-card-collapsible-section-items {\n visibility: ${({ $isCollapsed }) => (!$isCollapsed ? 'visible' : 'hidden')};\n overflow: ${({ $isCollapsed }) => (!$isCollapsed ? 'visible' : 'hidden')};\n height: ${({ $isCollapsed }) => (!$isCollapsed ? 'auto' : '0px')};\n ${({ $isCollapsed }) =>\n $isCollapsed\n ? css`\n margin: unset;\n padding: unset;\n `\n : ''};\n }\n`;\n","import React, { forwardRef, ReactNode, RefObject, useState, useEffect } from 'react';\nimport classNames from 'classnames';\n\nimport { useMessageFormatter } from '../../react-aria/react-aria/i18n';\nimport intlMessages from './intl';\n\nimport { mdiChevronDown, mdiChevronUp } from '@redsift/icons';\nimport { Comp, Theme } from '../../types';\nimport { Flexbox } from '../flexbox';\nimport { IconButton } from '../icon-button';\nimport { DetailedCardSectionProps } from './types';\nimport { isComponent } from '../../utils/isComponent';\nimport { DetailedCardCollapsibleSectionItems } from '../detailed-card-collapsible-section-items';\nimport { StyledDetailedCardSection } from './styles';\nimport { Skeleton } from '../skeleton';\nimport { Text } from '../text';\nimport { Badge, BadgeVariant } from '../badge';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'DetailedCardSection';\nconst CLASSNAME = 'redsift-detailed-card-section';\n\nconst hasCollapsibleChildren = (children: ReactNode): boolean => {\n let hasCollapsible = false;\n\n React.Children.map(children, (child) => {\n if (isComponent(DetailedCardCollapsibleSectionItems)(child)) {\n hasCollapsible = true;\n }\n });\n\n return hasCollapsible;\n};\n\n/**\n * The DetailedCardSection component.\n */\nexport const DetailedCardSection: Comp<DetailedCardSectionProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n badge,\n color,\n children,\n className,\n header,\n isCollapsed: propsIsCollapsed,\n isCollapsible: propsIsCollapsible,\n isLoading,\n ...forwardedProps\n } = props;\n\n const format = useMessageFormatter(intlMessages);\n const theme = useTheme();\n\n // If isCollapsible is explicitly true/false, use that value\n // If undefined, auto-detect based on whether children contain collapsible sections\n const isCollapsible = propsIsCollapsible ?? hasCollapsibleChildren(children);\n\n const [isCollapsed, setIsCollapsed] = useState<boolean>(Boolean(propsIsCollapsed));\n\n // Sync internal state with prop changes (for collapse all/expand all functionality)\n useEffect(() => {\n if (propsIsCollapsed !== undefined) {\n setIsCollapsed(Boolean(propsIsCollapsed));\n }\n }, [propsIsCollapsed]);\n\n return (\n <StyledDetailedCardSection\n {...forwardedProps}\n className={classNames(DetailedCardSection.className, className)}\n ref={ref as RefObject<HTMLDivElement>}\n $color={color}\n $isCollapsed={isCollapsed}\n >\n <Flexbox justifyContent=\"space-between\" className={`${DetailedCardSection.className}__header`}>\n {header ? (\n <Skeleton.Text\n variant=\"body\"\n isLoaded={!isLoading}\n fontSize=\"18px\"\n lineHeight=\"22px\"\n marginTop=\"6px\"\n marginBottom=\"12px\"\n >\n <Flexbox alignItems=\"center\" gap=\"8px\">\n {typeof header === 'string' ? (\n <Text\n className={`${DetailedCardSection.className}-header__title`}\n color={theme === Theme.dark ? 'white' : 'black'}\n fontSize=\"18px\"\n lineHeight=\"22px\"\n >\n {header}\n </Text>\n ) : (\n <div className={`${DetailedCardSection.className}-header__title`}>{header}</div>\n )}\n {badge ? <Badge variant={BadgeVariant.standard} {...badge} /> : null}\n </Flexbox>\n </Skeleton.Text>\n ) : null}\n {isCollapsible && !isLoading ? (\n <IconButton\n marginLeft=\"auto\"\n aria-label={format(isCollapsed ? 'expand' : 'collapse')}\n aria-expanded={!isCollapsed}\n className={`${DetailedCardSection.className}-header__collapse-button`}\n color=\"grey\"\n icon={isCollapsed ? mdiChevronDown : mdiChevronUp}\n onClick={() => {\n setIsCollapsed((isCollapsed) => !isCollapsed);\n }}\n />\n ) : null}\n </Flexbox>\n\n {children}\n </StyledDetailedCardSection>\n );\n});\nDetailedCardSection.className = CLASSNAME;\nDetailedCardSection.displayName = COMPONENT_NAME;\n"],"names":["enUS","frFR","StyledDetailedCardSection","styled","div","_ref","$color","Object","keys","NotificationsColorPalette","indexOf","css","ProductColorPalette","_ref2","$isCollapsed","_ref3","_ref4","_ref5","COMPONENT_NAME","CLASSNAME","hasCollapsibleChildren","children","hasCollapsible","React","Children","map","child","isComponent","DetailedCardCollapsibleSectionItems","DetailedCardSection","forwardRef","props","ref","badge","color","className","header","isCollapsed","propsIsCollapsed","isCollapsible","propsIsCollapsible","isLoading","forwardedProps","_objectWithoutProperties","_excluded","format","useMessageFormatter","intlMessages","theme","useTheme","setIsCollapsed","useState","Boolean","useEffect","undefined","createElement","_extends","classNames","Flexbox","justifyContent","Skeleton","Text","variant","isLoaded","fontSize","lineHeight","marginTop","marginBottom","alignItems","gap","Theme","dark","Badge","BadgeVariant","standard","IconButton","marginLeft","icon","mdiChevronDown","mdiChevronUp","onClick","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,mBAAe;AACb,EAAA,OAAO,EAAEA,IAAI;AACb,EAAA,OAAO,EAAEC,IAAAA;AACX,CAAC;;ACFD;AACA;AACA;AACO,MAAMC,yBAAyB,GAAGC,MAAM,CAACC,GAAoC,CAAA;AACpF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OACXC,MAAM,IAAIC,MAAM,CAACC,IAAI,CAACC,yBAAyB,CAAC,CAACC,OAAO,CAACJ,MAAM,CAAC,KAAK,CAAC,CAAC,GACnEK,GAAI,CAAA;AACd,uEAAA,EAAyEL,MAAO,CAAA;AAChF,UAAA,CAAW,GACDA,MAAM,IAAIC,MAAM,CAACC,IAAI,CAACI,mBAAmB,CAAC,CAACF,OAAO,CAACJ,MAAM,CAAC,KAAK,CAAC,CAAC,GACjEK,GAAI,CAAA;AACd,iEAAA,EAAmEL,MAAO,CAAA;AAC1E,UAAA,CAAW,GACDK,GAAI,CAAA;AACd,qCAAuCL,EAAAA,MAAM,IAAIK,GAAI,CAAuC,qCAAA,CAAA,CAAA;AAC5F,UAAW,CAAA,CAAA;AAAA,CAAC,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAA,EAAkBE,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,YAAAA;AAAa,GAAC,GAAAD,KAAA,CAAA;AAAA,EAAA,OAAM,CAACC,YAAY,GAAG,SAAS,GAAG,QAAQ,CAAA;AAAA,CAAE,CAAA;AAC/E,cAAA,EAAgBC,KAAA,IAAA;EAAA,IAAC;AAAED,IAAAA,YAAAA;AAAa,GAAC,GAAAC,KAAA,CAAA;AAAA,EAAA,OAAM,CAACD,YAAY,GAAG,SAAS,GAAG,QAAQ,CAAA;AAAA,CAAE,CAAA;AAC7E,YAAA,EAAcE,KAAA,IAAA;EAAA,IAAC;AAAEF,IAAAA,YAAAA;AAAa,GAAC,GAAAE,KAAA,CAAA;AAAA,EAAA,OAAM,CAACF,YAAY,GAAG,MAAM,GAAG,KAAK,CAAA;AAAA,CAAE,CAAA;AACrE,IAAA,EAAMG,KAAA,IAAA;EAAA,IAAC;AAAEH,IAAAA,YAAAA;AAAa,GAAC,GAAAG,KAAA,CAAA;EAAA,OACjBH,YAAY,GACRH,GAAI,CAAA;AACd;AACA;AACA,UAAA,CAAW,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACb;AACA,CAAC;;;AClCD,MAAMO,cAAc,GAAG,qBAAqB,CAAA;AAC5C,MAAMC,SAAS,GAAG,+BAA+B,CAAA;AAEjD,MAAMC,sBAAsB,GAAIC,QAAmB,IAAc;EAC/D,IAAIC,cAAc,GAAG,KAAK,CAAA;EAE1BC,cAAK,CAACC,QAAQ,CAACC,GAAG,CAACJ,QAAQ,EAAGK,KAAK,IAAK;AACtC,IAAA,IAAIC,WAAW,CAACC,mCAAmC,CAAC,CAACF,KAAK,CAAC,EAAE;AAC3DJ,MAAAA,cAAc,GAAG,IAAI,CAAA;AACvB,KAAA;AACF,GAAC,CAAC,CAAA;AAEF,EAAA,OAAOA,cAAc,CAAA;AACvB,CAAC,CAAA;;AAED;AACA;AACA;AACO,MAAMO,mBAAmE,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC5G,MAAM;MACJC,KAAK;MACLC,KAAK;MACLb,QAAQ;MACRc,SAAS;MACTC,MAAM;AACNC,MAAAA,WAAW,EAAEC,gBAAgB;AAC7BC,MAAAA,aAAa,EAAEC,kBAAkB;AACjCC,MAAAA,SAAAA;AAEF,KAAC,GAAGV,KAAK;AADJW,IAAAA,cAAc,GAAAC,wBAAA,CACfZ,KAAK,EAAAa,SAAA,CAAA,CAAA;AAET,EAAA,MAAMC,MAAM,GAAGC,mBAAmB,CAACC,YAAY,CAAC,CAAA;AAChD,EAAA,MAAMC,KAAK,GAAGC,QAAQ,EAAE,CAAA;;AAExB;AACA;EACA,MAAMV,aAAa,GAAGC,kBAAkB,KAAlBA,IAAAA,IAAAA,kBAAkB,KAAlBA,KAAAA,CAAAA,GAAAA,kBAAkB,GAAIpB,sBAAsB,CAACC,QAAQ,CAAC,CAAA;AAE5E,EAAA,MAAM,CAACgB,WAAW,EAAEa,cAAc,CAAC,GAAGC,QAAQ,CAAUC,OAAO,CAACd,gBAAgB,CAAC,CAAC,CAAA;;AAElF;AACAe,EAAAA,SAAS,CAAC,MAAM;IACd,IAAIf,gBAAgB,KAAKgB,SAAS,EAAE;AAClCJ,MAAAA,cAAc,CAACE,OAAO,CAACd,gBAAgB,CAAC,CAAC,CAAA;AAC3C,KAAA;AACF,GAAC,EAAE,CAACA,gBAAgB,CAAC,CAAC,CAAA;EAEtB,oBACEf,cAAA,CAAAgC,aAAA,CAACrD,yBAAyB,EAAAsD,QAAA,KACpBd,cAAc,EAAA;IAClBP,SAAS,EAAEsB,UAAU,CAAC5B,mBAAmB,CAACM,SAAS,EAAEA,SAAS,CAAE;AAChEH,IAAAA,GAAG,EAAEA,GAAiC;AACtC1B,IAAAA,MAAM,EAAE4B,KAAM;AACdpB,IAAAA,YAAY,EAAEuB,WAAAA;AAAY,GAAA,CAAA,eAE1Bd,cAAA,CAAAgC,aAAA,CAACG,OAAO,EAAA;AAACC,IAAAA,cAAc,EAAC,eAAe;AAACxB,IAAAA,SAAS,EAAG,CAAA,EAAEN,mBAAmB,CAACM,SAAU,CAAA,QAAA,CAAA;GACjFC,EAAAA,MAAM,gBACLb,cAAA,CAAAgC,aAAA,CAACK,QAAQ,CAACC,IAAI,EAAA;AACZC,IAAAA,OAAO,EAAC,MAAM;IACdC,QAAQ,EAAE,CAACtB,SAAU;AACrBuB,IAAAA,QAAQ,EAAC,MAAM;AACfC,IAAAA,UAAU,EAAC,MAAM;AACjBC,IAAAA,SAAS,EAAC,KAAK;AACfC,IAAAA,YAAY,EAAC,MAAA;AAAM,GAAA,eAEnB5C,cAAA,CAAAgC,aAAA,CAACG,OAAO,EAAA;AAACU,IAAAA,UAAU,EAAC,QAAQ;AAACC,IAAAA,GAAG,EAAC,KAAA;GAC9B,EAAA,OAAOjC,MAAM,KAAK,QAAQ,gBACzBb,cAAA,CAAAgC,aAAA,CAACM,IAAI,EAAA;AACH1B,IAAAA,SAAS,EAAG,CAAA,EAAEN,mBAAmB,CAACM,SAAU,CAAgB,cAAA,CAAA;IAC5DD,KAAK,EAAEc,KAAK,KAAKsB,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,OAAQ;AAChDP,IAAAA,QAAQ,EAAC,MAAM;AACfC,IAAAA,UAAU,EAAC,MAAA;AAAM,GAAA,EAEhB7B,MACG,CAAC,gBAEPb,cAAA,CAAAgC,aAAA,CAAA,KAAA,EAAA;AAAKpB,IAAAA,SAAS,EAAG,CAAA,EAAEN,mBAAmB,CAACM,SAAU,CAAA,cAAA,CAAA;GAAkBC,EAAAA,MAAY,CAChF,EACAH,KAAK,gBAAGV,cAAA,CAAAgC,aAAA,CAACiB,KAAK,EAAAhB,QAAA,CAAA;IAACM,OAAO,EAAEW,YAAY,CAACC,QAAAA;AAAS,GAAA,EAAKzC,KAAK,CAAG,CAAC,GAAG,IACzD,CACI,CAAC,GACd,IAAI,EACPM,aAAa,IAAI,CAACE,SAAS,gBAC1BlB,cAAA,CAAAgC,aAAA,CAACoB,UAAU,EAAA;AACTC,IAAAA,UAAU,EAAC,MAAM;AACjB,IAAA,YAAA,EAAY/B,MAAM,CAACR,WAAW,GAAG,QAAQ,GAAG,UAAU,CAAE;AACxD,IAAA,eAAA,EAAe,CAACA,WAAY;AAC5BF,IAAAA,SAAS,EAAG,CAAA,EAAEN,mBAAmB,CAACM,SAAU,CAA0B,wBAAA,CAAA;AACtED,IAAAA,KAAK,EAAC,MAAM;AACZ2C,IAAAA,IAAI,EAAExC,WAAW,GAAGyC,cAAc,GAAGC,YAAa;IAClDC,OAAO,EAAEA,MAAM;AACb9B,MAAAA,cAAc,CAAEb,WAAW,IAAK,CAACA,WAAW,CAAC,CAAA;AAC/C,KAAA;AAAE,GACH,CAAC,GACA,IACG,CAAC,EAEThB,QACwB,CAAC,CAAA;AAEhC,CAAC,EAAC;AACFQ,mBAAmB,CAACM,SAAS,GAAGhB,SAAS,CAAA;AACzCU,mBAAmB,CAACoD,WAAW,GAAG/D,cAAc;;;;"}
|
package/_internal/IconButton.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sources":["../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useRef } from 'react';\nimport classNames from 'classnames';\nimport { ButtonsColorPalette, Comp, getStylingTransientProps } from '../../types';\nimport { Icon } from '../icon';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { StyledIconButton } from './styles';\nimport { IconButtonProps, IconButtonVariant } from './types';\nimport { Spinner } from '../../components/spinner';\nimport { useTheme } from '../theme';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { StyledGradientBorder } from '../gradient-border';\n\nconst COMPONENT_NAME = 'IconButton';\nconst CLASSNAME = 'redsift-icon-button';\n\n/**\n * IconButton is a button containing only an icon, without text.\n * Ideal for toolbars, action menus, or compact UI elements.\n *\n * Variants: `primary`, `secondary`, `unstyled`\n * Colors: `primary`, `success`, `warning`, `error`, `info`, `question`, `neutral`, `radar`\n *\n * **Accessibility:** Always provide `aria-label` since there's no visible text.\n *\n * @example\n * // Basic icon button\n * import { mdiPencil } from '@redsift/icons';\n * <IconButton icon={mdiPencil} aria-label=\"Edit\" onClick={handleEdit} />\n *\n * @example\n * // All variants\n * <IconButton icon={mdiPlus} aria-label=\"Add\" variant=\"primary\" />\n * <IconButton icon={mdiPencil} aria-label=\"Edit\" variant=\"secondary\" />\n * <IconButton icon={mdiDelete} aria-label=\"Delete\" variant=\"unstyled\" />\n *\n * @example\n * // With color\n * <IconButton icon={mdiDelete} aria-label=\"Delete\" color=\"error\" />\n * <IconButton icon={mdiCheck} aria-label=\"Approve\" color=\"success\" />\n *\n * @example\n * // States\n * <IconButton icon={mdiRefresh} aria-label=\"Refresh\" isLoading />\n * <IconButton icon={mdiPlus} aria-label=\"Add\" isDisabled />\n * <IconButton icon={mdiStar} aria-label=\"Favorite\" isActive />\n *\n * @example\n * // In a toolbar or group\n * <Flexbox gap=\"4px\">\n * <IconButton icon={mdiBold} aria-label=\"Bold\" variant=\"secondary\" />\n * <IconButton icon={mdiItalic} aria-label=\"Italic\" variant=\"secondary\" />\n * <IconButton icon={mdiUnderline} aria-label=\"Underline\" variant=\"secondary\" />\n * </Flexbox>\n */\nexport const IconButton: Comp<IconButtonProps, HTMLButtonElement> = forwardRef((props, ref) => {\n const buttonRef = ref || useRef<HTMLButtonElement>();\n\n const { transientProps, otherProps } = getStylingTransientProps(props);\n\n const {\n className,\n color: propsColor,\n disabled,\n icon,\n iconProps,\n isActive,\n isDisabled: propsIsDisabled,\n isHovered,\n isLoading,\n theme: propsTheme,\n variant: propsVariant,\n ...forwardedProps\n } = otherProps;\n const isDisabled = props.isLoading || propsIsDisabled || disabled;\n\n const theme = useTheme(propsTheme);\n const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n const variant = Object.values(IconButtonVariant).includes(propsVariant!) ? propsVariant : 'unstyled';\n\n warnIfNoAccessibleLabelFound(props, undefined, 'IconButton');\n const isGradient = color === ButtonsColorPalette.radar;\n\n return (\n <ConditionalWrapper\n condition={isGradient && variant === IconButtonVariant.secondary}\n wrapper={(children) => (\n <StyledGradientBorder\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isHovered={isHovered}\n $theme={theme}\n >\n {children}\n </StyledGradientBorder>\n )}\n >\n <StyledIconButton\n type=\"button\"\n {...forwardedProps}\n {...transientProps}\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isGradient={isGradient}\n $isHovered={isHovered}\n $isLoading={isLoading}\n $theme={theme}\n $variant={variant}\n aria-disabled={isDisabled}\n className={classNames(IconButton.className, className)}\n disabled={isDisabled}\n ref={buttonRef as RefObject<HTMLButtonElement>}\n >\n {isLoading ? (\n <Spinner size=\"small\" color={variant === IconButtonVariant.primary ? 'grey-l1' : 'grey-l2'} />\n ) : (\n <Icon {...iconProps} icon={icon} />\n )}\n </StyledIconButton>\n </ConditionalWrapper>\n );\n});\nIconButton.className = CLASSNAME;\nIconButton.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","IconButton","forwardRef","props","ref","buttonRef","useRef","transientProps","otherProps","getStylingTransientProps","className","color","propsColor","disabled","icon","iconProps","isActive","isDisabled","propsIsDisabled","isHovered","isLoading","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","IconButtonVariant","warnIfNoAccessibleLabelFound","
|
|
1
|
+
{"version":3,"file":"IconButton.js","sources":["../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useRef } from 'react';\nimport classNames from 'classnames';\nimport { ButtonsColorPalette, Comp, getStylingTransientProps } from '../../types';\nimport { Icon } from '../icon';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { StyledIconButton } from './styles';\nimport { IconButtonProps, IconButtonVariant } from './types';\nimport { Spinner } from '../../components/spinner';\nimport { useTheme } from '../theme';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { StyledGradientBorder } from '../gradient-border';\n\nconst COMPONENT_NAME = 'IconButton';\nconst CLASSNAME = 'redsift-icon-button';\n\n/**\n * IconButton is a button containing only an icon, without text.\n * Ideal for toolbars, action menus, or compact UI elements.\n *\n * Variants: `primary`, `secondary`, `unstyled`\n * Colors: `primary`, `success`, `warning`, `error`, `info`, `question`, `neutral`, `radar`\n *\n * **Accessibility:** Always provide `aria-label` since there's no visible text.\n *\n * @example\n * // Basic icon button\n * import { mdiPencil } from '@redsift/icons';\n * <IconButton icon={mdiPencil} aria-label=\"Edit\" onClick={handleEdit} />\n *\n * @example\n * // All variants\n * <IconButton icon={mdiPlus} aria-label=\"Add\" variant=\"primary\" />\n * <IconButton icon={mdiPencil} aria-label=\"Edit\" variant=\"secondary\" />\n * <IconButton icon={mdiDelete} aria-label=\"Delete\" variant=\"unstyled\" />\n *\n * @example\n * // With color\n * <IconButton icon={mdiDelete} aria-label=\"Delete\" color=\"error\" />\n * <IconButton icon={mdiCheck} aria-label=\"Approve\" color=\"success\" />\n *\n * @example\n * // States\n * <IconButton icon={mdiRefresh} aria-label=\"Refresh\" isLoading />\n * <IconButton icon={mdiPlus} aria-label=\"Add\" isDisabled />\n * <IconButton icon={mdiStar} aria-label=\"Favorite\" isActive />\n *\n * @example\n * // In a toolbar or group\n * <Flexbox gap=\"4px\">\n * <IconButton icon={mdiBold} aria-label=\"Bold\" variant=\"secondary\" />\n * <IconButton icon={mdiItalic} aria-label=\"Italic\" variant=\"secondary\" />\n * <IconButton icon={mdiUnderline} aria-label=\"Underline\" variant=\"secondary\" />\n * </Flexbox>\n */\nexport const IconButton: Comp<IconButtonProps, HTMLButtonElement> = forwardRef((props, ref) => {\n const buttonRef = ref || useRef<HTMLButtonElement>(undefined);\n\n const { transientProps, otherProps } = getStylingTransientProps(props);\n\n const {\n className,\n color: propsColor,\n disabled,\n icon,\n iconProps,\n isActive,\n isDisabled: propsIsDisabled,\n isHovered,\n isLoading,\n theme: propsTheme,\n variant: propsVariant,\n ...forwardedProps\n } = otherProps;\n const isDisabled = props.isLoading || propsIsDisabled || disabled;\n\n const theme = useTheme(propsTheme);\n const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n const variant = Object.values(IconButtonVariant).includes(propsVariant!) ? propsVariant : 'unstyled';\n\n warnIfNoAccessibleLabelFound(props, undefined, 'IconButton');\n const isGradient = color === ButtonsColorPalette.radar;\n\n return (\n <ConditionalWrapper\n condition={isGradient && variant === IconButtonVariant.secondary}\n wrapper={(children) => (\n <StyledGradientBorder\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isHovered={isHovered}\n $theme={theme}\n >\n {children}\n </StyledGradientBorder>\n )}\n >\n <StyledIconButton\n type=\"button\"\n {...forwardedProps}\n {...transientProps}\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isGradient={isGradient}\n $isHovered={isHovered}\n $isLoading={isLoading}\n $theme={theme}\n $variant={variant}\n aria-disabled={isDisabled}\n className={classNames(IconButton.className, className)}\n disabled={isDisabled}\n ref={buttonRef as RefObject<HTMLButtonElement>}\n >\n {isLoading ? (\n <Spinner size=\"small\" color={variant === IconButtonVariant.primary ? 'grey-l1' : 'grey-l2'} />\n ) : (\n <Icon {...iconProps} icon={icon} />\n )}\n </StyledIconButton>\n </ConditionalWrapper>\n );\n});\nIconButton.className = CLASSNAME;\nIconButton.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","IconButton","forwardRef","props","ref","buttonRef","useRef","undefined","transientProps","otherProps","getStylingTransientProps","className","color","propsColor","disabled","icon","iconProps","isActive","isDisabled","propsIsDisabled","isHovered","isLoading","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","IconButtonVariant","warnIfNoAccessibleLabelFound","isGradient","radar","React","createElement","ConditionalWrapper","condition","secondary","wrapper","children","StyledGradientBorder","$color","$isActive","$isDisabled","$isHovered","$theme","StyledIconButton","_extends","type","$isGradient","$isLoading","$variant","classNames","Spinner","size","primary","Icon","displayName"],"mappings":"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"}
|
package/_internal/Item2.js
CHANGED
|
@@ -221,7 +221,7 @@ const RenderedListboxItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
221
221
|
} = otherProps,
|
|
222
222
|
forwardedProps = _objectWithoutProperties(otherProps, _excluded);
|
|
223
223
|
const id = propsId !== null && propsId !== void 0 ? propsId : value;
|
|
224
|
-
const _ref = useRef();
|
|
224
|
+
const _ref = useRef(undefined);
|
|
225
225
|
const divRef = ref !== null && ref !== void 0 ? ref : _ref;
|
|
226
226
|
const {
|
|
227
227
|
tabIndex,
|
|
@@ -301,7 +301,7 @@ const RenderedMenuItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
301
301
|
forwardedProps = _objectWithoutProperties(otherProps, _excluded2);
|
|
302
302
|
const [_id] = useId();
|
|
303
303
|
const id = propsId !== null && propsId !== void 0 ? propsId : _id;
|
|
304
|
-
const _ref = useRef();
|
|
304
|
+
const _ref = useRef(undefined);
|
|
305
305
|
const divRef = ref !== null && ref !== void 0 ? ref : _ref;
|
|
306
306
|
const linkRef = useRef(null);
|
|
307
307
|
const isLinkMenuItem = isComponent('Link')(children);
|
package/_internal/Item2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Item2.js","sources":["../../src/components/item/styles.ts","../../src/components/item/useMenuItem.ts","../../src/components/item/Item.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseContainer } from '../shared';\nimport { StyledItemProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledItem = styled.div<StyledItemProps>`\n min-height: 36px;\n position: relative;\n width: 100%;\n padding: 8px 16px;\n\n ${baseContainer}\n\n align-items: center;\n background: none;\n border: none;\n box-sizing: border-box;\n cursor: pointer;\n display: inline-flex;\n\n > a {\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n color: inherit;\n }\n\n ${({ $color, $isActive, $isDisabled, $isGradient, $isHovered, $hasBorder, $theme }) => css`\n ${!$isGradient\n ? css`\n background-color: var(\n --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled ? 'grey' : $color}-background-${$isActive ? 'active' : $isHovered || $isDisabled ? 'hover' : 'default'}\n );\n `\n : css`\n background: var(\n --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled ? 'grey' : $color}-background-${$isActive ? 'active' : $isHovered || $isDisabled ? 'hover' : 'default'}\n );\n `}\n\n ${$hasBorder\n ? css`\n border: 1px solid\n var(\n --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled ? 'grey' : $color}-text-${$isActive ? 'active' : $isHovered || $isDisabled ? 'hover' : 'default'}\n );\n `\n : ''}\n `}\n\n &:hover {\n outline: none;\n cursor: pointer;\n\n ${({ $color, $isDisabled, $isGradient, $hasBorder, $theme }) => css`\n ${$isDisabled ? 'cursor: inherit;' : ''}\n\n ${!$isDisabled\n ? css`\n ${!$isGradient\n ? css`\n background-color: var(\n --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-background-hover\n );\n\n ${$hasBorder\n ? css`\n border: 1px solid\n var(--redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-hover);\n `\n : ''}\n `\n : css`\n background: var(\n --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-background-hover\n );\n `}\n `\n : ''}\n `};\n }\n\n &:active {\n outline: none;\n\n ${({ $color, $hasBorder, $isHovered, $isDisabled, $isGradient, $theme }) => css`\n ${!$isDisabled\n ? css`\n ${!$isGradient\n ? css`\n background-color: var(\n --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled\n ? 'grey'\n : $color}-background-${$isHovered ? 'hover' : 'active'}\n );\n\n ${$hasBorder\n ? css`\n border: 1px solid\n var(\n --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled\n ? 'grey'\n : $color}-text-${$isHovered ? 'hover' : 'active'}\n );\n `\n : ''}\n `\n : css`\n background: var(\n --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled\n ? 'grey'\n : $color}-background-${$isHovered ? 'hover' : 'active'}\n );\n `}\n `\n : ''}\n `};\n }\n`;\n","import { useCallback, useEffect, RefObject, KeyboardEvent } from 'react';\nimport { UseFocusWithinGroupProps, useFocusOnListItem } from '../focus-within-group';\n\nexport function useMenuItem(props: {\n domElementRef: RefObject<Element>;\n id: string;\n isDisabled?: boolean;\n onClick?: () => void;\n isLinkMenuItem?: boolean;\n linkRef?: RefObject<HTMLAnchorElement>;\n}): UseFocusWithinGroupProps & {\n isDisabled?: boolean;\n} {\n const { domElementRef, id, isDisabled, onClick, isLinkMenuItem, linkRef } = props;\n\n const {\n tabIndex,\n isFocused,\n handleKeyDown: handleFocusKeyDown,\n handleClick: handleFocusClick,\n } = useFocusOnListItem({ domElementRef, isDisabled: isDisabled!, id });\n\n const handleKeyDown = useCallback((event: KeyboardEvent) => {\n const code = event.code;\n if (code === 'Enter' || code === 'Space') {\n if (isLinkMenuItem) {\n linkRef?.current?.click();\n } else {\n onClick?.();\n }\n }\n handleFocusKeyDown(event);\n }, []);\n\n const handleClick = useCallback(() => {\n handleFocusClick();\n onClick?.();\n }, []);\n\n useEffect(() => {\n if (isFocused && domElementRef.current) {\n (domElementRef as RefObject<SVGElement | HTMLElement>).current?.focus();\n }\n }, [isFocused]);\n\n return {\n tabIndex,\n isFocused,\n isDisabled,\n handleKeyDown,\n handleClick,\n };\n}\n","import React, { forwardRef, RefObject, useContext, useRef } from 'react';\nimport classNames from 'classnames';\nimport { ButtonsColorPalette, Comp, getContainerStylingTransientProps } from '../../types';\nimport { ItemProps } from './types';\nimport { StyledItem } from './styles';\nimport { useListboxItem } from '../listbox/useListboxItem';\nimport { FocusWithinGroupContext } from '../focus-within-group';\nimport { useMenuItem } from './useMenuItem';\nimport { isComponent, useId } from '../../utils';\nimport { useTheme } from '../theme';\nimport { Flexbox } from '../flexbox';\nimport { Icon } from '../icon';\nimport { Text } from '../text';\nimport { mdiCheckboxBlankOutline, mdiCheckboxMarked } from '@redsift/icons';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { StyledGradientBorder } from '../gradient-border';\n\nconst COMPONENT_NAME = 'Item';\nconst CLASSNAME = 'redsift-item';\n\nexport const RenderedListboxItem: Comp<Omit<ItemProps, 'value'> & Required<Pick<ItemProps, 'value'>>, HTMLElement> =\n forwardRef((props, ref) => {\n const { transientProps, otherProps } = getContainerStylingTransientProps(props);\n\n const {\n borderRadius = '0',\n children,\n className,\n color: propsColor,\n defaultSelected,\n id: propsId,\n isActive,\n isDisabled: propsIsDisabled,\n isHovered,\n isSelected: propsIsSelected,\n hasBorder,\n hasCheckbox,\n rowIndex,\n theme: propsTheme,\n value,\n ...forwardedProps\n } = otherProps;\n const id = propsId ?? value;\n const _ref = useRef<HTMLElement>();\n const divRef = ref ?? _ref;\n\n const { tabIndex, isFocused, isSelected, isDisabled, handleKeyDown, handleClick } = useListboxItem({\n domElementRef: divRef as RefObject<Element>,\n value,\n id,\n isDisabled: propsIsDisabled!,\n propsIsSelected: propsIsSelected ?? defaultSelected,\n rowIndex,\n });\n\n const theme = useTheme(propsTheme);\n const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n const isGradient = color === ButtonsColorPalette.radar;\n\n return (\n <ConditionalWrapper\n condition={isGradient}\n wrapper={(children) => (\n <StyledGradientBorder\n $borderRadius={borderRadius}\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isHovered={isHovered}\n $theme={theme}\n width=\"auto\"\n >\n {children}\n </StyledGradientBorder>\n )}\n >\n <StyledItem\n role=\"option\"\n {...forwardedProps}\n {...transientProps}\n id={id}\n $borderRadius={borderRadius}\n $color={color}\n $hasBorder={hasBorder}\n $hasCheckbox={hasCheckbox}\n $isActive={isActive || isSelected}\n $isDisabled={isDisabled}\n $isGradient={isGradient}\n $isHovered={isHovered || isFocused}\n $theme={theme}\n aria-selected={isSelected}\n aria-disabled={isDisabled}\n className={classNames(Item.className, className)}\n onClick={isDisabled ? undefined : handleClick}\n ref={divRef as RefObject<HTMLDivElement>}\n onKeyDown={handleKeyDown}\n tabIndex={tabIndex}\n >\n {hasCheckbox ? (\n <Flexbox>\n {isSelected ? (\n <Icon color={isDisabled ? 'grey' : color} icon={mdiCheckboxMarked} />\n ) : (\n <Icon color=\"question\" icon={mdiCheckboxBlankOutline} />\n )}\n {children ? children : <Text>{value}</Text>}\n </Flexbox>\n ) : (\n children ?? value\n )}\n </StyledItem>\n </ConditionalWrapper>\n );\n });\n\nconst RenderedMenuItem: Comp<Omit<ItemProps, 'value'>, HTMLElement> = forwardRef((props, ref) => {\n const { transientProps, otherProps } = getContainerStylingTransientProps(props);\n\n const {\n borderRadius = '0',\n children,\n className,\n color: propsColor,\n hasBorder,\n id: propsId,\n isActive,\n isDisabled: propsIsDisabled,\n isHovered,\n theme: propsTheme,\n onClick,\n ...forwardedProps\n } = otherProps;\n const [_id] = useId();\n const id = propsId ?? _id;\n const _ref = useRef<HTMLElement>();\n const divRef = ref ?? _ref;\n const linkRef = useRef<HTMLAnchorElement>(null);\n\n const isLinkMenuItem = isComponent('Link')(children);\n const { tabIndex, isFocused, isDisabled, handleKeyDown, handleClick } = useMenuItem({\n domElementRef: divRef as RefObject<Element>,\n id,\n isDisabled: propsIsDisabled!,\n onClick: onClick as any,\n isLinkMenuItem,\n linkRef,\n });\n\n const theme = useTheme(propsTheme);\n const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n const isGradient = color === ButtonsColorPalette.radar;\n\n return (\n <ConditionalWrapper\n condition={isGradient}\n wrapper={(children) => (\n <StyledGradientBorder\n $borderRadius={borderRadius}\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isHovered={isHovered}\n $theme={theme}\n width=\"auto\"\n >\n {children}\n </StyledGradientBorder>\n )}\n >\n <StyledItem\n as=\"li\"\n role={isLinkMenuItem ? 'none' : 'menuitem'}\n {...forwardedProps}\n {...transientProps}\n id={id}\n $borderRadius={borderRadius}\n $color={color}\n $hasBorder={hasBorder}\n $hasCheckbox={false}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isGradient={isGradient}\n $isHovered={isHovered || isFocused}\n $theme={theme}\n aria-disabled={isDisabled}\n className={classNames(Item.className, className)}\n onClick={isDisabled ? undefined : handleClick}\n ref={divRef as RefObject<HTMLLIElement>}\n onKeyDown={handleKeyDown}\n tabIndex={tabIndex}\n >\n {isLinkMenuItem\n ? React.cloneElement(children, {\n role: 'menuitem',\n ref: linkRef,\n })\n : children}\n </StyledItem>\n </ConditionalWrapper>\n );\n});\n\n/**\n * The Item component.\n */\nexport const Item: Comp<ItemProps, HTMLElement> = forwardRef((props, ref) => {\n const { value } = props;\n const focusContext = useContext(FocusWithinGroupContext);\n const isListbox = focusContext.state.listRole === 'listbox';\n\n if (!focusContext.state.filter) {\n return isListbox ? (\n <RenderedListboxItem {...props} value={props.value!} ref={ref} />\n ) : (\n <RenderedMenuItem {...props} ref={ref} />\n );\n }\n\n const { value: filterValue, type, caseSensitive } = focusContext.state.filter;\n\n if (!filterValue) {\n return isListbox ? (\n <RenderedListboxItem {...props} value={props.value!} ref={ref} />\n ) : (\n <RenderedMenuItem {...props} ref={ref} />\n );\n } else if (\n caseSensitive &&\n ((type === 'startsWith' && value!.startsWith(filterValue)) ||\n (type === 'contains' && value!.includes(filterValue)) ||\n (type === 'endsWith' && value!.endsWith(filterValue)))\n ) {\n return isListbox ? (\n <RenderedListboxItem {...props} value={props.value!} ref={ref} />\n ) : (\n <RenderedMenuItem {...props} ref={ref} />\n );\n } else if (\n !caseSensitive &&\n ((type === 'startsWith' && value!.toLowerCase().startsWith(filterValue.toLowerCase())) ||\n (type === 'contains' && value!.toLowerCase().includes(filterValue.toLowerCase())) ||\n (type === 'endsWith' && value!.toLowerCase().endsWith(filterValue.toLowerCase())))\n ) {\n return isListbox ? (\n <RenderedListboxItem {...props} value={props.value!} ref={ref} />\n ) : (\n <RenderedMenuItem {...props} ref={ref} />\n );\n }\n\n return null;\n});\nItem.className = CLASSNAME;\nItem.displayName = COMPONENT_NAME;\n"],"names":["StyledItem","styled","div","baseContainer","_ref","$color","$isActive","$isDisabled","$isGradient","$isHovered","$hasBorder","$theme","css","_ref2","_ref3","useMenuItem","props","domElementRef","id","isDisabled","onClick","isLinkMenuItem","linkRef","tabIndex","isFocused","handleKeyDown","handleFocusKeyDown","handleClick","handleFocusClick","useFocusOnListItem","useCallback","event","code","_linkRef$current","current","click","useEffect","_current","focus","COMPONENT_NAME","CLASSNAME","RenderedListboxItem","forwardRef","ref","transientProps","otherProps","getContainerStylingTransientProps","borderRadius","children","className","color","propsColor","defaultSelected","propsId","isActive","propsIsDisabled","isHovered","isSelected","propsIsSelected","hasBorder","hasCheckbox","rowIndex","theme","propsTheme","value","forwardedProps","_objectWithoutProperties","_excluded","useRef","divRef","useListboxItem","useTheme","Object","values","ButtonsColorPalette","includes","isGradient","radar","React","createElement","ConditionalWrapper","condition","wrapper","StyledGradientBorder","$borderRadius","width","_extends","role","$hasCheckbox","classNames","Item","undefined","onKeyDown","Flexbox","Icon","icon","mdiCheckboxMarked","mdiCheckboxBlankOutline","Text","RenderedMenuItem","_excluded2","_id","useId","isComponent","as","cloneElement","focusContext","useContext","FocusWithinGroupContext","isListbox","state","listRole","filter","filterValue","type","caseSensitive","startsWith","endsWith","toLowerCase","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;AAIA;AACA;AACA;AACaA,MAAAA,UAAU,GAAGC,MAAM,CAACC,GAAqB,CAAA;AACtD;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,aAAc,CAAA;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IAAEC,MAAM;IAAEC,SAAS;IAAEC,WAAW;IAAEC,WAAW;IAAEC,UAAU;IAAEC,UAAU;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAP,IAAA,CAAA;AAAA,EAAA,OAAKQ,GAAI,CAAA;AAC7F,IAAM,EAAA,CAACJ,WAAW,GACVI,GAAI,CAAA;AACZ;AACA,4BAAA,EAA8BD,MAAO,CAAuCJ,qCAAAA,EAAAA,WAAW,GAAG,MAAM,GAAGF,MAAO,CAAcC,YAAAA,EAAAA,SAAS,GAAG,QAAQ,GAAGG,UAAU,IAAIF,WAAW,GAAG,OAAO,GAAG,SAAU,CAAA;AAC/L;AACA,QAAA,CAAS,GACDK,GAAI,CAAA;AACZ;AACA,4BAAA,EAA8BD,MAAO,CAAuCJ,qCAAAA,EAAAA,WAAW,GAAG,MAAM,GAAGF,MAAO,CAAcC,YAAAA,EAAAA,SAAS,GAAG,QAAQ,GAAGG,UAAU,IAAIF,WAAW,GAAG,OAAO,GAAG,SAAU,CAAA;AAC/L;AACA,QAAU,CAAA,CAAA;AACV;AACA,IAAMG,EAAAA,UAAU,GACRE,GAAI,CAAA;AACZ;AACA;AACA,8BAAA,EAAgCD,MAAO,CAAuCJ,qCAAAA,EAAAA,WAAW,GAAG,MAAM,GAAGF,MAAO,CAAQC,MAAAA,EAAAA,SAAS,GAAG,QAAQ,GAAGG,UAAU,IAAIF,WAAW,GAAG,OAAO,GAAG,SAAU,CAAA;AAC3L;AACA,QAAA,CAAS,GACD,EAAG,CAAA;AACX,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMM,KAAA,IAAA;EAAA,IAAC;IAAER,MAAM;IAAEE,WAAW;IAAEC,WAAW;IAAEE,UAAU;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAE,KAAA,CAAA;AAAA,EAAA,OAAKD,GAAI,CAAA;AACxE,MAAA,EAAQL,WAAW,GAAG,kBAAkB,GAAG,EAAG,CAAA;AAC9C;AACA,MAAQ,EAAA,CAACA,WAAW,GACVK,GAAI,CAAA;AACd,YAAc,EAAA,CAACJ,WAAW,GACVI,GAAI,CAAA;AACpB;AACA,oCAAsCD,EAAAA,MAAO,wCAAuCN,MAAO,CAAA;AAC3F;AACA;AACA,kBAAoBK,EAAAA,UAAU,GACRE,GAAI,CAAA;AAC1B;AACA,8CAAgDD,EAAAA,MAAO,wCAAuCN,MAAO,CAAA;AACrG,sBAAA,CAAuB,GACD,EAAG,CAAA;AACzB,gBAAA,CAAiB,GACDO,GAAI,CAAA;AACpB;AACA,oCAAsCD,EAAAA,MAAO,wCAAuCN,MAAO,CAAA;AAC3F;AACA,gBAAkB,CAAA,CAAA;AAClB,UAAA,CAAW,GACD,EAAG,CAAA;AACb,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMS,KAAA,IAAA;EAAA,IAAC;IAAET,MAAM;IAAEK,UAAU;IAAED,UAAU;IAAEF,WAAW;IAAEC,WAAW;AAAEG,IAAAA,MAAAA;AAAO,GAAC,GAAAG,KAAA,CAAA;AAAA,EAAA,OAAKF,GAAI,CAAA;AACpF,MAAQ,EAAA,CAACL,WAAW,GACVK,GAAI,CAAA;AACd,YAAc,EAAA,CAACJ,WAAW,GACVI,GAAI,CAAA;AACpB;AACA,oCAAA,EAAsCD,MAAO,CAAA,qCAAA,EAAuCJ,WAAW,GACrE,MAAM,GACNF,MAAO,CAAA,YAAA,EAAcI,UAAU,GAAG,OAAO,GAAG,QAAS,CAAA;AAC/E;AACA;AACA,kBAAoBC,EAAAA,UAAU,GACRE,GAAI,CAAA;AAC1B;AACA;AACA,4CAAA,EAA8CD,MAAO,CAAA,qCAAA,EAAuCJ,WAAW,GACrE,MAAM,GACNF,MAAO,CAAA,MAAA,EAAQI,UAAU,GAAG,OAAO,GAAG,QAAS,CAAA;AACjF;AACA,sBAAA,CAAuB,GACD,EAAG,CAAA;AACzB,gBAAA,CAAiB,GACDG,GAAI,CAAA;AACpB;AACA,oCAAA,EAAsCD,MAAO,CAAA,qCAAA,EAAuCJ,WAAW,GACrE,MAAM,GACNF,MAAO,CAAA,YAAA,EAAcI,UAAU,GAAG,OAAO,GAAG,QAAS,CAAA;AAC/E;AACA,gBAAkB,CAAA,CAAA;AAClB,UAAA,CAAW,GACD,EAAG,CAAA;AACb,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN;AACA;;ACrHO,SAASM,WAAWA,CAACC,KAO3B,EAEC;EACA,MAAM;IAAEC,aAAa;IAAEC,EAAE;IAAEC,UAAU;IAAEC,OAAO;IAAEC,cAAc;AAAEC,IAAAA,OAAAA;AAAQ,GAAC,GAAGN,KAAK,CAAA;EAEjF,MAAM;IACJO,QAAQ;IACRC,SAAS;AACTC,IAAAA,aAAa,EAAEC,kBAAkB;AACjCC,IAAAA,WAAW,EAAEC,gBAAAA;GACd,GAAGC,kBAAkB,CAAC;IAAEZ,aAAa;AAAEE,IAAAA,UAAU,EAAEA,UAAW;AAAED,IAAAA,EAAAA;AAAG,GAAC,CAAC,CAAA;AAEtE,EAAA,MAAMO,aAAa,GAAGK,WAAW,CAAEC,KAAoB,IAAK;AAC1D,IAAA,MAAMC,IAAI,GAAGD,KAAK,CAACC,IAAI,CAAA;AACvB,IAAA,IAAIA,IAAI,KAAK,OAAO,IAAIA,IAAI,KAAK,OAAO,EAAE;AACxC,MAAA,IAAIX,cAAc,EAAE;AAAA,QAAA,IAAAY,gBAAA,CAAA;AAClBX,QAAAA,OAAO,KAAPA,IAAAA,IAAAA,OAAO,KAAAW,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,CAAAA,gBAAA,GAAPX,OAAO,CAAEY,OAAO,MAAA,IAAA,IAAAD,gBAAA,KAAhBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,gBAAA,CAAkBE,KAAK,EAAE,CAAA;AAC3B,OAAC,MAAM;AACLf,QAAAA,OAAO,KAAPA,IAAAA,IAAAA,OAAO,KAAPA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,OAAO,EAAI,CAAA;AACb,OAAA;AACF,KAAA;IACAM,kBAAkB,CAACK,KAAK,CAAC,CAAA;GAC1B,EAAE,EAAE,CAAC,CAAA;AAEN,EAAA,MAAMJ,WAAW,GAAGG,WAAW,CAAC,MAAM;AACpCF,IAAAA,gBAAgB,EAAE,CAAA;AAClBR,IAAAA,OAAO,KAAPA,IAAAA,IAAAA,OAAO,KAAPA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,OAAO,EAAI,CAAA;GACZ,EAAE,EAAE,CAAC,CAAA;AAENgB,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,IAAIZ,SAAS,IAAIP,aAAa,CAACiB,OAAO,EAAE;AAAA,MAAA,IAAAG,QAAA,CAAA;AACtC,MAAA,CAAAA,QAAA,GAACpB,aAAa,CAAyCiB,OAAO,MAAA,IAAA,IAAAG,QAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAA9DA,QAAA,CAAgEC,KAAK,EAAE,CAAA;AACzE,KAAA;AACF,GAAC,EAAE,CAACd,SAAS,CAAC,CAAC,CAAA;EAEf,OAAO;IACLD,QAAQ;IACRC,SAAS;IACTL,UAAU;IACVM,aAAa;AACbE,IAAAA,WAAAA;GACD,CAAA;AACH;;;;ACnCA,MAAMY,cAAc,GAAG,MAAM,CAAA;AAC7B,MAAMC,SAAS,GAAG,cAAc,CAAA;AAEzB,MAAMC,mBAAqG,gBAChHC,UAAU,CAAC,CAAC1B,KAAK,EAAE2B,GAAG,KAAK;EACzB,MAAM;IAAEC,cAAc;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,iCAAiC,CAAC9B,KAAK,CAAC,CAAA;EAE/E,MAAM;AACJ+B,MAAAA,YAAY,GAAG,GAAG;MAClBC,QAAQ;MACRC,SAAS;AACTC,MAAAA,KAAK,EAAEC,UAAU;MACjBC,eAAe;AACflC,MAAAA,EAAE,EAAEmC,OAAO;MACXC,QAAQ;AACRnC,MAAAA,UAAU,EAAEoC,eAAe;MAC3BC,SAAS;AACTC,MAAAA,UAAU,EAAEC,eAAe;MAC3BC,SAAS;MACTC,WAAW;MACXC,QAAQ;AACRC,MAAAA,KAAK,EAAEC,UAAU;AACjBC,MAAAA,KAAAA;AAEF,KAAC,GAAGnB,UAAU;AADToB,IAAAA,cAAc,GAAAC,wBAAA,CACfrB,UAAU,EAAAsB,SAAA,CAAA,CAAA;EACd,MAAMjD,EAAE,GAAGmC,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAPA,KAAAA,CAAAA,GAAAA,OAAO,GAAIW,KAAK,CAAA;AAC3B,EAAA,MAAM5D,IAAI,GAAGgE,MAAM,EAAe,CAAA;EAClC,MAAMC,MAAM,GAAG1B,GAAG,KAAA,IAAA,IAAHA,GAAG,KAAHA,KAAAA,CAAAA,GAAAA,GAAG,GAAIvC,IAAI,CAAA;EAE1B,MAAM;IAAEmB,QAAQ;IAAEC,SAAS;IAAEiC,UAAU;IAAEtC,UAAU;IAAEM,aAAa;AAAEE,IAAAA,WAAAA;GAAa,GAAG2C,cAAc,CAAC;AACjGrD,IAAAA,aAAa,EAAEoD,MAA4B;IAC3CL,KAAK;IACL9C,EAAE;AACFC,IAAAA,UAAU,EAAEoC,eAAgB;AAC5BG,IAAAA,eAAe,EAAEA,eAAe,KAAA,IAAA,IAAfA,eAAe,KAAfA,KAAAA,CAAAA,GAAAA,eAAe,GAAIN,eAAe;AACnDS,IAAAA,QAAAA;AACF,GAAC,CAAC,CAAA;AAEF,EAAA,MAAMC,KAAK,GAAGS,QAAQ,CAACR,UAAU,CAAC,CAAA;AAClC,EAAA,MAAMb,KAAK,GAAGsB,MAAM,CAACC,MAAM,CAACC,mBAAmB,CAAC,CAACC,QAAQ,CAACxB,UAAW,CAAC,GAAGA,UAAU,GAAG,SAAS,CAAA;AAC/F,EAAA,MAAMyB,UAAU,GAAG1B,KAAK,KAAKwB,mBAAmB,CAACG,KAAK,CAAA;AAEtD,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAACC,kBAAkB,EAAA;AACjBC,IAAAA,SAAS,EAAEL,UAAW;AACtBM,IAAAA,OAAO,EAAGlC,QAAQ,iBAChB8B,cAAA,CAAAC,aAAA,CAACI,oBAAoB,EAAA;AACnBC,MAAAA,aAAa,EAAErC,YAAa;AAC5B1C,MAAAA,MAAM,EAAE6C,KAAM;AACd5C,MAAAA,SAAS,EAAEgD,QAAS;AACpB/C,MAAAA,WAAW,EAAEY,UAAW;AACxBV,MAAAA,UAAU,EAAE+C,SAAU;AACtB7C,MAAAA,MAAM,EAAEmD,KAAM;AACduB,MAAAA,KAAK,EAAC,MAAA;AAAM,KAAA,EAEXrC,QACmB,CAAA;AACtB,GAAA,eAEF8B,cAAA,CAAAC,aAAA,CAAC/E,UAAU,EAAAsF,QAAA,CAAA;AACTC,IAAAA,IAAI,EAAC,QAAA;GACDtB,EAAAA,cAAc,EACdrB,cAAc,EAAA;AAClB1B,IAAAA,EAAE,EAAEA,EAAG;AACPkE,IAAAA,aAAa,EAAErC,YAAa;AAC5B1C,IAAAA,MAAM,EAAE6C,KAAM;AACdxC,IAAAA,UAAU,EAAEiD,SAAU;AACtB6B,IAAAA,YAAY,EAAE5B,WAAY;IAC1BtD,SAAS,EAAEgD,QAAQ,IAAIG,UAAW;AAClClD,IAAAA,WAAW,EAAEY,UAAW;AACxBX,IAAAA,WAAW,EAAEoE,UAAW;IACxBnE,UAAU,EAAE+C,SAAS,IAAIhC,SAAU;AACnCb,IAAAA,MAAM,EAAEmD,KAAM;AACd,IAAA,eAAA,EAAeL,UAAW;AAC1B,IAAA,eAAA,EAAetC,UAAW;IAC1B8B,SAAS,EAAEwC,UAAU,CAACC,IAAI,CAACzC,SAAS,EAAEA,SAAS,CAAE;AACjD7B,IAAAA,OAAO,EAAED,UAAU,GAAGwE,SAAS,GAAGhE,WAAY;AAC9CgB,IAAAA,GAAG,EAAE0B,MAAoC;AACzCuB,IAAAA,SAAS,EAAEnE,aAAc;AACzBF,IAAAA,QAAQ,EAAEA,QAAAA;AAAS,GAAA,CAAA,EAElBqC,WAAW,gBACVkB,cAAA,CAAAC,aAAA,CAACc,OAAO,EACLpC,IAAAA,EAAAA,UAAU,gBACTqB,cAAA,CAAAC,aAAA,CAACe,IAAI,EAAA;AAAC5C,IAAAA,KAAK,EAAE/B,UAAU,GAAG,MAAM,GAAG+B,KAAM;AAAC6C,IAAAA,IAAI,EAAEC,iBAAAA;AAAkB,GAAE,CAAC,gBAErElB,cAAA,CAAAC,aAAA,CAACe,IAAI,EAAA;AAAC5C,IAAAA,KAAK,EAAC,UAAU;AAAC6C,IAAAA,IAAI,EAAEE,uBAAAA;GAA0B,CACxD,EACAjD,QAAQ,GAAGA,QAAQ,gBAAG8B,cAAA,CAAAC,aAAA,CAACmB,IAAI,EAAA,IAAA,EAAElC,KAAY,CACnC,CAAC,GAEVhB,QAAQ,KAARA,IAAAA,IAAAA,QAAQ,cAARA,QAAQ,GAAIgB,KAEJ,CACM,CAAC,CAAA;AAEzB,CAAC,EAAC;AAEJ,MAAMmC,gBAA6D,gBAAGzD,UAAU,CAAC,CAAC1B,KAAK,EAAE2B,GAAG,KAAK;EAC/F,MAAM;IAAEC,cAAc;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,iCAAiC,CAAC9B,KAAK,CAAC,CAAA;EAE/E,MAAM;AACJ+B,MAAAA,YAAY,GAAG,GAAG;MAClBC,QAAQ;MACRC,SAAS;AACTC,MAAAA,KAAK,EAAEC,UAAU;MACjBQ,SAAS;AACTzC,MAAAA,EAAE,EAAEmC,OAAO;MACXC,QAAQ;AACRnC,MAAAA,UAAU,EAAEoC,eAAe;MAC3BC,SAAS;AACTM,MAAAA,KAAK,EAAEC,UAAU;AACjB3C,MAAAA,OAAAA;AAEF,KAAC,GAAGyB,UAAU;AADToB,IAAAA,cAAc,GAAAC,wBAAA,CACfrB,UAAU,EAAAuD,UAAA,CAAA,CAAA;AACd,EAAA,MAAM,CAACC,GAAG,CAAC,GAAGC,KAAK,EAAE,CAAA;EACrB,MAAMpF,EAAE,GAAGmC,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAPA,KAAAA,CAAAA,GAAAA,OAAO,GAAIgD,GAAG,CAAA;AACzB,EAAA,MAAMjG,IAAI,GAAGgE,MAAM,EAAe,CAAA;EAClC,MAAMC,MAAM,GAAG1B,GAAG,KAAA,IAAA,IAAHA,GAAG,KAAHA,KAAAA,CAAAA,GAAAA,GAAG,GAAIvC,IAAI,CAAA;AAC1B,EAAA,MAAMkB,OAAO,GAAG8C,MAAM,CAAoB,IAAI,CAAC,CAAA;EAE/C,MAAM/C,cAAc,GAAGkF,WAAW,CAAC,MAAM,CAAC,CAACvD,QAAQ,CAAC,CAAA;EACpD,MAAM;IAAEzB,QAAQ;IAAEC,SAAS;IAAEL,UAAU;IAAEM,aAAa;AAAEE,IAAAA,WAAAA;GAAa,GAAGZ,WAAW,CAAC;AAClFE,IAAAA,aAAa,EAAEoD,MAA4B;IAC3CnD,EAAE;AACFC,IAAAA,UAAU,EAAEoC,eAAgB;AAC5BnC,IAAAA,OAAO,EAAEA,OAAc;IACvBC,cAAc;AACdC,IAAAA,OAAAA;AACF,GAAC,CAAC,CAAA;AAEF,EAAA,MAAMwC,KAAK,GAAGS,QAAQ,CAACR,UAAU,CAAC,CAAA;AAClC,EAAA,MAAMb,KAAK,GAAGsB,MAAM,CAACC,MAAM,CAACC,mBAAmB,CAAC,CAACC,QAAQ,CAACxB,UAAW,CAAC,GAAGA,UAAU,GAAG,SAAS,CAAA;AAC/F,EAAA,MAAMyB,UAAU,GAAG1B,KAAK,KAAKwB,mBAAmB,CAACG,KAAK,CAAA;AAEtD,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAACC,kBAAkB,EAAA;AACjBC,IAAAA,SAAS,EAAEL,UAAW;AACtBM,IAAAA,OAAO,EAAGlC,QAAQ,iBAChB8B,cAAA,CAAAC,aAAA,CAACI,oBAAoB,EAAA;AACnBC,MAAAA,aAAa,EAAErC,YAAa;AAC5B1C,MAAAA,MAAM,EAAE6C,KAAM;AACd5C,MAAAA,SAAS,EAAEgD,QAAS;AACpB/C,MAAAA,WAAW,EAAEY,UAAW;AACxBV,MAAAA,UAAU,EAAE+C,SAAU;AACtB7C,MAAAA,MAAM,EAAEmD,KAAM;AACduB,MAAAA,KAAK,EAAC,MAAA;AAAM,KAAA,EAEXrC,QACmB,CAAA;AACtB,GAAA,eAEF8B,cAAA,CAAAC,aAAA,CAAC/E,UAAU,EAAAsF,QAAA,CAAA;AACTkB,IAAAA,EAAE,EAAC,IAAI;AACPjB,IAAAA,IAAI,EAAElE,cAAc,GAAG,MAAM,GAAG,UAAA;GAC5B4C,EAAAA,cAAc,EACdrB,cAAc,EAAA;AAClB1B,IAAAA,EAAE,EAAEA,EAAG;AACPkE,IAAAA,aAAa,EAAErC,YAAa;AAC5B1C,IAAAA,MAAM,EAAE6C,KAAM;AACdxC,IAAAA,UAAU,EAAEiD,SAAU;AACtB6B,IAAAA,YAAY,EAAE,KAAM;AACpBlF,IAAAA,SAAS,EAAEgD,QAAS;AACpB/C,IAAAA,WAAW,EAAEY,UAAW;AACxBX,IAAAA,WAAW,EAAEoE,UAAW;IACxBnE,UAAU,EAAE+C,SAAS,IAAIhC,SAAU;AACnCb,IAAAA,MAAM,EAAEmD,KAAM;AACd,IAAA,eAAA,EAAe3C,UAAW;IAC1B8B,SAAS,EAAEwC,UAAU,CAACC,IAAI,CAACzC,SAAS,EAAEA,SAAS,CAAE;AACjD7B,IAAAA,OAAO,EAAED,UAAU,GAAGwE,SAAS,GAAGhE,WAAY;AAC9CgB,IAAAA,GAAG,EAAE0B,MAAmC;AACxCuB,IAAAA,SAAS,EAAEnE,aAAc;AACzBF,IAAAA,QAAQ,EAAEA,QAAAA;AAAS,GAAA,CAAA,EAElBF,cAAc,gBACXyD,cAAK,CAAC2B,YAAY,CAACzD,QAAQ,EAAE;AAC3BuC,IAAAA,IAAI,EAAE,UAAU;AAChB5C,IAAAA,GAAG,EAAErB,OAAAA;AACP,GAAC,CAAC,GACF0B,QACM,CACM,CAAC,CAAA;AAEzB,CAAC,CAAC,CAAA;;AAEF;AACA;AACA;AACO,MAAM0C,IAAkC,gBAAGhD,UAAU,CAAC,CAAC1B,KAAK,EAAE2B,GAAG,KAAK;EAC3E,MAAM;AAAEqB,IAAAA,KAAAA;AAAM,GAAC,GAAGhD,KAAK,CAAA;AACvB,EAAA,MAAM0F,YAAY,GAAGC,UAAU,CAACC,uBAAuB,CAAC,CAAA;EACxD,MAAMC,SAAS,GAAGH,YAAY,CAACI,KAAK,CAACC,QAAQ,KAAK,SAAS,CAAA;AAE3D,EAAA,IAAI,CAACL,YAAY,CAACI,KAAK,CAACE,MAAM,EAAE;IAC9B,OAAOH,SAAS,gBACd/B,cAAA,CAAAC,aAAA,CAACtC,mBAAmB,EAAA6C,QAAA,CAAA,EAAA,EAAKtE,KAAK,EAAA;MAAEgD,KAAK,EAAEhD,KAAK,CAACgD,KAAO;AAACrB,MAAAA,GAAG,EAAEA,GAAAA;KAAM,CAAA,CAAC,gBAEjEmC,cAAA,CAAAC,aAAA,CAACoB,gBAAgB,EAAAb,QAAA,CAAA,EAAA,EAAKtE,KAAK,EAAA;AAAE2B,MAAAA,GAAG,EAAEA,GAAAA;AAAI,KAAA,CAAE,CACzC,CAAA;AACH,GAAA;EAEA,MAAM;AAAEqB,IAAAA,KAAK,EAAEiD,WAAW;IAAEC,IAAI;AAAEC,IAAAA,aAAAA;AAAc,GAAC,GAAGT,YAAY,CAACI,KAAK,CAACE,MAAM,CAAA;EAE7E,IAAI,CAACC,WAAW,EAAE;IAChB,OAAOJ,SAAS,gBACd/B,cAAA,CAAAC,aAAA,CAACtC,mBAAmB,EAAA6C,QAAA,CAAA,EAAA,EAAKtE,KAAK,EAAA;MAAEgD,KAAK,EAAEhD,KAAK,CAACgD,KAAO;AAACrB,MAAAA,GAAG,EAAEA,GAAAA;KAAM,CAAA,CAAC,gBAEjEmC,cAAA,CAAAC,aAAA,CAACoB,gBAAgB,EAAAb,QAAA,CAAA,EAAA,EAAKtE,KAAK,EAAA;AAAE2B,MAAAA,GAAG,EAAEA,GAAAA;AAAI,KAAA,CAAE,CACzC,CAAA;AACH,GAAC,MAAM,IACLwE,aAAa,KACXD,IAAI,KAAK,YAAY,IAAIlD,KAAK,CAAEoD,UAAU,CAACH,WAAW,CAAC,IACtDC,IAAI,KAAK,UAAU,IAAIlD,KAAK,CAAEW,QAAQ,CAACsC,WAAW,CAAE,IACpDC,IAAI,KAAK,UAAU,IAAIlD,KAAK,CAAEqD,QAAQ,CAACJ,WAAW,CAAE,CAAC,EACxD;IACA,OAAOJ,SAAS,gBACd/B,cAAA,CAAAC,aAAA,CAACtC,mBAAmB,EAAA6C,QAAA,CAAA,EAAA,EAAKtE,KAAK,EAAA;MAAEgD,KAAK,EAAEhD,KAAK,CAACgD,KAAO;AAACrB,MAAAA,GAAG,EAAEA,GAAAA;KAAM,CAAA,CAAC,gBAEjEmC,cAAA,CAAAC,aAAA,CAACoB,gBAAgB,EAAAb,QAAA,CAAA,EAAA,EAAKtE,KAAK,EAAA;AAAE2B,MAAAA,GAAG,EAAEA,GAAAA;AAAI,KAAA,CAAE,CACzC,CAAA;AACH,GAAC,MAAM,IACL,CAACwE,aAAa,KACZD,IAAI,KAAK,YAAY,IAAIlD,KAAK,CAAEsD,WAAW,EAAE,CAACF,UAAU,CAACH,WAAW,CAACK,WAAW,EAAE,CAAC,IAClFJ,IAAI,KAAK,UAAU,IAAIlD,KAAK,CAAEsD,WAAW,EAAE,CAAC3C,QAAQ,CAACsC,WAAW,CAACK,WAAW,EAAE,CAAE,IAChFJ,IAAI,KAAK,UAAU,IAAIlD,KAAK,CAAEsD,WAAW,EAAE,CAACD,QAAQ,CAACJ,WAAW,CAACK,WAAW,EAAE,CAAE,CAAC,EACpF;IACA,OAAOT,SAAS,gBACd/B,cAAA,CAAAC,aAAA,CAACtC,mBAAmB,EAAA6C,QAAA,CAAA,EAAA,EAAKtE,KAAK,EAAA;MAAEgD,KAAK,EAAEhD,KAAK,CAACgD,KAAO;AAACrB,MAAAA,GAAG,EAAEA,GAAAA;KAAM,CAAA,CAAC,gBAEjEmC,cAAA,CAAAC,aAAA,CAACoB,gBAAgB,EAAAb,QAAA,CAAA,EAAA,EAAKtE,KAAK,EAAA;AAAE2B,MAAAA,GAAG,EAAEA,GAAAA;AAAI,KAAA,CAAE,CACzC,CAAA;AACH,GAAA;AAEA,EAAA,OAAO,IAAI,CAAA;AACb,CAAC,EAAC;AACF+C,IAAI,CAACzC,SAAS,GAAGT,SAAS,CAAA;AAC1BkD,IAAI,CAAC6B,WAAW,GAAGhF,cAAc;;;;"}
|
|
1
|
+
{"version":3,"file":"Item2.js","sources":["../../src/components/item/styles.ts","../../src/components/item/useMenuItem.ts","../../src/components/item/Item.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseContainer } from '../shared';\nimport { StyledItemProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledItem = styled.div<StyledItemProps>`\n min-height: 36px;\n position: relative;\n width: 100%;\n padding: 8px 16px;\n\n ${baseContainer}\n\n align-items: center;\n background: none;\n border: none;\n box-sizing: border-box;\n cursor: pointer;\n display: inline-flex;\n\n > a {\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n color: inherit;\n }\n\n ${({ $color, $isActive, $isDisabled, $isGradient, $isHovered, $hasBorder, $theme }) => css`\n ${!$isGradient\n ? css`\n background-color: var(\n --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled ? 'grey' : $color}-background-${$isActive ? 'active' : $isHovered || $isDisabled ? 'hover' : 'default'}\n );\n `\n : css`\n background: var(\n --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled ? 'grey' : $color}-background-${$isActive ? 'active' : $isHovered || $isDisabled ? 'hover' : 'default'}\n );\n `}\n\n ${$hasBorder\n ? css`\n border: 1px solid\n var(\n --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled ? 'grey' : $color}-text-${$isActive ? 'active' : $isHovered || $isDisabled ? 'hover' : 'default'}\n );\n `\n : ''}\n `}\n\n &:hover {\n outline: none;\n cursor: pointer;\n\n ${({ $color, $isDisabled, $isGradient, $hasBorder, $theme }) => css`\n ${$isDisabled ? 'cursor: inherit;' : ''}\n\n ${!$isDisabled\n ? css`\n ${!$isGradient\n ? css`\n background-color: var(\n --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-background-hover\n );\n\n ${$hasBorder\n ? css`\n border: 1px solid\n var(--redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-hover);\n `\n : ''}\n `\n : css`\n background: var(\n --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-background-hover\n );\n `}\n `\n : ''}\n `};\n }\n\n &:active {\n outline: none;\n\n ${({ $color, $hasBorder, $isHovered, $isDisabled, $isGradient, $theme }) => css`\n ${!$isDisabled\n ? css`\n ${!$isGradient\n ? css`\n background-color: var(\n --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled\n ? 'grey'\n : $color}-background-${$isHovered ? 'hover' : 'active'}\n );\n\n ${$hasBorder\n ? css`\n border: 1px solid\n var(\n --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled\n ? 'grey'\n : $color}-text-${$isHovered ? 'hover' : 'active'}\n );\n `\n : ''}\n `\n : css`\n background: var(\n --redsift-color-${$theme}-components-buttons-secondary-button-${$isDisabled\n ? 'grey'\n : $color}-background-${$isHovered ? 'hover' : 'active'}\n );\n `}\n `\n : ''}\n `};\n }\n`;\n","import { useCallback, useEffect, RefObject, KeyboardEvent } from 'react';\nimport { UseFocusWithinGroupProps, useFocusOnListItem } from '../focus-within-group';\n\nexport function useMenuItem(props: {\n domElementRef: RefObject<Element>;\n id: string;\n isDisabled?: boolean;\n onClick?: () => void;\n isLinkMenuItem?: boolean;\n linkRef?: RefObject<HTMLAnchorElement | null>;\n}): UseFocusWithinGroupProps & {\n isDisabled?: boolean;\n} {\n const { domElementRef, id, isDisabled, onClick, isLinkMenuItem, linkRef } = props;\n\n const {\n tabIndex,\n isFocused,\n handleKeyDown: handleFocusKeyDown,\n handleClick: handleFocusClick,\n } = useFocusOnListItem({ domElementRef, isDisabled: isDisabled!, id });\n\n const handleKeyDown = useCallback((event: KeyboardEvent) => {\n const code = event.code;\n if (code === 'Enter' || code === 'Space') {\n if (isLinkMenuItem) {\n linkRef?.current?.click();\n } else {\n onClick?.();\n }\n }\n handleFocusKeyDown(event);\n }, []);\n\n const handleClick = useCallback(() => {\n handleFocusClick();\n onClick?.();\n }, []);\n\n useEffect(() => {\n if (isFocused && domElementRef.current) {\n (domElementRef as RefObject<SVGElement | HTMLElement>).current?.focus();\n }\n }, [isFocused]);\n\n return {\n tabIndex,\n isFocused,\n isDisabled,\n handleKeyDown,\n handleClick,\n };\n}\n","import React, { forwardRef, RefObject, useContext, useRef } from 'react';\nimport classNames from 'classnames';\nimport { ButtonsColorPalette, Comp, getContainerStylingTransientProps } from '../../types';\nimport { ItemProps } from './types';\nimport { StyledItem } from './styles';\nimport { useListboxItem } from '../listbox/useListboxItem';\nimport { FocusWithinGroupContext } from '../focus-within-group';\nimport { useMenuItem } from './useMenuItem';\nimport { isComponent, useId } from '../../utils';\nimport { useTheme } from '../theme';\nimport { Flexbox } from '../flexbox';\nimport { Icon } from '../icon';\nimport { Text } from '../text';\nimport { mdiCheckboxBlankOutline, mdiCheckboxMarked } from '@redsift/icons';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { StyledGradientBorder } from '../gradient-border';\n\nconst COMPONENT_NAME = 'Item';\nconst CLASSNAME = 'redsift-item';\n\nexport const RenderedListboxItem: Comp<Omit<ItemProps, 'value'> & Required<Pick<ItemProps, 'value'>>, HTMLElement> =\n forwardRef((props, ref) => {\n const { transientProps, otherProps } = getContainerStylingTransientProps(props);\n\n const {\n borderRadius = '0',\n children,\n className,\n color: propsColor,\n defaultSelected,\n id: propsId,\n isActive,\n isDisabled: propsIsDisabled,\n isHovered,\n isSelected: propsIsSelected,\n hasBorder,\n hasCheckbox,\n rowIndex,\n theme: propsTheme,\n value,\n ...forwardedProps\n } = otherProps;\n const id = propsId ?? value;\n const _ref = useRef<HTMLElement>(undefined);\n const divRef = ref ?? _ref;\n\n const { tabIndex, isFocused, isSelected, isDisabled, handleKeyDown, handleClick } = useListboxItem({\n domElementRef: divRef as RefObject<Element>,\n value,\n id,\n isDisabled: propsIsDisabled!,\n propsIsSelected: propsIsSelected ?? defaultSelected,\n rowIndex,\n });\n\n const theme = useTheme(propsTheme);\n const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n const isGradient = color === ButtonsColorPalette.radar;\n\n return (\n <ConditionalWrapper\n condition={isGradient}\n wrapper={(children) => (\n <StyledGradientBorder\n $borderRadius={borderRadius}\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isHovered={isHovered}\n $theme={theme}\n width=\"auto\"\n >\n {children}\n </StyledGradientBorder>\n )}\n >\n <StyledItem\n role=\"option\"\n {...forwardedProps}\n {...transientProps}\n id={id}\n $borderRadius={borderRadius}\n $color={color}\n $hasBorder={hasBorder}\n $hasCheckbox={hasCheckbox}\n $isActive={isActive || isSelected}\n $isDisabled={isDisabled}\n $isGradient={isGradient}\n $isHovered={isHovered || isFocused}\n $theme={theme}\n aria-selected={isSelected}\n aria-disabled={isDisabled}\n className={classNames(Item.className, className)}\n onClick={isDisabled ? undefined : handleClick}\n ref={divRef as RefObject<HTMLDivElement>}\n onKeyDown={handleKeyDown}\n tabIndex={tabIndex}\n >\n {hasCheckbox ? (\n <Flexbox>\n {isSelected ? (\n <Icon color={isDisabled ? 'grey' : color} icon={mdiCheckboxMarked} />\n ) : (\n <Icon color=\"question\" icon={mdiCheckboxBlankOutline} />\n )}\n {children ? children : <Text>{value}</Text>}\n </Flexbox>\n ) : (\n children ?? value\n )}\n </StyledItem>\n </ConditionalWrapper>\n );\n });\n\nconst RenderedMenuItem: Comp<Omit<ItemProps, 'value'>, HTMLElement> = forwardRef((props, ref) => {\n const { transientProps, otherProps } = getContainerStylingTransientProps(props);\n\n const {\n borderRadius = '0',\n children,\n className,\n color: propsColor,\n hasBorder,\n id: propsId,\n isActive,\n isDisabled: propsIsDisabled,\n isHovered,\n theme: propsTheme,\n onClick,\n ...forwardedProps\n } = otherProps;\n const [_id] = useId();\n const id = propsId ?? _id;\n const _ref = useRef<HTMLElement>(undefined);\n const divRef = ref ?? _ref;\n const linkRef = useRef<HTMLAnchorElement>(null);\n\n const isLinkMenuItem = isComponent('Link')(children);\n const { tabIndex, isFocused, isDisabled, handleKeyDown, handleClick } = useMenuItem({\n domElementRef: divRef as RefObject<Element>,\n id,\n isDisabled: propsIsDisabled!,\n onClick: onClick as any,\n isLinkMenuItem,\n linkRef,\n });\n\n const theme = useTheme(propsTheme);\n const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n const isGradient = color === ButtonsColorPalette.radar;\n\n return (\n <ConditionalWrapper\n condition={isGradient}\n wrapper={(children) => (\n <StyledGradientBorder\n $borderRadius={borderRadius}\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isHovered={isHovered}\n $theme={theme}\n width=\"auto\"\n >\n {children}\n </StyledGradientBorder>\n )}\n >\n <StyledItem\n as=\"li\"\n role={isLinkMenuItem ? 'none' : 'menuitem'}\n {...forwardedProps}\n {...transientProps}\n id={id}\n $borderRadius={borderRadius}\n $color={color}\n $hasBorder={hasBorder}\n $hasCheckbox={false}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isGradient={isGradient}\n $isHovered={isHovered || isFocused}\n $theme={theme}\n aria-disabled={isDisabled}\n className={classNames(Item.className, className)}\n onClick={isDisabled ? undefined : handleClick}\n ref={divRef as RefObject<HTMLLIElement>}\n onKeyDown={handleKeyDown}\n tabIndex={tabIndex}\n >\n {isLinkMenuItem\n ? React.cloneElement(children, {\n role: 'menuitem',\n ref: linkRef,\n })\n : children}\n </StyledItem>\n </ConditionalWrapper>\n );\n});\n\n/**\n * The Item component.\n */\nexport const Item: Comp<ItemProps, HTMLElement> = forwardRef((props, ref) => {\n const { value } = props;\n const focusContext = useContext(FocusWithinGroupContext);\n const isListbox = focusContext.state.listRole === 'listbox';\n\n if (!focusContext.state.filter) {\n return isListbox ? (\n <RenderedListboxItem {...props} value={props.value!} ref={ref} />\n ) : (\n <RenderedMenuItem {...props} ref={ref} />\n );\n }\n\n const { value: filterValue, type, caseSensitive } = focusContext.state.filter;\n\n if (!filterValue) {\n return isListbox ? (\n <RenderedListboxItem {...props} value={props.value!} ref={ref} />\n ) : (\n <RenderedMenuItem {...props} ref={ref} />\n );\n } else if (\n caseSensitive &&\n ((type === 'startsWith' && value!.startsWith(filterValue)) ||\n (type === 'contains' && value!.includes(filterValue)) ||\n (type === 'endsWith' && value!.endsWith(filterValue)))\n ) {\n return isListbox ? (\n <RenderedListboxItem {...props} value={props.value!} ref={ref} />\n ) : (\n <RenderedMenuItem {...props} ref={ref} />\n );\n } else if (\n !caseSensitive &&\n ((type === 'startsWith' && value!.toLowerCase().startsWith(filterValue.toLowerCase())) ||\n (type === 'contains' && value!.toLowerCase().includes(filterValue.toLowerCase())) ||\n (type === 'endsWith' && value!.toLowerCase().endsWith(filterValue.toLowerCase())))\n ) {\n return isListbox ? (\n <RenderedListboxItem {...props} value={props.value!} ref={ref} />\n ) : (\n <RenderedMenuItem {...props} ref={ref} />\n );\n }\n\n return null;\n});\nItem.className = CLASSNAME;\nItem.displayName = COMPONENT_NAME;\n"],"names":["StyledItem","styled","div","baseContainer","_ref","$color","$isActive","$isDisabled","$isGradient","$isHovered","$hasBorder","$theme","css","_ref2","_ref3","useMenuItem","props","domElementRef","id","isDisabled","onClick","isLinkMenuItem","linkRef","tabIndex","isFocused","handleKeyDown","handleFocusKeyDown","handleClick","handleFocusClick","useFocusOnListItem","useCallback","event","code","_linkRef$current","current","click","useEffect","_current","focus","COMPONENT_NAME","CLASSNAME","RenderedListboxItem","forwardRef","ref","transientProps","otherProps","getContainerStylingTransientProps","borderRadius","children","className","color","propsColor","defaultSelected","propsId","isActive","propsIsDisabled","isHovered","isSelected","propsIsSelected","hasBorder","hasCheckbox","rowIndex","theme","propsTheme","value","forwardedProps","_objectWithoutProperties","_excluded","useRef","undefined","divRef","useListboxItem","useTheme","Object","values","ButtonsColorPalette","includes","isGradient","radar","React","createElement","ConditionalWrapper","condition","wrapper","StyledGradientBorder","$borderRadius","width","_extends","role","$hasCheckbox","classNames","Item","onKeyDown","Flexbox","Icon","icon","mdiCheckboxMarked","mdiCheckboxBlankOutline","Text","RenderedMenuItem","_excluded2","_id","useId","isComponent","as","cloneElement","focusContext","useContext","FocusWithinGroupContext","isListbox","state","listRole","filter","filterValue","type","caseSensitive","startsWith","endsWith","toLowerCase","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;AAIA;AACA;AACA;AACaA,MAAAA,UAAU,GAAGC,MAAM,CAACC,GAAqB,CAAA;AACtD;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,aAAc,CAAA;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IAAEC,MAAM;IAAEC,SAAS;IAAEC,WAAW;IAAEC,WAAW;IAAEC,UAAU;IAAEC,UAAU;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAP,IAAA,CAAA;AAAA,EAAA,OAAKQ,GAAI,CAAA;AAC7F,IAAM,EAAA,CAACJ,WAAW,GACVI,GAAI,CAAA;AACZ;AACA,4BAAA,EAA8BD,MAAO,CAAuCJ,qCAAAA,EAAAA,WAAW,GAAG,MAAM,GAAGF,MAAO,CAAcC,YAAAA,EAAAA,SAAS,GAAG,QAAQ,GAAGG,UAAU,IAAIF,WAAW,GAAG,OAAO,GAAG,SAAU,CAAA;AAC/L;AACA,QAAA,CAAS,GACDK,GAAI,CAAA;AACZ;AACA,4BAAA,EAA8BD,MAAO,CAAuCJ,qCAAAA,EAAAA,WAAW,GAAG,MAAM,GAAGF,MAAO,CAAcC,YAAAA,EAAAA,SAAS,GAAG,QAAQ,GAAGG,UAAU,IAAIF,WAAW,GAAG,OAAO,GAAG,SAAU,CAAA;AAC/L;AACA,QAAU,CAAA,CAAA;AACV;AACA,IAAMG,EAAAA,UAAU,GACRE,GAAI,CAAA;AACZ;AACA;AACA,8BAAA,EAAgCD,MAAO,CAAuCJ,qCAAAA,EAAAA,WAAW,GAAG,MAAM,GAAGF,MAAO,CAAQC,MAAAA,EAAAA,SAAS,GAAG,QAAQ,GAAGG,UAAU,IAAIF,WAAW,GAAG,OAAO,GAAG,SAAU,CAAA;AAC3L;AACA,QAAA,CAAS,GACD,EAAG,CAAA;AACX,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMM,KAAA,IAAA;EAAA,IAAC;IAAER,MAAM;IAAEE,WAAW;IAAEC,WAAW;IAAEE,UAAU;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAE,KAAA,CAAA;AAAA,EAAA,OAAKD,GAAI,CAAA;AACxE,MAAA,EAAQL,WAAW,GAAG,kBAAkB,GAAG,EAAG,CAAA;AAC9C;AACA,MAAQ,EAAA,CAACA,WAAW,GACVK,GAAI,CAAA;AACd,YAAc,EAAA,CAACJ,WAAW,GACVI,GAAI,CAAA;AACpB;AACA,oCAAsCD,EAAAA,MAAO,wCAAuCN,MAAO,CAAA;AAC3F;AACA;AACA,kBAAoBK,EAAAA,UAAU,GACRE,GAAI,CAAA;AAC1B;AACA,8CAAgDD,EAAAA,MAAO,wCAAuCN,MAAO,CAAA;AACrG,sBAAA,CAAuB,GACD,EAAG,CAAA;AACzB,gBAAA,CAAiB,GACDO,GAAI,CAAA;AACpB;AACA,oCAAsCD,EAAAA,MAAO,wCAAuCN,MAAO,CAAA;AAC3F;AACA,gBAAkB,CAAA,CAAA;AAClB,UAAA,CAAW,GACD,EAAG,CAAA;AACb,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMS,KAAA,IAAA;EAAA,IAAC;IAAET,MAAM;IAAEK,UAAU;IAAED,UAAU;IAAEF,WAAW;IAAEC,WAAW;AAAEG,IAAAA,MAAAA;AAAO,GAAC,GAAAG,KAAA,CAAA;AAAA,EAAA,OAAKF,GAAI,CAAA;AACpF,MAAQ,EAAA,CAACL,WAAW,GACVK,GAAI,CAAA;AACd,YAAc,EAAA,CAACJ,WAAW,GACVI,GAAI,CAAA;AACpB;AACA,oCAAA,EAAsCD,MAAO,CAAA,qCAAA,EAAuCJ,WAAW,GACrE,MAAM,GACNF,MAAO,CAAA,YAAA,EAAcI,UAAU,GAAG,OAAO,GAAG,QAAS,CAAA;AAC/E;AACA;AACA,kBAAoBC,EAAAA,UAAU,GACRE,GAAI,CAAA;AAC1B;AACA;AACA,4CAAA,EAA8CD,MAAO,CAAA,qCAAA,EAAuCJ,WAAW,GACrE,MAAM,GACNF,MAAO,CAAA,MAAA,EAAQI,UAAU,GAAG,OAAO,GAAG,QAAS,CAAA;AACjF;AACA,sBAAA,CAAuB,GACD,EAAG,CAAA;AACzB,gBAAA,CAAiB,GACDG,GAAI,CAAA;AACpB;AACA,oCAAA,EAAsCD,MAAO,CAAA,qCAAA,EAAuCJ,WAAW,GACrE,MAAM,GACNF,MAAO,CAAA,YAAA,EAAcI,UAAU,GAAG,OAAO,GAAG,QAAS,CAAA;AAC/E;AACA,gBAAkB,CAAA,CAAA;AAClB,UAAA,CAAW,GACD,EAAG,CAAA;AACb,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN;AACA;;ACrHO,SAASM,WAAWA,CAACC,KAO3B,EAEC;EACA,MAAM;IAAEC,aAAa;IAAEC,EAAE;IAAEC,UAAU;IAAEC,OAAO;IAAEC,cAAc;AAAEC,IAAAA,OAAAA;AAAQ,GAAC,GAAGN,KAAK,CAAA;EAEjF,MAAM;IACJO,QAAQ;IACRC,SAAS;AACTC,IAAAA,aAAa,EAAEC,kBAAkB;AACjCC,IAAAA,WAAW,EAAEC,gBAAAA;GACd,GAAGC,kBAAkB,CAAC;IAAEZ,aAAa;AAAEE,IAAAA,UAAU,EAAEA,UAAW;AAAED,IAAAA,EAAAA;AAAG,GAAC,CAAC,CAAA;AAEtE,EAAA,MAAMO,aAAa,GAAGK,WAAW,CAAEC,KAAoB,IAAK;AAC1D,IAAA,MAAMC,IAAI,GAAGD,KAAK,CAACC,IAAI,CAAA;AACvB,IAAA,IAAIA,IAAI,KAAK,OAAO,IAAIA,IAAI,KAAK,OAAO,EAAE;AACxC,MAAA,IAAIX,cAAc,EAAE;AAAA,QAAA,IAAAY,gBAAA,CAAA;AAClBX,QAAAA,OAAO,KAAPA,IAAAA,IAAAA,OAAO,KAAAW,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,CAAAA,gBAAA,GAAPX,OAAO,CAAEY,OAAO,MAAA,IAAA,IAAAD,gBAAA,KAAhBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,gBAAA,CAAkBE,KAAK,EAAE,CAAA;AAC3B,OAAC,MAAM;AACLf,QAAAA,OAAO,KAAPA,IAAAA,IAAAA,OAAO,KAAPA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,OAAO,EAAI,CAAA;AACb,OAAA;AACF,KAAA;IACAM,kBAAkB,CAACK,KAAK,CAAC,CAAA;GAC1B,EAAE,EAAE,CAAC,CAAA;AAEN,EAAA,MAAMJ,WAAW,GAAGG,WAAW,CAAC,MAAM;AACpCF,IAAAA,gBAAgB,EAAE,CAAA;AAClBR,IAAAA,OAAO,KAAPA,IAAAA,IAAAA,OAAO,KAAPA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,OAAO,EAAI,CAAA;GACZ,EAAE,EAAE,CAAC,CAAA;AAENgB,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,IAAIZ,SAAS,IAAIP,aAAa,CAACiB,OAAO,EAAE;AAAA,MAAA,IAAAG,QAAA,CAAA;AACtC,MAAA,CAAAA,QAAA,GAACpB,aAAa,CAAyCiB,OAAO,MAAA,IAAA,IAAAG,QAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAA9DA,QAAA,CAAgEC,KAAK,EAAE,CAAA;AACzE,KAAA;AACF,GAAC,EAAE,CAACd,SAAS,CAAC,CAAC,CAAA;EAEf,OAAO;IACLD,QAAQ;IACRC,SAAS;IACTL,UAAU;IACVM,aAAa;AACbE,IAAAA,WAAAA;GACD,CAAA;AACH;;;;ACnCA,MAAMY,cAAc,GAAG,MAAM,CAAA;AAC7B,MAAMC,SAAS,GAAG,cAAc,CAAA;AAEzB,MAAMC,mBAAqG,gBAChHC,UAAU,CAAC,CAAC1B,KAAK,EAAE2B,GAAG,KAAK;EACzB,MAAM;IAAEC,cAAc;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,iCAAiC,CAAC9B,KAAK,CAAC,CAAA;EAE/E,MAAM;AACJ+B,MAAAA,YAAY,GAAG,GAAG;MAClBC,QAAQ;MACRC,SAAS;AACTC,MAAAA,KAAK,EAAEC,UAAU;MACjBC,eAAe;AACflC,MAAAA,EAAE,EAAEmC,OAAO;MACXC,QAAQ;AACRnC,MAAAA,UAAU,EAAEoC,eAAe;MAC3BC,SAAS;AACTC,MAAAA,UAAU,EAAEC,eAAe;MAC3BC,SAAS;MACTC,WAAW;MACXC,QAAQ;AACRC,MAAAA,KAAK,EAAEC,UAAU;AACjBC,MAAAA,KAAAA;AAEF,KAAC,GAAGnB,UAAU;AADToB,IAAAA,cAAc,GAAAC,wBAAA,CACfrB,UAAU,EAAAsB,SAAA,CAAA,CAAA;EACd,MAAMjD,EAAE,GAAGmC,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAPA,KAAAA,CAAAA,GAAAA,OAAO,GAAIW,KAAK,CAAA;AAC3B,EAAA,MAAM5D,IAAI,GAAGgE,MAAM,CAAcC,SAAS,CAAC,CAAA;EAC3C,MAAMC,MAAM,GAAG3B,GAAG,KAAA,IAAA,IAAHA,GAAG,KAAHA,KAAAA,CAAAA,GAAAA,GAAG,GAAIvC,IAAI,CAAA;EAE1B,MAAM;IAAEmB,QAAQ;IAAEC,SAAS;IAAEiC,UAAU;IAAEtC,UAAU;IAAEM,aAAa;AAAEE,IAAAA,WAAAA;GAAa,GAAG4C,cAAc,CAAC;AACjGtD,IAAAA,aAAa,EAAEqD,MAA4B;IAC3CN,KAAK;IACL9C,EAAE;AACFC,IAAAA,UAAU,EAAEoC,eAAgB;AAC5BG,IAAAA,eAAe,EAAEA,eAAe,KAAA,IAAA,IAAfA,eAAe,KAAfA,KAAAA,CAAAA,GAAAA,eAAe,GAAIN,eAAe;AACnDS,IAAAA,QAAAA;AACF,GAAC,CAAC,CAAA;AAEF,EAAA,MAAMC,KAAK,GAAGU,QAAQ,CAACT,UAAU,CAAC,CAAA;AAClC,EAAA,MAAMb,KAAK,GAAGuB,MAAM,CAACC,MAAM,CAACC,mBAAmB,CAAC,CAACC,QAAQ,CAACzB,UAAW,CAAC,GAAGA,UAAU,GAAG,SAAS,CAAA;AAC/F,EAAA,MAAM0B,UAAU,GAAG3B,KAAK,KAAKyB,mBAAmB,CAACG,KAAK,CAAA;AAEtD,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAACC,kBAAkB,EAAA;AACjBC,IAAAA,SAAS,EAAEL,UAAW;AACtBM,IAAAA,OAAO,EAAGnC,QAAQ,iBAChB+B,cAAA,CAAAC,aAAA,CAACI,oBAAoB,EAAA;AACnBC,MAAAA,aAAa,EAAEtC,YAAa;AAC5B1C,MAAAA,MAAM,EAAE6C,KAAM;AACd5C,MAAAA,SAAS,EAAEgD,QAAS;AACpB/C,MAAAA,WAAW,EAAEY,UAAW;AACxBV,MAAAA,UAAU,EAAE+C,SAAU;AACtB7C,MAAAA,MAAM,EAAEmD,KAAM;AACdwB,MAAAA,KAAK,EAAC,MAAA;AAAM,KAAA,EAEXtC,QACmB,CAAA;AACtB,GAAA,eAEF+B,cAAA,CAAAC,aAAA,CAAChF,UAAU,EAAAuF,QAAA,CAAA;AACTC,IAAAA,IAAI,EAAC,QAAA;GACDvB,EAAAA,cAAc,EACdrB,cAAc,EAAA;AAClB1B,IAAAA,EAAE,EAAEA,EAAG;AACPmE,IAAAA,aAAa,EAAEtC,YAAa;AAC5B1C,IAAAA,MAAM,EAAE6C,KAAM;AACdxC,IAAAA,UAAU,EAAEiD,SAAU;AACtB8B,IAAAA,YAAY,EAAE7B,WAAY;IAC1BtD,SAAS,EAAEgD,QAAQ,IAAIG,UAAW;AAClClD,IAAAA,WAAW,EAAEY,UAAW;AACxBX,IAAAA,WAAW,EAAEqE,UAAW;IACxBpE,UAAU,EAAE+C,SAAS,IAAIhC,SAAU;AACnCb,IAAAA,MAAM,EAAEmD,KAAM;AACd,IAAA,eAAA,EAAeL,UAAW;AAC1B,IAAA,eAAA,EAAetC,UAAW;IAC1B8B,SAAS,EAAEyC,UAAU,CAACC,IAAI,CAAC1C,SAAS,EAAEA,SAAS,CAAE;AACjD7B,IAAAA,OAAO,EAAED,UAAU,GAAGkD,SAAS,GAAG1C,WAAY;AAC9CgB,IAAAA,GAAG,EAAE2B,MAAoC;AACzCsB,IAAAA,SAAS,EAAEnE,aAAc;AACzBF,IAAAA,QAAQ,EAAEA,QAAAA;AAAS,GAAA,CAAA,EAElBqC,WAAW,gBACVmB,cAAA,CAAAC,aAAA,CAACa,OAAO,EACLpC,IAAAA,EAAAA,UAAU,gBACTsB,cAAA,CAAAC,aAAA,CAACc,IAAI,EAAA;AAAC5C,IAAAA,KAAK,EAAE/B,UAAU,GAAG,MAAM,GAAG+B,KAAM;AAAC6C,IAAAA,IAAI,EAAEC,iBAAAA;AAAkB,GAAE,CAAC,gBAErEjB,cAAA,CAAAC,aAAA,CAACc,IAAI,EAAA;AAAC5C,IAAAA,KAAK,EAAC,UAAU;AAAC6C,IAAAA,IAAI,EAAEE,uBAAAA;GAA0B,CACxD,EACAjD,QAAQ,GAAGA,QAAQ,gBAAG+B,cAAA,CAAAC,aAAA,CAACkB,IAAI,EAAA,IAAA,EAAElC,KAAY,CACnC,CAAC,GAEVhB,QAAQ,KAARA,IAAAA,IAAAA,QAAQ,cAARA,QAAQ,GAAIgB,KAEJ,CACM,CAAC,CAAA;AAEzB,CAAC,EAAC;AAEJ,MAAMmC,gBAA6D,gBAAGzD,UAAU,CAAC,CAAC1B,KAAK,EAAE2B,GAAG,KAAK;EAC/F,MAAM;IAAEC,cAAc;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,iCAAiC,CAAC9B,KAAK,CAAC,CAAA;EAE/E,MAAM;AACJ+B,MAAAA,YAAY,GAAG,GAAG;MAClBC,QAAQ;MACRC,SAAS;AACTC,MAAAA,KAAK,EAAEC,UAAU;MACjBQ,SAAS;AACTzC,MAAAA,EAAE,EAAEmC,OAAO;MACXC,QAAQ;AACRnC,MAAAA,UAAU,EAAEoC,eAAe;MAC3BC,SAAS;AACTM,MAAAA,KAAK,EAAEC,UAAU;AACjB3C,MAAAA,OAAAA;AAEF,KAAC,GAAGyB,UAAU;AADToB,IAAAA,cAAc,GAAAC,wBAAA,CACfrB,UAAU,EAAAuD,UAAA,CAAA,CAAA;AACd,EAAA,MAAM,CAACC,GAAG,CAAC,GAAGC,KAAK,EAAE,CAAA;EACrB,MAAMpF,EAAE,GAAGmC,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAPA,KAAAA,CAAAA,GAAAA,OAAO,GAAIgD,GAAG,CAAA;AACzB,EAAA,MAAMjG,IAAI,GAAGgE,MAAM,CAAcC,SAAS,CAAC,CAAA;EAC3C,MAAMC,MAAM,GAAG3B,GAAG,KAAA,IAAA,IAAHA,GAAG,KAAHA,KAAAA,CAAAA,GAAAA,GAAG,GAAIvC,IAAI,CAAA;AAC1B,EAAA,MAAMkB,OAAO,GAAG8C,MAAM,CAAoB,IAAI,CAAC,CAAA;EAE/C,MAAM/C,cAAc,GAAGkF,WAAW,CAAC,MAAM,CAAC,CAACvD,QAAQ,CAAC,CAAA;EACpD,MAAM;IAAEzB,QAAQ;IAAEC,SAAS;IAAEL,UAAU;IAAEM,aAAa;AAAEE,IAAAA,WAAAA;GAAa,GAAGZ,WAAW,CAAC;AAClFE,IAAAA,aAAa,EAAEqD,MAA4B;IAC3CpD,EAAE;AACFC,IAAAA,UAAU,EAAEoC,eAAgB;AAC5BnC,IAAAA,OAAO,EAAEA,OAAc;IACvBC,cAAc;AACdC,IAAAA,OAAAA;AACF,GAAC,CAAC,CAAA;AAEF,EAAA,MAAMwC,KAAK,GAAGU,QAAQ,CAACT,UAAU,CAAC,CAAA;AAClC,EAAA,MAAMb,KAAK,GAAGuB,MAAM,CAACC,MAAM,CAACC,mBAAmB,CAAC,CAACC,QAAQ,CAACzB,UAAW,CAAC,GAAGA,UAAU,GAAG,SAAS,CAAA;AAC/F,EAAA,MAAM0B,UAAU,GAAG3B,KAAK,KAAKyB,mBAAmB,CAACG,KAAK,CAAA;AAEtD,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAACC,kBAAkB,EAAA;AACjBC,IAAAA,SAAS,EAAEL,UAAW;AACtBM,IAAAA,OAAO,EAAGnC,QAAQ,iBAChB+B,cAAA,CAAAC,aAAA,CAACI,oBAAoB,EAAA;AACnBC,MAAAA,aAAa,EAAEtC,YAAa;AAC5B1C,MAAAA,MAAM,EAAE6C,KAAM;AACd5C,MAAAA,SAAS,EAAEgD,QAAS;AACpB/C,MAAAA,WAAW,EAAEY,UAAW;AACxBV,MAAAA,UAAU,EAAE+C,SAAU;AACtB7C,MAAAA,MAAM,EAAEmD,KAAM;AACdwB,MAAAA,KAAK,EAAC,MAAA;AAAM,KAAA,EAEXtC,QACmB,CAAA;AACtB,GAAA,eAEF+B,cAAA,CAAAC,aAAA,CAAChF,UAAU,EAAAuF,QAAA,CAAA;AACTiB,IAAAA,EAAE,EAAC,IAAI;AACPhB,IAAAA,IAAI,EAAEnE,cAAc,GAAG,MAAM,GAAG,UAAA;GAC5B4C,EAAAA,cAAc,EACdrB,cAAc,EAAA;AAClB1B,IAAAA,EAAE,EAAEA,EAAG;AACPmE,IAAAA,aAAa,EAAEtC,YAAa;AAC5B1C,IAAAA,MAAM,EAAE6C,KAAM;AACdxC,IAAAA,UAAU,EAAEiD,SAAU;AACtB8B,IAAAA,YAAY,EAAE,KAAM;AACpBnF,IAAAA,SAAS,EAAEgD,QAAS;AACpB/C,IAAAA,WAAW,EAAEY,UAAW;AACxBX,IAAAA,WAAW,EAAEqE,UAAW;IACxBpE,UAAU,EAAE+C,SAAS,IAAIhC,SAAU;AACnCb,IAAAA,MAAM,EAAEmD,KAAM;AACd,IAAA,eAAA,EAAe3C,UAAW;IAC1B8B,SAAS,EAAEyC,UAAU,CAACC,IAAI,CAAC1C,SAAS,EAAEA,SAAS,CAAE;AACjD7B,IAAAA,OAAO,EAAED,UAAU,GAAGkD,SAAS,GAAG1C,WAAY;AAC9CgB,IAAAA,GAAG,EAAE2B,MAAmC;AACxCsB,IAAAA,SAAS,EAAEnE,aAAc;AACzBF,IAAAA,QAAQ,EAAEA,QAAAA;AAAS,GAAA,CAAA,EAElBF,cAAc,gBACX0D,cAAK,CAAC0B,YAAY,CAACzD,QAAQ,EAAE;AAC3BwC,IAAAA,IAAI,EAAE,UAAU;AAChB7C,IAAAA,GAAG,EAAErB,OAAAA;AACP,GAAC,CAAC,GACF0B,QACM,CACM,CAAC,CAAA;AAEzB,CAAC,CAAC,CAAA;;AAEF;AACA;AACA;AACO,MAAM2C,IAAkC,gBAAGjD,UAAU,CAAC,CAAC1B,KAAK,EAAE2B,GAAG,KAAK;EAC3E,MAAM;AAAEqB,IAAAA,KAAAA;AAAM,GAAC,GAAGhD,KAAK,CAAA;AACvB,EAAA,MAAM0F,YAAY,GAAGC,UAAU,CAACC,uBAAuB,CAAC,CAAA;EACxD,MAAMC,SAAS,GAAGH,YAAY,CAACI,KAAK,CAACC,QAAQ,KAAK,SAAS,CAAA;AAE3D,EAAA,IAAI,CAACL,YAAY,CAACI,KAAK,CAACE,MAAM,EAAE;IAC9B,OAAOH,SAAS,gBACd9B,cAAA,CAAAC,aAAA,CAACvC,mBAAmB,EAAA8C,QAAA,CAAA,EAAA,EAAKvE,KAAK,EAAA;MAAEgD,KAAK,EAAEhD,KAAK,CAACgD,KAAO;AAACrB,MAAAA,GAAG,EAAEA,GAAAA;KAAM,CAAA,CAAC,gBAEjEoC,cAAA,CAAAC,aAAA,CAACmB,gBAAgB,EAAAZ,QAAA,CAAA,EAAA,EAAKvE,KAAK,EAAA;AAAE2B,MAAAA,GAAG,EAAEA,GAAAA;AAAI,KAAA,CAAE,CACzC,CAAA;AACH,GAAA;EAEA,MAAM;AAAEqB,IAAAA,KAAK,EAAEiD,WAAW;IAAEC,IAAI;AAAEC,IAAAA,aAAAA;AAAc,GAAC,GAAGT,YAAY,CAACI,KAAK,CAACE,MAAM,CAAA;EAE7E,IAAI,CAACC,WAAW,EAAE;IAChB,OAAOJ,SAAS,gBACd9B,cAAA,CAAAC,aAAA,CAACvC,mBAAmB,EAAA8C,QAAA,CAAA,EAAA,EAAKvE,KAAK,EAAA;MAAEgD,KAAK,EAAEhD,KAAK,CAACgD,KAAO;AAACrB,MAAAA,GAAG,EAAEA,GAAAA;KAAM,CAAA,CAAC,gBAEjEoC,cAAA,CAAAC,aAAA,CAACmB,gBAAgB,EAAAZ,QAAA,CAAA,EAAA,EAAKvE,KAAK,EAAA;AAAE2B,MAAAA,GAAG,EAAEA,GAAAA;AAAI,KAAA,CAAE,CACzC,CAAA;AACH,GAAC,MAAM,IACLwE,aAAa,KACXD,IAAI,KAAK,YAAY,IAAIlD,KAAK,CAAEoD,UAAU,CAACH,WAAW,CAAC,IACtDC,IAAI,KAAK,UAAU,IAAIlD,KAAK,CAAEY,QAAQ,CAACqC,WAAW,CAAE,IACpDC,IAAI,KAAK,UAAU,IAAIlD,KAAK,CAAEqD,QAAQ,CAACJ,WAAW,CAAE,CAAC,EACxD;IACA,OAAOJ,SAAS,gBACd9B,cAAA,CAAAC,aAAA,CAACvC,mBAAmB,EAAA8C,QAAA,CAAA,EAAA,EAAKvE,KAAK,EAAA;MAAEgD,KAAK,EAAEhD,KAAK,CAACgD,KAAO;AAACrB,MAAAA,GAAG,EAAEA,GAAAA;KAAM,CAAA,CAAC,gBAEjEoC,cAAA,CAAAC,aAAA,CAACmB,gBAAgB,EAAAZ,QAAA,CAAA,EAAA,EAAKvE,KAAK,EAAA;AAAE2B,MAAAA,GAAG,EAAEA,GAAAA;AAAI,KAAA,CAAE,CACzC,CAAA;AACH,GAAC,MAAM,IACL,CAACwE,aAAa,KACZD,IAAI,KAAK,YAAY,IAAIlD,KAAK,CAAEsD,WAAW,EAAE,CAACF,UAAU,CAACH,WAAW,CAACK,WAAW,EAAE,CAAC,IAClFJ,IAAI,KAAK,UAAU,IAAIlD,KAAK,CAAEsD,WAAW,EAAE,CAAC1C,QAAQ,CAACqC,WAAW,CAACK,WAAW,EAAE,CAAE,IAChFJ,IAAI,KAAK,UAAU,IAAIlD,KAAK,CAAEsD,WAAW,EAAE,CAACD,QAAQ,CAACJ,WAAW,CAACK,WAAW,EAAE,CAAE,CAAC,EACpF;IACA,OAAOT,SAAS,gBACd9B,cAAA,CAAAC,aAAA,CAACvC,mBAAmB,EAAA8C,QAAA,CAAA,EAAA,EAAKvE,KAAK,EAAA;MAAEgD,KAAK,EAAEhD,KAAK,CAACgD,KAAO;AAACrB,MAAAA,GAAG,EAAEA,GAAAA;KAAM,CAAA,CAAC,gBAEjEoC,cAAA,CAAAC,aAAA,CAACmB,gBAAgB,EAAAZ,QAAA,CAAA,EAAA,EAAKvE,KAAK,EAAA;AAAE2B,MAAAA,GAAG,EAAEA,GAAAA;AAAI,KAAA,CAAE,CACzC,CAAA;AACH,GAAA;AAEA,EAAA,OAAO,IAAI,CAAA;AACb,CAAC,EAAC;AACFgD,IAAI,CAAC1C,SAAS,GAAGT,SAAS,CAAA;AAC1BmD,IAAI,CAAC4B,WAAW,GAAGhF,cAAc;;;;"}
|
package/_internal/LinkButton.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkButton.js","sources":["../../src/components/link-button/LinkButton.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledLink } from '../link';\nimport { LinkButtonProps } from './types';\nimport { useTheme } from '../theme';\nimport { Icon } from '../icon';\n\nconst COMPONENT_NAME = 'LinkButton';\nconst CLASSNAME = 'redsift-link-button';\n\n/**\n * LinkButton is a semantic button (`<button>`) styled to look like a text link.\n * Use for actions that should visually appear as links but are not navigation.\n *\n * **When to use which component:**\n * - `LinkButton`: Semantic button that looks like a link (for actions)\n * - `Link`: Semantic link that looks like a link (for navigation)\n * - `Button`: Semantic button that looks like a button (for actions)\n * - `ButtonLink`: Semantic link that looks like a button (for navigation)\n *\n * @example\n * // Basic link-styled button\n * <LinkButton onClick={handleClick}>Learn more</LinkButton>\n *\n * @example\n * // With icon\n * <LinkButton onClick={handleDownload} leftIcon={mdiDownload}>\n * Download report\n * </LinkButton>\n */\nexport const LinkButton: Comp<LinkButtonProps, HTMLButtonElement> = forwardRef((props, ref) => {\n const buttonRef = ref || useRef<HTMLButtonElement>();\n\n const {\n children,\n className,\n color = 'primary',\n disabled,\n isDisabled: propsIsDisabled,\n leftIcon,\n leftIconProps,\n rightIcon,\n rightIconProps,\n theme: propsTheme,\n ...forwardedProps\n } = props;\n const isDisabled = propsIsDisabled || disabled;\n\n const theme = useTheme(propsTheme);\n\n return (\n <StyledLink\n as=\"button\"\n {...forwardedProps}\n $color={color}\n $hasIcons={Boolean(leftIcon || rightIcon)}\n $isDisabled={isDisabled || disabled}\n $theme={theme}\n aria-disabled={isDisabled || disabled}\n className={classNames(LinkButton.className, className)}\n disabled={isDisabled || disabled}\n // @ts-ignore\n ref={buttonRef as RefObject<HTMLButtonElement>}\n >\n {leftIcon || rightIcon ? (\n <>\n {leftIcon ? (\n <Icon icon={leftIcon} aria-hidden=\"true\" className=\"left\" size=\"xsmall\" {...leftIconProps} />\n ) : null}\n <span className=\"text\">{children}</span>\n {rightIcon ? (\n <Icon icon={rightIcon} aria-hidden=\"true\" className=\"right\" size=\"xsmall\" {...rightIconProps} />\n ) : null}\n </>\n ) : (\n children\n )}\n </StyledLink>\n );\n});\nLinkButton.className = CLASSNAME;\nLinkButton.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","LinkButton","forwardRef","props","ref","buttonRef","useRef","children","className","color","disabled","isDisabled","propsIsDisabled","leftIcon","leftIconProps","rightIcon","rightIconProps","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","StyledLink","_extends","as","$color","$hasIcons","Boolean","$isDisabled","$theme","classNames","Fragment","Icon","icon","size","displayName"],"mappings":";;;;;;;;AAQA,MAAMA,cAAc,GAAG,YAAY,CAAA;AACnC,MAAMC,SAAS,GAAG,qBAAqB,CAAA;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAoD,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;AAC7F,EAAA,MAAMC,SAAS,GAAGD,GAAG,IAAIE,MAAM,
|
|
1
|
+
{"version":3,"file":"LinkButton.js","sources":["../../src/components/link-button/LinkButton.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledLink } from '../link';\nimport { LinkButtonProps } from './types';\nimport { useTheme } from '../theme';\nimport { Icon } from '../icon';\n\nconst COMPONENT_NAME = 'LinkButton';\nconst CLASSNAME = 'redsift-link-button';\n\n/**\n * LinkButton is a semantic button (`<button>`) styled to look like a text link.\n * Use for actions that should visually appear as links but are not navigation.\n *\n * **When to use which component:**\n * - `LinkButton`: Semantic button that looks like a link (for actions)\n * - `Link`: Semantic link that looks like a link (for navigation)\n * - `Button`: Semantic button that looks like a button (for actions)\n * - `ButtonLink`: Semantic link that looks like a button (for navigation)\n *\n * @example\n * // Basic link-styled button\n * <LinkButton onClick={handleClick}>Learn more</LinkButton>\n *\n * @example\n * // With icon\n * <LinkButton onClick={handleDownload} leftIcon={mdiDownload}>\n * Download report\n * </LinkButton>\n */\nexport const LinkButton: Comp<LinkButtonProps, HTMLButtonElement> = forwardRef((props, ref) => {\n const buttonRef = ref || useRef<HTMLButtonElement>(undefined);\n\n const {\n children,\n className,\n color = 'primary',\n disabled,\n isDisabled: propsIsDisabled,\n leftIcon,\n leftIconProps,\n rightIcon,\n rightIconProps,\n theme: propsTheme,\n ...forwardedProps\n } = props;\n const isDisabled = propsIsDisabled || disabled;\n\n const theme = useTheme(propsTheme);\n\n return (\n <StyledLink\n as=\"button\"\n {...forwardedProps}\n $color={color}\n $hasIcons={Boolean(leftIcon || rightIcon)}\n $isDisabled={isDisabled || disabled}\n $theme={theme}\n aria-disabled={isDisabled || disabled}\n className={classNames(LinkButton.className, className)}\n disabled={isDisabled || disabled}\n // @ts-ignore\n ref={buttonRef as RefObject<HTMLButtonElement>}\n >\n {leftIcon || rightIcon ? (\n <>\n {leftIcon ? (\n <Icon icon={leftIcon} aria-hidden=\"true\" className=\"left\" size=\"xsmall\" {...leftIconProps} />\n ) : null}\n <span className=\"text\">{children}</span>\n {rightIcon ? (\n <Icon icon={rightIcon} aria-hidden=\"true\" className=\"right\" size=\"xsmall\" {...rightIconProps} />\n ) : null}\n </>\n ) : (\n children\n )}\n </StyledLink>\n );\n});\nLinkButton.className = CLASSNAME;\nLinkButton.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","LinkButton","forwardRef","props","ref","buttonRef","useRef","undefined","children","className","color","disabled","isDisabled","propsIsDisabled","leftIcon","leftIconProps","rightIcon","rightIconProps","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","StyledLink","_extends","as","$color","$hasIcons","Boolean","$isDisabled","$theme","classNames","Fragment","Icon","icon","size","displayName"],"mappings":";;;;;;;;AAQA,MAAMA,cAAc,GAAG,YAAY,CAAA;AACnC,MAAMC,SAAS,GAAG,qBAAqB,CAAA;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAoD,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;AAC7F,EAAA,MAAMC,SAAS,GAAGD,GAAG,IAAIE,MAAM,CAAoBC,SAAS,CAAC,CAAA;EAE7D,MAAM;MACJC,QAAQ;MACRC,SAAS;AACTC,MAAAA,KAAK,GAAG,SAAS;MACjBC,QAAQ;AACRC,MAAAA,UAAU,EAAEC,eAAe;MAC3BC,QAAQ;MACRC,aAAa;MACbC,SAAS;MACTC,cAAc;AACdC,MAAAA,KAAK,EAAEC,UAAAA;AAET,KAAC,GAAGhB,KAAK;AADJiB,IAAAA,cAAc,GAAAC,wBAAA,CACflB,KAAK,EAAAmB,SAAA,CAAA,CAAA;AACT,EAAA,MAAMV,UAAU,GAAGC,eAAe,IAAIF,QAAQ,CAAA;AAE9C,EAAA,MAAMO,KAAK,GAAGK,QAAQ,CAACJ,UAAU,CAAC,CAAA;AAElC,EAAA,oBACEK,cAAA,CAAAC,aAAA,CAACC,UAAU,EAAAC,QAAA,CAAA;AACTC,IAAAA,EAAE,EAAC,QAAA;AAAQ,GAAA,EACPR,cAAc,EAAA;AAClBS,IAAAA,MAAM,EAAEnB,KAAM;AACdoB,IAAAA,SAAS,EAAEC,OAAO,CAACjB,QAAQ,IAAIE,SAAS,CAAE;IAC1CgB,WAAW,EAAEpB,UAAU,IAAID,QAAS;AACpCsB,IAAAA,MAAM,EAAEf,KAAM;IACd,eAAeN,EAAAA,UAAU,IAAID,QAAS;IACtCF,SAAS,EAAEyB,UAAU,CAACjC,UAAU,CAACQ,SAAS,EAAEA,SAAS,CAAE;IACvDE,QAAQ,EAAEC,UAAU,IAAID,QAAAA;AACxB;AAAA;AACAP,IAAAA,GAAG,EAAEC,SAAAA;GAEJS,CAAAA,EAAAA,QAAQ,IAAIE,SAAS,gBACpBQ,cAAA,CAAAC,aAAA,CAAAD,cAAA,CAAAW,QAAA,EACGrB,IAAAA,EAAAA,QAAQ,gBACPU,cAAA,CAAAC,aAAA,CAACW,IAAI,EAAAT,QAAA,CAAA;AAACU,IAAAA,IAAI,EAAEvB,QAAS;AAAC,IAAA,aAAA,EAAY,MAAM;AAACL,IAAAA,SAAS,EAAC,MAAM;AAAC6B,IAAAA,IAAI,EAAC,QAAA;GAAavB,EAAAA,aAAa,CAAG,CAAC,GAC3F,IAAI,eACRS,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMhB,IAAAA,SAAS,EAAC,MAAA;GAAQD,EAAAA,QAAe,CAAC,EACvCQ,SAAS,gBACRQ,cAAA,CAAAC,aAAA,CAACW,IAAI,EAAAT,QAAA,CAAA;AAACU,IAAAA,IAAI,EAAErB,SAAU;AAAC,IAAA,aAAA,EAAY,MAAM;AAACP,IAAAA,SAAS,EAAC,OAAO;AAAC6B,IAAAA,IAAI,EAAC,QAAA;GAAarB,EAAAA,cAAc,CAAG,CAAC,GAC9F,IACJ,CAAC,GAEHT,QAEQ,CAAC,CAAA;AAEjB,CAAC,EAAC;AACFP,UAAU,CAACQ,SAAS,GAAGT,SAAS,CAAA;AAChCC,UAAU,CAACsC,WAAW,GAAGxC,cAAc;;;;"}
|
package/_internal/Listbox2.js
CHANGED
|
@@ -61,11 +61,11 @@ const ActiveDescendantListbox = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
61
61
|
id: id,
|
|
62
62
|
role: "listbox",
|
|
63
63
|
"aria-activedescendant": (_context$state$active = context.state.activedescendant) === null || _context$state$active === void 0 ? void 0 : _context$state$active[0],
|
|
64
|
-
"aria-multiselectable": context.state.selectionMode === 'multiple'
|
|
64
|
+
"aria-multiselectable": context.state.selectionMode === 'multiple'
|
|
65
|
+
// Focusable (the options are reached through aria-activedescendant), so it keeps the browser's focus
|
|
66
|
+
// indicator: an inline `outline: 'none'` hid it.
|
|
67
|
+
,
|
|
65
68
|
tabIndex: 0,
|
|
66
|
-
style: {
|
|
67
|
-
outline: 'none'
|
|
68
|
-
},
|
|
69
69
|
onFocus: handleFocus,
|
|
70
70
|
onBlur: handleBlur,
|
|
71
71
|
onMouseDown: event => event.preventDefault(),
|
|
@@ -240,7 +240,7 @@ const Listbox = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
240
240
|
forwardedProps = _objectWithoutProperties(otherProps, _excluded);
|
|
241
241
|
const [_id] = useId();
|
|
242
242
|
const id = propsId !== null && propsId !== void 0 ? propsId : _id;
|
|
243
|
-
const _ref = useRef();
|
|
243
|
+
const _ref = useRef(undefined);
|
|
244
244
|
const divRef = ref !== null && ref !== void 0 ? ref : _ref;
|
|
245
245
|
const [state, dispatch] = useReducer(ListboxReducer, _objectSpread2(_objectSpread2({}, LISTBOX_INITIAL_STATE), {}, {
|
|
246
246
|
isDisabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Listbox2.js","sources":["../../src/components/listbox/ActiveDescendantListbox.tsx","../../src/components/listbox/RovingTabindexListbox.tsx","../../src/components/listbox/styles.ts","../../src/components/listbox/reducer.ts","../../src/components/listbox/Listbox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, KeyboardEvent } from 'react';\nimport { ListboxActionType, ListboxContextProps, ListboxProps } from './types';\nimport { ListboxContext } from './context';\nimport { Flexbox } from '../flexbox';\nimport { useFocusOnList } from '../focus-within-group';\n\nexport const ActiveDescendantListbox = forwardRef<\n HTMLDivElement,\n Omit<ListboxProps, 'onChange'> & { context: ListboxContextProps }\n>((props, ref) => {\n const { children, id, isDisabled, context, ...forwardedProps } = props;\n\n const { activedescendant, handleKeyDown: handleFocusKeyDown, handleFocus, handleBlur } = useFocusOnList();\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n handleFocusKeyDown(event);\n const code = event.code;\n if (code === 'Enter' || code === 'Space') {\n if (context.state.selectionMode === 'multiple') {\n context.dispatch({\n type: ListboxActionType.TOGGLE,\n payload: { value: activedescendant?.[1] ?? '', activedescendant },\n });\n } else {\n context.dispatch({\n type: ListboxActionType.SET,\n payload: {\n values: [activedescendant?.[1] ?? ''],\n activedescendant,\n },\n });\n }\n }\n },\n [activedescendant]\n );\n\n return (\n <Flexbox\n flexDirection=\"column\"\n gap=\"8px\"\n {...forwardedProps}\n aria-disabled={isDisabled}\n ref={ref}\n id={id}\n role=\"listbox\"\n aria-activedescendant={context.state.activedescendant?.[0]}\n aria-multiselectable={context.state.selectionMode === 'multiple'}\n tabIndex={0}\n style={{ outline: 'none' }}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onMouseDown={(event) => event.preventDefault()}\n onMouseLeave={handleBlur}\n onKeyDown={handleKeyDown}\n >\n <ListboxContext.Provider value={context}>{children}</ListboxContext.Provider>\n </Flexbox>\n );\n});\n","import React, { forwardRef } from 'react';\nimport { ListboxContextProps, ListboxProps } from './types';\nimport { ListboxContext } from './context';\nimport { Flexbox } from '../flexbox';\n\nexport const RovingTabindexListbox = forwardRef<\n HTMLDivElement,\n Omit<ListboxProps, 'onChange'> & { context: ListboxContextProps }\n>((props, ref) => {\n const { children, id, isDisabled, context, ...forwardedProps } = props;\n\n return (\n <Flexbox\n flexDirection=\"column\"\n gap=\"8px\"\n {...forwardedProps}\n aria-disabled={isDisabled}\n ref={ref}\n id={id}\n role=\"listbox\"\n aria-multiselectable={context.state.selectionMode === 'multiple'}\n >\n <ListboxContext.Provider value={context}>{children}</ListboxContext.Provider>\n </Flexbox>\n );\n});\n","import styled, { css } from 'styled-components';\nimport { ListboxVariant, StyledListboxProps } from './types';\nimport { baseContainer } from '../shared';\n\n/**\n * Component style.\n */\nexport const StyledListbox = styled.div<StyledListboxProps>`\n ${baseContainer}\n outline: none;\n\n ${({ $variant, $isDisabled, $isInvalid }) =>\n $variant === ListboxVariant.standalone\n ? css`\n span.redsift-listbox-label {\n font-family: var(--redsift-typography-body-font-family);\n font-weight: var(--redsift-typography-body-font-weight);\n font-size: var(--redsift-typography-body-font-size);\n line-height: var(--redsift-typography-body-line-height);\n\n color: var(--redsift-color-neutral-black);\n ${$isDisabled\n ? `\n color: var(--redsift-color-neutral-mid-grey);\n `\n : ''}\n ${$isInvalid\n ? `\n color: var(--redsift-color-red-n);\n `\n : ''}\n }\n\n .redsift-listbox-list {\n border: 1px solid var(--redsift-color-neutral-mid-grey);\n padding: 4px;\n min-width: 200px;\n }\n `\n : ''}\n`;\n","import { ListboxState, ListboxAction, ListboxActionType } from './types';\n\nexport const ListboxReducer = (state: ListboxState, action: ListboxAction): ListboxState => {\n switch (action.type) {\n case ListboxActionType.TOGGLE: {\n if (state.isReadOnly || state.isDisabled) {\n return state;\n }\n if (!state.selectedValues.includes(action.payload.value)) {\n return {\n ...state,\n selectedValues: state.selectedValues.concat(action.payload.value),\n ...(action.payload.activedescendant && { activedescendant: action.payload.activedescendant }),\n };\n }\n return {\n ...state,\n selectedValues: state.selectedValues.filter((existingValue) => existingValue !== action.payload.value),\n ...(action.payload.activedescendant && { activedescendant: action.payload.activedescendant }),\n };\n }\n case ListboxActionType.SET: {\n if (state.isReadOnly || state.isDisabled) {\n return state;\n }\n return {\n ...state,\n selectedValues: action.payload.values,\n ...(action.payload.activedescendant && { activedescendant: action.payload.activedescendant }),\n };\n }\n case ListboxActionType.UPDATE_OPTIONS: {\n return {\n ...state,\n ...action.payload,\n };\n }\n default:\n return state;\n }\n};\n","import React, { ComponentProps, forwardRef, RefObject, useEffect, useMemo, useReducer, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp, getContainerStylingTransientProps } from '../../types';\nimport { ListboxActionType, ListboxContextProps, ListboxProps, ListboxState, ListboxVariant } from './types';\nimport { LISTBOX_INITIAL_STATE } from './context';\nimport { StyledListbox } from './styles';\nimport { ListboxReducer } from './reducer';\nimport { FocusWithinGroup } from '../focus-within-group';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { RovingTabindexListbox } from './RovingTabindexListbox';\nimport { ActiveDescendantListbox } from './ActiveDescendantListbox';\nimport { useId, warnIfNoAccessibleLabelFound } from '../../utils';\n\nconst COMPONENT_NAME = 'Listbox';\nconst CLASSNAME = 'redsift-listbox';\n\n/**\n * Listbox displays a list of selectable options. Supports single or multiple\n * selection modes and keyboard navigation.\n *\n * Can be used standalone or within picker components like Select and Combobox.\n * Supports controlled (`values`) or uncontrolled (`defaultValues`) modes.\n *\n * @example\n * // Single selection listbox\n * <Listbox label=\"Choose a color\" selectionMode=\"single\" onChange={setColor}>\n * <Item value=\"red\">Red</Item>\n * <Item value=\"blue\">Blue</Item>\n * <Item value=\"green\">Green</Item>\n * </Listbox>\n *\n * @example\n * // Multiple selection\n * <Listbox\n * label=\"Select tags\"\n * selectionMode=\"multiple\"\n * values={selectedTags}\n * onChange={setSelectedTags}\n * >\n * <Item value=\"urgent\">Urgent</Item>\n * <Item value=\"review\">Needs Review</Item>\n * <Item value=\"approved\">Approved</Item>\n * </Listbox>\n */\nexport const Listbox: Comp<ListboxProps, HTMLDivElement> = forwardRef((props, ref) => {\n const propsWithDefaults = {\n flexDirection: 'column' as const,\n gap: '8px',\n ...props,\n };\n\n const { transientProps, otherProps } = getContainerStylingTransientProps(propsWithDefaults);\n\n const {\n children,\n className,\n defaultValues,\n direction,\n focusOnClick = false,\n focusType = 'roving-tabindex',\n id: propsId,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n label,\n loopAround,\n onChange,\n selectionMode = 'single',\n values,\n variant = ListboxVariant.standalone,\n ...forwardedProps\n } = otherProps;\n const [_id] = useId();\n const id = propsId ?? _id;\n const _ref = useRef<HTMLDivElement>();\n const divRef = ref ?? _ref;\n\n const [state, dispatch] = useReducer(ListboxReducer, {\n ...LISTBOX_INITIAL_STATE,\n isDisabled,\n isReadOnly,\n selectedValues: values || defaultValues || [],\n selectionMode,\n } as ListboxState);\n\n useEffect(() => {\n if (values && values.length >= 0) {\n dispatch({\n type: ListboxActionType.SET,\n payload: {\n values,\n },\n });\n }\n }, [values]);\n\n const context = useMemo<ListboxContextProps>(\n () => ({\n state,\n dispatch,\n }),\n [state]\n );\n\n useEffect(() => {\n onChange?.(state.selectedValues);\n }, [state.selectedValues]);\n\n useEffect(() => {\n warnIfNoAccessibleLabelFound(props as ComponentProps<keyof JSX.IntrinsicElements>, [label]);\n }, []);\n\n return (\n <ConditionalWrapper\n wrapper={(children) => (\n <StyledListbox\n {...forwardedProps}\n {...transientProps}\n $isDisabled={isDisabled}\n $isInvalid={isInvalid || (isRequired && state.selectedValues.length === 0)}\n $isReadOnly={isReadOnly}\n className={classNames(Listbox.className, className)}\n ref={divRef as RefObject<HTMLDivElement>}\n id={id}\n $variant={variant}\n >\n {children}\n </StyledListbox>\n )}\n condition={variant === ListboxVariant.standalone}\n >\n <FocusWithinGroup direction={direction} focusOnClick={focusOnClick} loopAround={loopAround} focusType={focusType}>\n {label ? (\n <span id={`${id}-label`} className={`${Listbox.className}-label`}>\n {label}\n {isRequired ? <span aria-hidden=\"true\">{' *'}</span> : null}\n </span>\n ) : null}\n {focusType === 'roving-tabindex' ? (\n <RovingTabindexListbox\n {...forwardedProps}\n className={`${Listbox.className}-list`}\n context={context}\n ref={divRef as RefObject<HTMLDivElement>}\n >\n {children}\n </RovingTabindexListbox>\n ) : (\n <ActiveDescendantListbox\n {...forwardedProps}\n className={`${Listbox.className}-list`}\n context={context}\n ref={divRef as RefObject<HTMLDivElement>}\n >\n {children}\n </ActiveDescendantListbox>\n )}\n </FocusWithinGroup>\n </ConditionalWrapper>\n );\n});\nListbox.className = CLASSNAME;\nListbox.displayName = COMPONENT_NAME;\n"],"names":["ActiveDescendantListbox","forwardRef","props","ref","_context$state$active","children","id","isDisabled","context","forwardedProps","_objectWithoutProperties","_excluded","activedescendant","handleKeyDown","handleFocusKeyDown","handleFocus","handleBlur","useFocusOnList","useCallback","event","code","state","selectionMode","_activedescendant$","dispatch","type","ListboxActionType","TOGGLE","payload","value","_activedescendant$2","SET","values","React","createElement","Flexbox","_extends","flexDirection","gap","role","tabIndex","style","outline","onFocus","onBlur","onMouseDown","preventDefault","onMouseLeave","onKeyDown","ListboxContext","Provider","RovingTabindexListbox","StyledListbox","styled","div","baseContainer","_ref","$variant","$isDisabled","$isInvalid","ListboxVariant","standalone","css","ListboxReducer","action","isReadOnly","selectedValues","includes","_objectSpread","concat","filter","existingValue","UPDATE_OPTIONS","COMPONENT_NAME","CLASSNAME","Listbox","propsWithDefaults","transientProps","otherProps","getContainerStylingTransientProps","className","defaultValues","direction","focusOnClick","focusType","propsId","isInvalid","isRequired","label","loopAround","onChange","variant","_id","useId","useRef","divRef","useReducer","LISTBOX_INITIAL_STATE","useEffect","length","useMemo","warnIfNoAccessibleLabelFound","ConditionalWrapper","wrapper","$isReadOnly","classNames","condition","FocusWithinGroup","displayName"],"mappings":";;;;;;;;;;;;;;AAMO,MAAMA,uBAAuB,gBAAGC,UAAU,CAG/C,CAACC,KAAK,EAAEC,GAAG,KAAK;AAAA,EAAA,IAAAC,qBAAA,CAAA;EAChB,MAAM;MAAEC,QAAQ;MAAEC,EAAE;MAAEC,UAAU;AAAEC,MAAAA,OAAAA;AAA2B,KAAC,GAAGN,KAAK;AAAxBO,IAAAA,cAAc,GAAAC,wBAAA,CAAKR,KAAK,EAAAS,WAAA,CAAA,CAAA;EAEtE,MAAM;IAAEC,gBAAgB;AAAEC,IAAAA,aAAa,EAAEC,kBAAkB;IAAEC,WAAW;AAAEC,IAAAA,UAAAA;GAAY,GAAGC,cAAc,EAAE,CAAA;AAEzG,EAAA,MAAMJ,aAAa,GAAGK,WAAW,CAC9BC,KAAoB,IAAK;IACxBL,kBAAkB,CAACK,KAAK,CAAC,CAAA;AACzB,IAAA,MAAMC,IAAI,GAAGD,KAAK,CAACC,IAAI,CAAA;AACvB,IAAA,IAAIA,IAAI,KAAK,OAAO,IAAIA,IAAI,KAAK,OAAO,EAAE;AACxC,MAAA,IAAIZ,OAAO,CAACa,KAAK,CAACC,aAAa,KAAK,UAAU,EAAE;AAAA,QAAA,IAAAC,kBAAA,CAAA;QAC9Cf,OAAO,CAACgB,QAAQ,CAAC;UACfC,IAAI,EAAEC,iBAAiB,CAACC,MAAM;AAC9BC,UAAAA,OAAO,EAAE;AAAEC,YAAAA,KAAK,GAAAN,kBAAA,GAAEX,gBAAgB,KAAA,IAAA,IAAhBA,gBAAgB,KAAhBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,gBAAgB,CAAG,CAAC,CAAC,MAAAW,IAAAA,IAAAA,kBAAA,KAAAA,KAAAA,CAAAA,GAAAA,kBAAA,GAAI,EAAE;AAAEX,YAAAA,gBAAAA;AAAiB,WAAA;AAClE,SAAC,CAAC,CAAA;AACJ,OAAC,MAAM;AAAA,QAAA,IAAAkB,mBAAA,CAAA;QACLtB,OAAO,CAACgB,QAAQ,CAAC;UACfC,IAAI,EAAEC,iBAAiB,CAACK,GAAG;AAC3BH,UAAAA,OAAO,EAAE;AACPI,YAAAA,MAAM,EAAE,CAAAF,CAAAA,mBAAA,GAAClB,gBAAgB,KAAA,IAAA,IAAhBA,gBAAgB,KAAhBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,gBAAgB,CAAG,CAAC,CAAC,MAAAkB,IAAAA,IAAAA,mBAAA,cAAAA,mBAAA,GAAI,EAAE,CAAC;AACrClB,YAAAA,gBAAAA;AACF,WAAA;AACF,SAAC,CAAC,CAAA;AACJ,OAAA;AACF,KAAA;AACF,GAAC,EACD,CAACA,gBAAgB,CACnB,CAAC,CAAA;AAED,EAAA,oBACEqB,cAAA,CAAAC,aAAA,CAACC,OAAO,EAAAC,QAAA,CAAA;AACNC,IAAAA,aAAa,EAAC,QAAQ;AACtBC,IAAAA,GAAG,EAAC,KAAA;AAAK,GAAA,EACL7B,cAAc,EAAA;AAClB,IAAA,eAAA,EAAeF,UAAW;AAC1BJ,IAAAA,GAAG,EAAEA,GAAI;AACTG,IAAAA,EAAE,EAAEA,EAAG;AACPiC,IAAAA,IAAI,EAAC,SAAS;AACd,IAAA,uBAAA,EAAA,CAAAnC,qBAAA,GAAuBI,OAAO,CAACa,KAAK,CAACT,gBAAgB,MAAA,IAAA,IAAAR,qBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAA9BA,qBAAA,CAAiC,CAAC,CAAE;AAC3D,IAAA,sBAAA,EAAsBI,OAAO,CAACa,KAAK,CAACC,aAAa,KAAK,UAAW;AACjEkB,IAAAA,QAAQ,EAAE,CAAE;AACZC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,OAAO,EAAE,MAAA;KAAS;AAC3BC,IAAAA,OAAO,EAAE5B,WAAY;AACrB6B,IAAAA,MAAM,EAAE5B,UAAW;AACnB6B,IAAAA,WAAW,EAAG1B,KAAK,IAAKA,KAAK,CAAC2B,cAAc,EAAG;AAC/CC,IAAAA,YAAY,EAAE/B,UAAW;AACzBgC,IAAAA,SAAS,EAAEnC,aAAAA;AAAc,GAAA,CAAA,eAEzBoB,cAAA,CAAAC,aAAA,CAACe,cAAc,CAACC,QAAQ,EAAA;AAACrB,IAAAA,KAAK,EAAErB,OAAAA;GAAUH,EAAAA,QAAkC,CACrE,CAAC,CAAA;AAEd,CAAC;;;ACvDM,MAAM8C,qBAAqB,gBAAGlD,UAAU,CAG7C,CAACC,KAAK,EAAEC,GAAG,KAAK;EAChB,MAAM;MAAEE,QAAQ;MAAEC,EAAE;MAAEC,UAAU;AAAEC,MAAAA,OAAAA;AAA2B,KAAC,GAAGN,KAAK;AAAxBO,IAAAA,cAAc,GAAAC,wBAAA,CAAKR,KAAK,EAAAS,WAAA,CAAA,CAAA;AAEtE,EAAA,oBACEsB,cAAA,CAAAC,aAAA,CAACC,OAAO,EAAAC,QAAA,CAAA;AACNC,IAAAA,aAAa,EAAC,QAAQ;AACtBC,IAAAA,GAAG,EAAC,KAAA;AAAK,GAAA,EACL7B,cAAc,EAAA;AAClB,IAAA,eAAA,EAAeF,UAAW;AAC1BJ,IAAAA,GAAG,EAAEA,GAAI;AACTG,IAAAA,EAAE,EAAEA,EAAG;AACPiC,IAAAA,IAAI,EAAC,SAAS;AACd,IAAA,sBAAA,EAAsB/B,OAAO,CAACa,KAAK,CAACC,aAAa,KAAK,UAAA;AAAW,GAAA,CAAA,eAEjEW,cAAA,CAAAC,aAAA,CAACe,cAAc,CAACC,QAAQ,EAAA;AAACrB,IAAAA,KAAK,EAAErB,OAAAA;GAAUH,EAAAA,QAAkC,CACrE,CAAC,CAAA;AAEd,CAAC;;ACrBD;AACA;AACA;AACO,MAAM+C,aAAa,GAAGC,MAAM,CAACC,GAAwB,CAAA;AAC5D,EAAA,EAAIC,aAAc,CAAA;AAClB;AACA;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC,WAAW;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAAH,IAAA,CAAA;AAAA,EAAA,OACtCC,QAAQ,KAAKG,cAAc,CAACC,UAAU,GAClCC,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAA,EAAcJ,WAAW,GACR,CAAA;AACjB;AACA,QAAA,CAAS,GACO,EAAG,CAAA;AACnB,YAAA,EAAcC,UAAU,GACP,CAAA;AACjB;AACA,QAAA,CAAS,GACO,EAAG,CAAA;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX,CAAC;;MCtCYI,cAAc,GAAGA,CAAC1C,KAAmB,EAAE2C,MAAqB,KAAmB;EAC1F,QAAQA,MAAM,CAACvC,IAAI;IACjB,KAAKC,iBAAiB,CAACC,MAAM;AAAE,MAAA;AAC7B,QAAA,IAAIN,KAAK,CAAC4C,UAAU,IAAI5C,KAAK,CAACd,UAAU,EAAE;AACxC,UAAA,OAAOc,KAAK,CAAA;AACd,SAAA;AACA,QAAA,IAAI,CAACA,KAAK,CAAC6C,cAAc,CAACC,QAAQ,CAACH,MAAM,CAACpC,OAAO,CAACC,KAAK,CAAC,EAAE;AACxD,UAAA,OAAAuC,cAAA,CAAAA,cAAA,CAAA,EAAA,EACK/C,KAAK,CAAA,EAAA,EAAA,EAAA;YACR6C,cAAc,EAAE7C,KAAK,CAAC6C,cAAc,CAACG,MAAM,CAACL,MAAM,CAACpC,OAAO,CAACC,KAAK,CAAA;AAAC,WAAA,EAC7DmC,MAAM,CAACpC,OAAO,CAAChB,gBAAgB,IAAI;AAAEA,YAAAA,gBAAgB,EAAEoD,MAAM,CAACpC,OAAO,CAAChB,gBAAAA;WAAkB,CAAA,CAAA;AAEhG,SAAA;AACA,QAAA,OAAAwD,cAAA,CAAAA,cAAA,CAAA,EAAA,EACK/C,KAAK,CAAA,EAAA,EAAA,EAAA;AACR6C,UAAAA,cAAc,EAAE7C,KAAK,CAAC6C,cAAc,CAACI,MAAM,CAAEC,aAAa,IAAKA,aAAa,KAAKP,MAAM,CAACpC,OAAO,CAACC,KAAK,CAAA;AAAC,SAAA,EAClGmC,MAAM,CAACpC,OAAO,CAAChB,gBAAgB,IAAI;AAAEA,UAAAA,gBAAgB,EAAEoD,MAAM,CAACpC,OAAO,CAAChB,gBAAAA;SAAkB,CAAA,CAAA;AAEhG,OAAA;IACA,KAAKc,iBAAiB,CAACK,GAAG;AAAE,MAAA;AAC1B,QAAA,IAAIV,KAAK,CAAC4C,UAAU,IAAI5C,KAAK,CAACd,UAAU,EAAE;AACxC,UAAA,OAAOc,KAAK,CAAA;AACd,SAAA;AACA,QAAA,OAAA+C,cAAA,CAAAA,cAAA,CAAA,EAAA,EACK/C,KAAK,CAAA,EAAA,EAAA,EAAA;AACR6C,UAAAA,cAAc,EAAEF,MAAM,CAACpC,OAAO,CAACI,MAAAA;AAAM,SAAA,EACjCgC,MAAM,CAACpC,OAAO,CAAChB,gBAAgB,IAAI;AAAEA,UAAAA,gBAAgB,EAAEoD,MAAM,CAACpC,OAAO,CAAChB,gBAAAA;SAAkB,CAAA,CAAA;AAEhG,OAAA;IACA,KAAKc,iBAAiB,CAAC8C,cAAc;AAAE,MAAA;QACrC,OAAAJ,cAAA,CAAAA,cAAA,CAAA,EAAA,EACK/C,KAAK,CACL2C,EAAAA,MAAM,CAACpC,OAAO,CAAA,CAAA;AAErB,OAAA;AACA,IAAA;AACE,MAAA,OAAOP,KAAK,CAAA;AAChB,GAAA;AACF;;;AC3BA,MAAMoD,cAAc,GAAG,SAAS,CAAA;AAChC,MAAMC,SAAS,GAAG,iBAAiB,CAAA;;AAEnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,OAA2C,gBAAG1E,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACpF,MAAMyE,iBAAiB,GAAAR,cAAA,CAAA;AACrB/B,IAAAA,aAAa,EAAE,QAAiB;AAChCC,IAAAA,GAAG,EAAE,KAAA;AAAK,GAAA,EACPpC,KAAK,CACT,CAAA;EAED,MAAM;IAAE2E,cAAc;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,iCAAiC,CAACH,iBAAiB,CAAC,CAAA;EAE3F,MAAM;MACJvE,QAAQ;MACR2E,SAAS;MACTC,aAAa;MACbC,SAAS;AACTC,MAAAA,YAAY,GAAG,KAAK;AACpBC,MAAAA,SAAS,GAAG,iBAAiB;AAC7B9E,MAAAA,EAAE,EAAE+E,OAAO;MACX9E,UAAU;MACV+E,SAAS;MACTrB,UAAU;MACVsB,UAAU;MACVC,KAAK;MACLC,UAAU;MACVC,QAAQ;AACRpE,MAAAA,aAAa,GAAG,QAAQ;MACxBU,MAAM;MACN2D,OAAO,GAAG/B,cAAc,CAACC,UAAAA;AAE3B,KAAC,GAAGiB,UAAU;AADTrE,IAAAA,cAAc,GAAAC,wBAAA,CACfoE,UAAU,EAAAnE,SAAA,CAAA,CAAA;AACd,EAAA,MAAM,CAACiF,GAAG,CAAC,GAAGC,KAAK,EAAE,CAAA;EACrB,MAAMvF,EAAE,GAAG+E,OAAO,KAAA,IAAA,IAAPA,OAAO,KAAPA,KAAAA,CAAAA,GAAAA,OAAO,GAAIO,GAAG,CAAA;AACzB,EAAA,MAAMpC,IAAI,GAAGsC,MAAM,EAAkB,CAAA;EACrC,MAAMC,MAAM,GAAG5F,GAAG,KAAA,IAAA,IAAHA,GAAG,KAAHA,KAAAA,CAAAA,GAAAA,GAAG,GAAIqD,IAAI,CAAA;AAE1B,EAAA,MAAM,CAACnC,KAAK,EAAEG,QAAQ,CAAC,GAAGwE,UAAU,CAACjC,cAAc,EAAAK,cAAA,CAAAA,cAAA,KAC9C6B,qBAAqB,CAAA,EAAA,EAAA,EAAA;IACxB1F,UAAU;IACV0D,UAAU;AACVC,IAAAA,cAAc,EAAElC,MAAM,IAAIiD,aAAa,IAAI,EAAE;AAC7C3D,IAAAA,aAAAA;AAAa,GAAA,CACE,CAAC,CAAA;AAElB4E,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,IAAIlE,MAAM,IAAIA,MAAM,CAACmE,MAAM,IAAI,CAAC,EAAE;AAChC3E,MAAAA,QAAQ,CAAC;QACPC,IAAI,EAAEC,iBAAiB,CAACK,GAAG;AAC3BH,QAAAA,OAAO,EAAE;AACPI,UAAAA,MAAAA;AACF,SAAA;AACF,OAAC,CAAC,CAAA;AACJ,KAAA;AACF,GAAC,EAAE,CAACA,MAAM,CAAC,CAAC,CAAA;AAEZ,EAAA,MAAMxB,OAAO,GAAG4F,OAAO,CACrB,OAAO;IACL/E,KAAK;AACLG,IAAAA,QAAAA;AACF,GAAC,CAAC,EACF,CAACH,KAAK,CACR,CAAC,CAAA;AAED6E,EAAAA,SAAS,CAAC,MAAM;IACdR,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAARA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,QAAQ,CAAGrE,KAAK,CAAC6C,cAAc,CAAC,CAAA;AAClC,GAAC,EAAE,CAAC7C,KAAK,CAAC6C,cAAc,CAAC,CAAC,CAAA;AAE1BgC,EAAAA,SAAS,CAAC,MAAM;AACdG,IAAAA,4BAA4B,CAACnG,KAAK,EAAiD,CAACsF,KAAK,CAAC,CAAC,CAAA;GAC5F,EAAE,EAAE,CAAC,CAAA;AAEN,EAAA,oBACEvD,cAAA,CAAAC,aAAA,CAACoE,kBAAkB,EAAA;AACjBC,IAAAA,OAAO,EAAGlG,QAAQ,iBAChB4B,cAAA,CAAAC,aAAA,CAACkB,aAAa,EAAAhB,QAAA,CACR3B,EAAAA,EAAAA,cAAc,EACdoE,cAAc,EAAA;AAClBnB,MAAAA,WAAW,EAAEnD,UAAW;MACxBoD,UAAU,EAAE2B,SAAS,IAAKC,UAAU,IAAIlE,KAAK,CAAC6C,cAAc,CAACiC,MAAM,KAAK,CAAG;AAC3EK,MAAAA,WAAW,EAAEvC,UAAW;MACxBe,SAAS,EAAEyB,UAAU,CAAC9B,OAAO,CAACK,SAAS,EAAEA,SAAS,CAAE;AACpD7E,MAAAA,GAAG,EAAE4F,MAAoC;AACzCzF,MAAAA,EAAE,EAAEA,EAAG;AACPmD,MAAAA,QAAQ,EAAEkC,OAAAA;AAAQ,KAAA,CAAA,EAEjBtF,QACY,CACf;AACFqG,IAAAA,SAAS,EAAEf,OAAO,KAAK/B,cAAc,CAACC,UAAAA;AAAW,GAAA,eAEjD5B,cAAA,CAAAC,aAAA,CAACyE,gBAAgB,EAAA;AAACzB,IAAAA,SAAS,EAAEA,SAAU;AAACC,IAAAA,YAAY,EAAEA,YAAa;AAACM,IAAAA,UAAU,EAAEA,UAAW;AAACL,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,EAC9GI,KAAK,gBACJvD,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IAAM5B,EAAE,EAAG,CAAEA,EAAAA,EAAG,CAAQ,MAAA,CAAA;AAAC0E,IAAAA,SAAS,EAAG,CAAA,EAAEL,OAAO,CAACK,SAAU,CAAA,MAAA,CAAA;AAAQ,GAAA,EAC9DQ,KAAK,EACLD,UAAU,gBAAGtD,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IAAM,aAAY,EAAA,MAAA;GAAQ,EAAA,IAAW,CAAC,GAAG,IACnD,CAAC,GACL,IAAI,EACPkD,SAAS,KAAK,iBAAiB,gBAC9BnD,cAAA,CAAAC,aAAA,CAACiB,qBAAqB,EAAAf,QAAA,KAChB3B,cAAc,EAAA;AAClBuE,IAAAA,SAAS,EAAG,CAAA,EAAEL,OAAO,CAACK,SAAU,CAAO,KAAA,CAAA;AACvCxE,IAAAA,OAAO,EAAEA,OAAQ;AACjBL,IAAAA,GAAG,EAAE4F,MAAAA;GAEJ1F,CAAAA,EAAAA,QACoB,CAAC,gBAExB4B,cAAA,CAAAC,aAAA,CAAClC,uBAAuB,EAAAoC,QAAA,CAAA,EAAA,EAClB3B,cAAc,EAAA;AAClBuE,IAAAA,SAAS,EAAG,CAAA,EAAEL,OAAO,CAACK,SAAU,CAAO,KAAA,CAAA;AACvCxE,IAAAA,OAAO,EAAEA,OAAQ;AACjBL,IAAAA,GAAG,EAAE4F,MAAAA;GAEJ1F,CAAAA,EAAAA,QACsB,CAEX,CACA,CAAC,CAAA;AAEzB,CAAC,EAAC;AACFsE,OAAO,CAACK,SAAS,GAAGN,SAAS,CAAA;AAC7BC,OAAO,CAACiC,WAAW,GAAGnC,cAAc;;;;"}
|
|
1
|
+
{"version":3,"file":"Listbox2.js","sources":["../../src/components/listbox/ActiveDescendantListbox.tsx","../../src/components/listbox/RovingTabindexListbox.tsx","../../src/components/listbox/styles.ts","../../src/components/listbox/reducer.ts","../../src/components/listbox/Listbox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, KeyboardEvent } from 'react';\nimport { ListboxActionType, ListboxContextProps, ListboxProps } from './types';\nimport { ListboxContext } from './context';\nimport { Flexbox } from '../flexbox';\nimport { useFocusOnList } from '../focus-within-group';\n\nexport const ActiveDescendantListbox = forwardRef<\n HTMLDivElement,\n Omit<ListboxProps, 'onChange'> & { context: ListboxContextProps }\n>((props, ref) => {\n const { children, id, isDisabled, context, ...forwardedProps } = props;\n\n const { activedescendant, handleKeyDown: handleFocusKeyDown, handleFocus, handleBlur } = useFocusOnList();\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n handleFocusKeyDown(event);\n const code = event.code;\n if (code === 'Enter' || code === 'Space') {\n if (context.state.selectionMode === 'multiple') {\n context.dispatch({\n type: ListboxActionType.TOGGLE,\n payload: { value: activedescendant?.[1] ?? '', activedescendant },\n });\n } else {\n context.dispatch({\n type: ListboxActionType.SET,\n payload: {\n values: [activedescendant?.[1] ?? ''],\n activedescendant,\n },\n });\n }\n }\n },\n [activedescendant]\n );\n\n return (\n <Flexbox\n flexDirection=\"column\"\n gap=\"8px\"\n {...forwardedProps}\n aria-disabled={isDisabled}\n ref={ref}\n id={id}\n role=\"listbox\"\n aria-activedescendant={context.state.activedescendant?.[0]}\n aria-multiselectable={context.state.selectionMode === 'multiple'}\n // Focusable (the options are reached through aria-activedescendant), so it keeps the browser's focus\n // indicator: an inline `outline: 'none'` hid it.\n tabIndex={0}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onMouseDown={(event) => event.preventDefault()}\n onMouseLeave={handleBlur}\n onKeyDown={handleKeyDown}\n >\n <ListboxContext.Provider value={context}>{children}</ListboxContext.Provider>\n </Flexbox>\n );\n});\n","import React, { forwardRef } from 'react';\nimport { ListboxContextProps, ListboxProps } from './types';\nimport { ListboxContext } from './context';\nimport { Flexbox } from '../flexbox';\n\nexport const RovingTabindexListbox = forwardRef<\n HTMLDivElement,\n Omit<ListboxProps, 'onChange'> & { context: ListboxContextProps }\n>((props, ref) => {\n const { children, id, isDisabled, context, ...forwardedProps } = props;\n\n return (\n <Flexbox\n flexDirection=\"column\"\n gap=\"8px\"\n {...forwardedProps}\n aria-disabled={isDisabled}\n ref={ref}\n id={id}\n role=\"listbox\"\n aria-multiselectable={context.state.selectionMode === 'multiple'}\n >\n <ListboxContext.Provider value={context}>{children}</ListboxContext.Provider>\n </Flexbox>\n );\n});\n","import styled, { css } from 'styled-components';\nimport { ListboxVariant, StyledListboxProps } from './types';\nimport { baseContainer } from '../shared';\n\n/**\n * Component style.\n */\nexport const StyledListbox = styled.div<StyledListboxProps>`\n ${baseContainer}\n outline: none;\n\n ${({ $variant, $isDisabled, $isInvalid }) =>\n $variant === ListboxVariant.standalone\n ? css`\n span.redsift-listbox-label {\n font-family: var(--redsift-typography-body-font-family);\n font-weight: var(--redsift-typography-body-font-weight);\n font-size: var(--redsift-typography-body-font-size);\n line-height: var(--redsift-typography-body-line-height);\n\n color: var(--redsift-color-neutral-black);\n ${$isDisabled\n ? `\n color: var(--redsift-color-neutral-mid-grey);\n `\n : ''}\n ${$isInvalid\n ? `\n color: var(--redsift-color-red-n);\n `\n : ''}\n }\n\n .redsift-listbox-list {\n border: 1px solid var(--redsift-color-neutral-mid-grey);\n padding: 4px;\n min-width: 200px;\n }\n `\n : ''}\n`;\n","import { ListboxState, ListboxAction, ListboxActionType } from './types';\n\nexport const ListboxReducer = (state: ListboxState, action: ListboxAction): ListboxState => {\n switch (action.type) {\n case ListboxActionType.TOGGLE: {\n if (state.isReadOnly || state.isDisabled) {\n return state;\n }\n if (!state.selectedValues.includes(action.payload.value)) {\n return {\n ...state,\n selectedValues: state.selectedValues.concat(action.payload.value),\n ...(action.payload.activedescendant && { activedescendant: action.payload.activedescendant }),\n };\n }\n return {\n ...state,\n selectedValues: state.selectedValues.filter((existingValue) => existingValue !== action.payload.value),\n ...(action.payload.activedescendant && { activedescendant: action.payload.activedescendant }),\n };\n }\n case ListboxActionType.SET: {\n if (state.isReadOnly || state.isDisabled) {\n return state;\n }\n return {\n ...state,\n selectedValues: action.payload.values,\n ...(action.payload.activedescendant && { activedescendant: action.payload.activedescendant }),\n };\n }\n case ListboxActionType.UPDATE_OPTIONS: {\n return {\n ...state,\n ...action.payload,\n };\n }\n default:\n return state;\n }\n};\n","import React, { ComponentProps, forwardRef, RefObject, useEffect, useMemo, useReducer, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp, getContainerStylingTransientProps } from '../../types';\nimport { ListboxActionType, ListboxContextProps, ListboxProps, ListboxState, ListboxVariant } from './types';\nimport { LISTBOX_INITIAL_STATE } from './context';\nimport { StyledListbox } from './styles';\nimport { ListboxReducer } from './reducer';\nimport { FocusWithinGroup } from '../focus-within-group';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { RovingTabindexListbox } from './RovingTabindexListbox';\nimport { ActiveDescendantListbox } from './ActiveDescendantListbox';\nimport { useId, warnIfNoAccessibleLabelFound } from '../../utils';\n\nconst COMPONENT_NAME = 'Listbox';\nconst CLASSNAME = 'redsift-listbox';\n\n/**\n * Listbox displays a list of selectable options. Supports single or multiple\n * selection modes and keyboard navigation.\n *\n * Can be used standalone or within picker components like Select and Combobox.\n * Supports controlled (`values`) or uncontrolled (`defaultValues`) modes.\n *\n * @example\n * // Single selection listbox\n * <Listbox label=\"Choose a color\" selectionMode=\"single\" onChange={setColor}>\n * <Item value=\"red\">Red</Item>\n * <Item value=\"blue\">Blue</Item>\n * <Item value=\"green\">Green</Item>\n * </Listbox>\n *\n * @example\n * // Multiple selection\n * <Listbox\n * label=\"Select tags\"\n * selectionMode=\"multiple\"\n * values={selectedTags}\n * onChange={setSelectedTags}\n * >\n * <Item value=\"urgent\">Urgent</Item>\n * <Item value=\"review\">Needs Review</Item>\n * <Item value=\"approved\">Approved</Item>\n * </Listbox>\n */\nexport const Listbox: Comp<ListboxProps, HTMLDivElement> = forwardRef((props, ref) => {\n const propsWithDefaults = {\n flexDirection: 'column' as const,\n gap: '8px',\n ...props,\n };\n\n const { transientProps, otherProps } = getContainerStylingTransientProps(propsWithDefaults);\n\n const {\n children,\n className,\n defaultValues,\n direction,\n focusOnClick = false,\n focusType = 'roving-tabindex',\n id: propsId,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n label,\n loopAround,\n onChange,\n selectionMode = 'single',\n values,\n variant = ListboxVariant.standalone,\n ...forwardedProps\n } = otherProps;\n const [_id] = useId();\n const id = propsId ?? _id;\n const _ref = useRef<HTMLDivElement>(undefined);\n const divRef = ref ?? _ref;\n\n const [state, dispatch] = useReducer(ListboxReducer, {\n ...LISTBOX_INITIAL_STATE,\n isDisabled,\n isReadOnly,\n selectedValues: values || defaultValues || [],\n selectionMode,\n } as ListboxState);\n\n useEffect(() => {\n if (values && values.length >= 0) {\n dispatch({\n type: ListboxActionType.SET,\n payload: {\n values,\n },\n });\n }\n }, [values]);\n\n const context = useMemo<ListboxContextProps>(\n () => ({\n state,\n dispatch,\n }),\n [state]\n );\n\n useEffect(() => {\n onChange?.(state.selectedValues);\n }, [state.selectedValues]);\n\n useEffect(() => {\n warnIfNoAccessibleLabelFound(props as ComponentProps<keyof React.JSX.IntrinsicElements>, [label]);\n }, []);\n\n return (\n <ConditionalWrapper\n wrapper={(children) => (\n <StyledListbox\n {...forwardedProps}\n {...transientProps}\n $isDisabled={isDisabled}\n $isInvalid={isInvalid || (isRequired && state.selectedValues.length === 0)}\n $isReadOnly={isReadOnly}\n className={classNames(Listbox.className, className)}\n ref={divRef as RefObject<HTMLDivElement>}\n id={id}\n $variant={variant}\n >\n {children}\n </StyledListbox>\n )}\n condition={variant === ListboxVariant.standalone}\n >\n <FocusWithinGroup direction={direction} focusOnClick={focusOnClick} loopAround={loopAround} focusType={focusType}>\n {label ? (\n <span id={`${id}-label`} className={`${Listbox.className}-label`}>\n {label}\n {isRequired ? <span aria-hidden=\"true\">{' *'}</span> : null}\n </span>\n ) : null}\n {focusType === 'roving-tabindex' ? (\n <RovingTabindexListbox\n {...forwardedProps}\n className={`${Listbox.className}-list`}\n context={context}\n ref={divRef as RefObject<HTMLDivElement>}\n >\n {children}\n </RovingTabindexListbox>\n ) : (\n <ActiveDescendantListbox\n {...forwardedProps}\n className={`${Listbox.className}-list`}\n context={context}\n ref={divRef as RefObject<HTMLDivElement>}\n >\n {children}\n </ActiveDescendantListbox>\n )}\n </FocusWithinGroup>\n </ConditionalWrapper>\n );\n});\nListbox.className = CLASSNAME;\nListbox.displayName = COMPONENT_NAME;\n"],"names":["ActiveDescendantListbox","forwardRef","props","ref","_context$state$active","children","id","isDisabled","context","forwardedProps","_objectWithoutProperties","_excluded","activedescendant","handleKeyDown","handleFocusKeyDown","handleFocus","handleBlur","useFocusOnList","useCallback","event","code","state","selectionMode","_activedescendant$","dispatch","type","ListboxActionType","TOGGLE","payload","value","_activedescendant$2","SET","values","React","createElement","Flexbox","_extends","flexDirection","gap","role","tabIndex","onFocus","onBlur","onMouseDown","preventDefault","onMouseLeave","onKeyDown","ListboxContext","Provider","RovingTabindexListbox","StyledListbox","styled","div","baseContainer","_ref","$variant","$isDisabled","$isInvalid","ListboxVariant","standalone","css","ListboxReducer","action","isReadOnly","selectedValues","includes","_objectSpread","concat","filter","existingValue","UPDATE_OPTIONS","COMPONENT_NAME","CLASSNAME","Listbox","propsWithDefaults","transientProps","otherProps","getContainerStylingTransientProps","className","defaultValues","direction","focusOnClick","focusType","propsId","isInvalid","isRequired","label","loopAround","onChange","variant","_id","useId","useRef","undefined","divRef","useReducer","LISTBOX_INITIAL_STATE","useEffect","length","useMemo","warnIfNoAccessibleLabelFound","ConditionalWrapper","wrapper","$isReadOnly","classNames","condition","FocusWithinGroup","displayName"],"mappings":"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"}
|
package/_internal/NumberField.js
CHANGED
|
@@ -3552,6 +3552,7 @@ function useButton(props, ref) {
|
|
|
3552
3552
|
};
|
|
3553
3553
|
}
|
|
3554
3554
|
|
|
3555
|
+
/* eslint-disable @redsift/ds/no-outline-none-without-indicator -- the input's own outline is replaced by the field's border, which turns the focus colour through $isFocused */
|
|
3555
3556
|
/**
|
|
3556
3557
|
* Component style.
|
|
3557
3558
|
*/
|
|
@@ -3794,6 +3795,7 @@ const StyledNumberField = styled.div`
|
|
|
3794
3795
|
`;
|
|
3795
3796
|
}}
|
|
3796
3797
|
`;
|
|
3798
|
+
/* eslint-enable @redsift/ds/no-outline-none-without-indicator */
|
|
3797
3799
|
|
|
3798
3800
|
const _excluded = ["autoFocus", "className", "decrementAriaLabel", "defaultValue", "formatOptions", "id", "incrementAriaLabel", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "isWheelDisabled", "label", "leftIcon", "maxValue", "minValue", "onBlur", "onChange", "onFocus", "onFocusChange", "onKeyDown", "onKeyUp", "placeholder", "step", "theme", "value", "variant"];
|
|
3799
3801
|
const COMPONENT_NAME = 'NumberField';
|