@cashub/ui 0.25.4 → 0.26.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.
|
@@ -60,7 +60,7 @@ const DatetimePicker = _ref => {
|
|
|
60
60
|
})
|
|
61
61
|
});
|
|
62
62
|
};
|
|
63
|
-
const Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .react-datepicker-wrapper,\n .react-datepicker__input-container {\n width:
|
|
63
|
+
const Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .react-datepicker-wrapper,\n .react-datepicker__input-container {\n width: 100%;\n\n > input {\n width: 100%;\n height: 36px;\n color: var(--font-on-background);\n background: transparent;\n border-radius: var(--border-radius-l);\n border: var(--border-width) solid var(--border-color);\n padding: 0 var(--spacing-s);\n outline: none;\n\n ", "\n }\n }\n\n .react-datepicker-popper {\n z-index: 2;\n }\n\n .react-datepicker-popper[data-placement^='top'] {\n padding-bottom: var(--spacing-xs);\n }\n\n .react-datepicker-popper[data-placement^='bottom'] {\n padding-top: var(--spacing-xs);\n }\n\n .react-datepicker {\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--border-color);\n padding: var(--spacing-s);\n font-size: var(--font-body1);\n color: var(--font-on-background);\n background: var(--color-background1);\n\n .react-datepicker__triangle {\n &::before,\n &::after {\n display: none;\n }\n }\n\n .react-datepicker__header {\n border: none;\n padding: 0;\n background: var(--color-background1);\n }\n\n .react-datepicker__current-month {\n line-height: 36px;\n color: var(--font-on-background);\n font-size: var(--font-body1);\n font-weight: var(--font-normal);\n }\n\n .react-datepicker__day-names {\n margin: 0;\n }\n\n .react-datepicker__day-name,\n .react-datepicker__day {\n width: 36px;\n height: 36px;\n line-height: 36px;\n color: var(--font-on-background);\n font-weight: var(--font-normal);\n margin: 0;\n border-radius: 4px;\n }\n\n .react-datepicker__day:hover {\n background: var(--color-hover);\n }\n\n .react-datepicker__day--disabled {\n color: var(--font-on-mute);\n background: none !important;\n }\n }\n\n .react-datepicker__month {\n margin: 0;\n }\n\n .react-datepicker__navigation {\n top: 0;\n width: 36px;\n height: 36px;\n margin: var(--spacing-s) var(--spacing-s) 0 var(--spacing-s);\n border-radius: 4px;\n\n &.react-datepicker__navigation--previous {\n left: 0;\n }\n\n &.react-datepicker__navigation--next {\n right: 0;\n }\n\n &:hover {\n background: var(--color-hover);\n }\n\n .react-datepicker__navigation-icon::before {\n border-color: var(--font-on-background);\n }\n\n .react-datepicker__navigation-icon--previous::before {\n right: -4px;\n }\n\n .react-datepicker__navigation-icon--next::before {\n left: -4px;\n }\n }\n\n .react-datepicker__day--selected,\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__day--in-range,\n .react-datepicker__month-text--selected,\n .react-datepicker__month-text--in-selecting-range,\n .react-datepicker__month-text--in-range,\n .react-datepicker__quarter-text--selected,\n .react-datepicker__quarter-text--in-selecting-range,\n .react-datepicker__quarter-text--in-range,\n .react-datepicker__year-text--selected,\n .react-datepicker__year-text--in-selecting-range,\n .react-datepicker__year-text--in-range {\n background: var(--color-primary) !important;\n }\n\n .react-datepicker__day--keyboard-selected,\n .react-datepicker__month-text--keyboard-selected,\n .react-datepicker__quarter-text--keyboard-selected,\n .react-datepicker__year-text--keyboard-selected {\n background: none;\n }\n\n .react-datepicker__input-time-container {\n margin: 0;\n margin-top: var(--spacing-s);\n margin-left: var(--spacing-xs);\n\n .react-datepicker-time__input input {\n height: 36px;\n padding: 0 var(--spacing-xs);\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--border-color);\n background: transparent;\n color: var(--font-on-background);\n outline: none;\n }\n }\n"])), _ref2 => {
|
|
64
64
|
let {
|
|
65
65
|
disabled
|
|
66
66
|
} = _ref2;
|
package/package.json
CHANGED
package/select/Select.js
CHANGED
|
@@ -21,6 +21,8 @@ var _SearchBox = _interopRequireDefault(require("./subComponent/SearchBox"));
|
|
|
21
21
|
var _Options = _interopRequireDefault(require("./subComponent/Options"));
|
|
22
22
|
var _OptionGroup = _interopRequireDefault(require("./subComponent/OptionGroup"));
|
|
23
23
|
var _Option = _interopRequireDefault(require("./subComponent/Option"));
|
|
24
|
+
var _figure = require("../figure");
|
|
25
|
+
var _image = require("../image");
|
|
24
26
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
25
27
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
26
28
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -263,7 +265,7 @@ const Select = _ref => {
|
|
|
263
265
|
})]
|
|
264
266
|
}, option.text);
|
|
265
267
|
}
|
|
266
|
-
return /*#__PURE__*/(0, _jsxRuntime.
|
|
268
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Option.default, {
|
|
267
269
|
role: "option",
|
|
268
270
|
tabIndex: "0",
|
|
269
271
|
id: option.id,
|
|
@@ -271,7 +273,17 @@ const Select = _ref => {
|
|
|
271
273
|
focus: focusedOption && focusedOption.id === option.id.toString(),
|
|
272
274
|
selected: option.selected,
|
|
273
275
|
"aria-selected": option.selected,
|
|
274
|
-
children: option.
|
|
276
|
+
children: [option.icon && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
277
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_figure.IconFigure, {
|
|
278
|
+
size: "medium",
|
|
279
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.ImageFluid, {
|
|
280
|
+
crossOrigin: "anonymous",
|
|
281
|
+
src: option.icon,
|
|
282
|
+
alt: "",
|
|
283
|
+
roundedS: true
|
|
284
|
+
})
|
|
285
|
+
}), "\xA0"]
|
|
286
|
+
}), option.text]
|
|
275
287
|
}, option.id);
|
|
276
288
|
});
|
|
277
289
|
}, [optionList, focusedOption, handleOnSelect]);
|
|
@@ -9,7 +9,7 @@ var _templateObject, _templateObject2;
|
|
|
9
9
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
10
10
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
11
11
|
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
12
|
-
const Option = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n max-width: 100%;\n word-break: break-all;\n padding: 12px var(--spacing-s);\n background: var(--color-background1);\n transition: background 0.3s;\n\n &:hover {\n background: var(--color-hover);\n }\n\n ", "\n"])), _ref => {
|
|
12
|
+
const Option = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n max-width: 100%;\n word-break: break-all;\n padding: 12px var(--spacing-s);\n background: var(--color-background1);\n transition: background 0.3s;\n\n &:hover {\n background: var(--color-hover);\n }\n\n ", "\n"])), _ref => {
|
|
13
13
|
let {
|
|
14
14
|
selected,
|
|
15
15
|
focus
|