@artsy/palette 37.0.0-canary.1250.29227.0 → 37.0.0-canary.1250.29254.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/elements/MultiSelect/MultiSelect.js +1 -1
- package/dist/elements/MultiSelect/MultiSelect.js.map +1 -1
- package/dist/elements/MultiSelect/tokens.js +4 -1
- package/dist/elements/MultiSelect/tokens.js.map +1 -1
- package/dist/elements/Select/Select.js +6 -3
- package/dist/elements/Select/Select.js.map +1 -1
- package/package.json +2 -2
|
@@ -173,7 +173,7 @@ var Container = (0, _styledComponents.default)(_Clickable.Clickable).withConfig(
|
|
|
173
173
|
displayName: "MultiSelect__Container",
|
|
174
174
|
componentId: "amrkn0-1"
|
|
175
175
|
})(["position:relative;width:100%;padding:16px 24px 16px ", ";font-family:", ";border:1px solid;border-radius:3px;border-color:", ";cursor:pointer;line-height:1;transition:color 0.25s,background-color 0.25s,border-color 0.25s;background-color:", ";", " ", ""], (0, _themeGet.themeGet)("space.1"), (0, _themeGet.themeGet)("fonts.sans"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.white100"), function (props) {
|
|
176
|
-
return (0, _styledComponents.css)(["", " ", " ", " ", " ", " ", " &:hover{", "}", " &:disabled{cursor:default;", "}"], _tokens.MULTISELECT_STATES.default, props.complete && _tokens.MULTISELECT_STATES.completed, props.hover && _tokens.MULTISELECT_STATES.hover, props.focus && _tokens.MULTISELECT_STATES.focus, props.disabled && _tokens.MULTISELECT_STATES.disabled, props.error && _tokens.MULTISELECT_STATES.error, _tokens.MULTISELECT_STATES.hover, props.visible && _tokens.MULTISELECT_STATES.focus, _tokens.MULTISELECT_STATES.disabled);
|
|
176
|
+
return (0, _styledComponents.css)(["", " ", " ", " ", " ", " ", " &:hover{", "}", " &:disabled{cursor:default;", "}", ""], _tokens.MULTISELECT_STATES.default, props.complete && _tokens.MULTISELECT_STATES.completed, props.hover && _tokens.MULTISELECT_STATES.hover, props.focus && _tokens.MULTISELECT_STATES.focus, props.disabled && _tokens.MULTISELECT_STATES.disabled, props.error && _tokens.MULTISELECT_STATES.error, _tokens.MULTISELECT_STATES.hover, props.visible && _tokens.MULTISELECT_STATES.focus, _tokens.MULTISELECT_STATES.disabled, props.title && !props.complete && !props.visible && (0, _styledComponents.css)(["color:transparent !important;"]));
|
|
177
177
|
}, _Select.caretMixin);
|
|
178
178
|
var StyledLabel = _styledComponents.default.label.withConfig({
|
|
179
179
|
displayName: "MultiSelect__StyledLabel",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelect.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_helpers","_utils","_useUpdateEffect","_useWidthOf2","_Box","_Checkbox","_Select","_Text","_Tooltip","_Clickable","_RequiredField","_tokens","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","iter","Symbol","iterator","Array","from","isArray","_arrayLikeToArray","_slicedToArray","_arrayWithHoles","_iterableToArrayLimit","_nonIterableRest","o","minLen","n","toString","slice","constructor","name","test","len","arr2","_i","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","MultiSelect","_ref","complete","description","disabled","error","focus","hover","_ref$name","options","required","title","onSelect","rest","_useState","useState","_useState2","visible","setVisible","_useState3","_useState4","selection","setSelection","useUpdateEffect","tooltipRef","current","anchorRef","onVisible","onHide","useEffect","handleKeydown","event","document","addEventListener","removeEventListener","_usePosition","usePosition","position","offset","active","_useWidthOf","useWidthOf","ref","width","useClickOutside","onClickOutside","when","type","handleSelect","option","selected","prevSelection","nextSelection","concat","filter","_ref2","createElement","Box","Tooltip","pointer","content","placement","Text","variant","color","textAlign","Container","onClick","lineHeight","StyledLabel","htmlFor","Options","tabIndex","zIndex","bg","map","Checkbox","height","px","includes","text","RequiredField","mt","ml","exports","displayName","styled","withConfig","componentId","DROP_SHADOW","Clickable","themeGet","props","css","MULTISELECT_STATES","completed","caretMixin","label","FORM_ELEMENT_TRANSITION"],"sources":["../../../src/elements/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport { DROP_SHADOW, FORM_ELEMENT_TRANSITION } from \"../../helpers\"\nimport { useClickOutside, usePosition } from \"../../utils\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { useWidthOf } from \"../../utils/useWidthOf\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Checkbox } from \"../Checkbox\"\nimport { caretMixin, Option } from \"../Select\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { Clickable } from \"../Clickable\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { MULTISELECT_STATES } from \"./tokens\"\n\nexport interface MultiSelectProps extends BoxProps {\n complete?: boolean\n description?: string\n disabled?: boolean\n error?: string | boolean\n focus?: boolean\n hover?: boolean\n name?: string\n options: Option[]\n required?: boolean\n title?: string\n onSelect?: (selection: Option[]) => void\n visible?: boolean\n}\n\n/** A drop-down multi-select menu */\nexport const MultiSelect: React.FC<MultiSelectProps> = ({\n complete,\n description,\n disabled,\n error,\n focus,\n hover,\n name = \"Select\",\n options,\n required,\n title,\n onSelect,\n ...rest\n}) => {\n const [visible, setVisible] = useState(false)\n const [selection, setSelection] = useState<Option[]>([])\n\n // Yields focus back and forth between popover and anchor\n useUpdateEffect(() => {\n if (visible && tooltipRef.current) {\n tooltipRef.current.focus()\n return\n }\n\n if (!anchorRef.current) return\n anchorRef.current.focus()\n }, [visible])\n\n const onVisible = () => setVisible(true)\n const onHide = () => setVisible(false)\n\n useEffect(() => {\n const handleKeydown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n onHide()\n }\n }\n\n document.addEventListener(\"keydown\", handleKeydown)\n return () => {\n document.removeEventListener(\"keydown\", handleKeydown)\n }\n }, [])\n\n const { anchorRef, tooltipRef } = usePosition({\n position: \"bottom\",\n offset: 10,\n active: visible,\n })\n\n const { width } = useWidthOf({ ref: anchorRef })\n\n useClickOutside({\n ref: tooltipRef,\n onClickOutside: onHide,\n when: visible,\n type: \"click\",\n })\n\n const handleSelect = (option: Option) => {\n return (selected: boolean) => {\n const prevSelection = selection\n const nextSelection = selected\n ? [...prevSelection, option]\n : prevSelection.filter(({ value }) => option.value !== value)\n\n setSelection(nextSelection)\n onSelect?.(nextSelection)\n }\n }\n\n return (\n <Box width=\"100%\" {...rest}>\n {!!description && (\n <Tooltip pointer content={description} placement=\"top-end\">\n <Text variant=\"xs\" color=\"black60\" textAlign=\"right\">\n <u>What is this?</u>\n </Text>\n </Tooltip>\n )}\n\n <Container\n ref={anchorRef as any}\n onClick={onVisible}\n complete={complete || selection.length > 0}\n disabled={!!disabled}\n error={error}\n focus={!!focus}\n hover={!!hover}\n title={title}\n visible={visible}\n {...rest}\n >\n <Text variant=\"sm\" lineHeight={1}>\n {selection.length > 0 ? `${selection.length} selected` : name}\n </Text>\n\n {!!title && <StyledLabel htmlFor={name}>{title}</StyledLabel>}\n </Container>\n\n {visible && (\n <Options\n tabIndex={0}\n ref={tooltipRef as any}\n zIndex={1}\n bg=\"white100\"\n width={width}\n >\n {options.map((option) => {\n return (\n <Checkbox\n key={option.value}\n height={50}\n px={1}\n selected={selection.includes(option)}\n onSelect={handleSelect(option)}\n >\n {option.text}\n </Checkbox>\n )\n })}\n </Options>\n )}\n\n {required && !(error && typeof error === \"string\") && (\n <RequiredField mt={0.5} ml={1} />\n )}\n\n {error && typeof error === \"string\" && (\n <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n {error}\n </Text>\n )}\n </Box>\n )\n}\n\nconst Options = styled(Box)`\n position: fixed;\n z-index: 1;\n max-height: 300px;\n text-align: left;\n box-shadow: ${DROP_SHADOW};\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n`\n\ntype ContainerProps = Pick<\n MultiSelectProps,\n \"complete\" | \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"visible\"\n>\n\nconst Container = styled(Clickable)<ContainerProps>`\n position: relative;\n width: 100%;\n /* 24px = space.1 + 4px-wide caret + space.1 */\n padding: 16px 24px 16px ${themeGet(\"space.1\")};\n font-family: ${themeGet(\"fonts.sans\")};\n border: 1px solid;\n border-radius: 3px;\n border-color: ${themeGet(\"colors.black30\")};\n cursor: pointer;\n line-height: 1;\n transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n background-color: ${themeGet(\"colors.white100\")};\n\n ${(props) => {\n return css`\n ${MULTISELECT_STATES.default}\n ${props.complete && MULTISELECT_STATES.completed}\n ${props.hover && MULTISELECT_STATES.hover}\n ${props.focus && MULTISELECT_STATES.focus}\n ${props.disabled && MULTISELECT_STATES.disabled}\n ${props.error && MULTISELECT_STATES.error}\n \n &:hover {\n ${MULTISELECT_STATES.hover}\n }\n\n ${props.visible && MULTISELECT_STATES.focus}\n\n &:disabled {\n cursor: default;\n ${MULTISELECT_STATES.disabled}\n }\n `\n }}\n\n ${caretMixin}\n`\n\nconst StyledLabel = styled.label`\n position: absolute;\n top: 50%;\n left: 5px;\n padding: 0 5px;\n pointer-events: none;\n transform: translateY(-50%);\n transition: ${FORM_ELEMENT_TRANSITION};\n transition-property: color, transform, padding, font-size;\n background-color: ${themeGet(\"colors.white100\")};\n font-family: ${themeGet(\"fonts.sans\")};\n`\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MultiSelect.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_helpers","_utils","_useUpdateEffect","_useWidthOf2","_Box","_Checkbox","_Select","_Text","_Tooltip","_Clickable","_RequiredField","_tokens","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","iter","Symbol","iterator","Array","from","isArray","_arrayLikeToArray","_slicedToArray","_arrayWithHoles","_iterableToArrayLimit","_nonIterableRest","o","minLen","n","toString","slice","constructor","name","test","len","arr2","_i","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","MultiSelect","_ref","complete","description","disabled","error","focus","hover","_ref$name","options","required","title","onSelect","rest","_useState","useState","_useState2","visible","setVisible","_useState3","_useState4","selection","setSelection","useUpdateEffect","tooltipRef","current","anchorRef","onVisible","onHide","useEffect","handleKeydown","event","document","addEventListener","removeEventListener","_usePosition","usePosition","position","offset","active","_useWidthOf","useWidthOf","ref","width","useClickOutside","onClickOutside","when","type","handleSelect","option","selected","prevSelection","nextSelection","concat","filter","_ref2","createElement","Box","Tooltip","pointer","content","placement","Text","variant","color","textAlign","Container","onClick","lineHeight","StyledLabel","htmlFor","Options","tabIndex","zIndex","bg","map","Checkbox","height","px","includes","text","RequiredField","mt","ml","exports","displayName","styled","withConfig","componentId","DROP_SHADOW","Clickable","themeGet","props","css","MULTISELECT_STATES","completed","caretMixin","label","FORM_ELEMENT_TRANSITION"],"sources":["../../../src/elements/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport { DROP_SHADOW, FORM_ELEMENT_TRANSITION } from \"../../helpers\"\nimport { useClickOutside, usePosition } from \"../../utils\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { useWidthOf } from \"../../utils/useWidthOf\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Checkbox } from \"../Checkbox\"\nimport { caretMixin, Option } from \"../Select\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { Clickable } from \"../Clickable\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { MULTISELECT_STATES } from \"./tokens\"\n\nexport interface MultiSelectProps extends BoxProps {\n complete?: boolean\n description?: string\n disabled?: boolean\n error?: string | boolean\n focus?: boolean\n hover?: boolean\n name?: string\n options: Option[]\n required?: boolean\n title?: string\n onSelect?: (selection: Option[]) => void\n visible?: boolean\n}\n\n/** A drop-down multi-select menu */\nexport const MultiSelect: React.FC<MultiSelectProps> = ({\n complete,\n description,\n disabled,\n error,\n focus,\n hover,\n name = \"Select\",\n options,\n required,\n title,\n onSelect,\n ...rest\n}) => {\n const [visible, setVisible] = useState(false)\n const [selection, setSelection] = useState<Option[]>([])\n\n // Yields focus back and forth between popover and anchor\n useUpdateEffect(() => {\n if (visible && tooltipRef.current) {\n tooltipRef.current.focus()\n return\n }\n\n if (!anchorRef.current) return\n anchorRef.current.focus()\n }, [visible])\n\n const onVisible = () => setVisible(true)\n const onHide = () => setVisible(false)\n\n useEffect(() => {\n const handleKeydown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n onHide()\n }\n }\n\n document.addEventListener(\"keydown\", handleKeydown)\n return () => {\n document.removeEventListener(\"keydown\", handleKeydown)\n }\n }, [])\n\n const { anchorRef, tooltipRef } = usePosition({\n position: \"bottom\",\n offset: 10,\n active: visible,\n })\n\n const { width } = useWidthOf({ ref: anchorRef })\n\n useClickOutside({\n ref: tooltipRef,\n onClickOutside: onHide,\n when: visible,\n type: \"click\",\n })\n\n const handleSelect = (option: Option) => {\n return (selected: boolean) => {\n const prevSelection = selection\n const nextSelection = selected\n ? [...prevSelection, option]\n : prevSelection.filter(({ value }) => option.value !== value)\n\n setSelection(nextSelection)\n onSelect?.(nextSelection)\n }\n }\n\n return (\n <Box width=\"100%\" {...rest}>\n {!!description && (\n <Tooltip pointer content={description} placement=\"top-end\">\n <Text variant=\"xs\" color=\"black60\" textAlign=\"right\">\n <u>What is this?</u>\n </Text>\n </Tooltip>\n )}\n\n <Container\n ref={anchorRef as any}\n onClick={onVisible}\n complete={complete || selection.length > 0}\n disabled={!!disabled}\n error={error}\n focus={!!focus}\n hover={!!hover}\n title={title}\n visible={visible}\n {...rest}\n >\n <Text variant=\"sm\" lineHeight={1}>\n {selection.length > 0 ? `${selection.length} selected` : name}\n </Text>\n\n {!!title && <StyledLabel htmlFor={name}>{title}</StyledLabel>}\n </Container>\n\n {visible && (\n <Options\n tabIndex={0}\n ref={tooltipRef as any}\n zIndex={1}\n bg=\"white100\"\n width={width}\n >\n {options.map((option) => {\n return (\n <Checkbox\n key={option.value}\n height={50}\n px={1}\n selected={selection.includes(option)}\n onSelect={handleSelect(option)}\n >\n {option.text}\n </Checkbox>\n )\n })}\n </Options>\n )}\n\n {required && !(error && typeof error === \"string\") && (\n <RequiredField mt={0.5} ml={1} />\n )}\n\n {error && typeof error === \"string\" && (\n <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n {error}\n </Text>\n )}\n </Box>\n )\n}\n\nconst Options = styled(Box)`\n position: fixed;\n z-index: 1;\n max-height: 300px;\n text-align: left;\n box-shadow: ${DROP_SHADOW};\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n`\n\ntype ContainerProps = Pick<\n MultiSelectProps,\n \"complete\" | \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"visible\"\n>\n\nconst Container = styled(Clickable)<ContainerProps>`\n position: relative;\n width: 100%;\n /* 24px = space.1 + 4px-wide caret + space.1 */\n padding: 16px 24px 16px ${themeGet(\"space.1\")};\n font-family: ${themeGet(\"fonts.sans\")};\n border: 1px solid;\n border-radius: 3px;\n border-color: ${themeGet(\"colors.black30\")};\n cursor: pointer;\n line-height: 1;\n transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n background-color: ${themeGet(\"colors.white100\")};\n\n ${(props) => {\n return css`\n ${MULTISELECT_STATES.default}\n ${props.complete && MULTISELECT_STATES.completed}\n ${props.hover && MULTISELECT_STATES.hover}\n ${props.focus && MULTISELECT_STATES.focus}\n ${props.disabled && MULTISELECT_STATES.disabled}\n ${props.error && MULTISELECT_STATES.error}\n \n &:hover {\n ${MULTISELECT_STATES.hover}\n }\n\n ${props.visible && MULTISELECT_STATES.focus}\n\n &:disabled {\n cursor: default;\n ${MULTISELECT_STATES.disabled}\n }\n\n // Hide text behind title when it's visible\n ${props.title &&\n !props.complete &&\n !props.visible &&\n css`\n color: transparent !important;\n `}\n `\n }}\n\n ${caretMixin}\n`\n\nconst StyledLabel = styled.label`\n position: absolute;\n top: 50%;\n left: 5px;\n padding: 0 5px;\n pointer-events: none;\n transform: translateY(-50%);\n transition: ${FORM_ELEMENT_TRANSITION};\n transition-property: color, transform, padding, font-size;\n background-color: ${themeGet(\"colors.white100\")};\n font-family: ${themeGet(\"fonts.sans\")};\n`\n"],"mappings":"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"}
|
|
@@ -9,7 +9,10 @@ var _styledComponents = require("styled-components");
|
|
|
9
9
|
var MULTISELECT_STATES = {
|
|
10
10
|
default: (0, _styledComponents.css)(["height:50px;font-size:", ";color:", ";border-color:", ";& > label{color:", ";font-size:", ";}"], (0, _themeGet.themeGet)("textVariants.sm-display.fontSize"), (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("textVariants.sm-display.fontSize")),
|
|
11
11
|
focus: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:underline;& > label{color:", ";transform:translateY(-250%);font-size:", ";}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),
|
|
12
|
-
hover: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:underline;& > label{color:", ";}"], (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.blue100"))
|
|
12
|
+
hover: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:underline;& > label{color:", ";", ")}}"], (0, _themeGet.themeGet)("colors.blue100"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.blue100"), function (_ref) {
|
|
13
|
+
var complete = _ref.complete;
|
|
14
|
+
return !complete && (0, _styledComponents.css)(["text-decoration:underline;"]);
|
|
15
|
+
}),
|
|
13
16
|
completed: (0, _styledComponents.css)(["border-color:", ";text-decoration:none;& > label{color:", ";transform:translateY(-250%);font-size:", ";}"], (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("colors.black60"), (0, _themeGet.themeGet)("textVariants.xs.fontSize")),
|
|
14
17
|
disabled: (0, _styledComponents.css)(["color:", ";border-color:", ";text-decoration:none;& > label{color:", ";text-decoration:none;}"], (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black30"), (0, _themeGet.themeGet)("colors.black30")),
|
|
15
18
|
error: (0, _styledComponents.css)(["color:", ";border-color:", ";& > label{color:", ";}"], (0, _themeGet.themeGet)("colors.black100"), (0, _themeGet.themeGet)("colors.red100"), (0, _themeGet.themeGet)("colors.red100"))
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","MULTISELECT_STATES","default","css","themeGet","focus","hover","completed","disabled","error","exports"],"sources":["../../../src/elements/MultiSelect/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { State } from \"../Select/types\"\n\nexport const MULTISELECT_STATES: Record<State, any> = {\n default: css`\n height: 50px;\n font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n color: ${themeGet(\"colors.black100\")};\n border-color: ${themeGet(\"colors.black30\")};\n\n & > label {\n color: ${themeGet(\"colors.black60\")};\n font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n }\n `,\n focus: css`\n color: ${themeGet(\"colors.black100\")};\n border-color: ${themeGet(\"colors.blue100\")};\n text-decoration: underline;\n\n & > label {\n color: ${themeGet(\"colors.blue100\")};\n transform: translateY(-250%);\n font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n }\n `,\n hover: css`\n color: ${themeGet(\"colors.blue100\")};\n border-color: ${themeGet(\"colors.black60\")};\n text-decoration: underline;\n\n & > label {\n color: ${themeGet(\"colors.blue100\")};\n }\n `,\n completed: css`\n border-color: ${themeGet(\"colors.black60\")};\n text-decoration: none;\n\n & > label {\n color: ${themeGet(\"colors.black60\")};\n transform: translateY(-250%);\n font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n }\n `,\n disabled: css`\n color: ${themeGet(\"colors.black30\")};\n border-color: ${themeGet(\"colors.black30\")};\n text-decoration: none;\n\n & > label {\n color: ${themeGet(\"colors.black30\")};\n text-decoration: none;\n }\n `,\n error: css`\n color: ${themeGet(\"colors.black100\")};\n border-color: ${themeGet(\"colors.red100\")};\n\n & > label {\n color: ${themeGet(\"colors.red100\")};\n }\n `,\n}\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAGO,IAAME,kBAAsC,GAAG;EACpDC,OAAO,MAAEC,qBAAG,qGAEG,IAAAC,kBAAQ,EAAC,kCAAkC,CAAC,EAChD,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EACtB,IAAAA,kBAAQ,EAAC,kCAAkC,CAAC,CAE5D;EACDC,KAAK,MAAEF,qBAAG,gIACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAEpD;EACDE,KAAK,MAAEH,qBAAG,
|
|
1
|
+
{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","MULTISELECT_STATES","default","css","themeGet","focus","hover","_ref","complete","completed","disabled","error","exports"],"sources":["../../../src/elements/MultiSelect/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { State } from \"../Select/types\"\n\nexport const MULTISELECT_STATES: Record<State, any> = {\n default: css`\n height: 50px;\n font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n color: ${themeGet(\"colors.black100\")};\n border-color: ${themeGet(\"colors.black30\")};\n\n & > label {\n color: ${themeGet(\"colors.black60\")};\n font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n }\n `,\n focus: css`\n color: ${themeGet(\"colors.black100\")};\n border-color: ${themeGet(\"colors.blue100\")};\n text-decoration: underline;\n\n & > label {\n color: ${themeGet(\"colors.blue100\")};\n transform: translateY(-250%);\n font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n }\n `,\n hover: css`\n color: ${themeGet(\"colors.blue100\")};\n border-color: ${themeGet(\"colors.black60\")};\n text-decoration: underline;\n\n & > label {\n color: ${themeGet(\"colors.blue100\")};\n\n ${({ complete }) =>\n !complete &&\n css`\n text-decoration: underline;\n `})}\n }\n `,\n completed: css`\n border-color: ${themeGet(\"colors.black60\")};\n text-decoration: none;\n\n & > label {\n color: ${themeGet(\"colors.black60\")};\n transform: translateY(-250%);\n font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n }\n `,\n disabled: css`\n color: ${themeGet(\"colors.black30\")};\n border-color: ${themeGet(\"colors.black30\")};\n text-decoration: none;\n\n & > label {\n color: ${themeGet(\"colors.black30\")};\n text-decoration: none;\n }\n `,\n error: css`\n color: ${themeGet(\"colors.black100\")};\n border-color: ${themeGet(\"colors.red100\")};\n\n & > label {\n color: ${themeGet(\"colors.red100\")};\n }\n `,\n}\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAGO,IAAME,kBAAsC,GAAG;EACpDC,OAAO,MAAEC,qBAAG,qGAEG,IAAAC,kBAAQ,EAAC,kCAAkC,CAAC,EAChD,IAAAA,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAG/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EACtB,IAAAA,kBAAQ,EAAC,kCAAkC,CAAC,CAE5D;EACDC,KAAK,MAAEF,qBAAG,gIACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAEpD;EACDE,KAAK,MAAEH,qBAAG,2FACC,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEjC,UAAAG,IAAA;IAAA,IAAGC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAA,OACX,CAACA,QAAQ,QACTL,qBAAG,iCAEF;EAAA,EAEN;EACDM,SAAS,MAAEN,qBAAG,gHACI,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAEtB,IAAAA,kBAAQ,EAAC,0BAA0B,CAAC,CAEpD;EACDM,QAAQ,MAAEP,qBAAG,qGACF,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EACnB,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAI/B,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,CAGtC;EACDO,KAAK,MAAER,qBAAG,2DACC,IAAAC,kBAAQ,EAAC,iBAAiB,CAAC,EACpB,IAAAA,kBAAQ,EAAC,eAAe,CAAC,EAG9B,IAAAA,kBAAQ,EAAC,eAAe,CAAC;AAGxC,CAAC;AAAAQ,OAAA,CAAAX,kBAAA,GAAAA,kBAAA"}
|
|
@@ -14,7 +14,7 @@ var _Box = require("../Box");
|
|
|
14
14
|
var _Text = require("../Text");
|
|
15
15
|
var _Tooltip = require("../Tooltip");
|
|
16
16
|
var _tokens = require("./tokens");
|
|
17
|
-
var _excluded = ["description", "disabled", "error", "focus", "hover", "id", "name", "options", "required", "selected", "title", "onSelect"];
|
|
17
|
+
var _excluded = ["description", "disabled", "error", "focus", "hover", "id", "name", "options", "required", "selected", "title", "onSelect", "onChange", "value"];
|
|
18
18
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
19
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
20
20
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
@@ -40,13 +40,15 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
40
40
|
selected = _ref.selected,
|
|
41
41
|
title = _ref.title,
|
|
42
42
|
onSelect = _ref.onSelect,
|
|
43
|
+
_onChange = _ref.onChange,
|
|
44
|
+
value = _ref.value,
|
|
43
45
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
44
46
|
var _splitBoxProps = (0, _Box.splitBoxProps)(rest),
|
|
45
47
|
_splitBoxProps2 = _slicedToArray(_splitBoxProps, 2),
|
|
46
48
|
boxProps = _splitBoxProps2[0],
|
|
47
49
|
selectProps = _splitBoxProps2[1];
|
|
48
50
|
// due to :has not available in Firefox yet, we need to add the styles to the label using JS
|
|
49
|
-
var _useState = (0, _react.useState)(selected),
|
|
51
|
+
var _useState = (0, _react.useState)(selected || value),
|
|
50
52
|
_useState2 = _slicedToArray(_useState, 2),
|
|
51
53
|
selectedOption = _useState2[0],
|
|
52
54
|
setSelectedOption = _useState2[1];
|
|
@@ -95,6 +97,7 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
95
97
|
value: selected,
|
|
96
98
|
onChange: function onChange(event) {
|
|
97
99
|
onSelect && onSelect(event.target.value);
|
|
100
|
+
_onChange && _onChange(event);
|
|
98
101
|
setSelectedOption(event.target.value);
|
|
99
102
|
}
|
|
100
103
|
}, selectProps), options.map(function (_ref2) {
|
|
@@ -130,7 +133,7 @@ var Container = (0, _styledComponents.default)(_Box.Box).withConfig({
|
|
|
130
133
|
displayName: "Select__Container",
|
|
131
134
|
componentId: "sc-1weszjl-0"
|
|
132
135
|
})(["position:relative;width:100%;> select{", ";width:100%;padding:0 24px 0 ", ";font-family:", ";border:1px solid;border-radius:3px;border-color:", ";cursor:pointer;line-height:1;transition:color 0.25s,background-color 0.25s,border-color 0.25s;", ";}", ""], resetMixin, (0, _themeGet.themeGet)("space.1"), (0, _themeGet.themeGet)("fonts.sans"), (0, _themeGet.themeGet)("colors.black30"), function (props) {
|
|
133
|
-
return (0, _styledComponents.css)(["", " ", " ", " ", " ", " &:hover{", "}&:focus{", "}&:disabled{cursor:default;", "}&:not(:focus):not(:has(option[value=\"\"]:checked)){", " ", "}", " &:not(:focus):has(option[value=\"\"]:checked){", "}", ""], _tokens.SELECT_STATES.default, props.hover && _tokens.SELECT_STATES.hover, props.focus && _tokens.SELECT_STATES.focus, props.disabled && _tokens.SELECT_STATES.disabled, props.error && _tokens.SELECT_STATES.error, _tokens.SELECT_STATES.hover, _tokens.SELECT_STATES.focus, _tokens.SELECT_STATES.disabled, !(props.disabled || props.focus) && _tokens.SELECT_STATES.completed, props.error && _tokens.SELECT_STATES.error, !props.focus && !!props.optionSelected && (0, _styledComponents.css)(["", " ", ""], !(props.disabled || props.focus) && _tokens.SELECT_STATES.completed, props.error && _tokens.SELECT_STATES.error), props.title && (0, _styledComponents.css)(["color:transparent;"]), !props.focus && !props.optionSelected && props.title && (0, _styledComponents.css)(["color:transparent;"]));
|
|
136
|
+
return (0, _styledComponents.css)(["", " ", " ", " ", " ", " &:hover{", "}&:focus{", "}&:disabled{cursor:default;", "}&:not(:focus):not(:has(option[value=\"\"]:checked)){", " ", "}", " &:not(:focus):has(option[value=\"\"]:checked){", "}", ""], _tokens.SELECT_STATES.default, props.hover && _tokens.SELECT_STATES.hover, props.focus && _tokens.SELECT_STATES.focus, props.disabled && _tokens.SELECT_STATES.disabled, props.error && _tokens.SELECT_STATES.error, _tokens.SELECT_STATES.hover, _tokens.SELECT_STATES.focus, _tokens.SELECT_STATES.disabled, !(props.disabled || props.focus) && _tokens.SELECT_STATES.completed, props.error && _tokens.SELECT_STATES.error, !props.focus && !!props.optionSelected && (0, _styledComponents.css)(["", " ", ""], !(props.disabled || props.focus) && _tokens.SELECT_STATES.completed, props.error && _tokens.SELECT_STATES.error), props.title && (0, _styledComponents.css)(["color:transparent;"]), !props.focus && !props.optionSelected && props.title && (0, _styledComponents.css)(["color:transparent !important;"]));
|
|
134
137
|
}, caretMixin);
|
|
135
138
|
var StyledLabel = _styledComponents.default.label.withConfig({
|
|
136
139
|
displayName: "Select__StyledLabel",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_helpers","_RequiredField","_Box","_Text","_Tooltip","_tokens","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Select","forwardRef","_ref","ref","description","disabled","error","focus","hover","id","options","required","selected","title","onSelect","rest","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","selectProps","_useState","useState","_useState2","selectedOption","setSelectedOption","_useState3","_useState4","isFocused","setIsFocused","_useState5","_useState6","isHovered","setIsHovered","createElement","Box","width","Tooltip","pointer","content","placement","Text","variant","color","textAlign","Container","onMouseEnter","onMouseLeave","onFocus","onBlur","optionSelected","onChange","event","map","_ref2","text","StyledLabel","htmlFor","RequiredField","mt","ml","exports","displayName","resetMixin","css","caretMixin","themeGet","_ref3","styled","withConfig","componentId","props","SELECT_STATES","completed","label","FORM_ELEMENT_TRANSITION"],"sources":["../../../src/elements/Select/Select.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, {\n forwardRef,\n ForwardRefExoticComponent,\n Ref,\n useState,\n} from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { SELECT_STATES } from \"./tokens\"\n\nexport interface Option {\n value: string\n text: string\n}\n\nexport interface SelectProps\n extends BoxProps,\n Omit<React.SelectHTMLAttributes<HTMLSelectElement>, \"onSelect\" | \"size\"> {\n description?: string\n disabled?: boolean\n error?: string | boolean\n focus?: boolean\n hover?: boolean\n name?: string\n options: Option[]\n required?: boolean\n selected?: string\n title?: string\n onSelect?: (value: string) => void\n}\n\n/** A drop-down select menu */\nexport const Select: ForwardRefExoticComponent<\n SelectProps & { ref?: Ref<HTMLElement> }\n> = forwardRef(\n (\n {\n description,\n disabled,\n error,\n focus,\n hover,\n id,\n name,\n options,\n required,\n selected,\n title,\n onSelect,\n ...rest\n },\n ref\n ) => {\n const [boxProps, selectProps] = splitBoxProps(rest)\n // due to :has not available in Firefox yet, we need to add the styles to the label using JS\n const [selectedOption, setSelectedOption] = useState(selected)\n const [isFocused, setIsFocused] = useState(false)\n const [isHovered, setIsHovered] = useState(false)\n\n return (\n <Box width=\"100%\" {...boxProps}>\n {!!description && (\n <Tooltip pointer content={description} placement=\"top-end\">\n <Text variant=\"xs\" color=\"black60\" textAlign=\"right\">\n <u>What is this?</u>\n </Text>\n </Tooltip>\n )}\n\n <Container\n disabled={!!disabled}\n hover={!!hover || isHovered}\n error={error!}\n focus={!!focus || isFocused}\n title={title}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n optionSelected={!!selectedOption}\n >\n <select\n ref={ref as any}\n id={id}\n disabled={disabled}\n name={name}\n value={selected}\n onChange={(event) => {\n onSelect && onSelect(event.target.value)\n setSelectedOption(event.target.value)\n }}\n {...selectProps}\n >\n {options.map(({ value, text }) => {\n return (\n <option value={value} key={value}>\n {text}\n </option>\n )\n })}\n </select>\n\n {!!title && (\n <StyledLabel htmlFor={id}>\n {title}\n\n <span />\n </StyledLabel>\n )}\n </Container>\n\n {required && !(error && typeof error === \"string\") && (\n <RequiredField mt={0.5} ml={1} />\n )}\n\n {error && typeof error === \"string\" && (\n <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n {error}\n </Text>\n )}\n </Box>\n )\n }\n)\n\nSelect.displayName = \"Select\"\n\nconst resetMixin = css`\n appearance: none;\n background: none;\n border: none;\n outline: 0;\n text-indent: 0.01px;\n text-overflow: \"\";\n border-radius: 0;\n\n &:-moz-focusring {\n color: transparent;\n text-shadow: 0 0 0 black;\n }\n\n option:not(:checked) {\n color: black; /* prevent <option>s from becoming transparent as well */\n }\n`\n\n/** Creates a small caret */\nexport const caretMixin = css`\n &::after {\n content: \"\";\n cursor: inherit;\n width: 0;\n height: 0;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n right: ${themeGet(\"space.1\")};\n pointer-events: none;\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-top: 4px solid\n ${({ disabled }) => {\n return disabled\n ? themeGet(\"colors.black10\")\n : themeGet(\"colors.black100\")\n }};\n }\n`\n\ntype ContainerProps = Required<\n Pick<SelectProps, \"disabled\" | \"error\" | \"hover\" | \"focus\">\n // adding optionSelected here to use it locally without adding it to the Select's props\n> & { optionSelected: boolean }\n\nconst Container = styled(Box)<ContainerProps>`\n position: relative;\n width: 100%;\n\n > select {\n ${resetMixin};\n width: 100%;\n /* 24px = space.1 + 4px-wide caret + space.1 */\n padding: 0 24px 0 ${themeGet(\"space.1\")};\n font-family: ${themeGet(\"fonts.sans\")};\n border: 1px solid;\n border-radius: 3px;\n border-color: ${themeGet(\"colors.black30\")};\n cursor: pointer;\n line-height: 1;\n transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n\n ${(props) => {\n return css`\n ${SELECT_STATES.default}\n\n ${props.hover && SELECT_STATES.hover}\n ${props.focus && SELECT_STATES.focus}\n ${props.disabled && SELECT_STATES.disabled}\n ${props.error && SELECT_STATES.error}\n\n &:hover {\n ${SELECT_STATES.hover}\n }\n\n &:focus {\n ${SELECT_STATES.focus}\n }\n\n &:disabled {\n cursor: default;\n ${SELECT_STATES.disabled}\n }\n\n &:not(:focus):not(:has(option[value=\"\"]:checked)) {\n ${!(props.disabled || props.focus) && SELECT_STATES.completed}\n ${props.error && SELECT_STATES.error}\n }\n\n // Firefox polyfill for :has\n ${!props.focus &&\n !!props.optionSelected &&\n css`\n ${!(props.disabled || props.focus) && SELECT_STATES.completed}\n ${props.error && SELECT_STATES.error}\n `}\n\n &:not(:focus):has(option[value=\"\"]:checked) {\n ${props.title &&\n css`\n color: transparent;\n `}\n }\n\n // Firefox polyfill for :has\n ${!props.focus &&\n !props.optionSelected &&\n props.title &&\n css`\n color: transparent;\n `}\n `\n }};\n }\n\n ${caretMixin}\n`\n\nconst StyledLabel = styled.label`\n position: absolute;\n top: 50%;\n left: 5px;\n padding: 0 5px;\n pointer-events: none;\n transform: translateY(-50%);\n transition: ${FORM_ELEMENT_TRANSITION};\n transition-property: color, font-size, transform;\n background-color: transparent;\n font-family: ${themeGet(\"fonts.sans\")};\n\n & > span {\n background-color: ${themeGet(\"colors.white100\")};\n height: 100%;\n width: 100%;\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n z-index: -1;\n transition: ${FORM_ELEMENT_TRANSITION};\n transition-property: height, top;\n transition-delay: 0.1s;\n }\n`\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Select.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_helpers","_RequiredField","_Box","_Text","_Tooltip","_tokens","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Select","forwardRef","_ref","ref","description","disabled","error","focus","hover","id","options","required","selected","title","onSelect","onChange","rest","_splitBoxProps","splitBoxProps","_splitBoxProps2","boxProps","selectProps","_useState","useState","_useState2","selectedOption","setSelectedOption","_useState3","_useState4","isFocused","setIsFocused","_useState5","_useState6","isHovered","setIsHovered","createElement","Box","width","Tooltip","pointer","content","placement","Text","variant","color","textAlign","Container","onMouseEnter","onMouseLeave","onFocus","onBlur","optionSelected","event","map","_ref2","text","StyledLabel","htmlFor","RequiredField","mt","ml","exports","displayName","resetMixin","css","caretMixin","themeGet","_ref3","styled","withConfig","componentId","props","SELECT_STATES","completed","label","FORM_ELEMENT_TRANSITION"],"sources":["../../../src/elements/Select/Select.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, {\n forwardRef,\n ForwardRefExoticComponent,\n Ref,\n useState,\n} from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { SELECT_STATES } from \"./tokens\"\n\nexport interface Option {\n value: string\n text: string\n}\n\nexport interface SelectProps\n extends BoxProps,\n Omit<React.SelectHTMLAttributes<HTMLSelectElement>, \"onSelect\" | \"size\"> {\n description?: string\n disabled?: boolean\n error?: string | boolean\n focus?: boolean\n hover?: boolean\n name?: string\n options: Option[]\n required?: boolean\n selected?: string\n title?: string\n onSelect?: (value: string) => void\n}\n\n/** A drop-down select menu */\nexport const Select: ForwardRefExoticComponent<\n SelectProps & { ref?: Ref<HTMLElement> }\n> = forwardRef(\n (\n {\n description,\n disabled,\n error,\n focus,\n hover,\n id,\n name,\n options,\n required,\n selected,\n title,\n onSelect,\n onChange,\n value,\n ...rest\n },\n ref\n ) => {\n const [boxProps, selectProps] = splitBoxProps(rest)\n // due to :has not available in Firefox yet, we need to add the styles to the label using JS\n const [selectedOption, setSelectedOption] = useState(selected || value)\n const [isFocused, setIsFocused] = useState(false)\n const [isHovered, setIsHovered] = useState(false)\n\n return (\n <Box width=\"100%\" {...boxProps}>\n {!!description && (\n <Tooltip pointer content={description} placement=\"top-end\">\n <Text variant=\"xs\" color=\"black60\" textAlign=\"right\">\n <u>What is this?</u>\n </Text>\n </Tooltip>\n )}\n\n <Container\n disabled={!!disabled}\n hover={!!hover || isHovered}\n error={error!}\n focus={!!focus || isFocused}\n title={title}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n optionSelected={!!selectedOption}\n >\n <select\n ref={ref as any}\n id={id}\n disabled={disabled}\n name={name}\n value={selected}\n onChange={(event) => {\n onSelect && onSelect(event.target.value)\n onChange && onChange(event)\n setSelectedOption(event.target.value)\n }}\n {...selectProps}\n >\n {options.map(({ value, text }) => {\n return (\n <option value={value} key={value}>\n {text}\n </option>\n )\n })}\n </select>\n\n {!!title && (\n <StyledLabel htmlFor={id}>\n {title}\n\n <span />\n </StyledLabel>\n )}\n </Container>\n\n {required && !(error && typeof error === \"string\") && (\n <RequiredField mt={0.5} ml={1} />\n )}\n\n {error && typeof error === \"string\" && (\n <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n {error}\n </Text>\n )}\n </Box>\n )\n }\n)\n\nSelect.displayName = \"Select\"\n\nconst resetMixin = css`\n appearance: none;\n background: none;\n border: none;\n outline: 0;\n text-indent: 0.01px;\n text-overflow: \"\";\n border-radius: 0;\n\n &:-moz-focusring {\n color: transparent;\n text-shadow: 0 0 0 black;\n }\n\n option:not(:checked) {\n color: black; /* prevent <option>s from becoming transparent as well */\n }\n`\n\n/** Creates a small caret */\nexport const caretMixin = css`\n &::after {\n content: \"\";\n cursor: inherit;\n width: 0;\n height: 0;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n right: ${themeGet(\"space.1\")};\n pointer-events: none;\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-top: 4px solid\n ${({ disabled }) => {\n return disabled\n ? themeGet(\"colors.black10\")\n : themeGet(\"colors.black100\")\n }};\n }\n`\n\ntype ContainerProps = Required<\n Pick<SelectProps, \"disabled\" | \"error\" | \"hover\" | \"focus\">\n // adding optionSelected here to use it locally without adding it to the Select's props\n> & { optionSelected: boolean }\n\nconst Container = styled(Box)<ContainerProps>`\n position: relative;\n width: 100%;\n\n > select {\n ${resetMixin};\n width: 100%;\n /* 24px = space.1 + 4px-wide caret + space.1 */\n padding: 0 24px 0 ${themeGet(\"space.1\")};\n font-family: ${themeGet(\"fonts.sans\")};\n border: 1px solid;\n border-radius: 3px;\n border-color: ${themeGet(\"colors.black30\")};\n cursor: pointer;\n line-height: 1;\n transition: color 0.25s, background-color 0.25s, border-color 0.25s;\n\n ${(props) => {\n return css`\n ${SELECT_STATES.default}\n\n ${props.hover && SELECT_STATES.hover}\n ${props.focus && SELECT_STATES.focus}\n ${props.disabled && SELECT_STATES.disabled}\n ${props.error && SELECT_STATES.error}\n\n &:hover {\n ${SELECT_STATES.hover}\n }\n\n &:focus {\n ${SELECT_STATES.focus}\n }\n\n &:disabled {\n cursor: default;\n ${SELECT_STATES.disabled}\n }\n\n &:not(:focus):not(:has(option[value=\"\"]:checked)) {\n ${!(props.disabled || props.focus) && SELECT_STATES.completed}\n ${props.error && SELECT_STATES.error}\n }\n\n // Firefox polyfill for :has\n ${!props.focus &&\n !!props.optionSelected &&\n css`\n ${!(props.disabled || props.focus) && SELECT_STATES.completed}\n ${props.error && SELECT_STATES.error}\n `}\n\n &:not(:focus):has(option[value=\"\"]:checked) {\n ${props.title &&\n css`\n color: transparent;\n `}\n }\n\n // Firefox polyfill for :has\n ${!props.focus &&\n !props.optionSelected &&\n props.title &&\n css`\n color: transparent !important;\n `}\n `\n }};\n }\n\n ${caretMixin}\n`\n\nconst StyledLabel = styled.label`\n position: absolute;\n top: 50%;\n left: 5px;\n padding: 0 5px;\n pointer-events: none;\n transform: translateY(-50%);\n transition: ${FORM_ELEMENT_TRANSITION};\n transition-property: color, font-size, transform;\n background-color: transparent;\n font-family: ${themeGet(\"fonts.sans\")};\n\n & > span {\n background-color: ${themeGet(\"colors.white100\")};\n height: 100%;\n width: 100%;\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n z-index: -1;\n transition: ${FORM_ELEMENT_TRANSITION};\n transition-property: height, top;\n transition-delay: 0.1s;\n }\n`\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "37.0.0-canary.1250.
|
|
3
|
+
"version": "37.0.0-canary.1250.29254.0",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -182,5 +182,5 @@
|
|
|
182
182
|
"url": "http://localhost"
|
|
183
183
|
}
|
|
184
184
|
},
|
|
185
|
-
"gitHead": "
|
|
185
|
+
"gitHead": "ec3c01acbdd1ecb6cd1f7cfef6cd044cae7502ef"
|
|
186
186
|
}
|