krl-alfred 2.24.0 → 2.24.1

package/dist/components/ColorPalette/ColorPalette.js

@@ -9,7 +9,7 @@ var colors_json_1 = __importDefault(require("./../../jsons/colors.json"));
 var ColorPalette = function (props) {
     var Item = function (_a) {
         var _b = _a.gradient, gradient = _b === void 0 ? props.gradient : _b, _c = _a.data, data = _c === void 0 ? props.data : _c;
-        return ((0, jsx_runtime_1.jsxs)(ColorPalette_styled_1.ColorItem, { children: [(0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Bg, { gradient: gradient, data: data }), (0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Text, { children: Object.entries(data).map(function (_a) {
+        return ((0, jsx_runtime_1.jsxs)(ColorPalette_styled_1.ColorItem, { children: [(0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Bg, { "$gradient": gradient, "$data": data, "data-testid": "color-palette-bg" }), (0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Text, { children: Object.entries(data).map(function (_a) {
                         var key4 = _a[0], value4 = _a[1];
                         return ((0, jsx_runtime_1.jsxs)(ColorPalette_styled_1.ValueListWrapper, { children: [(0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Title, { children: key4 }), (0, jsx_runtime_1.jsx)(ColorPalette_styled_1.Value, { children: value4 })] }, key4));
                     }) })] }));

package/dist/components/ColorPalette/ColorPalette.styled.d.ts

@@ -1,10 +1,16 @@
 /// <reference types="react" />
+import { ColorPalette } from "./props";
+type BgProps = {
+    $gradient?: ColorPalette["gradient"];
+    $data?: ColorPalette["data"];
+};
 export declare const ColorPaletteStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const ColorItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const Bg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("./props").ColorPalette> & import("./props").ColorPalette, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("./props").ColorPalette> & import("./props").ColorPalette, never>>> & string;
+export declare const Bg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BgProps> & BgProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BgProps> & BgProps, never>>> & string;
 export declare const Text: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;
 export declare const TitleXl: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>> & string;
 export declare const TitleLg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>> & string;
 export declare const Value: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>> & string;
 export declare const ValueListWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export {};

package/dist/components/ColorPalette/ColorPalette.styled.js

@@ -11,11 +11,11 @@ exports.ValueListWrapper = exports.Value = exports.TitleLg = exports.TitleXl = e
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.ColorPaletteStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(6, 1fr);\n  gap: 15px;\n  margin-bottom: 3rem;\n  @media (max-width: 1200px) {\n    grid-template-columns: repeat(3, 1fr);\n  }\n  @media (max-width: 768px) {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  @media (max-width: 576px) {\n    grid-template-columns: repeat(1, 1fr);\n  }\n"], ["\n  display: grid;\n  grid-template-columns: repeat(6, 1fr);\n  gap: 15px;\n  margin-bottom: 3rem;\n  @media (max-width: 1200px) {\n    grid-template-columns: repeat(3, 1fr);\n  }\n  @media (max-width: 768px) {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  @media (max-width: 576px) {\n    grid-template-columns: repeat(1, 1fr);\n  }\n"])));
 exports.ColorItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: 1px solid var(--dark-opacity-10);\n  display: block;\n  border-radius: 1rem;\n  position: relative;\n  overflow: hidden;\n"], ["\n  border: 1px solid var(--dark-opacity-10);\n  display: block;\n  border-radius: 1rem;\n  position: relative;\n  overflow: hidden;\n"])));
-exports.Bg = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  min-height: 120px;\n  background: ", "};\n"], ["\n  min-height: 120px;\n  background: ", "};\n"])), function (props) {
-    var _a;
-    return ((_a = props === null || props === void 0 ? void 0 : props.gradient) === null || _a === void 0 ? void 0 : _a.length) > 0
-        ? "linear-gradient(0deg,  ".concat(props.gradient.join(","), ")")
-        : props.data.hex;
+exports.Bg = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  min-height: 120px;\n  background: ", ";\n"], ["\n  min-height: 120px;\n  background: ", ";\n"])), function (_a) {
+    var $gradient = _a.$gradient, $data = _a.$data;
+    return ($gradient === null || $gradient === void 0 ? void 0 : $gradient.length) > 0
+        ? "linear-gradient(0deg, ".concat($gradient.join(", "), ")")
+        : ($data === null || $data === void 0 ? void 0 : $data.hex) || "transparent";
 });
 exports.Text = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 16px;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 22px;\n"], ["\n  padding: 16px;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 22px;\n"])));
 exports.Title = styled_components_1.default.strong(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 3px;\n  text-transform: uppercase;\n  color: var(--dark);\n  font: var(--caption-bold-12-15);\n"], ["\n  display: block;\n  margin-bottom: 3px;\n  text-transform: uppercase;\n  color: var(--dark);\n  font: var(--caption-bold-12-15);\n"])));

package/dist/components/ColorPalette/ColorPalette.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ColorPalette/ColorPalette.test.js

@@ -0,0 +1,31 @@
+"use strict";
+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 react_1 = require("@testing-library/react");
+var ColorPalette_1 = __importDefault(require("./ColorPalette"));
+var renderPalette = function () {
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(ColorPalette_1.default, { data: { name: "", hex: "", rgb: "", hex2: "", rgb2: "" } }));
+};
+var swatchFor = function (label) {
+    var _a, _b;
+    var item = (_b = (_a = react_1.screen.getByText(label).closest("div")) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement;
+    return (0, react_1.within)(item).getByTestId("color-palette-bg");
+};
+describe("ColorPalette", function () {
+    it("paints a solid swatch from the hex value", function () {
+        renderPalette();
+        expect(swatchFor("#9763F6")).toHaveStyle({
+            minHeight: "120px",
+            background: "#9763F6",
+        });
+    });
+    it("paints a gradient swatch from gradient stops", function () {
+        renderPalette();
+        expect(swatchFor("#7730FA")).toHaveStyle({
+            background: "linear-gradient(0deg, #7730FA, #9961FF)",
+        });
+    });
+});

package/dist/components/DescriptionCard/DescriptionCard.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { DescriptionCardProps } from "./props";
-declare const DescriptionCard: ({ title, titleSize, headerSize, headerAlignItems, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasTitleBadgeBetween, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, hasShadow, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, status, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, hasDragHandle, dragHandleProps, headerButtonAction, onHeaderBack, onHeaderClick, onSubcategoryReorder, customColumnSpan }: DescriptionCardProps) => React.JSX.Element;
+declare const DescriptionCard: ({ title, titleSize, headerSize, headerAlignItems, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasTitleBadgeBetween, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, hasShadow, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, status, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, hasDragHandle, hasDisableSubcategorySort, dragHandleProps, headerButtonAction, onHeaderBack, onHeaderClick, onSubcategoryReorder, customColumnSpan }: DescriptionCardProps) => React.JSX.Element;
 export default DescriptionCard;

package/dist/components/DescriptionCard/DescriptionCard.js

@@ -41,10 +41,12 @@ var useSortableSensors_1 = require("./utils/useSortableSensors");
 var getReorderIndexes_1 = require("./utils/getReorderIndexes");
 var getSubcategoryId = function (item, index) { var _a; return (_a = item.id) !== null && _a !== void 0 ? _a : "subcategory-".concat(index); };
 var DragHandle = function (_a) {
-    var dragHandleProps = _a.dragHandleProps;
-    return ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.DragHandleStyled, __assign({ type: "button", "aria-label": "S\u00FCr\u00FCkle" }, dragHandleProps, { onClick: function (e) {
+    var dragHandleProps = _a.dragHandleProps, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
+    return ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.DragHandleStyled, __assign({ type: "button", "aria-label": "S\u00FCr\u00FCkle", "aria-disabled": disabled || undefined, "$disabled": disabled, tabIndex: disabled ? -1 : undefined }, (disabled ? undefined : dragHandleProps), { onClick: function (e) {
             var _a;
             e.stopPropagation();
+            if (disabled)
+                return;
             (_a = dragHandleProps === null || dragHandleProps === void 0 ? void 0 : dragHandleProps.onClick) === null || _a === void 0 ? void 0 : _a.call(dragHandleProps, e);
         } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Drag", width: "16", height: "16" }) })));
 };
@@ -56,11 +58,11 @@ var CategoryStatusCell = function (_a) {
 };
 var SubcategoryRowContent = function (_a) {
     var _b, _c, _d, _e, _f;
-    var item = _a.item, defaultButtonText = _a.defaultButtonText, defaultButtonWidth = _a.defaultButtonWidth, hasCategoryLayout = _a.hasCategoryLayout, hasDragHandle = _a.hasDragHandle, dragHandleProps = _a.dragHandleProps, setNodeRef = _a.setNodeRef, style = _a.style, isDragging = _a.isDragging;
+    var item = _a.item, defaultButtonText = _a.defaultButtonText, defaultButtonWidth = _a.defaultButtonWidth, hasCategoryLayout = _a.hasCategoryLayout, hasDragHandle = _a.hasDragHandle, isSortDisabled = _a.isSortDisabled, dragHandleProps = _a.dragHandleProps, setNodeRef = _a.setNodeRef, style = _a.style, isDragging = _a.isDragging;
     var hasButton = (_b = item.hasButton) !== null && _b !== void 0 ? _b : true;
     var buttonText = (_c = item.buttonText) !== null && _c !== void 0 ? _c : defaultButtonText;
     var isClickable = !!item.onClick;
-    return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryRowStyled, __assign({ ref: setNodeRef, style: style, "$hasCategoryLayout": hasCategoryLayout, "$isClickable": isClickable, "$isDragging": isDragging, onClick: item.onClick }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryNameWrapper, { children: [hasDragHandle && (0, jsx_runtime_1.jsx)(DragHandle, { dragHandleProps: dragHandleProps }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Subcategory", width: "24", height: "24", color: "var(--dark)" }) }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryNameStyled, { children: item.name })] }), (hasCategoryLayout || item.middleTitle) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.RowMiddleTitleStyled, { children: item.middleTitle })), (hasCategoryLayout || item.status) && ((0, jsx_runtime_1.jsx)(CategoryStatusCell, { status: item.status })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryActionWrapper, __assign({ "$hasCategoryLayout": hasCategoryLayout, onClick: function (e) { return e.stopPropagation(); } }, { children: hasButton && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DropdownWrapper, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: (_e = (_d = item.buttonWidth) !== null && _d !== void 0 ? _d : defaultButtonWidth) !== null && _e !== void 0 ? _e : null, onClick: item.buttonAction, size: "xsmall", variant: "inverted", icon: item.hasDropdown ? "ArrowSmallDown" : null }, { children: buttonText })), item.hasDropdown && ((_f = item.dropdownList) === null || _f === void 0 ? void 0 : _f.length) > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: item.dropdownList, rowLength: 20, gridItemWidth: item.dropdownWidth }) }))] })) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryRowStyled, __assign({ ref: setNodeRef, style: style, "$hasCategoryLayout": hasCategoryLayout, "$isClickable": isClickable, "$isDragging": isDragging, onClick: item.onClick }, { children: [(0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.SubcategoryNameWrapper, { children: [hasDragHandle && ((0, jsx_runtime_1.jsx)(DragHandle, { dragHandleProps: dragHandleProps, disabled: isSortDisabled })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Subcategory", width: "24", height: "24", color: "var(--dark)" }) }), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryNameStyled, { children: item.name })] }), (hasCategoryLayout || item.middleTitle) && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.RowMiddleTitleStyled, { children: item.middleTitle })), (hasCategoryLayout || item.status) && ((0, jsx_runtime_1.jsx)(CategoryStatusCell, { status: item.status })), (0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubcategoryActionWrapper, __assign({ "$hasCategoryLayout": hasCategoryLayout, onClick: function (e) { return e.stopPropagation(); } }, { children: hasButton && ((0, jsx_runtime_1.jsxs)(DescriptionCard_styled_1.DropdownWrapper, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, __assign({ width: (_e = (_d = item.buttonWidth) !== null && _d !== void 0 ? _d : defaultButtonWidth) !== null && _e !== void 0 ? _e : null, onClick: item.buttonAction, size: "xsmall", variant: "inverted", icon: item.hasDropdown ? "ArrowSmallDown" : null }, { children: buttonText })), item.hasDropdown && ((_f = item.dropdownList) === null || _f === void 0 ? void 0 : _f.length) > 0 && ((0, jsx_runtime_1.jsx)(DescriptionCard_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: item.dropdownList, rowLength: 20, gridItemWidth: item.dropdownWidth }) }))] })) }))] })));
 };
 var SortableSubcategoryRow = function (_a) {
     var id = _a.id, rowProps = __rest(_a, ["id"]);
@@ -71,7 +73,7 @@ var SortableSubcategoryRow = function (_a) {
         }, dragHandleProps: __assign(__assign({}, attributes), listeners) })));
 };
 var DescriptionCard = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.titleSize, titleSize = _c === void 0 ? props_1.DescriptionCardDefault.titleSize : _c, _d = _a.headerSize, headerSize = _d === void 0 ? props_1.DescriptionCardDefault.headerSize : _d, _e = _a.headerAlignItems, headerAlignItems = _e === void 0 ? props_1.DescriptionCardDefault.headerAlignItems : _e, _f = _a.headerDescription, headerDescription = _f === void 0 ? props_1.DescriptionCardDefault.headerDescription : _f, _g = _a.headerButtonText, headerButtonText = _g === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _g, _h = _a.hasHeaderDropdown, hasHeaderDropdown = _h === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _h, _j = _a.hasHeaderBackButton, hasHeaderBackButton = _j === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackButton : _j, _k = _a.list, list = _k === void 0 ? props_1.DescriptionCardDefault.list : _k, _l = _a.hasBadge, hasBadge = _l === void 0 ? props_1.DescriptionCardDefault.hasBadge : _l, _m = _a.badgeText, badgeText = _m === void 0 ? props_1.DescriptionCardDefault.badgeText : _m, _o = _a.hasTitleBadgeBetween, hasTitleBadgeBetween = _o === void 0 ? props_1.DescriptionCardDefault.hasTitleBadgeBetween : _o, _p = _a.hasHeader, hasHeader = _p === void 0 ? props_1.DescriptionCardDefault.hasHeader : _p, _q = _a.hasHeaderBackground, hasHeaderBackground = _q === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackground : _q, _r = _a.hasHeaderBorder, hasHeaderBorder = _r === void 0 ? props_1.DescriptionCardDefault.hasHeaderBorder : _r, _s = _a.hasRounded, hasRounded = _s === void 0 ? props_1.DescriptionCardDefault.hasRounded : _s, _t = _a.hasBorder, hasBorder = _t === void 0 ? props_1.DescriptionCardDefault.hasBorder : _t, _u = _a.hasShadow, hasShadow = _u === void 0 ? props_1.DescriptionCardDefault.hasShadow : _u, _v = _a.headerImage, headerImage = _v === void 0 ? props_1.DescriptionCardDefault.headerImage : _v, _w = _a.headerRightContent, headerRightContent = _w === void 0 ? props_1.DescriptionCardDefault.headerRightContent : _w, _x = _a.dropdownList, dropdownList = _x === void 0 ? props_1.DescriptionCardDefault.dropdownList : _x, _y = _a.dropdownWidth, dropdownWidth = _y === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _y, _z = _a.accordionList, accordionList = _z === void 0 ? props_1.DescriptionCardDefault.accordionList : _z, _0 = _a.boxSize, boxSize = _0 === void 0 ? props_1.DescriptionCardDefault.boxSize : _0, _1 = _a.hasHeaderButton, hasHeaderButton = _1 === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _1, _2 = _a.headerButtonWidth, headerButtonWidth = _2 === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _2, _3 = _a.hasHeaderPrimaryButton, hasHeaderPrimaryButton = _3 === void 0 ? props_1.DescriptionCardDefault.hasHeaderPrimaryButton : _3, _4 = _a.headerPrimaryButtonAction, headerPrimaryButtonAction = _4 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonAction : _4, _5 = _a.headerPrimaryButtonText, headerPrimaryButtonText = _5 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonText : _5, _6 = _a.headerPrimaryButtonIcon, headerPrimaryButtonIcon = _6 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonIcon : _6, _7 = _a.headerPrimaryButtonSize, headerPrimaryButtonSize = _7 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonSize : _7, _8 = _a.content, content = _8 === void 0 ? props_1.DescriptionCardDefault.content : _8, _9 = _a.hasNoContentSidePadding, hasNoContentSidePadding = _9 === void 0 ? props_1.DescriptionCardDefault.hasNoContentSidePadding : _9, _10 = _a.middleTitle, middleTitle = _10 === void 0 ? props_1.DescriptionCardDefault.middleTitle : _10, _11 = _a.status, status = _11 === void 0 ? props_1.DescriptionCardDefault.status : _11, _12 = _a.subcategoryList, subcategoryList = _12 === void 0 ? props_1.DescriptionCardDefault.subcategoryList : _12, _13 = _a.hasCategoryLayout, hasCategoryLayout = _13 === void 0 ? props_1.DescriptionCardDefault.hasCategoryLayout : _13, _14 = _a.hasTwoColumnHeader, hasTwoColumnHeader = _14 === void 0 ? props_1.DescriptionCardDefault.hasTwoColumnHeader : _14, _15 = _a.hasDragHandle, hasDragHandle = _15 === void 0 ? props_1.DescriptionCardDefault.hasDragHandle : _15, _16 = _a.dragHandleProps, dragHandleProps = _16 === void 0 ? props_1.DescriptionCardDefault.dragHandleProps : _16, headerButtonAction = _a.headerButtonAction, onHeaderBack = _a.onHeaderBack, onHeaderClick = _a.onHeaderClick, onSubcategoryReorder = _a.onSubcategoryReorder, _17 = _a.customColumnSpan, customColumnSpan = _17 === void 0 ? props_1.DescriptionCardDefault.customColumnSpan : _17;
+    var _b = _a.title, title = _b === void 0 ? props_1.DescriptionCardDefault.title : _b, _c = _a.titleSize, titleSize = _c === void 0 ? props_1.DescriptionCardDefault.titleSize : _c, _d = _a.headerSize, headerSize = _d === void 0 ? props_1.DescriptionCardDefault.headerSize : _d, _e = _a.headerAlignItems, headerAlignItems = _e === void 0 ? props_1.DescriptionCardDefault.headerAlignItems : _e, _f = _a.headerDescription, headerDescription = _f === void 0 ? props_1.DescriptionCardDefault.headerDescription : _f, _g = _a.headerButtonText, headerButtonText = _g === void 0 ? props_1.DescriptionCardDefault.headerButtonText : _g, _h = _a.hasHeaderDropdown, hasHeaderDropdown = _h === void 0 ? props_1.DescriptionCardDefault.hasHeaderDropdown : _h, _j = _a.hasHeaderBackButton, hasHeaderBackButton = _j === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackButton : _j, _k = _a.list, list = _k === void 0 ? props_1.DescriptionCardDefault.list : _k, _l = _a.hasBadge, hasBadge = _l === void 0 ? props_1.DescriptionCardDefault.hasBadge : _l, _m = _a.badgeText, badgeText = _m === void 0 ? props_1.DescriptionCardDefault.badgeText : _m, _o = _a.hasTitleBadgeBetween, hasTitleBadgeBetween = _o === void 0 ? props_1.DescriptionCardDefault.hasTitleBadgeBetween : _o, _p = _a.hasHeader, hasHeader = _p === void 0 ? props_1.DescriptionCardDefault.hasHeader : _p, _q = _a.hasHeaderBackground, hasHeaderBackground = _q === void 0 ? props_1.DescriptionCardDefault.hasHeaderBackground : _q, _r = _a.hasHeaderBorder, hasHeaderBorder = _r === void 0 ? props_1.DescriptionCardDefault.hasHeaderBorder : _r, _s = _a.hasRounded, hasRounded = _s === void 0 ? props_1.DescriptionCardDefault.hasRounded : _s, _t = _a.hasBorder, hasBorder = _t === void 0 ? props_1.DescriptionCardDefault.hasBorder : _t, _u = _a.hasShadow, hasShadow = _u === void 0 ? props_1.DescriptionCardDefault.hasShadow : _u, _v = _a.headerImage, headerImage = _v === void 0 ? props_1.DescriptionCardDefault.headerImage : _v, _w = _a.headerRightContent, headerRightContent = _w === void 0 ? props_1.DescriptionCardDefault.headerRightContent : _w, _x = _a.dropdownList, dropdownList = _x === void 0 ? props_1.DescriptionCardDefault.dropdownList : _x, _y = _a.dropdownWidth, dropdownWidth = _y === void 0 ? props_1.DescriptionCardDefault.dropdownWidth : _y, _z = _a.accordionList, accordionList = _z === void 0 ? props_1.DescriptionCardDefault.accordionList : _z, _0 = _a.boxSize, boxSize = _0 === void 0 ? props_1.DescriptionCardDefault.boxSize : _0, _1 = _a.hasHeaderButton, hasHeaderButton = _1 === void 0 ? props_1.DescriptionCardDefault.hasHeaderButton : _1, _2 = _a.headerButtonWidth, headerButtonWidth = _2 === void 0 ? props_1.DescriptionCardDefault.headerButtonWidth : _2, _3 = _a.hasHeaderPrimaryButton, hasHeaderPrimaryButton = _3 === void 0 ? props_1.DescriptionCardDefault.hasHeaderPrimaryButton : _3, _4 = _a.headerPrimaryButtonAction, headerPrimaryButtonAction = _4 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonAction : _4, _5 = _a.headerPrimaryButtonText, headerPrimaryButtonText = _5 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonText : _5, _6 = _a.headerPrimaryButtonIcon, headerPrimaryButtonIcon = _6 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonIcon : _6, _7 = _a.headerPrimaryButtonSize, headerPrimaryButtonSize = _7 === void 0 ? props_1.DescriptionCardDefault.headerPrimaryButtonSize : _7, _8 = _a.content, content = _8 === void 0 ? props_1.DescriptionCardDefault.content : _8, _9 = _a.hasNoContentSidePadding, hasNoContentSidePadding = _9 === void 0 ? props_1.DescriptionCardDefault.hasNoContentSidePadding : _9, _10 = _a.middleTitle, middleTitle = _10 === void 0 ? props_1.DescriptionCardDefault.middleTitle : _10, _11 = _a.status, status = _11 === void 0 ? props_1.DescriptionCardDefault.status : _11, _12 = _a.subcategoryList, subcategoryList = _12 === void 0 ? props_1.DescriptionCardDefault.subcategoryList : _12, _13 = _a.hasCategoryLayout, hasCategoryLayout = _13 === void 0 ? props_1.DescriptionCardDefault.hasCategoryLayout : _13, _14 = _a.hasTwoColumnHeader, hasTwoColumnHeader = _14 === void 0 ? props_1.DescriptionCardDefault.hasTwoColumnHeader : _14, _15 = _a.hasDragHandle, hasDragHandle = _15 === void 0 ? props_1.DescriptionCardDefault.hasDragHandle : _15, _16 = _a.hasDisableSubcategorySort, hasDisableSubcategorySort = _16 === void 0 ? props_1.DescriptionCardDefault.hasDisableSubcategorySort : _16, _17 = _a.dragHandleProps, dragHandleProps = _17 === void 0 ? props_1.DescriptionCardDefault.dragHandleProps : _17, headerButtonAction = _a.headerButtonAction, onHeaderBack = _a.onHeaderBack, onHeaderClick = _a.onHeaderClick, onSubcategoryReorder = _a.onSubcategoryReorder, _18 = _a.customColumnSpan, customColumnSpan = _18 === void 0 ? props_1.DescriptionCardDefault.customColumnSpan : _18;
     var hasSubcategories = (subcategoryList === null || subcategoryList === void 0 ? void 0 : subcategoryList.length) > 0;
     var hasHeaderRightContent = !!headerRightContent;
     var hasHeaderRight = hasHeaderRightContent || hasHeaderPrimaryButton || hasHeaderButton;
@@ -80,7 +82,7 @@ var DescriptionCard = function (_a) {
     var isBackTitleClickable = hasHeaderBackButton && !!handleBackTitleClick;
     var sensors = (0, useSortableSensors_1.useSortableSensors)();
     var subcategoryIds = subcategoryList.map(getSubcategoryId);
-    var canSortSubcategories = hasDragHandle && hasSubcategories;
+    var canSortSubcategories = hasDragHandle && hasSubcategories && !hasDisableSubcategorySort;
     var handleSubcategoryDragEnd = function (_a) {
         var active = _a.active, over = _a.over;
         var indexes = (0, getReorderIndexes_1.getReorderIndexes)(subcategoryIds, active.id, over === null || over === void 0 ? void 0 : over.id);
@@ -95,6 +97,7 @@ var DescriptionCard = function (_a) {
             defaultButtonWidth: headerButtonWidth,
             hasCategoryLayout: hasCategoryLayout,
             hasDragHandle: hasDragHandle,
+            isSortDisabled: hasDisableSubcategorySort,
         };
         if (!canSortSubcategories) {
             return (0, jsx_runtime_1.jsx)(SubcategoryRowContent, __assign({}, rowProps), getSubcategoryId(item, key));

package/dist/components/DescriptionCard/DescriptionCard.styled.d.ts

@@ -8,7 +8,7 @@ export declare const DescriptionCardStyled: import("styled-components/dist/types
 export declare const DescriptionCardHeaderStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
 export declare const HeaderLeftStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
 export declare const HeaderBackButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
-export declare const DragHandleStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
+export declare const DragHandleStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
 export declare const HeaderRightStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
 export declare const HeaderActionWrapperStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DescriptionCardStyledProps> & DescriptionCardStyledProps, never>>> & string;
 export declare const HeaderRightContentStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

package/dist/components/DescriptionCard/DescriptionCard.styled.js

@@ -46,7 +46,7 @@ exports.DescriptionCardHeaderStyled = styled_components_1.default.div(templateOb
 }, function (props) { return props.$headerAlignItems || 'center'; }, function (props) { return props.$hasCategoryLayout ? '3.5rem' : '1.5rem'; }, function (props) { return props.$hasHeaderBackground ? 'var(--dark-opacity-3)' : 'transparent'; }, function (props) { return props.$hasHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; });
 exports.HeaderLeftStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    min-width: 0;\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    min-width: 0;\n"])));
 exports.HeaderBackButtonStyled = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin: 0 1rem 0 0;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    cursor: pointer;\n    color: var(--primary);\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin: 0 1rem 0 0;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    cursor: pointer;\n    color: var(--primary);\n"])));
-exports.DragHandleStyled = styled_components_1.default.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    margin-right: 0.75rem;\n    padding: 0;\n    box-shadow: 0px 0px 16px 0px var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    background-color: white;\n    cursor: grab;\n    color: var(--primary);\n    touch-action: none;\n    border: none;\n    transition: all 0.2s ease-in-out;\n    &:active {\n        cursor: grabbing;\n        background-color: var(--primary);\n        color: white;\n    }\n    &:hover {\n        background-color: var(--primary);\n        color: white;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    margin-right: 0.75rem;\n    padding: 0;\n    box-shadow: 0px 0px 16px 0px var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    background-color: white;\n    cursor: grab;\n    color: var(--primary);\n    touch-action: none;\n    border: none;\n    transition: all 0.2s ease-in-out;\n    &:active {\n        cursor: grabbing;\n        background-color: var(--primary);\n        color: white;\n    }\n    &:hover {\n        background-color: var(--primary);\n        color: white;\n    }\n"])));
+exports.DragHandleStyled = styled_components_1.default.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    margin-right: 1rem;\n    padding: 0;\n    box-shadow: 0px 0px 16px 0px var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    background-color: white;\n    cursor: ", ";\n    color: ", ";\n    touch-action: none;\n    border: none;\n    transition: all 0.2s ease-in-out;\n    ", "\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    margin-right: 1rem;\n    padding: 0;\n    box-shadow: 0px 0px 16px 0px var(--dark-opacity-10);\n    border-radius: 0.5rem;\n    background-color: white;\n    cursor: ", ";\n    color: ", ";\n    touch-action: none;\n    border: none;\n    transition: all 0.2s ease-in-out;\n    ", "\n"])), function (props) { return props.$disabled ? 'no-drop' : 'grab'; }, function (props) { return props.$disabled ? 'var(--grey-50)' : 'var(--primary)'; }, function (props) { return !props.$disabled && "\n        &:active {\n            cursor: grabbing;\n            background-color: var(--primary);\n            color: white;\n        }\n        &:hover {\n            background-color: var(--primary);\n            color: white;\n        }\n    "; });
 exports.HeaderRightStyled = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: ", ";\n    align-items: center;\n    justify-content: ", ";\n    width: ", ";\n    min-width: 0;\n\n    > div + div {\n        margin-left: 1rem;\n    }\n"], ["\n    display: ", ";\n    align-items: center;\n    justify-content: ", ";\n    width: ", ";\n    min-width: 0;\n\n    > div + div {\n        margin-left: 1rem;\n    }\n"])), function (props) { return props.$hasHeaderRight ? 'flex' : 'none'; }, function (props) { return props.$hasCategoryLayout || props.$hasHeaderRightContent ? 'flex-end' : 'flex-start'; }, function (props) { return props.$hasCategoryLayout ? '100%' : 'auto'; });
 exports.HeaderActionWrapperStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
 exports.HeaderRightContentStyled = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: block;\n    min-width: 0;\n"], ["\n    display: block;\n    min-width: 0;\n"])));
@@ -68,9 +68,9 @@ exports.AccordionListWrapper = styled_components_1.default.div(templateObject_23
 exports.AccordionItemWrapper = styled_components_1.default.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n    + div{\n        border-top: 1px solid var(--dark-opacity-10);\n        margin-top: -1px;\n    }\n"], ["\n    + div{\n        border-top: 1px solid var(--dark-opacity-10);\n        margin-top: -1px;\n    }\n"])));
 exports.AccordionItemHeader = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    color: var(--primary);\n    padding: 1.5rem;\n    cursor: pointer;\n    border-bottom: ", ";\n    strong{\n        font: var(--body-bold-14-17);\n        display: block;\n        color: inherit;\n    }\n    .icon{\n        *{\n            display: block;\n        }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    color: var(--primary);\n    padding: 1.5rem;\n    cursor: pointer;\n    border-bottom: ", ";\n    strong{\n        font: var(--body-bold-14-17);\n        display: block;\n        color: inherit;\n    }\n    .icon{\n        *{\n            display: block;\n        }\n    }\n"])), function (props) { return props.$show ? "1px solid var(--dark-opacity-10)" : "none"; });
 exports.HeaderMiddleTitleStyled = styled_components_1.default.span(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-75);\n    white-space: nowrap;\n    min-width: 0;\n    cursor: ", ";\n"], ["\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-75);\n    white-space: nowrap;\n    min-width: 0;\n    cursor: ", ";\n"])), function (props) { return props.$isClickable ? 'pointer' : 'default'; });
-exports.SubcategoryListWrapper = styled_components_1.default.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    padding-top: 1rem;\n"], ["\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    padding-top: 1rem;\n"])));
-exports.SubcategoryRowStyled = styled_components_1.default.div(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: ", ";\n    padding: 1rem 1.5rem;\n    border-width: ", ";\n    border-style: solid;\n    border-color: transparent;\n    border-radius: 0.5rem;\n    transition: all 0.2s ease;\n    cursor: ", ";\n    opacity: ", ";\n    z-index: ", ";\n\n    ", "\n"], ["\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: ", ";\n    padding: 1rem 1.5rem;\n    border-width: ", ";\n    border-style: solid;\n    border-color: transparent;\n    border-radius: 0.5rem;\n    transition: all 0.2s ease;\n    cursor: ", ";\n    opacity: ", ";\n    z-index: ", ";\n\n    ", "\n"])), function (props) { return props.$hasCategoryLayout ? exports.subcategoryRowGridColumns : '1fr 1fr auto'; }, function (props) { return props.$hasCategoryLayout ? '3.5rem' : '1.5rem'; }, function (props) { return props.$hasCategoryLayout ? '1px' : '0'; }, function (props) { return props.$isClickable ? 'pointer' : 'default'; }, function (props) { return props.$isDragging ? 0.6 : 1; }, function (props) { return props.$isDragging ? 2 : 'auto'; }, function (props) { return props.$hasCategoryLayout && "\n        &:hover {\n            border-color: var(--grey-10);\n        }\n    "; });
-exports.SubcategoryNameWrapper = styled_components_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    min-width: 0;\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    min-width: 0;\n"])));
+exports.SubcategoryListWrapper = styled_components_1.default.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    padding-top: 1rem;\n"], ["\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    padding-top: 1rem;\n"])));
+exports.SubcategoryRowStyled = styled_components_1.default.div(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: ", ";\n    padding: 1rem 1.5rem;\n    border: none;\n    border-radius: 0.5rem;\n    transition: all 0.2s ease;\n    cursor: ", ";\n    opacity: 1;\n    z-index: ", ";\n\n    ", "\n"], ["\n    display: grid;\n    grid-template-columns: ", ";\n    align-items: center;\n    gap: ", ";\n    padding: 1rem 1.5rem;\n    border: none;\n    border-radius: 0.5rem;\n    transition: all 0.2s ease;\n    cursor: ", ";\n    opacity: 1;\n    z-index: ", ";\n\n    ", "\n"])), function (props) { return props.$hasCategoryLayout ? exports.subcategoryRowGridColumns : '1fr 1fr auto'; }, function (props) { return props.$hasCategoryLayout ? '3.5rem' : '1.5rem'; }, function (props) { return props.$isClickable ? 'pointer' : 'default'; }, function (props) { return props.$isDragging ? 2 : 'auto'; }, function (props) { return props.$hasCategoryLayout && "\n        &:hover {\n            box-shadow: 0px 6px 30px 0px var(--box-shadow-color);\n        }\n    "; });
+exports.SubcategoryNameWrapper = styled_components_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    min-width: 0;\n\n    ", " {\n        margin-right: 0;\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    min-width: 0;\n\n    ", " {\n        margin-right: 0;\n    }\n"])), exports.DragHandleStyled);
 exports.SubcategoryIconWrapper = styled_components_1.default.span(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    color: var(--dark-opacity-50);\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    color: var(--dark-opacity-50);\n"])));
 exports.SubcategoryNameStyled = styled_components_1.default.span(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n    font: var(--body-medium-14-17);\n    color: var(--dark);\n"], ["\n    font: var(--body-medium-14-17);\n    color: var(--dark);\n"])));
 exports.RowMiddleTitleStyled = styled_components_1.default.span(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-75);\n    white-space: nowrap;\n    min-width: 0;\n"], ["\n    font: var(--body-regular-14-17);\n    color: var(--dark-opacity-75);\n    white-space: nowrap;\n    min-width: 0;\n"])));

package/dist/components/DescriptionCard/DescriptionCard.test.js

@@ -80,7 +80,7 @@ describe('DescriptionCard', function () {
             boxShadow: '0px 6px 30px 0px var(--box-shadow-color)',
         });
     });
-    it('gives category layout subcategories a transparent border that can color on hover', function () {
+    it('keeps category layout subcategories borderless so hover can use the card shadow', function () {
         var _a;
         renderDescriptionCard({
             hasCategoryLayout: true,
@@ -89,11 +89,29 @@ describe('DescriptionCard', function () {
         var row = (_a = react_1.screen.getByText('Blend').parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
         expect(row).toHaveStyle({
             display: 'grid',
-            borderWidth: '1px',
-            borderStyle: 'solid',
-            borderColor: 'transparent',
         });
     });
+    it('spaces subcategory rows with a 0.5rem gap', function () {
+        var _a;
+        renderDescriptionCard({
+            hasCategoryLayout: true,
+            subcategoryList: [{ name: 'Blend' }, { name: 'Terra' }],
+        });
+        var row = (_a = react_1.screen.getByText('Blend').parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+        expect(row === null || row === void 0 ? void 0 : row.parentElement).toHaveStyle({ gap: '0.5rem' });
+    });
+    it('spaces subcategory handle, icon and title with a 1rem gap', function () {
+        renderDescriptionCard({
+            hasDragHandle: true,
+            hasCategoryLayout: true,
+            subcategoryList: [{ name: 'Blend' }],
+        });
+        var nameWrapper = react_1.screen.getByText('Blend').parentElement;
+        var handles = react_1.screen.getAllByRole('button', { name: 'Sürükle' });
+        expect(nameWrapper).toHaveStyle({ gap: '1rem' });
+        expect(handles[1]).toHaveStyle({ marginRight: '0' });
+        expect(handles[0]).toHaveStyle({ marginRight: '1rem' });
+    });
     it('always shows the edit button on main and sub categories', function () {
         renderDescriptionCard({
             title: 'Çekirdek kahve',
@@ -143,6 +161,20 @@ describe('DescriptionCard', function () {
         expect(handles).toHaveLength(2);
         expect(handles[1]).toHaveAttribute('aria-roledescription', 'sortable');
     });
+    it('disables subcategory sorting when hasDisableSubcategorySort is true', function () {
+        renderDescriptionCard({
+            hasDragHandle: true,
+            hasDisableSubcategorySort: true,
+            hasCategoryLayout: true,
+            subcategoryList: [{ name: 'Blend' }],
+        });
+        var handles = react_1.screen.getAllByRole('button', { name: 'Sürükle' });
+        expect(handles).toHaveLength(2);
+        expect(handles[0]).toBeEnabled();
+        expect(handles[1]).toHaveAttribute('aria-disabled', 'true');
+        expect(handles[1]).not.toHaveAttribute('aria-roledescription');
+        expect(handles[1]).toHaveStyle({ cursor: 'no-drop' });
+    });
     it('maps subcategory drag ids to indexes within the same list', function () {
         expect((0, getReorderIndexes_1.getReorderIndexes)(['blend', 'terra'], 'blend', 'terra')).toEqual({
             fromIndex: 0,

package/dist/components/DescriptionCard/SortableDescriptionCard.js

@@ -35,7 +35,7 @@ var SortableDescriptionCard = function (_a) {
     return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: setNodeRef, style: {
             transform: utilities_1.CSS.Transform.toString(transform),
             transition: transition,
-            opacity: isDragging ? 0.6 : 1,
+            opacity: 1,
             zIndex: isDragging ? 2 : undefined,
         } }, { children: (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, __assign({}, props, { hasDragHandle: true, dragHandleProps: __assign(__assign({}, attributes), listeners) })) })));
 };

package/dist/components/DescriptionCard/props.d.ts

@@ -65,6 +65,8 @@ export interface DescriptionCard {
     hasTwoColumnHeader?: boolean;
     /** true ise başlık ve alt kategori satırlarında sürükle tutamacı gösterilir */
     hasDragHandle?: boolean;
+    /** true ise alt kategori sıralaması kapatılır (ör. tek alt kategori) */
+    hasDisableSubcategorySort?: boolean;
     /** Ana kategori tutamacına dnd-kit listener/attribute geçirmek için */
     dragHandleProps?: React.HTMLAttributes<HTMLButtonElement>;
     headerButtonAction?(e: any): void;
@@ -102,6 +104,7 @@ export interface DescriptionCardStyledProps {
     $headerAlignItems?: HEADER_ALIGN_ITEMS;
     $isClickable?: boolean;
     $isDragging?: boolean;
+    $disabled?: boolean;
     $hasAccordion?: boolean;
     $statusVariant?: CATEGORY_STATUS_VARIANT;
     $customColumnSpan?: {

package/dist/components/DescriptionCard/props.js

@@ -47,6 +47,7 @@ exports.DescriptionCardDefault = {
     hasCategoryLayout: false,
     hasTwoColumnHeader: false,
     hasDragHandle: false,
+    hasDisableSubcategorySort: false,
     dragHandleProps: null,
     onSubcategoryReorder: null,
     customColumnSpan: {}

package/dist/components/DescriptionCard/stories/DescriptionCard.stories.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: ({ title, titleSize, headerSize, headerAlignItems, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasTitleBadgeBetween, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, hasShadow, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, status, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, hasDragHandle, dragHandleProps, headerButtonAction, onHeaderBack, onHeaderClick, onSubcategoryReorder, customColumnSpan }: import("../props").DescriptionCard) => React.JSX.Element;
+    component: ({ title, titleSize, headerSize, headerAlignItems, headerDescription, headerButtonText, hasHeaderDropdown, hasHeaderBackButton, list, hasBadge, badgeText, hasTitleBadgeBetween, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, hasShadow, headerImage, headerRightContent, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, hasNoContentSidePadding, middleTitle, status, subcategoryList, hasCategoryLayout, hasTwoColumnHeader, hasDragHandle, hasDisableSubcategorySort, dragHandleProps, headerButtonAction, onHeaderBack, onHeaderClick, onSubcategoryReorder, customColumnSpan }: import("../props").DescriptionCard) => React.JSX.Element;
     tags: string[];
     argTypes: {
         title: {
@@ -63,6 +63,10 @@ declare const _default: {
             control: string;
             description: string;
         };
+        hasDisableSubcategorySort: {
+            control: string;
+            description: string;
+        };
         hasTwoColumnHeader: {
             control: string;
             description: string;
@@ -143,6 +147,7 @@ export declare const Default: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithBadge: {
@@ -192,6 +197,7 @@ export declare const WithBadge: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithTitleBadgeBetween: {
@@ -240,6 +246,7 @@ export declare const WithTitleBadgeBetween: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithHeaderDescription: {
@@ -291,6 +298,7 @@ export declare const WithHeaderDescription: {
         subcategoryList: any[];
         hasCategoryLayout: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithHeaderBackground: {
@@ -340,6 +348,7 @@ export declare const WithHeaderBackground: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithoutHeaderBorder: {
@@ -389,6 +398,7 @@ export declare const WithoutHeaderBorder: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithHeaderButton: {
@@ -438,6 +448,7 @@ export declare const WithHeaderButton: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithHeaderPrimaryButton: {
@@ -487,6 +498,7 @@ export declare const WithHeaderPrimaryButton: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithHeaderDropdown: {
@@ -536,6 +548,7 @@ export declare const WithHeaderDropdown: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithoutHeader: {
@@ -585,6 +598,7 @@ export declare const WithoutHeader: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithoutBorder: {
@@ -634,6 +648,7 @@ export declare const WithoutBorder: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithoutRounded: {
@@ -683,6 +698,7 @@ export declare const WithoutRounded: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const MinimalList: {
@@ -732,6 +748,7 @@ export declare const MinimalList: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const EmptyList: {
@@ -778,6 +795,7 @@ export declare const EmptyList: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithoutHeaderImage: {
@@ -827,6 +845,7 @@ export declare const WithoutHeaderImage: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const CustomColumnSpan: {
@@ -877,6 +896,7 @@ export declare const CustomColumnSpan: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const HasAccordion: {
@@ -933,6 +953,7 @@ export declare const HasAccordion: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithContent: {
@@ -1008,6 +1029,7 @@ export declare const TitleSizeLg: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const HeaderAlignFlexStart: {
@@ -1058,6 +1080,7 @@ export declare const HeaderAlignFlexStart: {
         subcategoryList: any[];
         hasCategoryLayout: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithHeaderBackButton: {
@@ -1106,6 +1129,7 @@ export declare const WithHeaderBackButton: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithHeaderRightContent: {
@@ -1156,6 +1180,7 @@ export declare const WithHeaderRightContent: {
         subcategoryList: any[];
         hasCategoryLayout: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithMiddleTitleAndStatus: {
@@ -1205,6 +1230,7 @@ export declare const WithMiddleTitleAndStatus: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const StatusInactive: {
@@ -1254,6 +1280,7 @@ export declare const StatusInactive: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithSubcategories: {
@@ -1320,6 +1347,7 @@ export declare const WithSubcategories: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const WithPrimaryButtonIcon: {
@@ -1366,6 +1394,7 @@ export declare const WithPrimaryButtonIcon: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const NoContentSidePadding: {
@@ -1412,6 +1441,7 @@ export declare const NoContentSidePadding: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const HeaderAndContentOnly: {
@@ -1458,6 +1488,7 @@ export declare const HeaderAndContentOnly: {
         hasCategoryLayout: boolean;
         hasTwoColumnHeader: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };
 export declare const Complete: {
@@ -1511,5 +1542,6 @@ export declare const Complete: {
         subcategoryList: any[];
         hasCategoryLayout: boolean;
         hasDragHandle: boolean;
+        hasDisableSubcategorySort: boolean;
     };
 };

package/dist/components/DescriptionCard/stories/DescriptionCard.stories.js

@@ -82,6 +82,7 @@ var defaultArgs = {
     hasCategoryLayout: false,
     hasTwoColumnHeader: false,
     hasDragHandle: false,
+    hasDisableSubcategorySort: false,
 };
 exports.default = {
     title: 'Components/DescriptionCard',
@@ -121,6 +122,10 @@ exports.default = {
             control: 'boolean',
             description: 'Sürükle tutamacı ile sıralama',
         },
+        hasDisableSubcategorySort: {
+            control: 'boolean',
+            description: 'Alt kategori sıralamasını kapatır',
+        },
         hasTwoColumnHeader: {
             control: 'boolean',
             description: "Header grid'ini `1fr auto` olarak sabitler",
@@ -345,7 +350,7 @@ var CategoryStructureDemo = function () {
             return (0, sortable_1.arrayMove)(list, from, to);
         });
     };
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "1050px", width: "100%" } }, { children: [(0, jsx_runtime_1.jsxs)(CategoryListHeader, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Kategori ad\u0131" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderCount, { children: "\u00DCr\u00FCn say\u0131s\u0131" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderStatus, { children: "Kategori durumu" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderAction, {})] }), (0, jsx_runtime_1.jsx)(core_1.DndContext, __assign({ sensors: sensors, collisionDetection: core_1.closestCenter, modifiers: [modifiers_1.restrictToVerticalAxis], onDragEnd: handleCategoryDragEnd }, { children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, __assign({ items: categoryIds, strategy: sortable_1.verticalListSortingStrategy }, { children: categories.map(function (category) { return ((0, jsx_runtime_1.jsx)(SortableDescriptionCard_1.default, { id: category.id, title: category.title, headerImage: defaultHeaderImage, middleTitle: category.middleTitle, status: category.status, hasCategoryLayout: true, hasHeader: true, hasRounded: true, hasShadow: true, hasHeaderBorder: category.hasHeaderBorder, hasHeaderButton: true, hasHeaderDropdown: true, headerButtonText: "D\u00FCzenle", headerButtonAction: function () { return console.log("category edit"); }, onHeaderClick: function () { return console.log("category navigate"); }, headerButtonWidth: "120px", dropdownList: categoryDropdownList, dropdownWidth: "200px", list: [], hasNoContentSidePadding: false, subcategoryList: category.subcategoryList, onSubcategoryReorder: function (from, to) {
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "1050px", width: "100%" } }, { children: [(0, jsx_runtime_1.jsxs)(CategoryListHeader, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Kategori ad\u0131" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderCount, { children: "\u00DCr\u00FCn say\u0131s\u0131" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderStatus, { children: "Kategori durumu" }), (0, jsx_runtime_1.jsx)(CategoryListHeaderAction, {})] }), (0, jsx_runtime_1.jsx)(core_1.DndContext, __assign({ sensors: sensors, collisionDetection: core_1.closestCenter, modifiers: [modifiers_1.restrictToVerticalAxis], onDragEnd: handleCategoryDragEnd }, { children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, __assign({ items: categoryIds, strategy: sortable_1.verticalListSortingStrategy }, { children: categories.map(function (category) { return ((0, jsx_runtime_1.jsx)(SortableDescriptionCard_1.default, { id: category.id, title: category.title, headerImage: defaultHeaderImage, middleTitle: category.middleTitle, status: category.status, hasCategoryLayout: true, hasHeader: true, hasRounded: true, hasShadow: true, hasHeaderBorder: category.hasHeaderBorder, hasHeaderButton: true, hasHeaderDropdown: true, headerButtonText: "D\u00FCzenle", headerButtonAction: function () { return console.log("category edit"); }, onHeaderClick: function () { return console.log("category navigate"); }, headerButtonWidth: "120px", dropdownList: categoryDropdownList, dropdownWidth: "200px", list: [], hasNoContentSidePadding: false, subcategoryList: category.subcategoryList, hasDisableSubcategorySort: category.subcategoryList.length === 1, onSubcategoryReorder: function (from, to) {
                             setCategories(function (list) { return list.map(function (item) { return (item.id === category.id
                                 ? __assign(__assign({}, item), { subcategoryList: (0, sortable_1.arrayMove)(item.subcategoryList, from, to) }) : item); }); });
                         } }, category.id)); }) })) }))] })));

package/dist/components/Input/Input.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { InputProps } from './props';
-declare const Input: ({ hasError, disabled, label, customLinkText, customLinkHref, onCustomLinkClick, onChange, errorMessage, type, name, width, mask, placeholder, hasCopyButton, readOnly, autoFocus, value, format, visible, infoText, tooltipText, tooltipWidth, id, isClearable, onClear, hasNumericFormat, inline, minDate, maxDate, filterDate, onCalendarOpen, maxLength, showMaxLengthCounter, description, ...other }: InputProps) => React.JSX.Element;
+declare const Input: ({ hasError, disabled, label, customLinkText, customLinkHref, onCustomLinkClick, onChange, errorMessage, type, name, width, mask, placeholder, hasCopyButton, readOnly, autoFocus, value, format, visible, infoText, tooltipText, tooltipWidth, id, isClearable, onClear, hasNumericFormat, decimalSeparator, thousandSeparator, inline, minDate, maxDate, filterDate, onCalendarOpen, maxLength, showMaxLengthCounter, description, ...other }: InputProps) => React.JSX.Element;
 export default Input;

package/dist/components/Input/Input.js

@@ -40,21 +40,21 @@ var locale_1 = require("date-fns/locale");
 var useDatePickerCalendar_1 = require("./hooks/useDatePickerCalendar");
 var datePicker_1 = require("./utils/datePicker");
 var Input = function (_a) {
-    var _b = _a.hasError, hasError = _b === void 0 ? props_1.InputDefault.hasError : _b, _c = _a.disabled, disabled = _c === void 0 ? props_1.InputDefault.disabled : _c, _d = _a.label, label = _d === void 0 ? props_1.InputDefault.label : _d, _e = _a.customLinkText, customLinkText = _e === void 0 ? props_1.InputDefault.customLinkText : _e, _f = _a.customLinkHref, customLinkHref = _f === void 0 ? props_1.InputDefault.customLinkHref : _f, _g = _a.onCustomLinkClick, onCustomLinkClick = _g === void 0 ? props_1.InputDefault.onCustomLinkClick : _g, _h = _a.onChange, onChange = _h === void 0 ? props_1.InputDefault.onChange : _h, _j = _a.errorMessage, errorMessage = _j === void 0 ? props_1.InputDefault.errorMessage : _j, _k = _a.type, type = _k === void 0 ? props_1.InputDefault.type : _k, _l = _a.name, name = _l === void 0 ? props_1.InputDefault.name : _l, _m = _a.width, width = _m === void 0 ? props_1.InputDefault.width : _m, _o = _a.mask, mask = _o === void 0 ? props_1.InputDefault.mask : _o, _p = _a.placeholder, placeholder = _p === void 0 ? props_1.InputDefault.placeholder : _p, _q = _a.hasCopyButton, hasCopyButton = _q === void 0 ? props_1.InputDefault.hasCopyButton : _q, _r = _a.readOnly, readOnly = _r === void 0 ? props_1.InputDefault.readOnly : _r, _s = _a.autoFocus, autoFocus = _s === void 0 ? props_1.InputDefault.autoFocus : _s, value = _a.value, _t = _a.format, format = _t === void 0 ? props_1.InputDefault.format : _t, _u = _a.visible, visible = _u === void 0 ? props_1.InputDefault.visible : _u, _v = _a.infoText, infoText = _v === void 0 ? props_1.InputDefault.infoText : _v, _w = _a.tooltipText, tooltipText = _w === void 0 ? props_1.InputDefault.tooltipText : _w, _x = _a.tooltipWidth, tooltipWidth = _x === void 0 ? props_1.InputDefault.tooltipWidth : _x, _y = _a.id, id = _y === void 0 ? props_1.InputDefault.id : _y, _z = _a.isClearable, isClearable = _z === void 0 ? props_1.InputDefault.isClearable : _z, _0 = _a.onClear, onClear = _0 === void 0 ? props_1.InputDefault.onClear : _0, _1 = _a.hasNumericFormat, hasNumericFormat = _1 === void 0 ? props_1.InputDefault.hasNumericFormat : _1, _2 = _a.inline, inline = _2 === void 0 ? props_1.InputDefault.inline : _2, _3 = _a.minDate, minDate = _3 === void 0 ? props_1.InputDefault.minDate : _3, _4 = _a.maxDate, maxDate = _4 === void 0 ? props_1.InputDefault.maxDate : _4, _5 = _a.filterDate, filterDate = _5 === void 0 ? props_1.InputDefault.filterDate : _5, _6 = _a.onCalendarOpen, onCalendarOpen = _6 === void 0 ? props_1.InputDefault.onCalendarOpen : _6, _7 = _a.maxLength, maxLength = _7 === void 0 ? props_1.InputDefault.maxLength : _7, _8 = _a.showMaxLengthCounter, showMaxLengthCounter = _8 === void 0 ? props_1.InputDefault.showMaxLengthCounter : _8, _9 = _a.description, description = _9 === void 0 ? props_1.InputDefault.description : _9, other = __rest(_a, ["hasError", "disabled", "label", "customLinkText", "customLinkHref", "onCustomLinkClick", "onChange", "errorMessage", "type", "name", "width", "mask", "placeholder", "hasCopyButton", "readOnly", "autoFocus", "value", "format", "visible", "infoText", "tooltipText", "tooltipWidth", "id", "isClearable", "onClear", "hasNumericFormat", "inline", "minDate", "maxDate", "filterDate", "onCalendarOpen", "maxLength", "showMaxLengthCounter", "description"]);
-    var _10 = (0, react_1.useState)(type), inputType = _10[0], setInputType = _10[1];
-    var _11 = (0, react_1.useState)(false), alert = _11[0], setAlert = _11[1];
-    var _12 = (0, react_1.useState)(value), inputValue = _12[0], setInputValue = _12[1];
-    var _13 = (0, react_1.useState)(false), isFocused = _13[0], setIsFocused = _13[1];
-    var _14 = (0, react_1.useState)(function () { return (0, datePicker_1.parseDateValue)(value, format); }), startDate = _14[0], setStartDate = _14[1];
+    var _b = _a.hasError, hasError = _b === void 0 ? props_1.InputDefault.hasError : _b, _c = _a.disabled, disabled = _c === void 0 ? props_1.InputDefault.disabled : _c, _d = _a.label, label = _d === void 0 ? props_1.InputDefault.label : _d, _e = _a.customLinkText, customLinkText = _e === void 0 ? props_1.InputDefault.customLinkText : _e, _f = _a.customLinkHref, customLinkHref = _f === void 0 ? props_1.InputDefault.customLinkHref : _f, _g = _a.onCustomLinkClick, onCustomLinkClick = _g === void 0 ? props_1.InputDefault.onCustomLinkClick : _g, _h = _a.onChange, onChange = _h === void 0 ? props_1.InputDefault.onChange : _h, _j = _a.errorMessage, errorMessage = _j === void 0 ? props_1.InputDefault.errorMessage : _j, _k = _a.type, type = _k === void 0 ? props_1.InputDefault.type : _k, _l = _a.name, name = _l === void 0 ? props_1.InputDefault.name : _l, _m = _a.width, width = _m === void 0 ? props_1.InputDefault.width : _m, _o = _a.mask, mask = _o === void 0 ? props_1.InputDefault.mask : _o, _p = _a.placeholder, placeholder = _p === void 0 ? props_1.InputDefault.placeholder : _p, _q = _a.hasCopyButton, hasCopyButton = _q === void 0 ? props_1.InputDefault.hasCopyButton : _q, _r = _a.readOnly, readOnly = _r === void 0 ? props_1.InputDefault.readOnly : _r, _s = _a.autoFocus, autoFocus = _s === void 0 ? props_1.InputDefault.autoFocus : _s, value = _a.value, _t = _a.format, format = _t === void 0 ? props_1.InputDefault.format : _t, _u = _a.visible, visible = _u === void 0 ? props_1.InputDefault.visible : _u, _v = _a.infoText, infoText = _v === void 0 ? props_1.InputDefault.infoText : _v, _w = _a.tooltipText, tooltipText = _w === void 0 ? props_1.InputDefault.tooltipText : _w, _x = _a.tooltipWidth, tooltipWidth = _x === void 0 ? props_1.InputDefault.tooltipWidth : _x, _y = _a.id, id = _y === void 0 ? props_1.InputDefault.id : _y, _z = _a.isClearable, isClearable = _z === void 0 ? props_1.InputDefault.isClearable : _z, _0 = _a.onClear, onClear = _0 === void 0 ? props_1.InputDefault.onClear : _0, _1 = _a.hasNumericFormat, hasNumericFormat = _1 === void 0 ? props_1.InputDefault.hasNumericFormat : _1, _2 = _a.decimalSeparator, decimalSeparator = _2 === void 0 ? props_1.InputDefault.decimalSeparator : _2, _3 = _a.thousandSeparator, thousandSeparator = _3 === void 0 ? props_1.InputDefault.thousandSeparator : _3, _4 = _a.inline, inline = _4 === void 0 ? props_1.InputDefault.inline : _4, _5 = _a.minDate, minDate = _5 === void 0 ? props_1.InputDefault.minDate : _5, _6 = _a.maxDate, maxDate = _6 === void 0 ? props_1.InputDefault.maxDate : _6, _7 = _a.filterDate, filterDate = _7 === void 0 ? props_1.InputDefault.filterDate : _7, _8 = _a.onCalendarOpen, onCalendarOpen = _8 === void 0 ? props_1.InputDefault.onCalendarOpen : _8, _9 = _a.maxLength, maxLength = _9 === void 0 ? props_1.InputDefault.maxLength : _9, _10 = _a.showMaxLengthCounter, showMaxLengthCounter = _10 === void 0 ? props_1.InputDefault.showMaxLengthCounter : _10, _11 = _a.description, description = _11 === void 0 ? props_1.InputDefault.description : _11, other = __rest(_a, ["hasError", "disabled", "label", "customLinkText", "customLinkHref", "onCustomLinkClick", "onChange", "errorMessage", "type", "name", "width", "mask", "placeholder", "hasCopyButton", "readOnly", "autoFocus", "value", "format", "visible", "infoText", "tooltipText", "tooltipWidth", "id", "isClearable", "onClear", "hasNumericFormat", "decimalSeparator", "thousandSeparator", "inline", "minDate", "maxDate", "filterDate", "onCalendarOpen", "maxLength", "showMaxLengthCounter", "description"]);
+    var _12 = (0, react_1.useState)(type), inputType = _12[0], setInputType = _12[1];
+    var _13 = (0, react_1.useState)(false), alert = _13[0], setAlert = _13[1];
+    var _14 = (0, react_1.useState)(value), inputValue = _14[0], setInputValue = _14[1];
+    var _15 = (0, react_1.useState)(false), isFocused = _15[0], setIsFocused = _15[1];
+    var _16 = (0, react_1.useState)(function () { return (0, datePicker_1.parseDateValue)(value, format); }), startDate = _16[0], setStartDate = _16[1];
     var inputRef = (0, react_1.useRef)(null);
     var t = (0, react_i18next_1.useTranslation)().t;
     var language = i18n_1.default.language;
-    var _15 = (0, useDatePickerCalendar_1.useDatePickerCalendar)({
+    var _17 = (0, useDatePickerCalendar_1.useDatePickerCalendar)({
         disabled: disabled,
         inline: inline,
         onCalendarOpen: onCalendarOpen,
         readOnly: readOnly,
-    }), calendarControlProps = _15.calendarControlProps, dateInputRef = _15.dateInputRef, datePickerRef = _15.datePickerRef, isCalendarOpen = _15.isCalendarOpen;
+    }), calendarControlProps = _17.calendarControlProps, dateInputRef = _17.dateInputRef, datePickerRef = _17.datePickerRef, isCalendarOpen = _17.isCalendarOpen;
     (0, react_1.useEffect)(function () {
         setInputType(type);
     }, [type]);
@@ -105,6 +105,7 @@ var Input = function (_a) {
     var handleFocus = function () { return setIsFocused(true); };
     var handleBlur = function () { return setIsFocused(false); };
     var isControlled = value !== undefined;
+    var numericThousandSeparator = thousandSeparator === true && decimalSeparator === ',' ? '.' : thousandSeparator;
     var fieldValue = isControlled ? value : (inputValue !== null && inputValue !== void 0 ? inputValue : '');
     var fieldValueRef = (0, react_1.useRef)(fieldValue);
     fieldValueRef.current = fieldValue;
@@ -165,7 +166,7 @@ var Input = function (_a) {
     var showCharCount = showMaxLengthCounter && maxLength != null;
     var showTopRow = Boolean(label || customLinkText || showCharCount);
     var hasInputIcon = (isClearable && fieldValue) || ['password', 'date'].includes(type) || hasCopyButton || infoText;
-    return ((0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": width }, { children: [showTopRow && ((0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTop, { children: [label ? (0, jsx_runtime_1.jsx)(Input_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })) : (0, jsx_runtime_1.jsx)("span", {}), (0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTopActions, { children: [showCharCount && ((0, jsx_runtime_1.jsxs)(Input_styled_1.CharCount, { children: [currentLength, "/", maxLength] })), customLinkText && ((0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText })))] })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [hasNumericFormat ? ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { customInput: Input_styled_1.InputStyled, id: id, onFocus: handleFocus, onBlur: handleBlur }))) : mask && format ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { format: format, mask: mask, customInput: Input_styled_1.InputStyled, id: id, onFocus: handleFocus, onBlur: handleBlur }))) : type === 'date' ? ((0, jsx_runtime_1.jsx)(Input_styled_1.DatePickerWrapperStyled, __assign({ "$inline": inline }, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, __assign({ placeholderText: placeholder, disabled: disabled, name: name, readOnly: readOnly, autoFocus: autoFocus, onChange: handleDateChange, selected: startDate, ref: datePickerRef, id: id, dateFormat: "yyyy-MM-dd", locale: language === 'tr' ? locale_1.tr : locale_1.enGB, customInput: (0, jsx_runtime_1.jsx)(CustomDateInput, {}), inline: inline, minDate: minDate, maxDate: maxDate, filterDate: filterDate, renderCustomHeader: function (_a) {
+    return ((0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": width }, { children: [showTopRow && ((0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTop, { children: [label ? (0, jsx_runtime_1.jsx)(Input_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })) : (0, jsx_runtime_1.jsx)("span", {}), (0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTopActions, { children: [showCharCount && ((0, jsx_runtime_1.jsxs)(Input_styled_1.CharCount, { children: [currentLength, "/", maxLength] })), customLinkText && ((0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText })))] })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [hasNumericFormat ? ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { decimalSeparator: decimalSeparator, thousandSeparator: numericThousandSeparator, allowedDecimalSeparators: [decimalSeparator, '.'], customInput: Input_styled_1.InputStyled, id: id, onFocus: handleFocus, onBlur: handleBlur }))) : mask && format ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { format: format, mask: mask, customInput: Input_styled_1.InputStyled, id: id, onFocus: handleFocus, onBlur: handleBlur }))) : type === 'date' ? ((0, jsx_runtime_1.jsx)(Input_styled_1.DatePickerWrapperStyled, __assign({ "$inline": inline }, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, __assign({ placeholderText: placeholder, disabled: disabled, name: name, readOnly: readOnly, autoFocus: autoFocus, onChange: handleDateChange, selected: startDate, ref: datePickerRef, id: id, dateFormat: "yyyy-MM-dd", locale: language === 'tr' ? locale_1.tr : locale_1.enGB, customInput: (0, jsx_runtime_1.jsx)(CustomDateInput, {}), inline: inline, minDate: minDate, maxDate: maxDate, filterDate: filterDate, renderCustomHeader: function (_a) {
                                 var monthDate = _a.monthDate, decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, nextYearButtonDisabled = _a.nextYearButtonDisabled;
                                 return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "headerTopContent" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "leftButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Year", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseYear, type: "button", disabled: prevYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CalenderArrowleftsmall" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Month", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseMonth, type: "button", disabled: prevMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallLeft" }) }))] })), (0, jsx_runtime_1.jsxs)("span", __assign({ className: "react-datepicker__current-month" }, { children: [monthDate.toLocaleString(language === 'tr' ? 'tr-TR' : 'en-GB', { month: 'long' }), ",", ' ', monthDate.toLocaleString(language === 'tr' ? 'tr-TR' : 'en-GB', { year: 'numeric' })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Month", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseMonth, type: "button", disabled: nextMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Year", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseYear, type: "button", disabled: nextYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Calenderarrowrightsmall" }) }))] }))] })));
                             } }, calendarControlProps)) }))) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: fieldValue, id: id, maxLength: maxLength, "$hasIcon": hasInputIcon }, other, { onKeyDown: rememberSelection, onSelect: rememberSelection, onMouseUp: rememberSelection, onFocus: handleFocus, onBlur: handleBlur, onChange: handleTextChange }))), isClearable && fieldValue ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : type === 'date' && !inline ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg hasNoCursor" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Copy" }) })))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)(Input_styled_1.PopupText, { dangerouslySetInnerHTML: { __html: infoText } }) })) }))), tooltipText && ((0, jsx_runtime_1.jsx)(Input_styled_1.FocusTooltip, __assign({ "$isOpen": isFocused, "$maxWidth": tooltipWidth }, { children: (0, jsx_runtime_1.jsx)(Input_styled_1.PopupText, { dangerouslySetInnerHTML: { __html: tooltipText } }) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))), description && (0, jsx_runtime_1.jsx)(Input_styled_1.FieldDescription, { children: description })] })));

package/dist/components/Input/Input.test.js

@@ -184,4 +184,24 @@ describe('Input', function () {
         expect(onChange).toHaveBeenCalled();
         expect(react_2.screen.getByDisplayValue('ABCD')).toBeInTheDocument();
     });
+    it('accepts a comma as decimal separator in numeric format', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var input;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderInput({
+                        hasNumericFormat: true,
+                        label: null,
+                        placeholder: 'Fiyat',
+                        mask: null,
+                    });
+                    input = react_2.screen.getByPlaceholderText('Fiyat');
+                    return [4 /*yield*/, user_event_1.default.type(input, '12,5')];
+                case 1:
+                    _a.sent();
+                    expect(input).toHaveValue('12,5');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/dist/components/Input/props.d.ts

@@ -22,6 +22,9 @@ export interface Input {
     format?: string;
     visible?: boolean;
     hasNumericFormat?: boolean;
+    /** Ondalık ayırıcı. Sayısal formatta varsayılan virgüldür (TR fiyat). */
+    decimalSeparator?: string;
+    thousandSeparator?: boolean | string;
     infoText?: string;
     tooltipText?: string;
     tooltipWidth?: string;

package/dist/components/Input/props.js

@@ -27,6 +27,8 @@ exports.InputDefault = {
     id: null,
     isClearable: false,
     hasNumericFormat: false,
+    decimalSeparator: ",",
+    thousandSeparator: false,
     inline: false,
     minDate: null,
     maxDate: null,

package/dist/components/Input/stories/Input.stories.d.ts

@@ -343,6 +343,23 @@ export declare const NumericFormat: {
         onChange: (e: any) => void;
     };
 };
+export declare const PriceFormat: {
+    args: {
+        placeholder: string;
+        label: string;
+        hasError: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+        isClearable: boolean;
+        hasNumericFormat: boolean;
+        decimalSeparator: string;
+        thousandSeparator: string;
+        type: string;
+        infoText: any;
+        id: string;
+        onChange: (e: any) => void;
+    };
+};
 export declare const PatternFormat: {
     args: {
         placeholder: string;

package/dist/components/Input/stories/Input.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Interactive = exports.PercentageMaskWithValue = exports.PercentageMask = exports.WithMaxLengthAndDescription = exports.ErrorWithCustomLink = exports.Complete = exports.CustomWidth = exports.Number = exports.Tel = exports.Email = exports.PatternFormatWithValue = exports.PatternFormat = exports.NumericFormat = exports.WithTooltip = exports.WithInfoText = exports.Clearable = exports.WithCopyButton = exports.DateWithMinMax = exports.DateInline = exports.DateInput = exports.PasswordWithValue = exports.Password = exports.WithCustomLink = exports.ReadOnly = exports.Disabled = exports.WithError = exports.WithLabel = exports.WithValue = exports.Empty = exports.Default = void 0;
+exports.Interactive = exports.PercentageMaskWithValue = exports.PercentageMask = exports.WithMaxLengthAndDescription = exports.ErrorWithCustomLink = exports.Complete = exports.CustomWidth = exports.Number = exports.Tel = exports.Email = exports.PatternFormatWithValue = exports.PatternFormat = exports.PriceFormat = exports.NumericFormat = exports.WithTooltip = exports.WithInfoText = exports.Clearable = exports.WithCopyButton = exports.DateWithMinMax = exports.DateInline = exports.DateInput = exports.PasswordWithValue = exports.Password = exports.WithCustomLink = exports.ReadOnly = exports.Disabled = exports.WithError = exports.WithLabel = exports.WithValue = exports.Empty = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var Input_1 = __importDefault(require("../Input"));
@@ -331,6 +331,25 @@ exports.NumericFormat = {
         }
     },
 };
+exports.PriceFormat = {
+    args: {
+        placeholder: "0,00",
+        label: "Fiyat",
+        hasError: false,
+        disabled: false,
+        readOnly: false,
+        isClearable: false,
+        hasNumericFormat: true,
+        decimalSeparator: ",",
+        thousandSeparator: ".",
+        type: "text",
+        infoText: null,
+        id: "input_price",
+        onChange: function (e) {
+            console.log(e, "onChange");
+        }
+    },
+};
 exports.PatternFormat = {
     args: {
         placeholder: "Enter phone number",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "2.24.0",
+  "version": "2.24.1",
   "files": [
     "dist"
   ],
@@ -11,7 +11,7 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@storybook/addon-docs": "10.2.7",
+    "@storybook/addon-docs": "10.4.6",
     "@storybook/preset-scss": "^1.0.3",
     "@swc/core": "1.5.7",
     "@testing-library/jest-dom": "^5.16.5",
@@ -119,17 +119,17 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",
-    "@storybook/addon-links": "10.2.7",
-    "@storybook/cli": "10.2.7",
-    "@storybook/preset-create-react-app": "10.2.7",
-    "@storybook/react-webpack5": "10.2.7",
+    "@storybook/addon-links": "10.4.6",
+    "@storybook/cli": "10.4.6",
+    "@storybook/preset-create-react-app": "10.4.6",
+    "@storybook/react-webpack5": "10.4.6",
     "@svgr/cli": "^7.0.0",
     "@svgr/webpack": "^7.0.0",
     "@types/dompurify": "^3.0.5",
     "chromatic": "^18.1.0",
     "next": "^16.0.10",
     "semantic-release": "^21.1.2",
-    "storybook": "10.2.7",
+    "storybook": "10.4.6",
     "storybook-i18n": "^10.0.3"
   }
 }