@salutejs/plasma-new-hope 0.346.0-canary.2452.21584026956.0 → 0.346.1-dev.0

package/dist/css/cjs/components/File/ui/Loader/Loader.styles.js

@@ -0,0 +1,34 @@
+require('./Loader.styles_1ho7q56.css');
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@linaria/react');
+var common = require('../../../../engines/common.js');
+var Progress$1 = require('../../../Progress/Progress.js');
+var ProgressBarCircular$1 = require('../../../ProgressBarCircular/ProgressBarCircular.js');
+
+var mergedProgressBarCircularConfig = /*#__PURE__*/common.mergeConfig(ProgressBarCircular$1.progressBarCircularConfig);
+var ProgressBarCircular = /*#__PURE__*/common.component(mergedProgressBarCircularConfig);
+var mergedProgressConfig = /*#__PURE__*/common.mergeConfig(Progress$1.progressConfig);
+var Progress = /*#__PURE__*/common.component(mergedProgressConfig);
+var _exp = function _exp() {
+  return ProgressBarCircular;
+};
+var ProgressBarCircularUI = /*#__PURE__*/react.styled(_exp())({
+  name: "ProgressBarCircularUI",
+  "class": "p8jxzss",
+  propsAsIs: true
+});
+var _exp19 = function _exp19() {
+  return Progress;
+};
+var ProgressUI = /*#__PURE__*/react.styled(_exp19())({
+  name: "ProgressUI",
+  "class": "pfkaftk",
+  propsAsIs: true
+});
+
+exports.ProgressBarCircularUI = ProgressBarCircularUI;
+exports.ProgressUI = ProgressUI;
+//# sourceMappingURL=Loader.styles.js.map

package/dist/css/cjs/components/File/ui/Loader/Loader.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.styles.js","sources":["../../../../../../../src/components/File/ui/Loader/Loader.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\nimport { progressConfig, progressTokens } from 'src/components/Progress';\nimport { progressBarCircularConfig, progressBarCircularTokens } from 'src/components/ProgressBarCircular';\nimport { component, mergeConfig } from 'src/engines';\n\nimport { tokens } from '../../File.tokens';\nimport { EmbedIconButtonUI } from '../EmbedIconButton/EmbedIconButton.styles';\n\nconst mergedProgressBarCircularConfig = mergeConfig(progressBarCircularConfig);\nconst ProgressBarCircular = component(mergedProgressBarCircularConfig);\n\nconst mergedProgressConfig = mergeConfig(progressConfig);\nconst Progress = component(mergedProgressConfig);\n\nexport const ProgressBarCircularUI = styled(ProgressBarCircular)`\n    ${progressBarCircularTokens.size}: var(${tokens.progressBarCircularSize});\n    ${progressBarCircularTokens.width}: var(${tokens.progressBarCircularWidth});\n    ${progressBarCircularTokens.height}: var(${tokens.progressBarCircularHeight});\n\n    ${progressBarCircularTokens.strokeWidth}: var(${tokens.progressBarCircularStrokeWidth});\n    ${progressBarCircularTokens.strokeSize}: var(${tokens.progressBarCircularStrokeSize});\n\n    ${progressBarCircularTokens.backgroundStroke}: var(${tokens.progressBarCircularBackgroundStroke});\n    ${progressBarCircularTokens.progressStroke}: var(${tokens.progressBarCircularStroke});\n\n    ${progressBarCircularTokens.contentColor}: var(${tokens.progressBarCircularContentColor});\n\n    ${EmbedIconButtonUI} {\n        width: 100%;\n        height: 100%;\n    }\n`;\n\nexport const ProgressUI = styled(Progress)`\n    ${progressTokens.trackBackgroundColor}: var(${tokens.progressTrackBackgroundColor});\n    ${progressTokens.trackHeight}: var(${tokens.progressTrackHeight});\n    ${progressTokens.trackBorderRadius}: var(${tokens.progressTrackBorderRadius});\n\n    ${progressTokens.progressFilledBackgroundColor}: var(${tokens.progressFilledBackgroundColor});\n    ${progressTokens.progressFilledHeight}: var(${tokens.progressFilledHeight});\n    ${progressTokens.progressFilledBorderRadius}: var(${tokens.progressFilledBorderRadius});\n    \n    width: 100%;\n`;\n"],"names":["mergedProgressBarCircularConfig","mergeConfig","progressBarCircularConfig","ProgressBarCircular","component","mergedProgressConfig","progressConfig","Progress","_exp","ProgressBarCircularUI","styled","name","class","propsAsIs","_exp19","ProgressUI"],"mappings":";;;;;;;;;AAQA,IAAMA,+BAA+B,gBAAGC,kBAAW,CAACC,+CAAyB,CAAC,CAAA;AAC9E,IAAMC,mBAAmB,gBAAGC,gBAAS,CAACJ,+BAA+B,CAAC,CAAA;AAEtE,IAAMK,oBAAoB,gBAAGJ,kBAAW,CAACK,yBAAc,CAAC,CAAA;AACxD,IAAMC,QAAQ,gBAAGH,gBAAS,CAACC,oBAAoB,CAAC,CAAA;AAAC,IAAAG,IAAA,GAX/BA,SAW+BA,IAAAA,GAAA;AAAA,EAAA,OAELL,mBAAmB,CAAA;AAAA,CAAA,CAAA;AAAxD,IAAMM,qBAAqB,gBAAGC,YAAM,CAAAF,IAAA,EAAA,CAAA,CAAA;AAAAG,EAAAA,IAAA,EAAA,uBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAiB1C,EAAA;AAAC,IAAAC,MAAA,GA9BgBA,SA8BhBA,MAAAA,GAAA;AAAA,EAAA,OAE+BP,QAAQ,CAAA;AAAA,CAAA,CAAA;AAAlC,IAAMQ,UAAU,gBAAGL,YAAM,CAAAI,MAAA,EAAA,CAAA,CAAA;AAAAH,EAAAA,IAAA,EAAA,YAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAU/B;;;;;"}

package/dist/css/cjs/components/File/ui/Loader/Loader.styles_1ho7q56.css

@@ -0,0 +1,2 @@
+.p8jxzss{--plasma-progressbar-circular-size:var(--plasma-file-progress-bar-circular-size);--plasma-progressbar-circular-width:var(--plasma-file-progress-bar-circular-width);--plasma-progressbar-circular-height:var(--plasma-file-progress-bar-circular-height);--plasma-progressbar-circular-stroke-width:var(--plasma-file-progress-bar-circular-stroke-width);--plasma-progressbar-circular-stroke-size:var(--plasma-file-progress-bar-circular-stroke-size);--plasma-progressbar-circular-background-stroke:var(--plasma-file-progress-bar-circular-background-stroke);--plasma-progressbar-circular-progress-stroke:var(--plasma-file-progress-bar-circular-stroke);--plasma-progressbar-circular-content-color:var(--plasma-file-progress-bar-circular-content-color);}.p8jxzss .e3v51gd{width:100%;height:100%;}
+.pfkaftk{--plasma-progress-track-background-color:var(--plasma-file-progress-track-background-color);--plasma-progress-track-height:var(--plasma-file-progress-track-height);--plasma-progress-track-border-radius:var(--plasma-file-progress-track-border-radius);--plasma-progress-filled-background-color:var(--plasma-file-progress-filled-background-color);--plasma-progress-filled-height:var(--plasma-file-progress-filled-height);--plasma-progress-filled-border-radius:var(--plasma-file-progress-filled-border-radius);width:100%;}

package/dist/css/cjs/components/File/utils/getFileIcon.js

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var File_tokens = require('../File.tokens.js');
+var IconBlankOutline = require('../../_Icon/Icons/IconBlankOutline.js');
+var IconBlankCsvOutline = require('../../_Icon/Icons/IconBlankCsvOutline.js');
+var IconBlankTxtOutline = require('../../_Icon/Icons/IconBlankTxtOutline.js');
+var IconBlankXlsOutline = require('../../_Icon/Icons/IconBlankXlsOutline.js');
+var IconBlankDocOutline = require('../../_Icon/Icons/IconBlankDocOutline.js');
+var IconBlankPdfOutline = require('../../_Icon/Icons/IconBlankPdfOutline.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var getFileIcon = function getFileIcon(extension, size) {
+  var iconSize = size === 'xs' ? 'xs' : 's';
+  switch (extension) {
+    case 'pdf':
+      return /*#__PURE__*/React__default.default.createElement(IconBlankPdfOutline.IconBlankPdfOutline, {
+        size: iconSize,
+        sizeCustomProperty: File_tokens.tokens.fileThumbSize,
+        color: "inherit"
+      });
+    case 'doc':
+      return /*#__PURE__*/React__default.default.createElement(IconBlankDocOutline.IconBlankDocOutline, {
+        size: iconSize,
+        sizeCustomProperty: File_tokens.tokens.fileThumbSize,
+        color: "inherit"
+      });
+    case 'docx':
+      return /*#__PURE__*/React__default.default.createElement(IconBlankDocOutline.IconBlankDocOutline, {
+        size: iconSize,
+        sizeCustomProperty: File_tokens.tokens.fileThumbSize,
+        color: "inherit"
+      });
+    case 'xls':
+      return /*#__PURE__*/React__default.default.createElement(IconBlankXlsOutline.IconBlankXlsOutline, {
+        size: iconSize,
+        sizeCustomProperty: File_tokens.tokens.fileThumbSize,
+        color: "inherit"
+      });
+    case 'xlsx':
+      return /*#__PURE__*/React__default.default.createElement(IconBlankXlsOutline.IconBlankXlsOutline, {
+        size: iconSize,
+        sizeCustomProperty: File_tokens.tokens.fileThumbSize,
+        color: "inherit"
+      });
+    case 'txt':
+      return /*#__PURE__*/React__default.default.createElement(IconBlankTxtOutline.IconBlankTxtOutline, {
+        size: iconSize,
+        sizeCustomProperty: File_tokens.tokens.fileThumbSize,
+        color: "inherit"
+      });
+    case 'csv':
+      return /*#__PURE__*/React__default.default.createElement(IconBlankCsvOutline.IconBlankCsvOutline, {
+        size: iconSize,
+        sizeCustomProperty: File_tokens.tokens.fileThumbSize,
+        color: "inherit"
+      });
+    default:
+      return /*#__PURE__*/React__default.default.createElement(IconBlankOutline.IconBlankOutline, {
+        size: iconSize,
+        sizeCustomProperty: File_tokens.tokens.fileThumbSize,
+        color: "inherit"
+      });
+  }
+};
+
+exports.getFileIcon = getFileIcon;
+//# sourceMappingURL=getFileIcon.js.map

package/dist/css/cjs/components/File/utils/getFileIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getFileIcon.js","sources":["../../../../../../src/components/File/utils/getFileIcon.tsx"],"sourcesContent":["import React from 'react';\n\nimport {\n    IconBlankCsvOutline,\n    IconBlankDocOutline,\n    IconBlankOutline,\n    IconBlankPdfOutline,\n    IconBlankTxtOutline,\n    IconBlankXlsOutline,\n} from '../../_Icon';\nimport { tokens } from '../File.tokens';\n\nexport const getFileIcon = (extension?: string, size?: string) => {\n    const iconSize = size === 'xs' ? 'xs' : 's';\n\n    switch (extension) {\n        case 'pdf':\n            return <IconBlankPdfOutline size={iconSize} sizeCustomProperty={tokens.fileThumbSize} color=\"inherit\" />;\n        case 'doc':\n            return <IconBlankDocOutline size={iconSize} sizeCustomProperty={tokens.fileThumbSize} color=\"inherit\" />;\n        case 'docx':\n            return <IconBlankDocOutline size={iconSize} sizeCustomProperty={tokens.fileThumbSize} color=\"inherit\" />;\n        case 'xls':\n            return <IconBlankXlsOutline size={iconSize} sizeCustomProperty={tokens.fileThumbSize} color=\"inherit\" />;\n        case 'xlsx':\n            return <IconBlankXlsOutline size={iconSize} sizeCustomProperty={tokens.fileThumbSize} color=\"inherit\" />;\n        case 'txt':\n            return <IconBlankTxtOutline size={iconSize} sizeCustomProperty={tokens.fileThumbSize} color=\"inherit\" />;\n        case 'csv':\n            return <IconBlankCsvOutline size={iconSize} sizeCustomProperty={tokens.fileThumbSize} color=\"inherit\" />;\n        default:\n            return <IconBlankOutline size={iconSize} sizeCustomProperty={tokens.fileThumbSize} color=\"inherit\" />;\n    }\n};\n"],"names":["getFileIcon","extension","size","iconSize","React","createElement","IconBlankPdfOutline","sizeCustomProperty","tokens","fileThumbSize","color","IconBlankDocOutline","IconBlankXlsOutline","IconBlankTxtOutline","IconBlankCsvOutline","IconBlankOutline"],"mappings":";;;;;;;;;;;;;;;;;AAYO,IAAMA,WAAW,GAAG,SAAdA,WAAWA,CAAIC,SAAkB,EAAEC,IAAa,EAAK;EAC9D,IAAMC,QAAQ,GAAGD,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,GAAG,CAAA;AAE3C,EAAA,QAAQD,SAAS;AACb,IAAA,KAAK,KAAK;AACN,MAAA,oBAAOG,sBAAA,CAAAC,aAAA,CAACC,uCAAmB,EAAA;AAACJ,QAAAA,IAAI,EAAEC,QAAS;QAACI,kBAAkB,EAAEC,kBAAM,CAACC,aAAc;AAACC,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AAC5G,IAAA,KAAK,KAAK;AACN,MAAA,oBAAON,sBAAA,CAAAC,aAAA,CAACM,uCAAmB,EAAA;AAACT,QAAAA,IAAI,EAAEC,QAAS;QAACI,kBAAkB,EAAEC,kBAAM,CAACC,aAAc;AAACC,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AAC5G,IAAA,KAAK,MAAM;AACP,MAAA,oBAAON,sBAAA,CAAAC,aAAA,CAACM,uCAAmB,EAAA;AAACT,QAAAA,IAAI,EAAEC,QAAS;QAACI,kBAAkB,EAAEC,kBAAM,CAACC,aAAc;AAACC,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AAC5G,IAAA,KAAK,KAAK;AACN,MAAA,oBAAON,sBAAA,CAAAC,aAAA,CAACO,uCAAmB,EAAA;AAACV,QAAAA,IAAI,EAAEC,QAAS;QAACI,kBAAkB,EAAEC,kBAAM,CAACC,aAAc;AAACC,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AAC5G,IAAA,KAAK,MAAM;AACP,MAAA,oBAAON,sBAAA,CAAAC,aAAA,CAACO,uCAAmB,EAAA;AAACV,QAAAA,IAAI,EAAEC,QAAS;QAACI,kBAAkB,EAAEC,kBAAM,CAACC,aAAc;AAACC,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AAC5G,IAAA,KAAK,KAAK;AACN,MAAA,oBAAON,sBAAA,CAAAC,aAAA,CAACQ,uCAAmB,EAAA;AAACX,QAAAA,IAAI,EAAEC,QAAS;QAACI,kBAAkB,EAAEC,kBAAM,CAACC,aAAc;AAACC,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AAC5G,IAAA,KAAK,KAAK;AACN,MAAA,oBAAON,sBAAA,CAAAC,aAAA,CAACS,uCAAmB,EAAA;AAACZ,QAAAA,IAAI,EAAEC,QAAS;QAACI,kBAAkB,EAAEC,kBAAM,CAACC,aAAc;AAACC,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AAC5G,IAAA;AACI,MAAA,oBAAON,sBAAA,CAAAC,aAAA,CAACU,iCAAgB,EAAA;AAACb,QAAAA,IAAI,EAAEC,QAAS;QAACI,kBAAkB,EAAEC,kBAAM,CAACC,aAAc;AAACC,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AAC7G,GAAA;AACJ;;;;"}

package/dist/css/cjs/components/File/variations/_disabled/base.js

@@ -0,0 +1,9 @@
+require('./base_je3m22.css');
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var base = "bglpt23";
+
+exports.base = base;
+//# sourceMappingURL=base.js.map

package/dist/css/cjs/components/File/variations/_disabled/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","sources":["../../../../../../../src/components/File/variations/_disabled/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../../File.tokens';\nimport { StyledCell } from '../../ui/Cell/Cell.styles';\n\nexport const base = css`\n    &[disabled] {\n        opacity: var(${tokens.fileDisabledOpacity});\n        cursor: not-allowed;\n\n        ${StyledCell} {\n            pointer-events: none;\n        }\n    }\n`;\n"],"names":["base"],"mappings":";;;;AAKO,IAAMA,IAAI,GAShB;;;;"}

package/dist/css/cjs/components/File/variations/_disabled/base_je3m22.css

@@ -0,0 +1 @@
+.bglpt23[disabled]{opacity:var(--plasma-file-disabled-opacity);cursor:not-allowed;}.bglpt23[disabled] .s3czsgs{pointer-events:none;}

package/dist/css/cjs/components/File/variations/_size/base.js

@@ -0,0 +1,9 @@
+require('./base_x642ct.css');
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var base = "baxheq7";
+
+exports.base = base;
+//# sourceMappingURL=base.js.map

package/dist/css/cjs/components/File/variations/_size/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","sources":["../../../../../../../src/components/File/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nexport const base = css``;\n"],"names":["base"],"mappings":";;;;AAEO,IAAMA,IAAI,GAAQ;;;;"}

package/dist/css/cjs/components/File/variations/_size/base_x642ct.css

@@ -0,0 +1 @@
+

package/dist/css/cjs/components/File/variations/_view/base.js

@@ -0,0 +1,9 @@
+require('./base_x642ct.css');
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var base = "bmnv68z";
+
+exports.base = base;
+//# sourceMappingURL=base.js.map

package/dist/css/cjs/components/File/variations/_view/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","sources":["../../../../../../../src/components/File/variations/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nexport const base = css``;\n"],"names":["base"],"mappings":";;;;AAEO,IAAMA,IAAI,GAAQ;;;;"}

package/dist/css/cjs/components/File/variations/_view/base_x642ct.css

@@ -0,0 +1 @@
+

package/dist/css/cjs/components/List/ui/ListItem.js

@@ -11,14 +11,22 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-var _excluded = ["children", "contentRight", "disabled"];
+var _excluded = ["children", "contentRight", "disabled", "onClick"];
 var ListItem = function ListItem(_ref) {
   var children = _ref.children,
     contentRight = _ref.contentRight,
     disabled = _ref.disabled,
+    onClick = _ref.onClick,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var handleClick = function handleClick(event) {
+    if (disabled || !onClick) {
+      return;
+    }
+    onClick(event);
+  };
   return /*#__PURE__*/React__default.default.createElement(ListItem_styles.StyledListItem, _rollupPluginBabelHelpers.extends({
-    className: disabled ? List_tokens.classes.disabledListItem : ''
+    className: disabled ? List_tokens.classes.disabledListItem : '',
+    onClick: handleClick
   }, rest), /*#__PURE__*/React__default.default.createElement(ListItem_styles.CellItem, {
     contentRight: contentRight
   }, children));

package/dist/css/cjs/components/List/ui/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../../../../../src/components/List/ui/ListItem.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\n\nimport { classes } from '../List.tokens';\n\nimport { StyledListItem, CellItem } from './ListItem.styles';\nimport { ListItemProps } from './ListItem.types';\n\nexport const ListItem: React.FC<HTMLAttributes<HTMLLIElement> & ListItemProps> = ({\n    children,\n    contentRight,\n    disabled,\n    ...rest\n}) => {\n    return (\n        <StyledListItem className={disabled ? classes.disabledListItem : ''} {...rest}>\n            <CellItem contentRight={contentRight}>{children}</CellItem>\n        </StyledListItem>\n    );\n};\n"],"names":["ListItem","_ref","children","contentRight","disabled","rest","_objectWithoutProperties","_excluded","React","createElement","StyledListItem","_extends","className","classes","disabledListItem","CellItem"],"mappings":";;;;;;;;;;;;;;IAOaA,QAAiE,GAAG,SAApEA,QAAiEA,CAAAC,IAAA,EAKxE;AAAA,EAAA,IAJFC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,YAAY,GAAAF,IAAA,CAAZE,YAAY;IACZC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;AACLC,IAAAA,IAAI,GAAAC,iDAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA,CAAA;AAEP,EAAA,oBACIC,sBAAA,CAAAC,aAAA,CAACC,8BAAc,EAAAC,iCAAA,CAAA;AAACC,IAAAA,SAAS,EAAER,QAAQ,GAAGS,mBAAO,CAACC,gBAAgB,GAAG,EAAA;AAAG,GAAA,EAAKT,IAAI,CACzEG,eAAAA,sBAAA,CAAAC,aAAA,CAACM,wBAAQ,EAAA;AAACZ,IAAAA,YAAY,EAAEA,YAAAA;GAAeD,EAAAA,QAAmB,CAC9C,CAAC,CAAA;AAEzB;;;;"}
+{"version":3,"file":"ListItem.js","sources":["../../../../../../src/components/List/ui/ListItem.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\n\nimport { classes } from '../List.tokens';\n\nimport { StyledListItem, CellItem } from './ListItem.styles';\nimport { ListItemProps } from './ListItem.types';\n\nexport const ListItem: React.FC<HTMLAttributes<HTMLLIElement> & ListItemProps> = ({\n    children,\n    contentRight,\n    disabled,\n    onClick,\n    ...rest\n}) => {\n    const handleClick = (event: React.MouseEvent<HTMLLIElement>) => {\n        if (disabled || !onClick) {\n            return;\n        }\n\n        onClick(event);\n    };\n\n    return (\n        <StyledListItem className={disabled ? classes.disabledListItem : ''} onClick={handleClick} {...rest}>\n            <CellItem contentRight={contentRight}>{children}</CellItem>\n        </StyledListItem>\n    );\n};\n"],"names":["ListItem","_ref","children","contentRight","disabled","onClick","rest","_objectWithoutProperties","_excluded","handleClick","event","React","createElement","StyledListItem","_extends","className","classes","disabledListItem","CellItem"],"mappings":";;;;;;;;;;;;;;IAOaA,QAAiE,GAAG,SAApEA,QAAiEA,CAAAC,IAAA,EAMxE;AAAA,EAAA,IALFC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,YAAY,GAAAF,IAAA,CAAZE,YAAY;IACZC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;AACJC,IAAAA,IAAI,GAAAC,iDAAA,CAAAN,IAAA,EAAAO,SAAA,CAAA,CAAA;AAEP,EAAA,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAIC,KAAsC,EAAK;AAC5D,IAAA,IAAIN,QAAQ,IAAI,CAACC,OAAO,EAAE;AACtB,MAAA,OAAA;AACJ,KAAA;IAEAA,OAAO,CAACK,KAAK,CAAC,CAAA;GACjB,CAAA;AAED,EAAA,oBACIC,sBAAA,CAAAC,aAAA,CAACC,8BAAc,EAAAC,iCAAA,CAAA;AAACC,IAAAA,SAAS,EAAEX,QAAQ,GAAGY,mBAAO,CAACC,gBAAgB,GAAG,EAAG;AAACZ,IAAAA,OAAO,EAAEI,WAAAA;AAAY,GAAA,EAAKH,IAAI,CAC/FK,eAAAA,sBAAA,CAAAC,aAAA,CAACM,wBAAQ,EAAA;AAACf,IAAAA,YAAY,EAAEA,YAAAA;GAAeD,EAAAA,QAAmB,CAC9C,CAAC,CAAA;AAEzB;;;;"}

package/dist/css/cjs/components/Segment/SegmentProvider/SegmentProvider.js

@@ -27,34 +27,40 @@ var useSegment = function useSegment() {
 var SegmentProvider = function SegmentProvider(_ref) {
   var children = _ref.children,
     defaultSelected = _ref.defaultSelected,
-    singleSelectedRequired = _ref.singleSelectedRequired;
-  var _useState = React.useState(defaultSelected || []),
+    outerSelected = _ref.selected,
+    singleSelectedRequired = _ref.singleSelectedRequired,
+    onChangeSelected = _ref.onChangeSelected;
+  var _useState = React.useState('single'),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    selectedSegmentItems = _useState2[0],
-    setSelectedSegmentItems = _useState2[1];
-  var _useState3 = React.useState('single'),
+    selectionMode = _useState2[0],
+    setSelectionMode = _useState2[1];
+  var _useState3 = React.useState(false),
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    selectionMode = _useState4[0],
-    setSelectionMode = _useState4[1];
-  var _useState5 = React.useState(false),
+    disabledGroup = _useState4[0],
+    setDisabledGroup = _useState4[1];
+  var _useState5 = React.useState(defaultSelected || []),
     _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    disabledGroup = _useState6[0],
-    setDisabledGroup = _useState6[1];
+    selectedSegmentItems = _useState6[0],
+    setSelectedSegmentItems = _useState6[1];
+  var selected = outerSelected !== null && outerSelected !== void 0 ? outerSelected : selectedSegmentItems;
   var handleSelect = function handleSelect(label) {
     if (selectionMode !== 'multiple') {
       setSelectedSegmentItems(function (prevSelected) {
         return prevSelected.includes(label) && !singleSelectedRequired ? [] : [label];
       });
-      return;
+    } else {
+      setSelectedSegmentItems(function (prevSelected) {
+        return prevSelected.includes(label) && !singleSelectedRequired && prevSelected.length !== 1 ? prevSelected.filter(function (item) {
+          return item !== label;
+        }) : [].concat(_rollupPluginBabelHelpers.toConsumableArray(prevSelected), [label]);
+      });
+    }
+    if (onChangeSelected) {
+      onChangeSelected(label);
     }
-    setSelectedSegmentItems(function (prevSelected) {
-      return prevSelected.includes(label) && !singleSelectedRequired && prevSelected.length !== 1 ? prevSelected.filter(function (item) {
-        return item !== label;
-      }) : [].concat(_rollupPluginBabelHelpers.toConsumableArray(prevSelected), [label]);
-    });
   };
   var contextValue = {
-    selectedSegmentItems: selectedSegmentItems,
+    selectedSegmentItems: selected,
     setSelectedSegmentItems: setSelectedSegmentItems,
     handleSelect: handleSelect,
     selectionMode: selectionMode,

package/dist/css/cjs/components/Segment/SegmentProvider/SegmentProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentProvider.js","sources":["../../../../../../src/components/Segment/SegmentProvider/SegmentProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useState } from 'react';\nimport type { FC } from 'react';\n\nimport { SegmentContextType, SegmentProviderProps, SegmentSelectionMode } from './SegmentProvider.types';\n\nexport const SegmentContext = createContext<SegmentContextType | undefined>(undefined);\n\nexport const useSegmentInner = () => {\n    const context = useContext(SegmentContext);\n    if (!context) {\n        throw new Error('useSegment must be used within a SegmentProvider');\n    }\n    return context;\n};\n\nexport const useSegment = () => {\n    const { selectedSegmentItems } = useSegmentInner();\n    return { selectedSegmentItems };\n};\n\nexport const SegmentProvider: FC<SegmentProviderProps> = ({ children, defaultSelected, singleSelectedRequired }) => {\n    const [selectedSegmentItems, setSelectedSegmentItems] = useState<string[]>(defaultSelected || []);\n    const [selectionMode, setSelectionMode] = useState<SegmentSelectionMode>('single');\n    const [disabledGroup, setDisabledGroup] = useState(false);\n\n    const handleSelect = (label: string) => {\n        if (selectionMode !== 'multiple') {\n            setSelectedSegmentItems((prevSelected) =>\n                prevSelected.includes(label) && !singleSelectedRequired ? [] : [label],\n            );\n\n            return;\n        }\n\n        setSelectedSegmentItems((prevSelected) =>\n            prevSelected.includes(label) && !singleSelectedRequired && prevSelected.length !== 1\n                ? prevSelected.filter((item) => item !== label)\n                : [...prevSelected, label],\n        );\n    };\n\n    const contextValue: SegmentContextType = {\n        selectedSegmentItems,\n        setSelectedSegmentItems,\n        handleSelect,\n        selectionMode,\n        setSelectionMode,\n        disabledGroup,\n        setDisabledGroup,\n    };\n\n    return <SegmentContext.Provider value={contextValue}>{children}</SegmentContext.Provider>;\n};\n"],"names":["SegmentContext","createContext","undefined","useSegmentInner","context","useContext","Error","useSegment","_useSegmentInner","selectedSegmentItems","SegmentProvider","_ref","children","defaultSelected","singleSelectedRequired","_useState","useState","_useState2","_slicedToArray","setSelectedSegmentItems","_useState3","_useState4","selectionMode","setSelectionMode","_useState5","_useState6","disabledGroup","setDisabledGroup","handleSelect","label","prevSelected","includes","length","filter","item","concat","_toConsumableArray","contextValue","React","createElement","Provider","value"],"mappings":"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"}
+{"version":3,"file":"SegmentProvider.js","sources":["../../../../../../src/components/Segment/SegmentProvider/SegmentProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useState } from 'react';\nimport type { FC } from 'react';\n\nimport { SegmentContextType, SegmentProviderProps, SegmentSelectionMode } from './SegmentProvider.types';\n\nexport const SegmentContext = createContext<SegmentContextType | undefined>(undefined);\n\nexport const useSegmentInner = () => {\n    const context = useContext(SegmentContext);\n    if (!context) {\n        throw new Error('useSegment must be used within a SegmentProvider');\n    }\n    return context;\n};\n\nexport const useSegment = () => {\n    const { selectedSegmentItems } = useSegmentInner();\n    return { selectedSegmentItems };\n};\n\nexport const SegmentProvider: FC<SegmentProviderProps> = ({\n    children,\n    defaultSelected,\n    selected: outerSelected,\n    singleSelectedRequired,\n\n    onChangeSelected,\n}) => {\n    const [selectionMode, setSelectionMode] = useState<SegmentSelectionMode>('single');\n    const [disabledGroup, setDisabledGroup] = useState(false);\n\n    const [selectedSegmentItems, setSelectedSegmentItems] = useState<string[]>(defaultSelected || []);\n    const selected = outerSelected ?? selectedSegmentItems;\n\n    const handleSelect = (label: string) => {\n        if (selectionMode !== 'multiple') {\n            setSelectedSegmentItems((prevSelected) =>\n                prevSelected.includes(label) && !singleSelectedRequired ? [] : [label],\n            );\n        } else {\n            setSelectedSegmentItems((prevSelected) =>\n                prevSelected.includes(label) && !singleSelectedRequired && prevSelected.length !== 1\n                    ? prevSelected.filter((item) => item !== label)\n                    : [...prevSelected, label],\n            );\n        }\n\n        if (onChangeSelected) {\n            onChangeSelected(label);\n        }\n    };\n\n    const contextValue: SegmentContextType = {\n        selectedSegmentItems: selected,\n        setSelectedSegmentItems,\n        handleSelect,\n        selectionMode,\n        setSelectionMode,\n        disabledGroup,\n        setDisabledGroup,\n    };\n\n    return <SegmentContext.Provider value={contextValue}>{children}</SegmentContext.Provider>;\n};\n"],"names":["SegmentContext","createContext","undefined","useSegmentInner","context","useContext","Error","useSegment","_useSegmentInner","selectedSegmentItems","SegmentProvider","_ref","children","defaultSelected","outerSelected","selected","singleSelectedRequired","onChangeSelected","_useState","useState","_useState2","_slicedToArray","selectionMode","setSelectionMode","_useState3","_useState4","disabledGroup","setDisabledGroup","_useState5","_useState6","setSelectedSegmentItems","handleSelect","label","prevSelected","includes","length","filter","item","concat","_toConsumableArray","contextValue","React","createElement","Provider","value"],"mappings":"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"}

package/dist/css/cjs/components/TimePicker/TimePicker.css

@@ -87,11 +87,10 @@
 .TimeColumn_styles_pwqkan_s1h9xdi8__03d41c8e{position:absolute;top:0;left:0;width:100%;background:var(--plasma-time-picker-grid-scrollbar-color);border-radius:var(--plasma-time-picker-grid-scrollbar-width);cursor:pointer;-webkit-transition:background-color 0.2s ease;transition:background-color 0.2s ease;}.TimeColumn_styles_pwqkan_s1h9xdi8__03d41c8e:hover{background:var(--plasma-time-picker-grid-scrollbar-color);}.TimeColumn_styles_pwqkan_s1h9xdi8__03d41c8e:active{background:var(--plasma-time-picker-grid-scrollbar-track-color);}
 .TimeColumn_styles_pwqkan_s1dt15pt__03d41c8e{width:100%;height:0%.125rem;}
 
-.TimePicker_styles_4gnnon_s8csojw__6ae269d2 .TimePicker_styles_4gnnon_popoverRoot__6ae269d2{--plasma-popover-box-shadow:var(--plasma-time-picker-ui-box-shadow);border-radius:var(--plasma-time-picker-ui-border-radius);}
-.TimePicker_styles_4gnnon_s1ghbm1p__6ae269d2{--plasma-time-picker-grid-grid-background:var(--plasma-time-picker-ui-background);--plasma-time-picker-grid-grid-border-radius:var(--plasma-time-picker-ui-border-radius);--plasma-time-picker-grid-grid-width:var(--plasma-time-picker-ui-width);--plasma-time-picker-grid-grid-padding:var(--plasma-time-picker-ui-padding);--plasma-time-picker-grid-disabled-opacity:var(--plasma-time-picker-disabled-opacity);--plasma-time-picker-grid-column-height:var(--plasma-time-picker-column-height);--plasma-time-picker-grid-item-height:var(--plasma-time-picker-item-height);--plasma-time-picker-grid-item-border-radius:var(--plasma-time-picker-item-border-radius);--plasma-time-picker-grid-item-padding:var(--plasma-time-picker-item-padding);--plasma-time-picker-grid-item-hover-background:var(--plasma-time-picker-item-hover-background);--plasma-time-picker-grid-item-active-background:var(--plasma-time-picker-item-active-background);--plasma-time-picker-grid-item-focus-color:var(--plasma-time-picker-item-focus-color);--plasma-time-picker-grid-item-font-family:var(--plasma-time-picker-item-font-family);--plasma-time-picker-grid-item-font-size:var(--plasma-time-picker-item-font-size);--plasma-time-picker-grid-item-font-style:var(--plasma-time-picker-item-font-style);--plasma-time-picker-grid-item-font-weight:var(--plasma-time-picker-item-font-weight);--plasma-time-picker-grid-item-letter-spacing:var(--plasma-time-picker-item-letter-spacing);--plasma-time-picker-grid-item-line-height:var(--plasma-time-picker-item-line-height);--plasma-time-picker-grid-scrollbar-width:var(--plasma-time-picker-scrollbar-width);--plasma-time-picker-grid-scrollbar-color:var(--plasma-time-picker-scrollbar-color);--plasma-time-picker-grid-scrollbar-track-color:var(--plasma-time-picker-scrollbar-track-color);--plasma-time-picker-grid-scrollbar-margin:var(--plasma-time-picker-scrollbar-margin);}
-.TimePicker_styles_4gnnon_s19h9m1x__6ae269d2{width:100%;--plasma-textfield-color:var(--plasma-time-picker-textfield-color);--plasma-textfield__placeholder-color:var(--plasma-time-picker-textfield-placeholder-color);--plasma-textfield__placeholder-color-focus:var(--plasma-timepicker-textfield__placeholder-color-focus);--plasma-textfield__caret-color:var(--plasma-time-picker-textfield-caret-color);--plasma-textfield-focus-color:var(--plasma-time-picker-textfield-focus-color);--plasma-textfield-bg-color:var(--plasma-time-picker-textfield-background-color);--plasma-textfield-bg-color-hover:var(--plasma-time-picker-textfield-background-color-hover);--plasma-textfield-bg-color-focus:var(--plasma-time-picker-textfield-background-color-focus);--plasma-textfield-border-color:var(--plasma-time-picker_range-border-color);--plasma-textfield-border-color-hover:var(--plasma-time-picker_range-border-color-hover);--plasma-textfield-border-color-focus:var(--plasma-time-picker_range-border-color-focus);--plasma-textfield-box-shadow:var(--plasma-time-picker-textfield-box-shadow);--plasma-textfield-color-readonly:var(--plasma-time-picker-textfield-color-readonly);--plasma-textfield-bg-color-readonly:var(--plasma-time-picker-textfield-background-color-readonly);--plasma-textfield-border-color-readonly:var(--plasma-time-picker-textfield-border-color-readonly);--plasma-textfield__placeholder-color-readonly:var(--plasma-time-picker-textfield-placeholder-color-readonly);--plasma-textfield-height:var(--plasma-time-picker-textfield-height);--plasma-textfield-border-width:var(--plasma-time-picker-textfield-border-width);--plasma-textfield-border-radius:var(--plasma-time-picker-textfield-border-radius);--plasma-textfield-padding:var(--plasma-time-picker-textfield-padding);--plasma-textfield-placement_inner__label-padding:var(--plasma-time-picker-placement_inner__label-padding);--plasma-textfield-placement_inner__content-padding:var(--plasma-time-picker-placement_inner__content-padding);--plasma-textfield__label-offset:var(--plasma-time-picker__label-offset);--plasma-textfield__label-font-family:var(--plasma-time-picker__label-font-family);--plasma-textfield__label-font-style:var(--plasma-time-picker__label-font-style);--plasma-textfield__label-font-size:var(--plasma-time-picker__label-font-size);--plasma-textfield__label-font-weight:var(--plasma-time-picker__label-font-weight);--plasma-textfield__label-letter-spacing:var(--plasma-time-picker__label-letter-spacing);--plasma-textfield__label-line-height:var(--plasma-time-picker__label-line-height);--plasma-textfield-placement_inner__label-font-family:var(--plasma-time-picker-placement_inner__label-font-family);--plasma-textfield-placement_inner__label-font-size:var(--plasma-time-picker-placement_inner__label-font-size);--plasma-textfield-placement_inner__label-font-style:var(--plasma-time-picker-placement_inner__label-font-style);--plasma-textfield-placement_inner__label-font-weight:var(--plasma-time-picker-placement_inner__label-font-weight);--plasma-textfield-placement_inner__label-letter-spacing:var(--plasma-time-picker-placement_inner__label-letter-spacing);--plasma-textfield-placement_inner__label-line-height:var(--plasma-time-picker-placement_inner__label-line-height);--plasma-textfield__label-color-readonly:var(--plasma-time-picker__label-color-readonly);--plasma-textfield__indicator-color:var(--plasma-time-picker__indicator-color);--plasma-textfield__indicator-size-inner:var(--plasma-time-picker__indicator-size);--plasma-textfield__indicator-size-outer:var(--plasma-time-picker__indicator-size-outer);--plasma-textfield__indicator-placement-inner:var(--plasma-time-picker__indicator-placement);--plasma-textfield__indicator-placement-outer:var(--plasma-time-picker__indicator-placement-outer);--plasma-textfield__indicator-placement-inner-right:var(--plasma-time-picker__indicator-placement-right);--plasma-textfield__indicator-placement-outer-right:var(--plasma-time-picker__indicator-placement-outer-right);--plasma-textfield__left-content-margin:var(--plasma-time-picker-textfield__left-content-margin);--plasma-textfield__right-content-margin:var(--plasma-time-picker-textfield__right-content-margin);--plasma-textfield-font-family:var(--plasma-time-picker-textfield-font-family);--plasma-textfield-font-size:var(--plasma-time-picker-textfield-font-size);--plasma-textfield-font-style:var(--plasma-time-picker-textfield-font-style);--plasma-textfield-font-weight:var(--plasma-time-picker-textfield-font-weight);--plasma-textfield-letter-spacing:var(--plasma-time-picker-textfield-letter-spacing);--plasma-textfield-line-height:var(--plasma-time-picker-textfield-line-height);--plasma-textfield-disabled-opacity:var(--plasma-time-picker-disabled-opacity);--plasma-textfield__before-text-color:var(--plasma-time-picker-textfield__before-text-color);--plasma-textfield__after-text-color:var(--plasma-time-picker-textfield__after-text-color);--plasma-textfield__before-text-margin:var(--plasma-time-picker-textfield__before-text-margin);--plasma-textfield__after-text-margin:var(--plasma-time-picker-textfield__after-text-margin);--plasma-textfield-content-slot-color:var(--plasma-time-picker-textfield__content-color,var(--plasma-time-picker-textfield-color));--plasma-textfield-content-right-slot-color:var(--plasma-time-picker-textfield__content-right-color,var(--plasma-textfield-content-slot-color));--plasma-textfield-content-right-slot-color-hover:var(--plasma-time-picker-textfield__content-right-color-hover,var(--plasma-textfield-content-right-slot-color));}.TimePicker_styles_4gnnon_s19h9m1x__6ae269d2.TimePicker_styles_4gnnon_plasmaTimePickerError__6ae269d2{--plasma-textfield-bg-color:var(--plasma-time-picker-textfield-background-color-error);--plasma-textfield-bg-color-hover:var(--plasma-time-picker-textfield-background-color-error-hover);--plasma-textfield-bg-color-focus:var(--plasma-time-picker-textfield-background-color-error-focus);--plasma-textfield-border-color:var(--plasma-time-picker-textfield-border-color-error);--plasma-textfield-border-color-hover:var(--plasma-time-picker-textfield-border-color-error-hover);--plasma-textfield-border-color-focus:var(--plasma-time-picker-textfield-border-color-error-focus);}.TimePicker_styles_4gnnon_s19h9m1x__6ae269d2.TimePicker_styles_4gnnon_plasmaTimePickerSuccess__6ae269d2{--plasma-textfield-bg-color:var(--plasma-time-picker-textfield-background-color-success);--plasma-textfield-bg-color-hover:var(--plasma-time-picker-textfield-background-color-success-hover);--plasma-textfield-bg-color-focus:var(--plasma-time-picker-textfield-background-color-success-focus);--plasma-textfield-border-color:var(--plasma-time-picker-textfield-border-color-success);--plasma-textfield-border-color-hover:var(--plasma-time-picker-textfield-border-color-success-hover);--plasma-textfield-border-color-focus:var(--plasma-time-picker-textfield-border-color-success-focus);}
-.TimePicker_styles_4gnnon_blnaiay__6ae269d2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:var(--plasma-time-picker-width);margin-top:var(--plasma-time-picker-dropdown-margin-top);}.TimePicker_styles_4gnnon_blnaiay__6ae269d2 .TimePicker_styles_4gnnon_popoverWrapper__6ae269d2,.TimePicker_styles_4gnnon_blnaiay__6ae269d2 .TimePicker_styles_4gnnon_popoverTarget__6ae269d2{width:inherit;}.TimePicker_styles_4gnnon_blnaiay__6ae269d2.TimePicker_styles_4gnnon_plasmaTimePickerStretched__6ae269d2{width:100%;}.TimePicker_styles_4gnnon_blnaiay__6ae269d2.TimePicker_styles_4gnnon_plasmaTimePickerStretched__6ae269d2 .TimePicker_styles_4gnnon_popoverRoot__6ae269d2{width:100%;}.TimePicker_styles_4gnnon_blnaiay__6ae269d2.TimePicker_styles_4gnnon_plasmaTimePickerFullWidth__6ae269d2{width:100%;}.TimePicker_styles_4gnnon_blnaiay__6ae269d2.TimePicker_styles_4gnnon_plasmaTimePickerPlacementRight__6ae269d2{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}.TimePicker_styles_4gnnon_blnaiay__6ae269d2.TimePicker_styles_4gnnon_plasmaTimePickerFixed__6ae269d2{width:var(--plasma-time-picker-ui-width);}
-.TimePicker_styles_4gnnon_sh0cawu__6ae269d2{background:var(--plasma-time-picker-ui-background);border-radius:var(--plasma-time-picker-ui-border-radius);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:var(--plasma-time-picker-ui-padding);-webkit-flex:1 1 1;-ms-flex:1 1 1;flex:1 1 1;gap:var(--plasma-time-picker-scrollbar-width);box-sizing:border-box;position:relative;}
+.TimePicker_styles_pjtqa7_s8csojw__9abe4b14 .TimePicker_styles_pjtqa7_popoverRoot__9abe4b14{overflow:hidden;width:100%;}
+.TimePicker_styles_pjtqa7_s1ghbm1p__9abe4b14{--plasma-time-picker-grid-disabled-opacity:var(--plasma-time-picker-disabled-opacity);--plasma-time-picker-grid-item-height:var(--plasma-time-picker-item-height);--plasma-time-picker-grid-item-border-radius:var(--plasma-time-picker-item-border-radius);--plasma-time-picker-grid-item-padding:var(--plasma-time-picker-item-padding);--plasma-time-picker-grid-item-hover-background:var(--plasma-time-picker-item-hover-background);--plasma-time-picker-grid-item-active-background:var(--plasma-time-picker-item-active-background);--plasma-time-picker-grid-item-focus-color:var(--plasma-time-picker-item-focus-color);--plasma-time-picker-grid-item-font-family:var(--plasma-time-picker-item-font-family);--plasma-time-picker-grid-item-font-size:var(--plasma-time-picker-item-font-size);--plasma-time-picker-grid-item-font-style:var(--plasma-time-picker-item-font-style);--plasma-time-picker-grid-item-font-weight:var(--plasma-time-picker-item-font-weight);--plasma-time-picker-grid-item-letter-spacing:var(--plasma-time-picker-item-letter-spacing);--plasma-time-picker-grid-item-line-height:var(--plasma-time-picker-item-line-height);--plasma-time-picker-grid-scrollbar-width:var(--plasma-time-picker-scrollbar-width);--plasma-time-picker-grid-scrollbar-color:var(--plasma-time-picker-scrollbar-color);--plasma-time-picker-grid-scrollbar-track-color:var(--plasma-time-picker-scrollbar-track-color);--plasma-time-picker-grid-scrollbar-margin:var(--plasma-time-picker-scrollbar-margin);background:var(--plasma-time-picker-ui-background);border-radius:var(--plasma-time-picker-ui-border-radius);padding:var(--plasma-time-picker-ui-padding);box-shadow:var(--plasma-time-picker-ui-box-shadow);width:var(--s1ghbm1p-0);height:var(--s1ghbm1p-1);}
+.TimePicker_styles_pjtqa7_s19h9m1x__9abe4b14{width:100%;--plasma-textfield-color:var(--plasma-time-picker-textfield-color);--plasma-textfield__placeholder-color:var(--plasma-time-picker-textfield-placeholder-color);--plasma-textfield__placeholder-color-focus:var(--plasma-timepicker-textfield__placeholder-color-focus);--plasma-textfield__caret-color:var(--plasma-time-picker-textfield-caret-color);--plasma-textfield-focus-color:var(--plasma-time-picker-textfield-focus-color);--plasma-textfield-bg-color:var(--plasma-time-picker-textfield-background-color);--plasma-textfield-bg-color-hover:var(--plasma-time-picker-textfield-background-color-hover);--plasma-textfield-bg-color-focus:var(--plasma-time-picker-textfield-background-color-focus);--plasma-textfield-border-color:var(--plasma-time-picker_range-border-color);--plasma-textfield-border-color-hover:var(--plasma-time-picker_range-border-color-hover);--plasma-textfield-border-color-focus:var(--plasma-time-picker_range-border-color-focus);--plasma-textfield-box-shadow:var(--plasma-time-picker-textfield-box-shadow);--plasma-textfield-color-readonly:var(--plasma-time-picker-textfield-color-readonly);--plasma-textfield-bg-color-readonly:var(--plasma-time-picker-textfield-background-color-readonly);--plasma-textfield-border-color-readonly:var(--plasma-time-picker-textfield-border-color-readonly);--plasma-textfield__placeholder-color-readonly:var(--plasma-time-picker-textfield-placeholder-color-readonly);--plasma-textfield-height:var(--plasma-time-picker-textfield-height);--plasma-textfield-border-width:var(--plasma-time-picker-textfield-border-width);--plasma-textfield-border-radius:var(--plasma-time-picker-textfield-border-radius);--plasma-textfield-padding:var(--plasma-time-picker-textfield-padding);--plasma-textfield-placement_inner__label-padding:var(--plasma-time-picker-placement_inner__label-padding);--plasma-textfield-placement_inner__content-padding:var(--plasma-time-picker-placement_inner__content-padding);--plasma-textfield__label-offset:var(--plasma-time-picker__label-offset);--plasma-textfield__label-font-family:var(--plasma-time-picker__label-font-family);--plasma-textfield__label-font-style:var(--plasma-time-picker__label-font-style);--plasma-textfield__label-font-size:var(--plasma-time-picker__label-font-size);--plasma-textfield__label-font-weight:var(--plasma-time-picker__label-font-weight);--plasma-textfield__label-letter-spacing:var(--plasma-time-picker__label-letter-spacing);--plasma-textfield__label-line-height:var(--plasma-time-picker__label-line-height);--plasma-textfield-placement_inner__label-font-family:var(--plasma-time-picker-placement_inner__label-font-family);--plasma-textfield-placement_inner__label-font-size:var(--plasma-time-picker-placement_inner__label-font-size);--plasma-textfield-placement_inner__label-font-style:var(--plasma-time-picker-placement_inner__label-font-style);--plasma-textfield-placement_inner__label-font-weight:var(--plasma-time-picker-placement_inner__label-font-weight);--plasma-textfield-placement_inner__label-letter-spacing:var(--plasma-time-picker-placement_inner__label-letter-spacing);--plasma-textfield-placement_inner__label-line-height:var(--plasma-time-picker-placement_inner__label-line-height);--plasma-textfield__label-color-readonly:var(--plasma-time-picker__label-color-readonly);--plasma-textfield__indicator-color:var(--plasma-time-picker__indicator-color);--plasma-textfield__indicator-size-inner:var(--plasma-time-picker__indicator-size);--plasma-textfield__indicator-size-outer:var(--plasma-time-picker__indicator-size-outer);--plasma-textfield__indicator-placement-inner:var(--plasma-time-picker__indicator-placement);--plasma-textfield__indicator-placement-outer:var(--plasma-time-picker__indicator-placement-outer);--plasma-textfield__indicator-placement-inner-right:var(--plasma-time-picker__indicator-placement-right);--plasma-textfield__indicator-placement-outer-right:var(--plasma-time-picker__indicator-placement-outer-right);--plasma-textfield__left-content-margin:var(--plasma-time-picker-textfield__left-content-margin);--plasma-textfield__right-content-margin:var(--plasma-time-picker-textfield__right-content-margin);--plasma-textfield-font-family:var(--plasma-time-picker-textfield-font-family);--plasma-textfield-font-size:var(--plasma-time-picker-textfield-font-size);--plasma-textfield-font-style:var(--plasma-time-picker-textfield-font-style);--plasma-textfield-font-weight:var(--plasma-time-picker-textfield-font-weight);--plasma-textfield-letter-spacing:var(--plasma-time-picker-textfield-letter-spacing);--plasma-textfield-line-height:var(--plasma-time-picker-textfield-line-height);--plasma-textfield-disabled-opacity:var(--plasma-time-picker-disabled-opacity);--plasma-textfield__before-text-color:var(--plasma-time-picker-textfield__before-text-color);--plasma-textfield__after-text-color:var(--plasma-time-picker-textfield__after-text-color);--plasma-textfield__before-text-margin:var(--plasma-time-picker-textfield__before-text-margin);--plasma-textfield__after-text-margin:var(--plasma-time-picker-textfield__after-text-margin);--plasma-textfield-content-slot-color:var(--plasma-time-picker-textfield__content-color,var(--plasma-time-picker-textfield-color));--plasma-textfield-content-right-slot-color:var(--plasma-time-picker-textfield__content-right-color,var(--plasma-textfield-content-slot-color));--plasma-textfield-content-right-slot-color-hover:var(--plasma-time-picker-textfield__content-right-color-hover,var(--plasma-textfield-content-right-slot-color));}.TimePicker_styles_pjtqa7_s19h9m1x__9abe4b14.TimePicker_styles_pjtqa7_plasmaTimePickerError__9abe4b14{--plasma-textfield-bg-color:var(--plasma-time-picker-textfield-background-color-error);--plasma-textfield-bg-color-hover:var(--plasma-time-picker-textfield-background-color-error-hover);--plasma-textfield-bg-color-focus:var(--plasma-time-picker-textfield-background-color-error-focus);--plasma-textfield-border-color:var(--plasma-time-picker-textfield-border-color-error);--plasma-textfield-border-color-hover:var(--plasma-time-picker-textfield-border-color-error-hover);--plasma-textfield-border-color-focus:var(--plasma-time-picker-textfield-border-color-error-focus);}.TimePicker_styles_pjtqa7_s19h9m1x__9abe4b14.TimePicker_styles_pjtqa7_plasmaTimePickerSuccess__9abe4b14{--plasma-textfield-bg-color:var(--plasma-time-picker-textfield-background-color-success);--plasma-textfield-bg-color-hover:var(--plasma-time-picker-textfield-background-color-success-hover);--plasma-textfield-bg-color-focus:var(--plasma-time-picker-textfield-background-color-success-focus);--plasma-textfield-border-color:var(--plasma-time-picker-textfield-border-color-success);--plasma-textfield-border-color-hover:var(--plasma-time-picker-textfield-border-color-success-hover);--plasma-textfield-border-color-focus:var(--plasma-time-picker-textfield-border-color-success-focus);}
+.TimePicker_styles_pjtqa7_blnaiay__9abe4b14{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:var(--plasma-time-picker-width);margin-top:var(--plasma-time-picker-dropdown-margin-top);}.TimePicker_styles_pjtqa7_blnaiay__9abe4b14 .TimePicker_styles_pjtqa7_popoverWrapper__9abe4b14,.TimePicker_styles_pjtqa7_blnaiay__9abe4b14 .TimePicker_styles_pjtqa7_popoverTarget__9abe4b14{width:inherit;}.TimePicker_styles_pjtqa7_blnaiay__9abe4b14.TimePicker_styles_pjtqa7_plasmaTimePickerStretched__9abe4b14{width:100%;}.TimePicker_styles_pjtqa7_blnaiay__9abe4b14.TimePicker_styles_pjtqa7_plasmaTimePickerStretched__9abe4b14 .TimePicker_styles_pjtqa7_popoverRoot__9abe4b14{width:100%;}.TimePicker_styles_pjtqa7_blnaiay__9abe4b14.TimePicker_styles_pjtqa7_plasmaTimePickerGridRoot__9abe4b14{width:100%;height:100%;}.TimePicker_styles_pjtqa7_blnaiay__9abe4b14.TimePicker_styles_pjtqa7_plasmaTimePickerPlacementRight__9abe4b14{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}
 
 .base_nyid0i_bxyi89k__8a89f178[disabled]{opacity:var(--plasma-time-picker-disabled-opacity);cursor:not-allowed;}
 

package/dist/css/cjs/components/TimePicker/TimePicker.js

@@ -14,6 +14,7 @@ var base = require('./variations/_view/base.js');
 var base$2 = require('./variations/_disabled/base.js');
 var base$3 = require('./variations/_readonly/base.js');
 var useKeyboardNavigation = require('./hooks/useKeyboardNavigation.js');
+var getSizeValueFromProp = require('../../utils/getSizeValueFromProp.js');
 var getPopoverPlacement = require('../../utils/getPopoverPlacement.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -73,6 +74,7 @@ var timePickerRoot = function timePickerRoot(Root) {
       onChange = _ref.onChange,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
     var inputRef = React.useRef(null);
+    var timeGridRootRef = React.useRef(null);
     var rootRef = React.useRef(null);
     var rootForkRef = plasmaCore.useForkRef(rootRef, ref);
     var hoursHideTimeoutRef = React.useRef(null);
@@ -100,6 +102,8 @@ var timePickerRoot = function timePickerRoot(Root) {
       setActiveTime = _useState8[1];
     var viewValue = outerValue !== null && outerValue !== void 0 ? outerValue : innerTime;
     var format = columnsQuantity === 3 ? 'HH:mm:ss' : 'HH:mm';
+    var dropdownWidthValue = dropdownWidth ? getSizeValueFromProp.getSizeValueFromProp(dropdownWidth, 'rem') : undefined;
+    var dropdownHeightValue = dropdownHeight ? getSizeValueFromProp.getSizeValueFromProp(dropdownHeight, 'rem') : undefined;
     React.useEffect(function () {
       return function () {
         [hoursHideTimeoutRef, minutesHideTimeoutRef, secondsHideTimeoutRef].forEach(function (timeoutRef) {
@@ -217,6 +221,17 @@ var timePickerRoot = function timePickerRoot(Root) {
       onKeyDownNavigation(e);
       handleKeyDown(e);
     };
+    var handleTimeGridRootClick = function handleTimeGridRootClick(event) {
+      if (disabled || readonly) {
+        return;
+      }
+      if (isInnerOpen && stretched && event.target === (timeGridRootRef === null || timeGridRootRef === void 0 ? void 0 : timeGridRootRef.current)) {
+        setIsInnerOpen(false);
+        if (onToggle) {
+          onToggle(false, event);
+        }
+      }
+    };
     var _useKeyNavigation = useKeyboardNavigation.useKeyNavigation({
         isCalendarOpen: isInnerOpen,
         format: format,
@@ -248,13 +263,13 @@ var timePickerRoot = function timePickerRoot(Root) {
       keepPlaceholder: keepPlaceholder
     });
     var getDropdownWidth = function getDropdownWidth() {
-      if (dropdownWidth === 'fixed' || dropdownWidth === undefined) {
+      if (dropdownWidthValue === 'fixed' || dropdownWidthValue === undefined) {
         return undefined;
       }
-      if (dropdownWidth === 'fullWidth') {
-        return rootWidth !== null ? "".concat(rootWidth, "px") : 'fullWidth';
+      if (dropdownWidthValue === 'fullWidth' && rootWidth !== null) {
+        return "".concat(rootWidth, "px");
       }
-      return dropdownWidth;
+      return dropdownWidthValue;
     };
     return /*#__PURE__*/React__default.default.createElement(Root, _rollupPluginBabelHelpers.extends({
       stretched: stretched,
@@ -277,23 +292,27 @@ var timePickerRoot = function timePickerRoot(Root) {
       target: TimePickerInput,
       preventOverflow: false,
       align: dropdownAlign
-    }, /*#__PURE__*/React__default.default.createElement(Root, _rollupPluginBabelHelpers.extends({
+    }, /*#__PURE__*/React__default.default.createElement(Root, {
+      ref: timeGridRootRef,
       stretched: stretched,
       view: view,
       size: size,
-      className: cls__default.default(TimePicker_tokens.classes.timePickerRoot, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, TimePicker_tokens.classes.timePickerFullWidth, dropdownWidth === 'fullWidth'), TimePicker_tokens.classes.timePickerFixed, dropdownWidth !== 'fullWidth')),
+      className: cls__default.default(TimePicker_tokens.classes.timePickerGridRoot, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, TimePicker_tokens.classes.timePickerFullWidth, dropdownWidth === 'fullWidth'), TimePicker_tokens.classes.timePickerFixed, dropdownWidth !== 'fullWidth')),
       disabled: disabled,
-      readonly: readonly
-    }, rest), /*#__PURE__*/React__default.default.createElement(TimePicker_styles.StyledTimePickerGrid, {
-      value: viewValue,
-      onChange: handleOnChange,
-      dropdownHeight: dropdownHeight,
-      dropdownWidth: getDropdownWidth(),
-      format: format,
+      readonly: readonly,
+      onClick: handleTimeGridRootClick
+    }, /*#__PURE__*/React__default.default.createElement(TimePicker_styles.StyledTimePickerGrid, {
       view: view,
       size: size,
-      disabled: disabled,
-      width: getDropdownWidth()
+      format: format,
+      columns: columnsQuantity,
+      innerWidth: getDropdownWidth(),
+      innerHeight: dropdownHeightValue,
+      dropdownHeight: "100%",
+      dropdownWidth: "fullWidth",
+      value: viewValue,
+      onChange: handleOnChange,
+      disabled: disabled
     }))));
   });
 };