@ltht-react/select 1.3.152 → 1.3.154

package/README.md

@@ -1,15 +1,15 @@
-# Select
-
-<!-- STORY -->
-
-### Import
-
-```js
-import Select from '@ltht-react/select'
-```
-
-### Usage
-
-```jsx
-<Select />
-```
+# Select
+
+<!-- STORY -->
+
+### Import
+
+```js
+import Select from '@ltht-react/select'
+```
+
+### Usage
+
+```jsx
+<Select />
+```

package/lib/index.d.ts

@@ -1,10 +1,6 @@
-import { FC, HTMLAttributes } from 'react';
-import { IProps as OptionProps } from './atoms/option';
-declare const Select: FC<IProps> & SelectComposition;
-interface SelectComposition {
-    Option: FC<OptionProps>;
-}
-interface IProps extends HTMLAttributes<HTMLDivElement> {
-    activeOption?: string;
+import { FC, OptionHTMLAttributes, SelectHTMLAttributes } from 'react';
+declare const Select: FC<ISelectProps>;
+interface ISelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    options: OptionHTMLAttributes<HTMLOptionElement>[];
 }
 export default Select;

package/lib/index.js

@@ -30,47 +30,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
 var styled_1 = __importDefault(require("@emotion/styled"));
 var styles_1 = require("@ltht-react/styles");
-var icon_1 = require("@ltht-react/icon");
-var option_1 = __importDefault(require("./atoms/option"));
-var StyledSelect = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"], ["\n  ", ";\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])), styles_1.CSS_RESET);
-var SelectTrigger = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  min-height: 32px;\n  border: 1px solid black;\n  padding: 0.5rem 1rem;\n  background: white;\n  cursor: pointer;\n\n  ", " {\n    min-height: 39px;\n  }\n"], ["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  min-height: 32px;\n  border: 1px solid black;\n  padding: 0.5rem 1rem;\n  background: white;\n  cursor: pointer;\n\n  ", " {\n    min-height: 39px;\n  }\n"])), styles_1.DESKTOP_MINIMUM_MEDIA_QUERY);
-var ActiveOption = styled_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-weight: bold;\n  flex: 1;\n"], ["\n  font-weight: bold;\n  flex: 1;\n"])));
-var SelectOptions = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  display: ", ";\n  position: absolute;\n  top: 100%;\n  left: 0;\n"], ["\n  width: 100%;\n  display: ", ";\n  position: absolute;\n  top: 100%;\n  left: 0;\n"])), function (_a) {
-    var open = _a.open;
-    return (open ? 'block' : 'none');
-});
+var StyledSelect = styled_1.default.select(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  height:100%;\n  width: 100%;\n  color: black;\n\n  option:disabled {\n    display: none;\n  }\n"], ["\n  ", "\n  height:100%;\n  width: 100%;\n  color: black;\n\n  option:disabled {\n    display: none;\n  }\n"])), styles_1.inputBaseStyles);
 var Select = function (_a) {
-    var children = _a.children, _b = _a.activeOption, activeOption = _b === void 0 ? '' : _b, rest = __rest(_a, ["children", "activeOption"]);
-    var _c = react_1.useState(false), open = _c[0], setOpen = _c[1];
-    var selectRef = react_1.useRef(null);
-    var handleOnEscapeKey = function (e) {
-        // IE11 has the key of 'Esc'
-        if (e.key === 'Escape' || e.key === 'Esc') {
-            setOpen(false);
-        }
-    };
-    var handleOutsideClick = function (e) {
-        if (selectRef.current && !selectRef.current.contains(e.target)) {
-            setOpen(false);
-        }
-    };
-    react_1.useEffect(function () {
-        document.addEventListener('keydown', handleOnEscapeKey, true);
-        document.addEventListener('click', handleOutsideClick, true);
-        // Cleanup
-        return function () {
-            document.removeEventListener('keydown', handleOnEscapeKey, true);
-            document.removeEventListener('click', handleOutsideClick, true);
-        };
-    });
-    return (jsx_runtime_1.jsxs(StyledSelect, __assign({}, rest, { ref: selectRef }, { children: [jsx_runtime_1.jsxs(SelectTrigger, __assign({ "data-testid": "select-trigger", onClick: function () { return setOpen(function (open) { return !open; }); } }, { children: [jsx_runtime_1.jsx(ActiveOption, __assign({ "data-testid": "select-active-option" }, { children: activeOption }), void 0),
-                    jsx_runtime_1.jsx(icon_1.ChevronIcon, { direction: open ? 'up' : 'down', size: "small" }, void 0)] }), void 0),
-            jsx_runtime_1.jsx(SelectOptions, __assign({ "data-testid": "select-options", open: open, onClick: function () { return setOpen(false); } }, { children: children }), void 0)] }), void 0));
+    var onChange = _a.onChange, options = _a.options, value = _a.value, rest = __rest(_a, ["onChange", "options", "value"]);
+    return (jsx_runtime_1.jsx(StyledSelect, __assign({ required: true, onChange: function (e) { return onChange && onChange(e); }, value: value }, rest, { children: options.map(function (item, key) { return (jsx_runtime_1.jsx("option", __assign({ value: item.value }, { children: item.label }), key)); }) }), void 0));
 };
-Select.Option = option_1.default;
 exports.default = Select;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1;
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAuE;AACvE,2DAAoC;AACpC,6CAA2E;AAC3E,yCAA8C;AAE9C,0DAA8D;AAE9D,IAAM,YAAY,GAAG,gBAAM,CAAC,GAAG,oJAAA,MAC3B,EAAS,yEAIZ,KAJG,kBAAS,CAIZ,CAAA;AAED,IAAM,aAAa,GAAG,gBAAM,CAAC,GAAG,6TAAA,sNAW5B,EAA2B,kCAG9B,KAHG,oCAA2B,CAG9B,CAAA;AAED,IAAM,YAAY,GAAG,gBAAM,CAAC,IAAI,yGAAA,sCAG/B,IAAA,CAAA;AAED,IAAM,aAAa,GAAG,gBAAM,CAAC,GAAG,0JAAgB,+BAEnC,EAAuC,sDAInD,KAJY,UAAC,EAAQ;QAAN,IAAI,UAAA;IAAO,OAAA,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;AAAzB,CAAyB,CAInD,CAAA;AAED,IAAM,MAAM,GAAmC,UAAC,EAAwC;IAAtC,IAAA,QAAQ,cAAA,EAAE,oBAAiB,EAAjB,YAAY,mBAAG,EAAE,KAAA,EAAK,IAAI,cAAtC,4BAAwC,CAAF;IAC9E,IAAA,KAAkB,gBAAQ,CAAC,KAAK,CAAC,EAAhC,IAAI,QAAA,EAAE,OAAO,QAAmB,CAAA;IACvC,IAAM,SAAS,GAAG,cAAM,CAAiB,IAAI,CAAC,CAAA;IAE9C,IAAM,iBAAiB,GAAG,UAAC,CAAgB;QACzC,4BAA4B;QAC5B,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;YACzC,OAAO,CAAC,KAAK,CAAC,CAAA;SACf;IACH,CAAC,CAAA;IAED,IAAM,kBAAkB,GAAG,UAAC,CAAa;QACvC,IAAI,SAAS,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE;YACtE,OAAO,CAAC,KAAK,CAAC,CAAA;SACf;IACH,CAAC,CAAA;IAED,iBAAS,CAAC;QACR,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,iBAAiB,EAAE,IAAI,CAAC,CAAA;QAC7D,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,CAAA;QAE5D,UAAU;QACV,OAAO;YACL,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,EAAE,IAAI,CAAC,CAAA;YAChE,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,CAAA;QACjE,CAAC,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,mBAAC,YAAY,eAAK,IAAI,IAAE,GAAG,EAAE,SAAS,iBACpC,mBAAC,aAAa,4BAAa,gBAAgB,EAAC,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,UAAC,IAAI,IAAK,OAAA,CAAC,IAAI,EAAL,CAAK,CAAC,EAAxB,CAAwB,iBACjF,kBAAC,YAAY,4BAAa,sBAAsB,gBAAE,YAAY,YAAgB;oBAC9E,kBAAC,kBAAW,IAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,EAAC,OAAO,WAAG,aAC/C;YAChB,kBAAC,aAAa,4BAAa,gBAAgB,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,KAAK,CAAC,EAAd,CAAc,gBAClF,QAAQ,YACK,aACH,CAChB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,GAAG,gBAAM,CAAA;AActB,kBAAe,MAAM,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,2DAAoC;AACpC,6CAAoD;AAEpD,IAAM,YAAY,GAAG,gBAAM,CAAC,MAAM,gLAAA,MAC9B,EAAe,qGAQlB,KARG,wBAAe,CAQlB,CAAA;AAED,IAAM,MAAM,GAAqB,UAAC,EAAqC;IAAnC,IAAA,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAE,KAAK,WAAA,EAAK,IAAI,cAAnC,gCAAqC,CAAF;IAAO,OAAA,CAC1E,kBAAC,YAAY,aAAC,QAAQ,QAAC,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAvB,CAAuB,EAAE,KAAK,EAAE,KAAK,IAAM,IAAI,cACpF,OAAO,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,GAAG,IAAK,OAAA,CAC1B,uCAAkB,KAAK,EAAE,IAAI,CAAC,KAAK,gBAChC,IAAI,CAAC,KAAK,KADA,GAAG,CAEP,CACV,EAJ2B,CAI3B,CAAC,YACW,CAChB,CAAA;CAAA,CAAA;AAMD,kBAAe,MAAM,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ltht-react/select",
-  "version": "1.3.152",
+  "version": "1.3.154",
   "description": "ltht-react atoms Select component.",
   "author": "LTHT",
   "homepage": "",
@@ -27,11 +27,11 @@
   "dependencies": {
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
-    "@ltht-react/icon": "^1.3.152",
-    "@ltht-react/styles": "^1.3.144",
-    "@ltht-react/types": "^1.0.148",
-    "@ltht-react/utils": "^1.1.150",
+    "@ltht-react/icon": "^1.3.154",
+    "@ltht-react/styles": "^1.3.146",
+    "@ltht-react/types": "^1.0.150",
+    "@ltht-react/utils": "^1.1.152",
     "react": "^17.0.0"
   },
-  "gitHead": "bc51fb539cf50affdd8cc3d0904800c0495d1957"
+  "gitHead": "abd34475b9d9fa3a8206fe8fcc761060ae723ee1"
 }

package/lib/atoms/option.d.ts

@@ -1,6 +0,0 @@
-import { FC, HTMLAttributes } from 'react';
-declare const Option: FC<IProps>;
-export interface IProps extends HTMLAttributes<HTMLSpanElement> {
-    active: boolean;
-}
-export default Option;

package/lib/atoms/option.js

@@ -1,48 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_1 = __importDefault(require("@emotion/styled"));
-var styles_1 = require("@ltht-react/styles");
-var StyledOption = styled_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: block;\n  border: 1px solid black;\n  border-top: 0;\n  padding: 0.5rem 1rem;\n  background: ", ";\n  cursor: pointer;\n  font-weight: ", ";\n  transition: all 0.2s ease-in-out;\n\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  width: 100%;\n  display: block;\n  border: 1px solid black;\n  border-top: 0;\n  padding: 0.5rem 1rem;\n  background: ", ";\n  cursor: pointer;\n  font-weight: ", ";\n  transition: all 0.2s ease-in-out;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
-    var active = _a.active;
-    return (active ? "" + styles_1.SELECT_COLOURS.OPTION_SELECTED : 'white');
-}, function (_a) {
-    var active = _a.active;
-    return (active ? 'bold' : 'normal');
-}, styles_1.SELECT_COLOURS.OPTION_HOVER);
-var Option = function (_a) {
-    var children = _a.children, _b = _a.active, active = _b === void 0 ? false : _b, rest = __rest(_a, ["children", "active"]);
-    return (jsx_runtime_1.jsx(StyledOption, __assign({ active: active }, rest, { children: children }), void 0));
-};
-exports.default = Option;
-var templateObject_1;
-//# sourceMappingURL=option.js.map

package/lib/atoms/option.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"option.js","sourceRoot":"","sources":["../../src/atoms/option.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,2DAAoC;AACpC,6CAAmD;AAEnD,IAAM,YAAY,GAAG,gBAAM,CAAC,IAAI,sUAAe,4HAM/B,EAAwE,wCAEvE,EAA4C,+EAIrC,EAA2B,UAElD,KARe,UAAC,EAAU;QAAR,MAAM,YAAA;IAAO,OAAA,CAAC,MAAM,CAAC,CAAC,CAAC,KAAG,uBAAc,CAAC,eAAiB,CAAC,CAAC,CAAC,OAAO,CAAC;AAAxD,CAAwD,EAEvE,UAAC,EAAU;QAAR,MAAM,YAAA;IAAO,OAAA,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;AAA5B,CAA4B,EAIrC,uBAAc,CAAC,YAAY,CAElD,CAAA;AAED,IAAM,MAAM,GAAe,UAAC,EAAqC;IAAnC,IAAA,QAAQ,cAAA,EAAE,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EAAK,IAAI,cAAnC,sBAAqC,CAAF;IAAO,OAAA,CACpE,kBAAC,YAAY,aAAC,MAAM,EAAE,MAAM,IAAM,IAAI,cACnC,QAAQ,YACI,CAChB,CAAA;CAAA,CAAA;AAUD,kBAAe,MAAM,CAAA"}