@economic/taco 0.0.33-alpha.1 → 0.0.33-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Select/useSelect.d.ts +13 -8
- package/dist/esm/components/Group/Group.js +6 -8
- package/dist/esm/components/Group/Group.js.map +1 -1
- package/dist/esm/components/Hanger/Hanger.js +25 -33
- package/dist/esm/components/Hanger/Hanger.js.map +1 -1
- package/dist/esm/components/Icon/Icon.js +7 -8
- package/dist/esm/components/Icon/Icon.js.map +1 -1
- package/dist/esm/components/IconButton/IconButton.js +9 -11
- package/dist/esm/components/IconButton/IconButton.js.map +1 -1
- package/dist/esm/components/Input/Input.js +26 -24
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/dist/esm/components/Listbox/useListbox.js +1 -1
- package/dist/esm/components/Listbox/useListbox.js.map +1 -1
- package/dist/esm/components/Listbox/util.js +4 -7
- package/dist/esm/components/Listbox/util.js.map +1 -1
- package/dist/esm/components/Select/Select.js.map +1 -1
- package/dist/esm/components/Select/useSelect.js +48 -29
- package/dist/esm/components/Select/useSelect.js.map +1 -1
- package/dist/taco.cjs.development.js +122 -117
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/dist/utils/tailwind.d.ts +1 -1
- package/package.json +2 -2
@@ -1,16 +1,21 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
+
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
2
3
|
import { SelectProps } from './Select';
|
3
4
|
import { ListboxProps } from '../Listbox/Listbox';
|
5
|
+
declare type InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
|
6
|
+
declare type InternalListboxProps = ListboxProps & {
|
7
|
+
ref: React.ForwardedRef<HTMLInputElement>;
|
8
|
+
};
|
9
|
+
declare type InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
|
10
|
+
ref: React.ForwardedRef<HTMLInputElement>;
|
11
|
+
};
|
4
12
|
declare type useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {
|
5
|
-
button:
|
6
|
-
listbox:
|
7
|
-
input:
|
8
|
-
popover:
|
9
|
-
open: boolean;
|
10
|
-
onOpenChange: (open: boolean) => void;
|
11
|
-
};
|
13
|
+
button: InternalButtonProps;
|
14
|
+
listbox: InternalListboxProps;
|
15
|
+
input: InternalInputProps;
|
16
|
+
popover: Pick<PopoverPrimitive.PopoverProps, 'onOpenChange' | 'open'>;
|
12
17
|
text: string | JSX.Element;
|
13
18
|
more?: number;
|
14
19
|
};
|
15
|
-
export declare const useSelect: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, data, defaultValue, disabled, emptyValue, id: nativeId, multiselect, onClick, onChange, readOnly, value, ...otherProps }: SelectProps, ref: React.Ref<HTMLInputElement>) => useSelect;
|
20
|
+
export declare const useSelect: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, data, defaultValue, disabled, emptyValue, id: nativeId, multiselect, onBlur, onClick, onChange, readOnly, value, ...otherProps }: SelectProps, ref: React.Ref<HTMLInputElement>) => useSelect;
|
16
21
|
export {};
|
@@ -1,14 +1,12 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, createElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
var className = cn('flex ', props.className);
|
4
|
+
const Group = /*#__PURE__*/forwardRef(function Group(props, ref) {
|
5
|
+
const {
|
6
|
+
as: Tag = 'span',
|
7
|
+
...otherProps
|
8
|
+
} = props;
|
9
|
+
const className = cn('flex ', props.className);
|
12
10
|
return createElement(Tag, Object.assign({}, otherProps, {
|
13
11
|
className: className,
|
14
12
|
"data-taco": "group",
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Group.js","sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport './Group.css';\r\n\r\nexport type GroupProps = React.HTMLAttributes<HTMLElement> & {\r\n /**\r\n * Change what html tag element will render.\r\n * Default value is `span`\r\n */\r\n as?: 'div' | 'span' | 'nav';\r\n /** Content should be composed of other Taco elements */\r\n children: React.ReactNode;\r\n};\r\n\r\nexport const Group = React.forwardRef(function Group(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\r\n const { as: Tag = 'span', ...otherProps } = props;\r\n const className = cn('flex ', props.className);\r\n return <Tag {...otherProps} className={className} data-taco=\"group\" ref={ref} />;\r\n});\r\n"],"names":["Group","React","props","ref","as","Tag","otherProps","className","cn"],"mappings":"
|
1
|
+
{"version":3,"file":"Group.js","sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport './Group.css';\r\n\r\nexport type GroupProps = React.HTMLAttributes<HTMLElement> & {\r\n /**\r\n * Change what html tag element will render.\r\n * Default value is `span`\r\n */\r\n as?: 'div' | 'span' | 'nav';\r\n /** Content should be composed of other Taco elements */\r\n children: React.ReactNode;\r\n};\r\n\r\nexport const Group = React.forwardRef(function Group(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\r\n const { as: Tag = 'span', ...otherProps } = props;\r\n const className = cn('flex ', props.className);\r\n return <Tag {...otherProps} className={className} data-taco=\"group\" ref={ref} />;\r\n});\r\n"],"names":["Group","React","props","ref","as","Tag","otherProps","className","cn"],"mappings":";;;MAcaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;AAClC,QAAM;AAAEC,IAAAA,EAAE,EAAEC,GAAG,GAAG,MAAZ;AAAoB,OAAGC;AAAvB,MAAsCJ,KAA5C;AACA,QAAMK,SAAS,GAAGC,EAAE,CAAC,OAAD,EAAUN,KAAK,CAACK,SAAhB,CAApB;AACA,SAAON,aAAA,CAACI,GAAD,oBAASC;AAAYC,IAAAA,SAAS,EAAEA;iBAAqB;AAAQJ,IAAAA,GAAG,EAAEA;IAAlE,CAAP;AACH,CAJoB;;;;"}
|
@@ -1,4 +1,3 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, useMemo, useState, useEffect, createElement, createContext, useContext, isValidElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { IconButton } from '../IconButton/IconButton.js';
|
@@ -7,19 +6,18 @@ import { Root, Anchor as Anchor$1, Close } from '@radix-ui/react-popover';
|
|
7
6
|
import { UnstyledContent, UnstyledArrow } from '../Popover/Primitives.js';
|
8
7
|
import mergeRefs from '../../utils/mergeRefs.js';
|
9
8
|
|
10
|
-
|
11
|
-
var HangerContext = /*#__PURE__*/createContext({
|
9
|
+
const HangerContext = /*#__PURE__*/createContext({
|
12
10
|
props: {},
|
13
11
|
ref: null
|
14
12
|
});
|
15
|
-
|
13
|
+
const Anchor = /*#__PURE__*/forwardRef(function HangerAnchor(props, ref) {
|
16
14
|
var _props$children;
|
17
15
|
|
18
|
-
|
19
|
-
|
16
|
+
const context = useContext(HangerContext);
|
17
|
+
let children = props.children;
|
20
18
|
|
21
19
|
if (isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
|
22
|
-
console.warn(
|
20
|
+
console.warn(`Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`);
|
23
21
|
children = createElement("span", null, props.children);
|
24
22
|
}
|
25
23
|
|
@@ -29,15 +27,14 @@ var Anchor = /*#__PURE__*/forwardRef(function HangerAnchor(props, ref) {
|
|
29
27
|
asChild: true
|
30
28
|
}));
|
31
29
|
});
|
32
|
-
|
33
|
-
|
30
|
+
const Content = /*#__PURE__*/forwardRef(function HangerContent(props, ref) {
|
31
|
+
const context = useContext(HangerContext);
|
32
|
+
const {
|
33
|
+
texts
|
34
|
+
} = useLocalization();
|
35
|
+
const className = cn('wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent', props.className);
|
34
36
|
|
35
|
-
|
36
|
-
texts = _useLocalization.texts;
|
37
|
-
|
38
|
-
var className = cn('wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent', props.className);
|
39
|
-
|
40
|
-
var handleInteractOutside = function handleInteractOutside(event) {
|
37
|
+
const handleInteractOutside = event => {
|
41
38
|
event.preventDefault();
|
42
39
|
};
|
43
40
|
|
@@ -59,25 +56,20 @@ var Content = /*#__PURE__*/forwardRef(function HangerContent(props, ref) {
|
|
59
56
|
onClick: context.props.onClose
|
60
57
|
})));
|
61
58
|
});
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
};
|
74
|
-
}, [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
|
75
|
-
|
76
|
-
var _React$useState = useState(false),
|
77
|
-
open = _React$useState[0],
|
78
|
-
setOpen = _React$useState[1];
|
59
|
+
const Hanger = /*#__PURE__*/forwardRef(function Hanger(props, ref) {
|
60
|
+
const {
|
61
|
+
anchor,
|
62
|
+
children,
|
63
|
+
defaultOpen = true,
|
64
|
+
...otherProps
|
65
|
+
} = props;
|
66
|
+
const context = useMemo(() => ({
|
67
|
+
props: otherProps,
|
68
|
+
ref
|
69
|
+
}), [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
|
79
70
|
|
80
|
-
|
71
|
+
const [open, setOpen] = useState(false);
|
72
|
+
useEffect(() => {
|
81
73
|
if (defaultOpen) {
|
82
74
|
setOpen(defaultOpen);
|
83
75
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Hanger.js","sources":["../../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { IconButton } from '../IconButton/IconButton';\r\nimport { Placement } from '../..';\r\nimport { UnstyledArrow, UnstyledContent } from '../Popover/Primitives';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport './Hanger.css';\r\nimport mergeRefs from '../../utils/mergeRefs';\r\n\r\ntype HangerContextValue = {\r\n props: any;\r\n ref: React.Ref<HTMLElement>;\r\n};\r\nconst HangerContext = React.createContext<HangerContextValue>({\r\n props: {},\r\n ref: null,\r\n});\r\n\r\nexport type HangerTexts = {\r\n /** Aria-label for the close icon button of hanger */\r\n close: string;\r\n};\r\n\r\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\r\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, ref: React.Ref<HTMLDivElement>) {\r\n const context = React.useContext(HangerContext);\r\n let children = props.children;\r\n\r\n if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\r\n console.warn(\r\n `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\r\n );\r\n children = <span>{props.children}</span>;\r\n }\r\n\r\n return (\r\n <PopoverPrimitive.Anchor {...context.props} {...props} children={children} ref={mergeRefs([context.ref, ref])} asChild />\r\n );\r\n});\r\n\r\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\r\n /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\r\n placement?: Placement;\r\n};\r\n\r\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\r\n const context = React.useContext(HangerContext);\r\n const { texts } = useLocalization();\r\n const className = cn(\r\n 'wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent',\r\n props.className\r\n );\r\n const handleInteractOutside = (event: CustomEvent): void => {\r\n event.preventDefault();\r\n };\r\n\r\n return (\r\n <UnstyledContent\r\n className={className}\r\n data-taco=\"hanger\"\r\n onInteractOutside={handleInteractOutside}\r\n placement={props.placement}\r\n ref={ref}\r\n >\r\n {props.children}\r\n <UnstyledArrow className=\"text-blue\" />\r\n <PopoverPrimitive.Close asChild>\r\n <IconButton\r\n appearance=\"primary\"\r\n aria-label={texts.hanger.close}\r\n className=\"absolute top-0 right-0 ml-2 mr-2 mt-2 text-white\"\r\n icon=\"close\"\r\n onClick={context.props.onClose}\r\n />\r\n </PopoverPrimitive.Close>\r\n </UnstyledContent>\r\n );\r\n});\r\n\r\nexport type HangerProps = React.PropsWithChildren<{\r\n /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\r\n anchor?: JSX.Element;\r\n /**\r\n * Shows or hides hanger depending on the value\r\n * @defaultValue true\r\n */\r\n defaultOpen?: boolean;\r\n /** Handler called when user closes the hanger */\r\n onClose?: () => void;\r\n}>;\r\n\r\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\r\n Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\r\n Content: React.ForwardRefExoticComponent<HangerContentProps>;\r\n};\r\n\r\nexport const Hanger = React.forwardRef(function Hanger(props: HangerProps, ref: React.Ref<HTMLElement>) {\r\n const { anchor, children, defaultOpen = true, ...otherProps } = props;\r\n const context = React.useMemo(() => ({ props: otherProps, ref }), [otherProps]);\r\n\r\n // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\r\n const [open, setOpen] = React.useState(false);\r\n React.useEffect(() => {\r\n if (defaultOpen) {\r\n setOpen(defaultOpen);\r\n }\r\n }, []);\r\n\r\n return (\r\n <HangerContext.Provider value={context}>\r\n <PopoverPrimitive.Root key={String(open)} defaultOpen={open}>\r\n {anchor && <Anchor>{anchor}</Anchor>}\r\n {children}\r\n </PopoverPrimitive.Root>\r\n </HangerContext.Provider>\r\n );\r\n}) as ForwardedHangerWithStatics;\r\nHanger.Anchor = Anchor;\r\nHanger.Content = Content;\r\n"],"names":["HangerContext","React","props","ref","Anchor","HangerAnchor","context","children","type","console","warn","name","PopoverPrimitive","mergeRefs","asChild","Content","HangerContent","
|
1
|
+
{"version":3,"file":"Hanger.js","sources":["../../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { IconButton } from '../IconButton/IconButton';\r\nimport { Placement } from '../..';\r\nimport { UnstyledArrow, UnstyledContent } from '../Popover/Primitives';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport './Hanger.css';\r\nimport mergeRefs from '../../utils/mergeRefs';\r\n\r\ntype HangerContextValue = {\r\n props: any;\r\n ref: React.Ref<HTMLElement>;\r\n};\r\nconst HangerContext = React.createContext<HangerContextValue>({\r\n props: {},\r\n ref: null,\r\n});\r\n\r\nexport type HangerTexts = {\r\n /** Aria-label for the close icon button of hanger */\r\n close: string;\r\n};\r\n\r\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\r\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, ref: React.Ref<HTMLDivElement>) {\r\n const context = React.useContext(HangerContext);\r\n let children = props.children;\r\n\r\n if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\r\n console.warn(\r\n `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\r\n );\r\n children = <span>{props.children}</span>;\r\n }\r\n\r\n return (\r\n <PopoverPrimitive.Anchor {...context.props} {...props} children={children} ref={mergeRefs([context.ref, ref])} asChild />\r\n );\r\n});\r\n\r\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\r\n /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\r\n placement?: Placement;\r\n};\r\n\r\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\r\n const context = React.useContext(HangerContext);\r\n const { texts } = useLocalization();\r\n const className = cn(\r\n 'wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent',\r\n props.className\r\n );\r\n const handleInteractOutside = (event: CustomEvent): void => {\r\n event.preventDefault();\r\n };\r\n\r\n return (\r\n <UnstyledContent\r\n className={className}\r\n data-taco=\"hanger\"\r\n onInteractOutside={handleInteractOutside}\r\n placement={props.placement}\r\n ref={ref}\r\n >\r\n {props.children}\r\n <UnstyledArrow className=\"text-blue\" />\r\n <PopoverPrimitive.Close asChild>\r\n <IconButton\r\n appearance=\"primary\"\r\n aria-label={texts.hanger.close}\r\n className=\"absolute top-0 right-0 ml-2 mr-2 mt-2 text-white\"\r\n icon=\"close\"\r\n onClick={context.props.onClose}\r\n />\r\n </PopoverPrimitive.Close>\r\n </UnstyledContent>\r\n );\r\n});\r\n\r\nexport type HangerProps = React.PropsWithChildren<{\r\n /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\r\n anchor?: JSX.Element;\r\n /**\r\n * Shows or hides hanger depending on the value\r\n * @defaultValue true\r\n */\r\n defaultOpen?: boolean;\r\n /** Handler called when user closes the hanger */\r\n onClose?: () => void;\r\n}>;\r\n\r\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\r\n Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\r\n Content: React.ForwardRefExoticComponent<HangerContentProps>;\r\n};\r\n\r\nexport const Hanger = React.forwardRef(function Hanger(props: HangerProps, ref: React.Ref<HTMLElement>) {\r\n const { anchor, children, defaultOpen = true, ...otherProps } = props;\r\n const context = React.useMemo(() => ({ props: otherProps, ref }), [otherProps]);\r\n\r\n // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\r\n const [open, setOpen] = React.useState(false);\r\n React.useEffect(() => {\r\n if (defaultOpen) {\r\n setOpen(defaultOpen);\r\n }\r\n }, []);\r\n\r\n return (\r\n <HangerContext.Provider value={context}>\r\n <PopoverPrimitive.Root key={String(open)} defaultOpen={open}>\r\n {anchor && <Anchor>{anchor}</Anchor>}\r\n {children}\r\n </PopoverPrimitive.Root>\r\n </HangerContext.Provider>\r\n );\r\n}) as ForwardedHangerWithStatics;\r\nHanger.Anchor = Anchor;\r\nHanger.Content = Content;\r\n"],"names":["HangerContext","React","props","ref","Anchor","HangerAnchor","context","children","type","console","warn","name","PopoverPrimitive","mergeRefs","asChild","Content","HangerContent","texts","useLocalization","className","cn","handleInteractOutside","event","preventDefault","UnstyledContent","onInteractOutside","placement","UnstyledArrow","IconButton","appearance","hanger","close","icon","onClick","onClose","Hanger","anchor","defaultOpen","otherProps","open","setOpen","Provider","value","key","String"],"mappings":"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"}
|
@@ -1,20 +1,19 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import React__default from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { icons } from './components/index.js';
|
5
4
|
export { icons } from './components/index.js';
|
6
5
|
|
7
|
-
|
8
|
-
var Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
|
6
|
+
const Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
|
9
7
|
var _props$className;
|
10
8
|
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
9
|
+
const {
|
10
|
+
name,
|
11
|
+
...otherProps
|
12
|
+
} = props;
|
13
|
+
const Component = icons[name];
|
15
14
|
/* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */
|
16
15
|
|
17
|
-
|
16
|
+
const className = cn('inline-flex h-[1.715em] w-[1.715em]', props.className, {
|
18
17
|
'p-[3px]': (_props$className = props.className) === null || _props$className === void 0 ? void 0 : _props$className.includes('rounded-full')
|
19
18
|
});
|
20
19
|
return Component ? React__default.createElement(Component, Object.assign({}, otherProps, {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Icon.js","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\nimport { IconName, icons } from './components/index';\r\n\r\nexport { icons } from './components/index';\r\nexport type { IconName } from './components/index';\r\n\r\nexport type IconProps = React.SVGAttributes<SVGSVGElement> & {\r\n /** Set what svg icon should be rendered */\r\n name: IconName; // this dynamic type causes the type extraction for props to fail\r\n};\r\n\r\nexport const Icon = React.forwardRef(function Icon(props: IconProps, ref: React.Ref<SVGSVGElement>) {\r\n const { name, ...otherProps } = props;\r\n const Component = icons[name];\r\n /* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */\r\n const className = cn('inline-flex h-[1.715em] w-[1.715em]', props.className, {\r\n 'p-[3px]': props.className?.includes('rounded-full'),\r\n });\r\n\r\n return Component ? (\r\n <Component {...otherProps} className={className} data-taco=\"icon\" focusable=\"false\" ref={ref} role=\"img\" />\r\n ) : null;\r\n});\r\n"],"names":["Icon","React","forwardRef","props","ref","name","otherProps","Component","icons","className","cn","includes","focusable","role"],"mappings":"
|
1
|
+
{"version":3,"file":"Icon.js","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\nimport { IconName, icons } from './components/index';\r\n\r\nexport { icons } from './components/index';\r\nexport type { IconName } from './components/index';\r\n\r\nexport type IconProps = React.SVGAttributes<SVGSVGElement> & {\r\n /** Set what svg icon should be rendered */\r\n name: IconName; // this dynamic type causes the type extraction for props to fail\r\n};\r\n\r\nexport const Icon = React.forwardRef(function Icon(props: IconProps, ref: React.Ref<SVGSVGElement>) {\r\n const { name, ...otherProps } = props;\r\n const Component = icons[name];\r\n /* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */\r\n const className = cn('inline-flex h-[1.715em] w-[1.715em]', props.className, {\r\n 'p-[3px]': props.className?.includes('rounded-full'),\r\n });\r\n\r\n return Component ? (\r\n <Component {...otherProps} className={className} data-taco=\"icon\" focusable=\"false\" ref={ref} role=\"img\" />\r\n ) : null;\r\n});\r\n"],"names":["Icon","React","forwardRef","props","ref","name","otherProps","Component","icons","className","cn","includes","focusable","role"],"mappings":";;;;;MAYaA,IAAI,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,IAAT,CAAcG,KAAd,EAAgCC,GAAhC;;;AACjC,QAAM;AAAEC,IAAAA,IAAF;AAAQ,OAAGC;AAAX,MAA0BH,KAAhC;AACA,QAAMI,SAAS,GAAGC,KAAK,CAACH,IAAD,CAAvB;AACA;;AACA,QAAMI,SAAS,GAAGC,EAAE,CAAC,qCAAD,EAAwCP,KAAK,CAACM,SAA9C,EAAyD;AACzE,mCAAWN,KAAK,CAACM,SAAjB,qDAAW,iBAAiBE,QAAjB,CAA0B,cAA1B;AAD8D,GAAzD,CAApB;AAIA,SAAOJ,SAAS,GACZN,4BAAA,CAACM,SAAD,oBAAeD;AAAYG,IAAAA,SAAS,EAAEA;iBAAqB;AAAOG,IAAAA,SAAS,EAAC;AAAQR,IAAAA,GAAG,EAAEA;AAAKS,IAAAA,IAAI,EAAC;IAAnG,CADY,GAEZ,IAFJ;AAGH,CAXmB;;;;"}
|
@@ -1,17 +1,15 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, createElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { Icon } from '../Icon/Icon.js';
|
5
4
|
import { getButtonClasses, getAppearanceClasses, createButton } from '../Button/util.js';
|
6
5
|
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
var className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
|
6
|
+
const IconButton = /*#__PURE__*/forwardRef(function IconButton(props, ref) {
|
7
|
+
const {
|
8
|
+
icon,
|
9
|
+
rounded = false,
|
10
|
+
...otherProps
|
11
|
+
} = props;
|
12
|
+
const className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
|
15
13
|
'rounded-full': rounded,
|
16
14
|
rounded: !rounded,
|
17
15
|
'cursor-not-allowed opacity-50': props.disabled,
|
@@ -22,13 +20,13 @@ var IconButton = /*#__PURE__*/forwardRef(function IconButton(props, ref) {
|
|
22
20
|
return null;
|
23
21
|
}
|
24
22
|
|
25
|
-
return createButton(
|
23
|
+
return createButton({ ...otherProps,
|
26
24
|
children: createElement(Icon, {
|
27
25
|
name: icon,
|
28
26
|
className: "m-0 p-0"
|
29
27
|
}),
|
30
28
|
'data-taco': 'icon-button'
|
31
|
-
}
|
29
|
+
}, className, ref);
|
32
30
|
});
|
33
31
|
|
34
32
|
export { IconButton };
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"IconButton.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as ButtonPrimitive from '../../primitives/Button';\r\nimport { Icon, IconName } from '../Icon/Icon';\r\nimport { getAppearanceClasses, getButtonClasses, createButton } from '../Button/util';\r\nimport { Appearance } from '../../types';\r\nimport { DialogProps, HangerProps, MenuProps, PopoverProps } from '../..';\r\n\r\nexport type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\r\n /** Appearance will change the style of the button */\r\n appearance?: Appearance;\r\n /**\r\n * Dialog component associated with the button, clicking the button will open the dialog.\r\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\r\n * the button should be only to open the associated dialog when clicked.\r\n */\r\n dialog?: (props: Partial<DialogProps>) => JSX.Element;\r\n /** Hanger component associated with the button. */\r\n hanger?: (props: Partial<HangerProps>) => JSX.Element;\r\n /** Set which icon should be rendered within button */\r\n icon: IconName; // this dynamic type causes the type extraction for props to fail\r\n /** Menu component associated with the button. */\r\n menu?: (props: Partial<MenuProps>) => JSX.Element;\r\n /**\r\n * Popover component associated with the button, clicking the button will open the popover.\r\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\r\n * the button should be only to open the associated popover when clicked.\r\n */\r\n popover?: (props: Partial<PopoverProps>) => JSX.Element;\r\n /**\r\n * Set whether the button is rounded.\r\n * Default value is `false`\r\n */\r\n rounded?: boolean;\r\n /** A tooltip to show when hovering over the button */\r\n tooltip?: string;\r\n};\r\n\r\nexport const IconButton = React.forwardRef(function IconButton(props: IconButtonProps, ref: React.Ref<HTMLButtonElement>) {\r\n const { icon, rounded = false, ...otherProps } = props;\r\n\r\n const className = cn(\r\n 'w-8',\r\n getButtonClasses(),\r\n getAppearanceClasses(otherProps.appearance, true),\r\n {\r\n 'rounded-full': rounded,\r\n rounded: !rounded,\r\n 'cursor-not-allowed opacity-50': props.disabled,\r\n 'focus:yt-focus active:focus:yt-focus': !props.disabled,\r\n },\r\n props.className\r\n );\r\n\r\n if (!icon) {\r\n return null;\r\n }\r\n\r\n return createButton(\r\n { ...otherProps, children: <Icon name={icon} className=\"m-0 p-0\" />, 'data-taco': 'icon-button' },\r\n className,\r\n ref\r\n );\r\n});\r\n"],"names":["IconButton","React","props","ref","icon","rounded","otherProps","className","cn","getButtonClasses","getAppearanceClasses","appearance","disabled","createButton","children","Icon","name"],"mappings":"
|
1
|
+
{"version":3,"file":"IconButton.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as ButtonPrimitive from '../../primitives/Button';\r\nimport { Icon, IconName } from '../Icon/Icon';\r\nimport { getAppearanceClasses, getButtonClasses, createButton } from '../Button/util';\r\nimport { Appearance } from '../../types';\r\nimport { DialogProps, HangerProps, MenuProps, PopoverProps } from '../..';\r\n\r\nexport type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\r\n /** Appearance will change the style of the button */\r\n appearance?: Appearance;\r\n /**\r\n * Dialog component associated with the button, clicking the button will open the dialog.\r\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\r\n * the button should be only to open the associated dialog when clicked.\r\n */\r\n dialog?: (props: Partial<DialogProps>) => JSX.Element;\r\n /** Hanger component associated with the button. */\r\n hanger?: (props: Partial<HangerProps>) => JSX.Element;\r\n /** Set which icon should be rendered within button */\r\n icon: IconName; // this dynamic type causes the type extraction for props to fail\r\n /** Menu component associated with the button. */\r\n menu?: (props: Partial<MenuProps>) => JSX.Element;\r\n /**\r\n * Popover component associated with the button, clicking the button will open the popover.\r\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\r\n * the button should be only to open the associated popover when clicked.\r\n */\r\n popover?: (props: Partial<PopoverProps>) => JSX.Element;\r\n /**\r\n * Set whether the button is rounded.\r\n * Default value is `false`\r\n */\r\n rounded?: boolean;\r\n /** A tooltip to show when hovering over the button */\r\n tooltip?: string;\r\n};\r\n\r\nexport const IconButton = React.forwardRef(function IconButton(props: IconButtonProps, ref: React.Ref<HTMLButtonElement>) {\r\n const { icon, rounded = false, ...otherProps } = props;\r\n\r\n const className = cn(\r\n 'w-8',\r\n getButtonClasses(),\r\n getAppearanceClasses(otherProps.appearance, true),\r\n {\r\n 'rounded-full': rounded,\r\n rounded: !rounded,\r\n 'cursor-not-allowed opacity-50': props.disabled,\r\n 'focus:yt-focus active:focus:yt-focus': !props.disabled,\r\n },\r\n props.className\r\n );\r\n\r\n if (!icon) {\r\n return null;\r\n }\r\n\r\n return createButton(\r\n { ...otherProps, children: <Icon name={icon} className=\"m-0 p-0\" />, 'data-taco': 'icon-button' },\r\n className,\r\n ref\r\n );\r\n});\r\n"],"names":["IconButton","React","props","ref","icon","rounded","otherProps","className","cn","getButtonClasses","getAppearanceClasses","appearance","disabled","createButton","children","Icon","name"],"mappings":";;;;;MAsCaA,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;AACvC,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,OAAO,GAAG,KAAlB;AAAyB,OAAGC;AAA5B,MAA2CJ,KAAjD;AAEA,QAAMK,SAAS,GAAGC,EAAE,CAChB,KADgB,EAEhBC,gBAAgB,EAFA,EAGhBC,oBAAoB,CAACJ,UAAU,CAACK,UAAZ,EAAwB,IAAxB,CAHJ,EAIhB;AACI,oBAAgBN,OADpB;AAEIA,IAAAA,OAAO,EAAE,CAACA,OAFd;AAGI,qCAAiCH,KAAK,CAACU,QAH3C;AAII,4CAAwC,CAACV,KAAK,CAACU;AAJnD,GAJgB,EAUhBV,KAAK,CAACK,SAVU,CAApB;;AAaA,MAAI,CAACH,IAAL,EAAW;AACP,WAAO,IAAP;AACH;;AAED,SAAOS,YAAY,CACf,EAAE,GAAGP,UAAL;AAAiBQ,IAAAA,QAAQ,EAAEb,aAAA,CAACc,IAAD;AAAMC,MAAAA,IAAI,EAAEZ;AAAMG,MAAAA,SAAS,EAAC;KAA5B,CAA3B;AAAqE,iBAAa;AAAlF,GADe,EAEfA,SAFe,EAGfJ,GAHe,CAAnB;AAKH,CAzByB;;;;"}
|
@@ -1,25 +1,25 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, useEffect, createElement, cloneElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { Icon } from '../Icon/Icon.js';
|
5
4
|
import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
|
6
5
|
import { getInputClasses, getButtonStateClasses } from './util.js';
|
7
6
|
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
7
|
+
const Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
|
8
|
+
const {
|
9
|
+
button,
|
10
|
+
icon,
|
11
|
+
highlighted,
|
12
|
+
invalid,
|
13
|
+
onKeyDown,
|
14
|
+
autoFocus,
|
15
|
+
...otherProps
|
16
|
+
} = props;
|
17
|
+
const inputRef = useProxiedRef(ref);
|
18
|
+
const hasContainer = button || icon;
|
19
|
+
const className = cn(getInputClasses(props), 'min-h-[theme(spacing.8)] pointer-events-all', {
|
20
20
|
'pr-8': !!hasContainer
|
21
21
|
}, !hasContainer && otherProps.className);
|
22
|
-
useEffect(
|
22
|
+
useEffect(() => {
|
23
23
|
if (autoFocus && inputRef.current) {
|
24
24
|
inputRef.current.focus();
|
25
25
|
}
|
@@ -27,10 +27,10 @@ var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
|
|
27
27
|
// if it has scroll height then the browser reverts to native scrolling behaviour only
|
28
28
|
// so we manually override it to ensure _our_ desired behaviour remains intact
|
29
29
|
|
30
|
-
|
30
|
+
const handleKeyDown = event => {
|
31
31
|
if (event.key === 'Home' || event.key === 'End') {
|
32
32
|
event.preventDefault();
|
33
|
-
|
33
|
+
const position = event.key === 'End' ? event.currentTarget.value.length : 0;
|
34
34
|
event.currentTarget.setSelectionRange(position, position);
|
35
35
|
}
|
36
36
|
|
@@ -39,7 +39,7 @@ var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
|
|
39
39
|
}
|
40
40
|
};
|
41
41
|
|
42
|
-
|
42
|
+
const input = createElement("input", Object.assign({}, otherProps, {
|
43
43
|
className: className,
|
44
44
|
"data-taco": "input",
|
45
45
|
onKeyDown: handleKeyDown,
|
@@ -47,19 +47,21 @@ var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
|
|
47
47
|
}));
|
48
48
|
|
49
49
|
if (hasContainer) {
|
50
|
-
|
50
|
+
let extra;
|
51
51
|
|
52
52
|
if (button) {
|
53
|
-
var _button$props$disable
|
53
|
+
var _button$props$disable;
|
54
54
|
|
55
|
-
|
56
|
-
|
55
|
+
const disabled = (_button$props$disable = button.props.disabled) !== null && _button$props$disable !== void 0 ? _button$props$disable : otherProps.disabled;
|
56
|
+
const buttonClassName = cn('items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none', {
|
57
|
+
[getButtonStateClasses(invalid)]: !props.disabled
|
58
|
+
}, button.props.className);
|
57
59
|
extra = cloneElement(button, {
|
58
60
|
className: buttonClassName,
|
59
|
-
disabled
|
61
|
+
disabled
|
60
62
|
});
|
61
63
|
} else if (icon) {
|
62
|
-
|
64
|
+
const iconClassName = cn('items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2', {
|
63
65
|
'text-grey-dark': props.disabled,
|
64
66
|
'text-grey-darkest': !props.disabled
|
65
67
|
});
|
@@ -71,7 +73,7 @@ var Input = /*#__PURE__*/forwardRef(function Input(props, ref) {
|
|
71
73
|
});
|
72
74
|
}
|
73
75
|
|
74
|
-
|
76
|
+
const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
|
75
77
|
return createElement("div", {
|
76
78
|
className: containerClassName,
|
77
79
|
"data-taco": "input-container"
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { Icon, IconName } from '../Icon/Icon';\r\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\r\nimport { getButtonStateClasses, getInputClasses } from './util';\r\n\r\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\r\n /** Shows a button within the input field */\r\n button?: React.ReactElement;\r\n /** Shows an icon within the input field */\r\n icon?: IconName | JSX.Element;\r\n /** Draws attention to the input by changing its style and making it visually prominent */\r\n highlighted?: boolean;\r\n /* Whether the input is in an invalid state */\r\n invalid?: boolean;\r\n};\r\n\r\nexport const Input = React.forwardRef(function Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {\r\n const { button, icon, highlighted, invalid, onKeyDown, autoFocus, ...otherProps } = props;\r\n const inputRef = useProxiedRef<HTMLInputElement>(ref);\r\n const hasContainer = button || icon;\r\n const className = cn(\r\n getInputClasses(props),\r\n 'min-h-[theme(spacing.8)] pointer-events-all',\r\n {\r\n 'pr-8': !!hasContainer,\r\n },\r\n !hasContainer && otherProps.className\r\n );\r\n\r\n React.useEffect(() => {\r\n if (autoFocus && inputRef.current) {\r\n inputRef.current.focus();\r\n }\r\n }, []);\r\n\r\n // home and end keys only navigate to the start/end of input value if the input container does not scroll\r\n // if it has scroll height then the browser reverts to native scrolling behaviour only\r\n // so we manually override it to ensure _our_ desired behaviour remains intact\r\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n if (event.key === 'Home' || event.key === 'End') {\r\n event.preventDefault();\r\n const position = event.key === 'End' ? event.currentTarget.value.length : 0;\r\n event.currentTarget.setSelectionRange(position, position);\r\n }\r\n\r\n if (onKeyDown) {\r\n onKeyDown(event);\r\n }\r\n };\r\n\r\n const input = <input {...otherProps} className={className} data-taco=\"input\" onKeyDown={handleKeyDown} ref={inputRef} />;\r\n\r\n if (hasContainer) {\r\n let extra: any;\r\n\r\n if (button) {\r\n const disabled = button.props.disabled ?? otherProps.disabled;\r\n const buttonClassName = cn(\r\n 'items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none',\r\n {\r\n [getButtonStateClasses(invalid)]: !props.disabled,\r\n },\r\n button.props.className\r\n );\r\n extra = React.cloneElement(button, {\r\n className: buttonClassName,\r\n disabled,\r\n });\r\n } else if (icon) {\r\n const iconClassName = cn(\r\n 'items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2',\r\n {\r\n 'text-grey-dark': props.disabled,\r\n 'text-grey-darkest': !props.disabled,\r\n }\r\n );\r\n extra =\r\n typeof icon === 'string' ? (\r\n <Icon className={iconClassName} name={icon} />\r\n ) : (\r\n React.cloneElement(icon, { className: cn(iconClassName, icon.props.className) })\r\n );\r\n }\r\n\r\n const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);\r\n\r\n return (\r\n <div className={containerClassName} data-taco=\"input-container\">\r\n {input}\r\n {extra}\r\n </div>\r\n );\r\n }\r\n\r\n return input;\r\n});\r\n"],"names":["Input","React","props","ref","button","icon","invalid","onKeyDown","autoFocus","otherProps","inputRef","useProxiedRef","hasContainer","className","cn","getInputClasses","current","focus","handleKeyDown","event","key","preventDefault","position","currentTarget","value","length","setSelectionRange","input","extra","disabled","buttonClassName","getButtonStateClasses","iconClassName","Icon","name","containerClassName"],"mappings":"
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { Icon, IconName } from '../Icon/Icon';\r\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\r\nimport { getButtonStateClasses, getInputClasses } from './util';\r\n\r\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\r\n /** Shows a button within the input field */\r\n button?: React.ReactElement;\r\n /** Shows an icon within the input field */\r\n icon?: IconName | JSX.Element;\r\n /** Draws attention to the input by changing its style and making it visually prominent */\r\n highlighted?: boolean;\r\n /* Whether the input is in an invalid state */\r\n invalid?: boolean;\r\n};\r\n\r\nexport const Input = React.forwardRef(function Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {\r\n const { button, icon, highlighted, invalid, onKeyDown, autoFocus, ...otherProps } = props;\r\n const inputRef = useProxiedRef<HTMLInputElement>(ref);\r\n const hasContainer = button || icon;\r\n const className = cn(\r\n getInputClasses(props),\r\n 'min-h-[theme(spacing.8)] pointer-events-all',\r\n {\r\n 'pr-8': !!hasContainer,\r\n },\r\n !hasContainer && otherProps.className\r\n );\r\n\r\n React.useEffect(() => {\r\n if (autoFocus && inputRef.current) {\r\n inputRef.current.focus();\r\n }\r\n }, []);\r\n\r\n // home and end keys only navigate to the start/end of input value if the input container does not scroll\r\n // if it has scroll height then the browser reverts to native scrolling behaviour only\r\n // so we manually override it to ensure _our_ desired behaviour remains intact\r\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n if (event.key === 'Home' || event.key === 'End') {\r\n event.preventDefault();\r\n const position = event.key === 'End' ? event.currentTarget.value.length : 0;\r\n event.currentTarget.setSelectionRange(position, position);\r\n }\r\n\r\n if (onKeyDown) {\r\n onKeyDown(event);\r\n }\r\n };\r\n\r\n const input = <input {...otherProps} className={className} data-taco=\"input\" onKeyDown={handleKeyDown} ref={inputRef} />;\r\n\r\n if (hasContainer) {\r\n let extra: any;\r\n\r\n if (button) {\r\n const disabled = button.props.disabled ?? otherProps.disabled;\r\n const buttonClassName = cn(\r\n 'items-center flex justify-center border absolute rounded-l-none rounded-r right-0 h-full focus:rounded focus:outline-none',\r\n {\r\n [getButtonStateClasses(invalid)]: !props.disabled,\r\n },\r\n button.props.className\r\n );\r\n extra = React.cloneElement(button, {\r\n className: buttonClassName,\r\n disabled,\r\n });\r\n } else if (icon) {\r\n const iconClassName = cn(\r\n 'items-center flex justify-center absolute pointer-events-none mr-1 p-px right-0 w-5 top-1/2 -translate-y-1/2',\r\n {\r\n 'text-grey-dark': props.disabled,\r\n 'text-grey-darkest': !props.disabled,\r\n }\r\n );\r\n extra =\r\n typeof icon === 'string' ? (\r\n <Icon className={iconClassName} name={icon} />\r\n ) : (\r\n React.cloneElement(icon, { className: cn(iconClassName, icon.props.className) })\r\n );\r\n }\r\n\r\n const containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);\r\n\r\n return (\r\n <div className={containerClassName} data-taco=\"input-container\">\r\n {input}\r\n {extra}\r\n </div>\r\n );\r\n }\r\n\r\n return input;\r\n});\r\n"],"names":["Input","React","props","ref","button","icon","highlighted","invalid","onKeyDown","autoFocus","otherProps","inputRef","useProxiedRef","hasContainer","className","cn","getInputClasses","current","focus","handleKeyDown","event","key","preventDefault","position","currentTarget","value","length","setSelectionRange","input","extra","disabled","buttonClassName","getButtonStateClasses","iconClassName","Icon","name","containerClassName"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useListbox.js","sources":["../../../../src/components/Listbox/useListbox.tsx"],"sourcesContent":["import * as React from 'react';\
|
1
|
+
{"version":3,"file":"useListbox.js","sources":["../../../../src/components/Listbox/useListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { v4 as uuid } from 'uuid';\nimport { ListboxProps } from './Listbox';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { setInputValueByRef, getIndexFromValue, findByValue, getActiveDescendant, useFlattenedData, sanitizeItem } from './util';\nimport { ScrollableListProps } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\n\ntype useListbox = {\n list: ScrollableListProps;\n input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;\n};\n\nexport const useListbox = (\n {\n data: externalData = [],\n defaultValue,\n disabled,\n emptyValue,\n id: nativeId,\n invalid,\n name,\n onChange,\n onFocus,\n onKeyDown,\n value = emptyValue,\n ...otherProps\n }: ListboxProps,\n ref: React.Ref<HTMLInputElement>\n): useListbox => {\n const data = useFlattenedData(emptyValue !== undefined ? [{ text: '', value: emptyValue }, ...externalData] : externalData);\n const id = React.useMemo(() => nativeId || uuid(), [nativeId]);\n const inputRef = useProxiedRef<HTMLInputElement>(ref);\n const currentIndex = value !== undefined ? getIndexFromValue(data, value) : undefined;\n const { getNextIndex } = useTypeahead({ data, currentIndex });\n\n const setInputValueByIndex = (index: number | undefined): void => {\n if (index !== undefined) {\n const option = data[index];\n\n if (option && !option.disabled) {\n setInputValueByRef(inputRef.current, option.value);\n }\n }\n };\n\n const handleListboxChange = (index: number): void => {\n setInputValueByIndex(index);\n };\n\n React.useEffect(() => {\n if (data.length && currentIndex === undefined) {\n if (defaultValue !== undefined) {\n const defaultValueIndex = getIndexFromValue(data, defaultValue);\n\n if (defaultValueIndex !== undefined) {\n setInputValueByIndex(defaultValueIndex);\n }\n } else {\n setInputValueByIndex(0);\n }\n }\n }, [data]);\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n const charKey = String.fromCharCode(event.keyCode);\n\n if (charKey.match(/(\\w)/g)) {\n const nextIndex = getNextIndex(charKey);\n\n if (nextIndex > -1 && nextIndex !== currentIndex) {\n setInputValueByIndex(nextIndex);\n }\n return;\n }\n\n if (onKeyDown) {\n event.persist();\n onKeyDown(event);\n }\n };\n\n const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\n if (currentIndex === undefined && data.length) {\n setInputValueByIndex(0);\n }\n\n if (onFocus) {\n event.persist();\n onFocus(event);\n }\n };\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n event.persist();\n\n if (onChange) {\n const item = findByValue(data, event.target.value);\n (event as any).detail = sanitizeItem(item);\n\n const indexes = item?.path?.split('.') ?? [];\n\n if (indexes.length > 1) {\n // we don't want to map the current item\n indexes.pop();\n // we need to rebuild the path as we map\n let lastPath: string;\n\n (event as any).detail.parents = indexes.map(i => {\n lastPath = lastPath ? [lastPath, i].join('.') : i;\n return sanitizeItem(data.find(i => i.path === lastPath));\n });\n }\n\n onChange(event);\n }\n };\n\n const list: ScrollableListProps = {\n ...otherProps,\n 'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\n data,\n disabled,\n id,\n invalid,\n onChange: handleListboxChange,\n onFocus: handleListboxFocus,\n onKeyDown: handleListboxKeyDown,\n scrollOnFocus: true,\n tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\n value: currentIndex,\n };\n\n const input = {\n name,\n onChange: handleInputChange,\n ref: inputRef,\n tabIndex: -1,\n value: value ?? '',\n };\n\n return { list, input };\n};\n"],"names":["useListbox","data","externalData","defaultValue","disabled","emptyValue","id","nativeId","invalid","name","onChange","onFocus","onKeyDown","value","otherProps","ref","useFlattenedData","undefined","text","React","uuid","inputRef","useProxiedRef","currentIndex","getIndexFromValue","getNextIndex","useTypeahead","setInputValueByIndex","index","option","setInputValueByRef","current","handleListboxChange","length","defaultValueIndex","handleListboxKeyDown","event","charKey","String","fromCharCode","keyCode","match","nextIndex","persist","handleListboxFocus","handleInputChange","item","findByValue","target","detail","sanitizeItem","indexes","path","split","pop","lastPath","parents","map","i","join","find","list","getActiveDescendant","scrollOnFocus","tabIndex","input"],"mappings":"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"}
|
@@ -2,12 +2,11 @@ import React__default from 'react';
|
|
2
2
|
import { getId } from './ScrollableList.js';
|
3
3
|
import { setInputValueByRef as setInputValueByRef$1 } from '../../utils/input.js';
|
4
4
|
|
5
|
+
const getValue = value => String(value !== null && value !== void 0 ? value : '');
|
6
|
+
|
5
7
|
const setInputValueByRef = (input, value, event = 'change') => {
|
6
|
-
setInputValueByRef$1(input,
|
8
|
+
setInputValueByRef$1(input, getValue(value), event);
|
7
9
|
};
|
8
|
-
|
9
|
-
const getValue = value => value === undefined || value === null ? '' : String(value);
|
10
|
-
|
11
10
|
const getIndexFromValue = (data, value) => {
|
12
11
|
const index = data.findIndex(option => getValue(option.value) === getValue(value));
|
13
12
|
return index > -1 ? index : undefined;
|
@@ -32,9 +31,7 @@ const searchForString = (child, value, strategy = 'includes') => {
|
|
32
31
|
|
33
32
|
return searchForString((_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.children, value, strategy);
|
34
33
|
} else {
|
35
|
-
|
36
|
-
|
37
|
-
return child.toString().toLowerCase()[strategy]((_String = String(value)) === null || _String === void 0 ? void 0 : _String.toLowerCase());
|
34
|
+
return child.toString().toLowerCase()[strategy](String(value).toLowerCase());
|
38
35
|
}
|
39
36
|
} catch {
|
40
37
|
return false;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"util.js","sources":["../../../../src/components/Listbox/util.ts"],"sourcesContent":["import React from 'react';\r\nimport { ScrollableListItem, ScrollableListItemValue, getId } from './ScrollableList';\r\nimport { setInputValueByRef as setInputValueByRefBase } from '../../utils/input';\r\n\r\nexport const setInputValueByRef = (input: HTMLInputElement | null, value: ScrollableListItemValue, event = 'change'): void => {\r\n setInputValueByRefBase(input, value !== undefined && value !== null ? String(value) : '', event);\r\n};\r\n\r\nconst getValue = (value: ScrollableListItemValue | undefined): string =>\r\n value === undefined || value === null ? '' : String(value);\r\n\r\nexport const getIndexFromValue = (data: ScrollableListItem[], value: ScrollableListItemValue | undefined): number | undefined => {\r\n const index = data.findIndex(option => getValue(option.value) === getValue(value));\r\n return index > -1 ? index : undefined;\r\n};\r\n\r\nexport const getSelectedIndexesFromValue = (data: ScrollableListItem[], value: ScrollableListItemValue | undefined): number[] => {\r\n if (typeof value !== 'string') return [];\r\n\r\n return value\r\n .split(',')\r\n .map(v => data.findIndex(o => String(o.value) === v))\r\n .filter(v => v !== -1);\r\n};\r\n\r\nexport const findByValue = (data: ScrollableListItem[], value: ScrollableListItemValue): ScrollableListItem | undefined => {\r\n return data.find(option => getValue(option.value) === getValue(value));\r\n};\r\n\r\nexport const searchForString = (child: JSX.Element | string, value: string, strategy = 'includes'): boolean => {\r\n try {\r\n if (typeof child !== 'string' && child.props?.children) {\r\n if (Array.isArray(child.props?.children)) {\r\n return !!child.props.children.find((subChild: JSX.Element | string) =>\r\n searchForString(subChild, value, strategy)\r\n );\r\n }\r\n\r\n return searchForString(child.props?.children, value, strategy);\r\n } else {\r\n return child.toString().toLowerCase()[strategy](String(value)?.toLowerCase());\r\n }\r\n } catch {\r\n return false;\r\n }\r\n};\r\n\r\nconst getIndexInRangeByValue = (\r\n data: ScrollableListItem[],\r\n query: string,\r\n firstIndex: number,\r\n lastIndex: number = data.length\r\n): number => {\r\n const index = data.slice(firstIndex, lastIndex).findIndex(option => {\r\n if (option.disabled) {\r\n return false;\r\n }\r\n\r\n return searchForString(option.text, query, 'startsWith');\r\n });\r\n\r\n return index > -1 ? index + firstIndex : -1;\r\n};\r\n\r\nexport const findNextIndexByValue = (data: ScrollableListItem[], query: string, activeIndex: number | undefined): number => {\r\n const firstIndex = activeIndex === undefined ? 0 : activeIndex + 1;\r\n let index = getIndexInRangeByValue(data, query, firstIndex);\r\n\r\n if (index === -1) {\r\n index = getIndexInRangeByValue(data, query, 0, activeIndex);\r\n }\r\n\r\n return index;\r\n};\r\n\r\nexport const getActiveDescendant = (data: ScrollableListItem[], currentIndex: number | undefined, id: string): any => {\r\n return currentIndex !== undefined && data[currentIndex] ? getId(id, data[currentIndex].value) : undefined;\r\n};\r\n\r\nexport const useFlattenedData = (data: ScrollableListItem[]): ScrollableListItem[] => {\r\n return React.useMemo(() => {\r\n const items: ScrollableListItem[] = [];\r\n\r\n const flatten = (item: ScrollableListItem, path: number, parentPath?: string, parentDisabled?: boolean) => {\r\n const currentPath = parentPath ? `${parentPath}.${path}` : `${path}`;\r\n const isItemDisabled = parentDisabled || item.disabled;\r\n\r\n items.push({\r\n ...item,\r\n disabled: isItemDisabled,\r\n path: currentPath,\r\n hasChildren: !!item.children,\r\n });\r\n\r\n if (item.children) {\r\n item.children.forEach((childItem: ScrollableListItem, childPath: number) =>\r\n flatten(childItem, childPath, currentPath, isItemDisabled)\r\n );\r\n }\r\n };\r\n\r\n data.forEach((item, index) => {\r\n flatten(item, index);\r\n });\r\n\r\n return items;\r\n }, [data]);\r\n};\r\n\r\nexport const sanitizeItem = (item: ScrollableListItem | undefined) => {\r\n if (item) {\r\n const { hasChildren: _1, path: _2, ...rest } = item;\r\n return rest;\r\n }\r\n\r\n return undefined;\r\n};\r\n\r\nexport const getOptionParents = (data: ScrollableListItem[], path?: string) => {\r\n const indexes = path?.split('.') ?? [];\r\n\r\n if (indexes.length > 1) {\r\n // we don't want to map the current item\r\n indexes.pop();\r\n // we need to rebuild the path as we map\r\n let lastPath: string;\r\n\r\n return indexes.map(i => {\r\n lastPath = lastPath ? [lastPath, i].join('.') : i;\r\n return sanitizeItem(data.find((i: ScrollableListItem) => i.path === lastPath));\r\n });\r\n }\r\n\r\n return null;\r\n};\r\n\r\nexport const filterData = (data: ScrollableListItem[], value: ScrollableListItemValue = ''): ScrollableListItem[] => {\r\n if (value === '' || value === null) {\r\n return data;\r\n }\r\n\r\n const filteredOptionValues = new Set();\r\n const shouldFilterOption = (option: ScrollableListItem): boolean => {\r\n if (option.disabled) {\r\n return false;\r\n }\r\n\r\n return searchForString(option.text, String(value));\r\n };\r\n\r\n data.forEach(option => {\r\n if (shouldFilterOption(option)) {\r\n const parents = getOptionParents(data, option.path);\r\n\r\n filteredOptionValues.add(option.value);\r\n\r\n if (parents !== null) {\r\n parents.forEach(option => filteredOptionValues.add(option?.value));\r\n }\r\n }\r\n });\r\n\r\n return data.filter(({ value }) => filteredOptionValues.has(value));\r\n};\r\n"],"names":["setInputValueByRef","input","value","event","setInputValueByRefBase","undefined","String","getValue","getIndexFromValue","data","index","findIndex","option","getSelectedIndexesFromValue","split","map","v","o","filter","findByValue","find","searchForString","child","strategy","props","children","Array","isArray","subChild","toString","toLowerCase","getIndexInRangeByValue","query","firstIndex","lastIndex","length","slice","disabled","text","findNextIndexByValue","activeIndex","getActiveDescendant","currentIndex","id","getId","useFlattenedData","React","useMemo","items","flatten","item","path","parentPath","parentDisabled","currentPath","isItemDisabled","push","hasChildren","forEach","childItem","childPath","sanitizeItem","_1","_2","rest","getOptionParents","indexes","pop","lastPath","i","join","filterData","filteredOptionValues","Set","shouldFilterOption","parents","add","has"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"util.js","sources":["../../../../src/components/Listbox/util.ts"],"sourcesContent":["import React from 'react';\nimport { ScrollableListItem, ScrollableListItemValue, getId } from './ScrollableList';\nimport { setInputValueByRef as setInputValueByRefBase } from '../../utils/input';\n\nconst getValue = (value: ScrollableListItemValue | undefined): string => String(value ?? '');\n\nexport const setInputValueByRef = (input: HTMLInputElement | null, value: ScrollableListItemValue, event = 'change'): void => {\n setInputValueByRefBase(input, getValue(value), event);\n};\n\nexport const getIndexFromValue = (data: ScrollableListItem[], value: ScrollableListItemValue | undefined): number | undefined => {\n const index = data.findIndex(option => getValue(option.value) === getValue(value));\n return index > -1 ? index : undefined;\n};\n\nexport const getSelectedIndexesFromValue = (data: ScrollableListItem[], value: ScrollableListItemValue | undefined): number[] => {\n if (typeof value !== 'string') return [];\n\n return value\n .split(',')\n .map(v => data.findIndex(o => String(o.value) === v))\n .filter(v => v !== -1);\n};\n\nexport const findByValue = (data: ScrollableListItem[], value: ScrollableListItemValue): ScrollableListItem | undefined => {\n return data.find(option => getValue(option.value) === getValue(value));\n};\n\nexport const searchForString = (child: JSX.Element | string, value: string, strategy = 'includes'): boolean => {\n try {\n if (typeof child !== 'string' && child.props?.children) {\n if (Array.isArray(child.props?.children)) {\n return !!child.props.children.find((subChild: JSX.Element | string) =>\n searchForString(subChild, value, strategy)\n );\n }\n\n return searchForString(child.props?.children, value, strategy);\n } else {\n return child.toString().toLowerCase()[strategy](String(value).toLowerCase());\n }\n } catch {\n return false;\n }\n};\n\nconst getIndexInRangeByValue = (\n data: ScrollableListItem[],\n query: string,\n firstIndex: number,\n lastIndex: number = data.length\n): number => {\n const index = data.slice(firstIndex, lastIndex).findIndex(option => {\n if (option.disabled) {\n return false;\n }\n\n return searchForString(option.text, query, 'startsWith');\n });\n\n return index > -1 ? index + firstIndex : -1;\n};\n\nexport const findNextIndexByValue = (data: ScrollableListItem[], query: string, activeIndex: number | undefined): number => {\n const firstIndex = activeIndex === undefined ? 0 : activeIndex + 1;\n let index = getIndexInRangeByValue(data, query, firstIndex);\n\n if (index === -1) {\n index = getIndexInRangeByValue(data, query, 0, activeIndex);\n }\n\n return index;\n};\n\nexport const getActiveDescendant = (data: ScrollableListItem[], currentIndex: number | undefined, id: string): any => {\n return currentIndex !== undefined && data[currentIndex] ? getId(id, data[currentIndex].value) : undefined;\n};\n\nexport const useFlattenedData = (data: ScrollableListItem[]): ScrollableListItem[] => {\n return React.useMemo(() => {\n const items: ScrollableListItem[] = [];\n\n const flatten = (item: ScrollableListItem, path: number, parentPath?: string, parentDisabled?: boolean) => {\n const currentPath = parentPath ? `${parentPath}.${path}` : `${path}`;\n const isItemDisabled = parentDisabled || item.disabled;\n\n items.push({\n ...item,\n disabled: isItemDisabled,\n path: currentPath,\n hasChildren: !!item.children,\n });\n\n if (item.children) {\n item.children.forEach((childItem: ScrollableListItem, childPath: number) =>\n flatten(childItem, childPath, currentPath, isItemDisabled)\n );\n }\n };\n\n data.forEach((item, index) => {\n flatten(item, index);\n });\n\n return items;\n }, [data]);\n};\n\nexport const sanitizeItem = (item: ScrollableListItem | undefined) => {\n if (item) {\n const { hasChildren: _1, path: _2, ...rest } = item;\n return rest;\n }\n\n return undefined;\n};\n\nexport const getOptionParents = (data: ScrollableListItem[], path?: string) => {\n const indexes = path?.split('.') ?? [];\n\n if (indexes.length > 1) {\n // we don't want to map the current item\n indexes.pop();\n // we need to rebuild the path as we map\n let lastPath: string;\n\n return indexes.map(i => {\n lastPath = lastPath ? [lastPath, i].join('.') : i;\n return sanitizeItem(data.find((i: ScrollableListItem) => i.path === lastPath));\n });\n }\n\n return null;\n};\n\nexport const filterData = (data: ScrollableListItem[], value: ScrollableListItemValue = ''): ScrollableListItem[] => {\n if (value === '' || value === null) {\n return data;\n }\n\n const filteredOptionValues = new Set();\n const shouldFilterOption = (option: ScrollableListItem): boolean => {\n if (option.disabled) {\n return false;\n }\n\n return searchForString(option.text, String(value));\n };\n\n data.forEach(option => {\n if (shouldFilterOption(option)) {\n const parents = getOptionParents(data, option.path);\n\n filteredOptionValues.add(option.value);\n\n if (parents !== null) {\n parents.forEach(option => filteredOptionValues.add(option?.value));\n }\n }\n });\n\n return data.filter(({ value }) => filteredOptionValues.has(value));\n};\n"],"names":["getValue","value","String","setInputValueByRef","input","event","setInputValueByRefBase","getIndexFromValue","data","index","findIndex","option","undefined","getSelectedIndexesFromValue","split","map","v","o","filter","findByValue","find","searchForString","child","strategy","props","children","Array","isArray","subChild","toString","toLowerCase","getIndexInRangeByValue","query","firstIndex","lastIndex","length","slice","disabled","text","findNextIndexByValue","activeIndex","getActiveDescendant","currentIndex","id","getId","useFlattenedData","React","useMemo","items","flatten","item","path","parentPath","parentDisabled","currentPath","isItemDisabled","push","hasChildren","forEach","childItem","childPath","sanitizeItem","_1","_2","rest","getOptionParents","indexes","pop","lastPath","i","join","filterData","filteredOptionValues","Set","shouldFilterOption","parents","add","has"],"mappings":"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"}
|