@citygross/components 0.13.0 → 0.13.2

package/build/@types/components/QuantitySelector/QuantitySelector.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { TQuantitySelector } from './QuantitySelector.types';
-export declare function QuantitySelector({ maxQuantity, onAdd, onBlur, onChange, onSubtract, productName, quantity, size }: TQuantitySelector): JSX.Element;
+export declare const QuantitySelector: ({ id, maxQuantity, onAdd, onBlur, onChange, onSubtract, productName, quantity, size }: TQuantitySelector) => JSX.Element;

package/build/@types/components/QuantitySelector/QuantitySelector.types.d.ts

@@ -5,6 +5,7 @@ export declare enum EQuantitySelectorSize {
     large = "large"
 }
 export declare type TQuantitySelector = {
+    id: string;
     maxQuantity: number;
     onAdd: () => void;
     onBlur: () => void;

package/build/cjs/components/src/components/QuantitySelector/QuantitySelector.js

@@ -13,9 +13,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function QuantitySelector(_a) {
+var QuantitySelector = function (_a) {
     var _b, _c, _d, _e;
-    var maxQuantity = _a.maxQuantity, onAdd = _a.onAdd, onBlur = _a.onBlur, onChange = _a.onChange, onSubtract = _a.onSubtract, productName = _a.productName, quantity = _a.quantity, _f = _a.size, size = _f === void 0 ? QuantitySelector_types.EQuantitySelectorSize.large : _f;
+    var id = _a.id, maxQuantity = _a.maxQuantity, onAdd = _a.onAdd, onBlur = _a.onBlur, onChange = _a.onChange, onSubtract = _a.onSubtract, productName = _a.productName, quantity = _a.quantity, _f = _a.size, size = _f === void 0 ? QuantitySelector_types.EQuantitySelectorSize.large : _f;
     var _g = React.useState(false), isFocused = _g[0], setIsFocused = _g[1];
     var disabledAdd = quantity >= maxQuantity;
     var disabledSubtract = quantity <= 0;
@@ -37,10 +37,10 @@ function QuantitySelector(_a) {
         React__default["default"].createElement(QuantitySelector_styles.Label, null,
             React__default["default"].createElement(ScreenReader.ScreenReader, { string: "Ange antal" }),
             quantity === maxQuantity && !isFocused && (React__default["default"].createElement("span", { "aria-label": "Max antal ".concat(maxQuantity), "aria-live": "polite", role: "status" }, "Max")),
-            React__default["default"].createElement(QuantitySelector_styles.Input, { id: "quantity-input", inputMode: "numeric", isMaxQuantity: quantity === maxQuantity && !isFocused, max: maxQuantity, min: 0, onBlur: handleBlur, onChange: function (e) { return onChange(e); }, onFocus: function () { return setIsFocused(true); }, onKeyDown: handleKeyDown, pattern: "[0-9]*", type: "number", value: quantity })),
+            React__default["default"].createElement(QuantitySelector_styles.Input, { id: id, inputMode: "numeric", isMaxQuantity: quantity === maxQuantity && !isFocused, max: maxQuantity, min: 0, onBlur: handleBlur, onChange: function (e) { return onChange(e); }, onFocus: function () { return setIsFocused(true); }, onKeyDown: handleKeyDown, pattern: "[0-9]*", type: "number", value: quantity })),
         React__default["default"].createElement(QuantitySelector_styles.StepButton, { "aria-label": "\u00D6ka antal ".concat(productName || ''), direction: "add", disabled: disabledAdd, onClick: onAdd },
             React__default["default"].createElement(icons.Icons.Plus, { color: disabledAdd ? (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.placeholder : (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.darkest, height: 16, width: 16 }))));
-}
+};
 
 exports.QuantitySelector = QuantitySelector;
 //# sourceMappingURL=QuantitySelector.js.map

package/build/es/components/src/components/QuantitySelector/QuantitySelector.js

@@ -5,9 +5,9 @@ import { theme } from '@citygross/design-tokens';
 import { EQuantitySelectorSize } from './QuantitySelector.types.js';
 import { ScreenReader } from '../ScreenReader/ScreenReader.js';
 
-function QuantitySelector(_a) {
+var QuantitySelector = function (_a) {
     var _b, _c, _d, _e;
-    var maxQuantity = _a.maxQuantity, onAdd = _a.onAdd, onBlur = _a.onBlur, onChange = _a.onChange, onSubtract = _a.onSubtract, productName = _a.productName, quantity = _a.quantity, _f = _a.size, size = _f === void 0 ? EQuantitySelectorSize.large : _f;
+    var id = _a.id, maxQuantity = _a.maxQuantity, onAdd = _a.onAdd, onBlur = _a.onBlur, onChange = _a.onChange, onSubtract = _a.onSubtract, productName = _a.productName, quantity = _a.quantity, _f = _a.size, size = _f === void 0 ? EQuantitySelectorSize.large : _f;
     var _g = useState(false), isFocused = _g[0], setIsFocused = _g[1];
     var disabledAdd = quantity >= maxQuantity;
     var disabledSubtract = quantity <= 0;
@@ -29,10 +29,10 @@ function QuantitySelector(_a) {
         React.createElement(Label, null,
             React.createElement(ScreenReader, { string: "Ange antal" }),
             quantity === maxQuantity && !isFocused && (React.createElement("span", { "aria-label": "Max antal ".concat(maxQuantity), "aria-live": "polite", role: "status" }, "Max")),
-            React.createElement(Input, { id: "quantity-input", inputMode: "numeric", isMaxQuantity: quantity === maxQuantity && !isFocused, max: maxQuantity, min: 0, onBlur: handleBlur, onChange: function (e) { return onChange(e); }, onFocus: function () { return setIsFocused(true); }, onKeyDown: handleKeyDown, pattern: "[0-9]*", type: "number", value: quantity })),
+            React.createElement(Input, { id: id, inputMode: "numeric", isMaxQuantity: quantity === maxQuantity && !isFocused, max: maxQuantity, min: 0, onBlur: handleBlur, onChange: function (e) { return onChange(e); }, onFocus: function () { return setIsFocused(true); }, onKeyDown: handleKeyDown, pattern: "[0-9]*", type: "number", value: quantity })),
         React.createElement(StepButton, { "aria-label": "\u00D6ka antal ".concat(productName || ''), direction: "add", disabled: disabledAdd, onClick: onAdd },
             React.createElement(Icons.Plus, { color: disabledAdd ? (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.placeholder : (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.darkest, height: 16, width: 16 }))));
-}
+};
 
 export { QuantitySelector };
 //# sourceMappingURL=QuantitySelector.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.13.0",
+  "version": "0.13.2",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -75,5 +75,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "0ddcceef79194e6a4441ae48b7b0d87f064aff73"
+  "gitHead": "12b1de146c65f7cb6c8fd1db47e283494d15b1ef"
 }