@artsy/palette 24.1.1 → 24.1.2
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/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
# v24.1.2 (Fri Sep 02 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- refactor(Select): add useForwardRef [#1204](https://github.com/artsy/palette/pull/1204) ([@laurabeth](https://github.com/laurabeth))
|
|
6
|
+
- cleanup ([@laurabeth](https://github.com/laurabeth))
|
|
7
|
+
- refactor Select into ForwardRef component ([@laurabeth](https://github.com/laurabeth))
|
|
8
|
+
|
|
9
|
+
#### Authors: 1
|
|
10
|
+
|
|
11
|
+
- Laura Bhayani ([@laurabeth](https://github.com/laurabeth))
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
1
15
|
# v24.1.1 (Tue Aug 30 2022)
|
|
2
16
|
|
|
3
17
|
#### 🐛 Bug Fix
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { ForwardRefExoticComponent, Ref } from "react";
|
|
2
2
|
import { BoxProps } from "../Box";
|
|
3
3
|
import { Variant } from "./types";
|
|
4
4
|
export interface Option {
|
|
@@ -20,6 +20,8 @@ export interface SelectProps extends BoxProps, Omit<React.HTMLAttributes<HTMLSel
|
|
|
20
20
|
onSelect?: (value: string) => void;
|
|
21
21
|
}
|
|
22
22
|
/** A drop-down select menu */
|
|
23
|
-
export declare const Select:
|
|
23
|
+
export declare const Select: ForwardRefExoticComponent<SelectProps & {
|
|
24
|
+
ref?: Ref<HTMLElement>;
|
|
25
|
+
}>;
|
|
24
26
|
/** Creates a small caret */
|
|
25
27
|
export declare const caretMixin: import("styled-components").FlattenInterpolation<any>[];
|
|
@@ -9,7 +9,7 @@ exports.caretMixin = exports.Select = void 0;
|
|
|
9
9
|
|
|
10
10
|
var _themeGet = require("@styled-system/theme-get");
|
|
11
11
|
|
|
12
|
-
var _react =
|
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
13
13
|
|
|
14
14
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
15
15
|
|
|
@@ -27,8 +27,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
27
27
|
|
|
28
28
|
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; }
|
|
29
29
|
|
|
30
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
31
|
-
|
|
32
30
|
function _extends() { _extends = Object.assign || 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); }
|
|
33
31
|
|
|
34
32
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
@@ -48,7 +46,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
|
48
46
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
49
47
|
|
|
50
48
|
/** A drop-down select menu */
|
|
51
|
-
var Select = function
|
|
49
|
+
var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
52
50
|
var description = _ref.description,
|
|
53
51
|
disabled = _ref.disabled,
|
|
54
52
|
error = _ref.error,
|
|
@@ -99,6 +97,7 @@ var Select = function Select(_ref) {
|
|
|
99
97
|
focus: !!focus,
|
|
100
98
|
mt: variant !== "inline" && (title || description) ? 0.5 : 0
|
|
101
99
|
}, /*#__PURE__*/_react.default.createElement("select", _extends({
|
|
100
|
+
ref: ref,
|
|
102
101
|
id: id,
|
|
103
102
|
disabled: disabled,
|
|
104
103
|
name: name,
|
|
@@ -118,8 +117,7 @@ var Select = function Select(_ref) {
|
|
|
118
117
|
mt: 0.5,
|
|
119
118
|
color: "red100"
|
|
120
119
|
}, error));
|
|
121
|
-
};
|
|
122
|
-
|
|
120
|
+
});
|
|
123
121
|
exports.Select = Select;
|
|
124
122
|
Select.displayName = "Select";
|
|
125
123
|
var resetMixin = (0, _styledComponents.css)(["appearance:none;background:none;border:none;outline:0;text-indent:0.01px;text-overflow:\"\";border-radius:0;&:-moz-focusring{color:transparent;text-shadow:0 0 0 black;}option:not(:checked){color:black;}"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Select/Select.tsx"],"names":["Select","description","disabled","error","focus","hover","id","name","options","required","selected","title","variant","onSelect","rest","boxProps","selectProps","flexDirection","alignItems","for","undefined","event","target","value","map","text","resetMixin","css","caretMixin","Container","Box","props","SELECT_STATES","default"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Select/Select.tsx"],"names":["Select","ref","description","disabled","error","focus","hover","id","name","options","required","selected","title","variant","onSelect","rest","boxProps","selectProps","flexDirection","alignItems","for","undefined","event","target","value","map","text","displayName","resetMixin","css","caretMixin","Container","Box","props","SELECT_STATES","default"],"mappings":"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","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef, ForwardRefExoticComponent, Ref } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { Variant } from \"./types\"\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.HTMLAttributes<HTMLSelectElement>, \"onSelect\"> {\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 variant?: Variant\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 variant = \"default\",\n onSelect,\n ...rest\n },\n ref\n ) => {\n const [boxProps, selectProps] = splitBoxProps(rest)\n\n return (\n <Box width=\"100%\" {...boxProps}>\n <Flex\n as=\"label\"\n {...(variant === \"inline\"\n ? {\n flexDirection: \"row\",\n alignItems: \"center\",\n }\n : {\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n })}\n {...(id ? { for: id } : {})}\n >\n <div>\n {title && (\n <Text\n variant=\"xs\"\n lineHeight={\n variant === \"inline\" && description === undefined\n ? 1\n : undefined\n }\n >\n {title}\n {required && (\n <Box as=\"span\" color=\"brand\">\n *\n </Box>\n )}\n </Text>\n )}\n\n {description && (\n <Text variant=\"xs\" color=\"black60\">\n {description}\n </Text>\n )}\n </div>\n\n <Container\n variant={variant}\n disabled={!!disabled}\n hover={!!hover}\n error={error!}\n focus={!!focus}\n mt={variant !== \"inline\" && (title || description) ? 0.5 : 0}\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 }}\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 </Container>\n </Flex>\n\n {error && typeof error === \"string\" && (\n <Text variant=\"xs\" mt={0.5} 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, \"variant\" | \"disabled\" | \"error\" | \"hover\" | \"focus\">\n>\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: 0;\n border-bottom: 1px solid;\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 }};\n }\n\n ${caretMixin}\n`\n"],"file":"Select.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "24.1.
|
|
3
|
+
"version": "24.1.2",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -176,5 +176,5 @@
|
|
|
176
176
|
"<rootDir>/www/"
|
|
177
177
|
]
|
|
178
178
|
},
|
|
179
|
-
"gitHead": "
|
|
179
|
+
"gitHead": "5a339fb3ee52623b351fe72f8ec0441fb4474183"
|
|
180
180
|
}
|