pds-dev-kit-web-test 2.6.3 → 2.6.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/src/desktop/components/EditApplyTextField/EditApplyTextField.d.ts +3 -1
  2. package/dist/src/desktop/components/EditApplyTextField/EditApplyTextField.js +21 -10
  3. package/dist/src/desktop/components/TextField/TextField.d.ts +3 -1
  4. package/dist/src/desktop/components/TextField/TextField.js +22 -11
  5. package/dist/src/desktop/panels/ContentSheet/ContentSheet.d.ts +1 -4
  6. package/dist/src/desktop/panels/ContentSheet/ContentSheet.js +3 -11
  7. package/dist/src/desktop/panels/SectionSheet/SectionSheet.d.ts +1 -4
  8. package/dist/src/desktop/panels/SectionSheet/SectionSheet.js +3 -11
  9. package/dist/src/mobile/panels/ContentSheet/ContentSheet.d.ts +1 -4
  10. package/dist/src/mobile/panels/ContentSheet/ContentSheet.js +3 -11
  11. package/dist/src/mobile/panels/SectionSheet/SectionSheet.d.ts +1 -4
  12. package/dist/src/mobile/panels/SectionSheet/SectionSheet.js +3 -11
  13. package/package.json +1 -1
package/dist/src/desktop/components/EditApplyTextField/EditApplyTextField.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { Path } from 'react-hook-form';
3
3
  import type { PDSTextType, IFormValues } from '../../../common';
4
+ import type { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
4
5
  export type EditApplyTextFieldProps = {
5
6
  name: Path<IFormValues>;
6
7
  hintText?: PDSTextType;
@@ -21,6 +22,7 @@ export type EditApplyTextFieldProps = {
21
22
  maxLength?: number;
22
23
  min?: number;
23
24
  customWidth?: string;
25
+ scrollVisibleType?: ScrollVisibleType;
24
26
  onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
25
27
  onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
26
28
  onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
@@ -30,5 +32,5 @@ export type EditApplyTextFieldProps = {
30
32
  /** @deprecated v1.5 해당 prop 대신 Form의 onSubmit을 사용하세요. */
31
33
  onClickSubmitBtn?: (...args: any) => any;
32
34
  };
33
- declare function EditApplyTextField({ name, hintText, defaultText, validation, preventBlankMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, max, maxLength, min, customWidth, getInputValue, onBlur, onChange, onClickSubmitBtn, onFocus, onTarget }: EditApplyTextFieldProps): JSX.Element;
35
+ declare function EditApplyTextField({ name, hintText, defaultText, validation, preventBlankMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, max, maxLength, min, customWidth, scrollVisibleType, getInputValue, onBlur, onChange, onClickSubmitBtn, onFocus, onTarget }: EditApplyTextFieldProps): JSX.Element;
34
36
  export default EditApplyTextField;
package/dist/src/desktop/components/EditApplyTextField/EditApplyTextField.js CHANGED
@@ -49,11 +49,11 @@ var components_1 = require("../../common/components");
49
49
  var IconButton_1 = require("../IconButton");
50
50
  function EditApplyTextField(_a) {
51
51
  var _b;
52
- var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, _f = _a.textLineType, textLineType = _f === void 0 ? 'single' : _f, _g = _a.multiRows, multiRows = _g === void 0 ? 8 : _g, _h = _a.autoMinRows, autoMinRows = _h === void 0 ? 8 : _h, autoMaxRows = _a.autoMaxRows, _j = _a.inputType, inputType = _j === void 0 ? 'text' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, getInputValue = _a.getInputValue, onBlur = _a.onBlur, onChange = _a.onChange, onClickSubmitBtn = _a.onClickSubmitBtn, onFocus = _a.onFocus, onTarget = _a.onTarget;
53
- var _l = (0, react_hook_form_1.useFormContext)(), register = _l.register, setValue = _l.setValue, trigger = _l.trigger, watch = _l.watch, reset = _l.reset, _m = _l.formState, errors = _m.errors, isSubmitSuccessful = _m.isSubmitSuccessful;
54
- var _o = (0, react_1.useState)(false), isFocused = _o[0], setIsFocused = _o[1];
55
- var _p = (0, react_1.useState)(false), isOpen = _p[0], setIsOpen = _p[1];
56
- var _q = (0, react_1.useState)(defaultText !== null && defaultText !== void 0 ? defaultText : ''), prevValue = _q[0], setPrevValue = _q[1];
52
+ var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, _f = _a.textLineType, textLineType = _f === void 0 ? 'single' : _f, _g = _a.multiRows, multiRows = _g === void 0 ? 8 : _g, _h = _a.autoMinRows, autoMinRows = _h === void 0 ? 8 : _h, autoMaxRows = _a.autoMaxRows, _j = _a.inputType, inputType = _j === void 0 ? 'text' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _l = _a.scrollVisibleType, scrollVisibleType = _l === void 0 ? 'visible' : _l, getInputValue = _a.getInputValue, onBlur = _a.onBlur, onChange = _a.onChange, onClickSubmitBtn = _a.onClickSubmitBtn, onFocus = _a.onFocus, onTarget = _a.onTarget;
53
+ var _m = (0, react_hook_form_1.useFormContext)(), register = _m.register, setValue = _m.setValue, trigger = _m.trigger, watch = _m.watch, reset = _m.reset, _o = _m.formState, errors = _o.errors, isSubmitSuccessful = _o.isSubmitSuccessful;
54
+ var _p = (0, react_1.useState)(false), isFocused = _p[0], setIsFocused = _p[1];
55
+ var _q = (0, react_1.useState)(false), isOpen = _q[0], setIsOpen = _q[1];
56
+ var _r = (0, react_1.useState)(defaultText !== null && defaultText !== void 0 ? defaultText : ''), prevValue = _r[0], setPrevValue = _r[1];
57
57
  var ref = (0, react_1.useRef)();
58
58
  var currentValue = watch(name);
59
59
  var validateOnChange = register(name, validation).onChange;
@@ -160,7 +160,7 @@ function EditApplyTextField(_a) {
160
160
  return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: "use", textLineType: "single", inputType: inputType, state: state, min: min, max: max, maxLength: maxLength, textSize: size === 'large' || size === 'rlarge' ? 'form2' : 'heading', textWeight: size === 'large' || size === 'rlarge' ? 'normal' : 'bold', onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onChange: handleChange, onKeyDown: handleKeyDown, inputRef: ref }) }));
161
161
  }
162
162
  };
163
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_EditApplyTextFieldWrapper, __assign({ "x-pds-name": "EditApplyTextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_EditApplyTextField, { children: [(0, jsx_runtime_1.jsx)(S_S_TextFieldBaseWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, customWidth: customWidth }, { children: S_TextFieldBase() })), isOpen === true && ((0, jsx_runtime_1.jsxs)(S_ButtonBox, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_xmark", fillType: "line", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_white", borderColorKey: "ui_cpnt_button_line_border_default", tabIndex: -1, onMouseDown: handleCancel }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_check", fillType: "fill", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_on_primary", baseColorKey: "ui_cpnt_button_fill_base_primary", state: isError === true ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: handleMouseDown, type: "submit" })] }))] }), ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && (0, jsx_runtime_1.jsx)(S_Error, __assign({ isFocused: isFocused }, { children: errors[name].message }))] })) }));
163
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_EditApplyTextFieldWrapper, __assign({ "x-pds-name": "EditApplyTextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_EditApplyTextField, { children: [(0, jsx_runtime_1.jsx)(S_S_TextFieldBaseWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, customWidth: customWidth, scrollVisibleType: scrollVisibleType }, { children: S_TextFieldBase() })), isOpen === true && ((0, jsx_runtime_1.jsxs)(S_ButtonBox, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_xmark", fillType: "line", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_white", borderColorKey: "ui_cpnt_button_line_border_default", tabIndex: -1, onMouseDown: handleCancel }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_check", fillType: "fill", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_on_primary", baseColorKey: "ui_cpnt_button_fill_base_primary", state: isError === true ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: handleMouseDown, type: "submit" })] }))] }), ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && (0, jsx_runtime_1.jsx)(S_Error, __assign({ isFocused: isFocused }, { children: errors[name].message }))] })) }));
164
164
  }
165
165
  var S_EditApplyTextFieldWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", ";\n\n ", "\n"], ["\n width: ", ";\n\n ", "\n"])), function (_a) {
166
166
  var size = _a.size, responsiveMode = _a.responsiveMode;
@@ -246,7 +246,7 @@ var normalActionColor = (0, styled_components_1.css)(templateObject_10 || (templ
246
246
  var theme = _a.theme;
247
247
  return theme.ui_cpnt_textfield_base_pressed;
248
248
  });
249
- var S_S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n align-items: center;\n border-radius: 14px;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n ", ";\n ", ";\n ", "\n\n ", "\n\n ", "\n"], ["\n align-items: center;\n border-radius: 14px;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n ", ";\n ", ";\n ", "\n\n ", "\n\n ", "\n"])), function (_a) {
249
+ var S_S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n align-items: center;\n border-radius: 14px;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n ", ";\n ", ";\n ", "\n\n ", "\n\n ", "\n\n ", "\n ", "\n"], ["\n align-items: center;\n border-radius: 14px;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n ", ";\n ", ";\n ", "\n\n ", "\n\n ", "\n\n ", "\n ", "\n"])), function (_a) {
250
250
  var state = _a.state;
251
251
  return (state === 'disabled' ? 'not-allowed' : 'text');
252
252
  }, function (_a) {
@@ -271,8 +271,19 @@ var S_S_TextFieldBaseWrapper = styled_components_1.default.div(templateObject_11
271
271
  }, transitionStyle_1.InputTransition, function (_a) {
272
272
  var state = _a.state;
273
273
  return state === 'normal' && normalActionColor;
274
+ }, function (_a) {
275
+ var textLineType = _a.textLineType, scrollVisibleType = _a.scrollVisibleType;
276
+ return textLineType === 'multi' &&
277
+ scrollVisibleType === 'visible' && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n textarea::-webkit-scrollbar-thumb {\n background-color: ", ";\n background-clip: padding-box;\n border-radius: 5px;\n border: 2px solid transparent;\n }\n textarea::-webkit-scrollbar {\n display: block;\n width: 10px;\n }\n textarea {\n scrollbar-width: auto;\n }\n "], ["\n textarea::-webkit-scrollbar-thumb {\n background-color: ", ";\n background-clip: padding-box;\n border-radius: 5px;\n border: 2px solid transparent;\n }\n textarea::-webkit-scrollbar {\n display: block;\n width: 10px;\n }\n textarea {\n scrollbar-width: auto;\n }\n "])), function (_a) {
278
+ var theme = _a.theme;
279
+ return theme.ui_container_scroll;
280
+ });
281
+ }, function (_a) {
282
+ var textLineType = _a.textLineType, scrollVisibleType = _a.scrollVisibleType;
283
+ return textLineType === 'multi' &&
284
+ scrollVisibleType === 'hidden' && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n textarea::-webkit-scrollbar {\n background: transparent;\n display: block;\n width: 0px;\n }\n textarea {\n scrollbar-width: auto;\n }\n "], ["\n textarea::-webkit-scrollbar {\n background: transparent;\n display: block;\n width: 0px;\n }\n textarea {\n scrollbar-width: auto;\n }\n "])));
274
285
  });
275
- var S_Error = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-right: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-right: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"])), function (_a) {
286
+ var S_Error = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-right: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-right: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"])), function (_a) {
276
287
  var theme = _a.theme;
277
288
  return theme.ui_cpnt_textfield_text_error;
278
289
  }, function (_a) {
@@ -291,6 +302,6 @@ var S_Error = styled_components_1.default.div(templateObject_12 || (templateObje
291
302
  var theme = _a.theme;
292
303
  return theme.spacing.spacingA;
293
304
  });
294
- var S_ButtonBox = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n bottom: -36px;\n display: flex;\n position: absolute;\n right: 0;\n z-index: 1;\n"], ["\n bottom: -36px;\n display: flex;\n position: absolute;\n right: 0;\n z-index: 1;\n"])));
305
+ var S_ButtonBox = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n bottom: -36px;\n display: flex;\n position: absolute;\n right: 0;\n z-index: 1;\n"], ["\n bottom: -36px;\n display: flex;\n position: absolute;\n right: 0;\n z-index: 1;\n"])));
295
306
  exports.default = EditApplyTextField;
296
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
307
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
package/dist/src/desktop/components/TextField/TextField.d.ts CHANGED
@@ -2,6 +2,7 @@
2
2
  import { Path } from 'react-hook-form';
3
3
  import type { IFormValues, PDSTextType, UiColors, PDSIconType } from '../../../common';
4
4
  import type { TextFieldBaseProps } from '../../common/components/TextFieldBase/TextFieldBase';
5
+ import type { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
5
6
  export type TextFieldProps = {
6
7
  name: Path<IFormValues>;
7
8
  prefixText?: PDSTextType;
@@ -20,8 +21,9 @@ export type TextFieldProps = {
20
21
  fontWeight?: 'bold' | 'regular';
21
22
  hintTextFontWeight?: 'normal' | 'bold';
22
23
  deleteBtnMode?: 'none' | 'use';
24
+ scrollVisibleType?: ScrollVisibleType;
23
25
  onClickIBtn1?: () => void;
24
26
  onClickIBtn2?: () => void;
25
27
  } & Partial<TextFieldBaseProps>;
26
- declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, inputMode, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, overrideIBtn1IconColorKey, overrideIBtn2IconColorKey, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, fontWeight, hintTextFontWeight, deleteBtnMode, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
28
+ declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, inputMode, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, overrideIBtn1IconColorKey, overrideIBtn2IconColorKey, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, fontWeight, hintTextFontWeight, deleteBtnMode, scrollVisibleType, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
27
29
  export default TextField;
package/dist/src/desktop/components/TextField/TextField.js CHANGED
@@ -51,7 +51,7 @@ var IconButton_1 = require("../IconButton");
51
51
  var TextLabel_1 = require("../TextLabel");
52
52
  function TextField(_a) {
53
53
  var _b;
54
- var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, inputMode = _a.inputMode, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, overrideIBtn1IconColorKey = _a.overrideIBtn1IconColorKey, overrideIBtn2IconColorKey = _a.overrideIBtn2IconColorKey, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.fontWeight, fontWeight = _u === void 0 ? 'regular' : _u, _v = _a.hintTextFontWeight, hintTextFontWeight = _v === void 0 ? 'normal' : _v, _w = _a.deleteBtnMode, deleteBtnMode = _w === void 0 ? 'use' : _w, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
54
+ var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, inputMode = _a.inputMode, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, overrideIBtn1IconColorKey = _a.overrideIBtn1IconColorKey, overrideIBtn2IconColorKey = _a.overrideIBtn2IconColorKey, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.fontWeight, fontWeight = _u === void 0 ? 'regular' : _u, _v = _a.hintTextFontWeight, hintTextFontWeight = _v === void 0 ? 'normal' : _v, _w = _a.deleteBtnMode, deleteBtnMode = _w === void 0 ? 'use' : _w, _x = _a.scrollVisibleType, scrollVisibleType = _x === void 0 ? 'visible' : _x, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
55
55
  var basicThemeIconColors = {
56
56
  normal: 'ui_cpnt_button_icon_default',
57
57
  read_only: 'ui_cpnt_button_icon_default',
@@ -67,9 +67,9 @@ function TextField(_a) {
67
67
  read_only: 'ui_cpnt_textfield_icon_colortheme_transparent_readonly',
68
68
  disabled: 'ui_cpnt_textfield_icon_colortheme_transparent_disabled'
69
69
  };
70
- var _x = (0, react_1.useState)(false), isFocused = _x[0], setIsFocused = _x[1];
71
- var _y = (0, react_hook_form_1.useFormContext)(), register = _y.register, trigger = _y.trigger, errors = _y.formState.errors;
72
- var _z = register(name, validation), validateOnChange = _z.onChange, validateOnBlur = _z.onBlur;
70
+ var _y = (0, react_1.useState)(false), isFocused = _y[0], setIsFocused = _y[1];
71
+ var _z = (0, react_hook_form_1.useFormContext)(), register = _z.register, trigger = _z.trigger, errors = _z.formState.errors;
72
+ var _0 = register(name, validation), validateOnChange = _0.onChange, validateOnBlur = _0.onBlur;
73
73
  var isError = (0, types_1.getErrorByName)(errors, name);
74
74
  var handleClickIBtn1 = function () {
75
75
  if (onClickIBtn1) {
@@ -180,7 +180,7 @@ function TextField(_a) {
180
180
  }[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
181
181
  }
182
182
  };
183
- return ((0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({ "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: Boolean(isError), state: state, colorTheme: colorTheme, customWidth: customWidth }, { children: S_TextField() })), ((_b = (0, types_1.getErrorByName)(errors, name)) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: (0, types_1.getErrorByName)(errors, name).message })))] })));
183
+ return ((0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({ "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: Boolean(isError), state: state, colorTheme: colorTheme, customWidth: customWidth, scrollVisibleType: scrollVisibleType }, { children: S_TextField() })), ((_b = (0, types_1.getErrorByName)(errors, name)) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: (0, types_1.getErrorByName)(errors, name).message })))] })));
184
184
  }
185
185
  var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n ", ";\n ", "\n"], ["\n ", ";\n ", ";\n ", "\n"])), function (_a) {
186
186
  var size = _a.size;
@@ -342,7 +342,7 @@ var backgroundActiveColor = (0, styled_components_1.css)(templateObject_17 || (t
342
342
  }
343
343
  });
344
344
  var normalActionColor = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"], ["\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"])), backgroundHoverColor, backgroundActiveColor);
345
- var S_TextFieldWrapper = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n align-items: center;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n"], ["\n align-items: center;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n"])), function (_a) {
345
+ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n align-items: center;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n\n ", "\n ", "\n"], ["\n align-items: center;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n ", ";\n ", ";\n\n ", "\n\n ", "\n\n ", ";\n ", "\n\n ", "\n ", "\n"])), function (_a) {
346
346
  var state = _a.state;
347
347
  return (state === 'disabled' ? 'not-allowed' : 'text');
348
348
  }, function (_a) {
@@ -382,11 +382,22 @@ var S_TextFieldWrapper = styled_components_1.default.div(templateObject_19 || (t
382
382
  }, function (_a) {
383
383
  var customWidth = _a.customWidth;
384
384
  return customWidth && "width: ".concat(customWidth, ";");
385
+ }, function (_a) {
386
+ var textLineType = _a.textLineType, scrollVisibleType = _a.scrollVisibleType;
387
+ return textLineType === 'multi' &&
388
+ scrollVisibleType === 'visible' && (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n textarea::-webkit-scrollbar-thumb {\n background-color: ", ";\n background-clip: padding-box;\n border-radius: 5px;\n border: 2px solid transparent;\n }\n textarea::-webkit-scrollbar {\n display: block;\n width: 10px;\n }\n textarea {\n scrollbar-width: auto;\n }\n "], ["\n textarea::-webkit-scrollbar-thumb {\n background-color: ", ";\n background-clip: padding-box;\n border-radius: 5px;\n border: 2px solid transparent;\n }\n textarea::-webkit-scrollbar {\n display: block;\n width: 10px;\n }\n textarea {\n scrollbar-width: auto;\n }\n "])), function (_a) {
389
+ var theme = _a.theme;
390
+ return theme.ui_container_scroll;
391
+ });
392
+ }, function (_a) {
393
+ var textLineType = _a.textLineType, scrollVisibleType = _a.scrollVisibleType;
394
+ return textLineType === 'multi' &&
395
+ scrollVisibleType === 'hidden' && (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n textarea::-webkit-scrollbar {\n background: transparent;\n display: block;\n width: 0px;\n }\n textarea {\n scrollbar-width: auto;\n }\n "], ["\n textarea::-webkit-scrollbar {\n background: transparent;\n display: block;\n width: 0px;\n }\n textarea {\n scrollbar-width: auto;\n }\n "])));
385
396
  });
386
- var S_RightBox = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n"], ["\n align-items: center;\n display: flex;\n"])));
387
- var S_RightBox_Auto = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n align-items: center;\n align-self: end;\n display: flex;\n"], ["\n align-items: center;\n align-self: end;\n display: flex;\n"])));
388
- var S_RightBox_Multi = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n align-items: center;\n align-self: end;\n display: flex;\n"], ["\n align-items: center;\n align-self: end;\n display: flex;\n"])));
389
- var S_Error = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"])), function (_a) {
397
+ var S_RightBox = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n"], ["\n align-items: center;\n display: flex;\n"])));
398
+ var S_RightBox_Auto = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n align-items: center;\n align-self: end;\n display: flex;\n"], ["\n align-items: center;\n align-self: end;\n display: flex;\n"])));
399
+ var S_RightBox_Multi = styled_components_1.default.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n align-items: center;\n align-self: end;\n display: flex;\n"], ["\n align-items: center;\n align-self: end;\n display: flex;\n"])));
400
+ var S_Error = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"], ["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-top: ", ";\n text-align: left;\n white-space: pre-wrap;\n"])), function (_a) {
390
401
  var theme = _a.theme, colorTheme = _a.colorTheme;
391
402
  switch (colorTheme) {
392
403
  case 'none': {
@@ -411,4 +422,4 @@ var S_Error = styled_components_1.default.div(templateObject_23 || (templateObje
411
422
  return theme.spacing.spacingA;
412
423
  });
413
424
  exports.default = TextField;
414
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
425
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25;
package/dist/src/desktop/panels/ContentSheet/ContentSheet.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import type { UiColors } from '../../../common';
2
- import type { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
3
2
  import type { CSSProperties } from 'react';
4
3
  type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
5
4
  export type ContentSheetProps = {
@@ -22,7 +21,6 @@ export type ContentSheetProps = {
22
21
  loadingWidth?: string;
23
22
  loadingHeight?: string;
24
23
  isLoading?: boolean;
25
- scrollVisibleType?: ScrollVisibleType;
26
24
  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
27
25
  };
28
26
  export type StyleProps = {
@@ -41,7 +39,6 @@ export type StyleProps = {
41
39
  paddingBottom?: PaddingSpacingType;
42
40
  paddingLeft?: PaddingSpacingType;
43
41
  hasOnClick?: boolean;
44
- scrollVisibleType?: ScrollVisibleType;
45
42
  };
46
43
  declare const paddingSpacing: {
47
44
  readonly spacing_a: "spacingA";
@@ -59,5 +56,5 @@ declare const paddingSpacing: {
59
56
  readonly spacing_m: "spacingM";
60
57
  readonly spacing_n: "spacingN";
61
58
  };
62
- declare function ContentSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, loadingWidth, loadingHeight, isLoading, scrollVisibleType, onClick }: ContentSheetProps): JSX.Element;
59
+ declare function ContentSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, loadingWidth, loadingHeight, isLoading, onClick }: ContentSheetProps): JSX.Element;
63
60
  export default ContentSheet;
package/dist/src/desktop/panels/ContentSheet/ContentSheet.js CHANGED
@@ -39,7 +39,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
39
39
  };
40
40
  Object.defineProperty(exports, "__esModule", { value: true });
41
41
  var jsx_runtime_1 = require("react/jsx-runtime");
42
- var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
43
42
  var styled_components_1 = __importStar(require("styled-components"));
44
43
  var styles_1 = require("../../../common/styles");
45
44
  var backgroundColorTheme = {
@@ -72,7 +71,7 @@ var paddingSpacing = {
72
71
  spacing_n: 'spacingN'
73
72
  };
74
73
  function ContentSheet(_a) {
75
- var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'base3' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, loadingWidth = _a.loadingWidth, loadingHeight = _a.loadingHeight, isLoading = _a.isLoading, _m = _a.scrollVisibleType, scrollVisibleType = _m === void 0 ? 'visible' : _m, onClick = _a.onClick;
74
+ var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'base3' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, loadingWidth = _a.loadingWidth, loadingHeight = _a.loadingHeight, isLoading = _a.isLoading, onClick = _a.onClick;
76
75
  var handleClick = function (e) {
77
76
  if (onClick) {
78
77
  onClick(e);
@@ -82,7 +81,7 @@ function ContentSheet(_a) {
82
81
  if (isLoading) {
83
82
  return ((0, jsx_runtime_1.jsx)(S_LoadingContentSheet, { "$width": width !== null && width !== void 0 ? width : loadingWidth, "$height": height !== null && height !== void 0 ? height : loadingHeight, shapeType: shapeType, "$radius": radius }));
84
83
  }
85
- return ((0, jsx_runtime_1.jsx)(S_ContentSheet, __assign({ "x-pds-name": "ContentSheet", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick, scrollVisibleType: scrollVisibleType }, { children: children })));
84
+ return ((0, jsx_runtime_1.jsx)(S_ContentSheet, __assign({ "x-pds-name": "ContentSheet", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick }, { children: children })));
86
85
  };
87
86
  return ContentSheetVariation();
88
87
  }
@@ -113,7 +112,7 @@ var overrideStyle = (0, styled_components_1.css)(templateObject_6 || (templateOb
113
112
  var theme = _a.theme, overrideBorderColorKey = _a.overrideBorderColorKey;
114
113
  return overrideBorderColorKey && theme[overrideBorderColorKey];
115
114
  });
116
- var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n border-style: ", ";\n border-width: ", ";\n box-sizing: border-box;\n cursor: ", ";\n height: ", ";\n overflow-y: auto;\n width: ", ";\n\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", "\n\n ", "\n"], ["\n background-color: ", ";\n border-color: ", ";\n border-style: ", ";\n border-width: ", ";\n box-sizing: border-box;\n cursor: ", ";\n height: ", ";\n overflow-y: auto;\n width: ", ";\n\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", "\n\n ", "\n"])), function (_a) {
115
+ var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n border-style: ", ";\n border-width: ", ";\n box-sizing: border-box;\n cursor: ", ";\n height: ", ";\n width: ", ";\n\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border-color: ", ";\n border-style: ", ";\n border-width: ", ";\n box-sizing: border-box;\n cursor: ", ";\n height: ", ";\n width: ", ";\n\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
117
116
  var theme = _a.theme, $backgroundColorTheme = _a.$backgroundColorTheme;
118
117
  return $backgroundColorTheme && theme[backgroundColorTheme[$backgroundColorTheme]];
119
118
  }, function (_a) {
@@ -149,13 +148,6 @@ var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templa
149
148
  }, function (_a) {
150
149
  var paddingLeft = _a.paddingLeft;
151
150
  return paddingLeft !== 'none' && paddingLeftStyle;
152
- }, function (_a) {
153
- var scrollVisibleType = _a.scrollVisibleType;
154
- return scrollVisibleType &&
155
- {
156
- visible: scrollbarStyle_1.scrollbarStyle,
157
- hidden: scrollbarStyle_1.scrollInvisible
158
- }[scrollVisibleType];
159
151
  }, overrideStyle);
160
152
  var S_LoadingContentSheet = (0, styled_components_1.default)(S_ContentSheet)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), styles_1.skeletonLoadingStyle);
161
153
  exports.default = ContentSheet;
package/dist/src/desktop/panels/SectionSheet/SectionSheet.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import type { UiColors } from '../../../common';
2
- import type { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
3
2
  import type { CSSProperties } from 'react';
4
3
  type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
5
4
  export type SectionSheetProps = {
@@ -19,7 +18,6 @@ export type SectionSheetProps = {
19
18
  paddingLeft?: PaddingSpacingType;
20
19
  overrideCSS?: CSSProperties;
21
20
  children: React.ReactNode;
22
- scrollVisibleType?: ScrollVisibleType;
23
21
  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
24
22
  };
25
23
  export type StyleProps = {
@@ -38,7 +36,6 @@ export type StyleProps = {
38
36
  paddingBottom?: PaddingSpacingType;
39
37
  paddingLeft?: PaddingSpacingType;
40
38
  hasOnClick?: boolean;
41
- scrollVisibleType?: ScrollVisibleType;
42
39
  };
43
40
  declare const paddingSpacing: {
44
41
  readonly spacing_a: "spacingA";
@@ -56,5 +53,5 @@ declare const paddingSpacing: {
56
53
  readonly spacing_m: "spacingM";
57
54
  readonly spacing_n: "spacingN";
58
55
  };
59
- declare function SectionSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, scrollVisibleType, onClick }: SectionSheetProps): JSX.Element;
56
+ declare function SectionSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, onClick }: SectionSheetProps): JSX.Element;
60
57
  export default SectionSheet;
package/dist/src/desktop/panels/SectionSheet/SectionSheet.js CHANGED
@@ -39,7 +39,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
39
39
  };
40
40
  Object.defineProperty(exports, "__esModule", { value: true });
41
41
  var jsx_runtime_1 = require("react/jsx-runtime");
42
- var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
43
42
  var styled_components_1 = __importStar(require("styled-components"));
44
43
  var backgroundColorTheme = {
45
44
  transparent: 'ui_cpnt_sheet_base_03',
@@ -71,13 +70,13 @@ var paddingSpacing = {
71
70
  spacing_n: 'spacingN'
72
71
  };
73
72
  function SectionSheet(_a) {
74
- var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'transparent' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, _m = _a.scrollVisibleType, scrollVisibleType = _m === void 0 ? 'visible' : _m, onClick = _a.onClick;
73
+ var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'transparent' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, onClick = _a.onClick;
75
74
  var handleClick = function (e) {
76
75
  if (onClick) {
77
76
  onClick(e);
78
77
  }
79
78
  };
80
- return ((0, jsx_runtime_1.jsx)(S_SectionSheet, __assign({ "x-pds-name": "SectionSheet", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick, scrollVisibleType: scrollVisibleType }, { children: children })));
79
+ return ((0, jsx_runtime_1.jsx)(S_SectionSheet, __assign({ "x-pds-name": "SectionSheet", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick }, { children: children })));
81
80
  }
82
81
  var radiusStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), function (_a) {
83
82
  var $radius = _a.$radius;
@@ -106,7 +105,7 @@ var advancedCSS = (0, styled_components_1.css)(templateObject_6 || (templateObje
106
105
  var theme = _a.theme, overrideBorderColorKey = _a.overrideBorderColorKey;
107
106
  return overrideBorderColorKey && theme[overrideBorderColorKey];
108
107
  });
109
- var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n border-style: ", ";\n border-width: ", ";\n box-sizing: border-box;\n cursor: ", ";\n height: ", ";\n overflow-y: auto;\n width: ", ";\n\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", "\n\n ", "\n"], ["\n background-color: ", ";\n border-color: ", ";\n border-style: ", ";\n border-width: ", ";\n box-sizing: border-box;\n cursor: ", ";\n height: ", ";\n overflow-y: auto;\n width: ", ";\n\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", "\n\n ", "\n"])), function (_a) {
108
+ var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n border-style: ", ";\n border-width: ", ";\n box-sizing: border-box;\n cursor: ", ";\n height: ", ";\n width: ", ";\n\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border-color: ", ";\n border-style: ", ";\n border-width: ", ";\n box-sizing: border-box;\n cursor: ", ";\n height: ", ";\n width: ", ";\n\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
110
109
  var theme = _a.theme, $backgroundColorTheme = _a.$backgroundColorTheme;
111
110
  return $backgroundColorTheme && theme[backgroundColorTheme[$backgroundColorTheme]];
112
111
  }, function (_a) {
@@ -142,13 +141,6 @@ var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templa
142
141
  }, function (_a) {
143
142
  var paddingLeft = _a.paddingLeft;
144
143
  return paddingLeft !== 'none' && paddingLeftStyle;
145
- }, function (_a) {
146
- var scrollVisibleType = _a.scrollVisibleType;
147
- return scrollVisibleType &&
148
- {
149
- visible: scrollbarStyle_1.scrollbarStyle,
150
- hidden: scrollbarStyle_1.scrollInvisible
151
- }[scrollVisibleType];
152
144
  }, advancedCSS);
153
145
  exports.default = SectionSheet;
154
146
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
package/dist/src/mobile/panels/ContentSheet/ContentSheet.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import type { UiColors } from '../../../common';
2
- import type { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
3
2
  import type react from 'react';
4
3
  type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
5
4
  export type ContentSheetProps = {
@@ -22,7 +21,6 @@ export type ContentSheetProps = {
22
21
  loadingWidth?: string;
23
22
  loadingHeight?: string;
24
23
  isLoading?: boolean;
25
- scrollVisibleType?: ScrollVisibleType;
26
24
  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
27
25
  };
28
26
  export type StyleProps = {
@@ -40,7 +38,6 @@ export type StyleProps = {
40
38
  paddingRight?: PaddingSpacingType;
41
39
  paddingBottom?: PaddingSpacingType;
42
40
  paddingLeft?: PaddingSpacingType;
43
- scrollVisibleType?: ScrollVisibleType;
44
41
  };
45
42
  declare const paddingSpacing: {
46
43
  readonly spacing_a: "spacingA";
@@ -58,5 +55,5 @@ declare const paddingSpacing: {
58
55
  readonly spacing_m: "spacingM";
59
56
  readonly spacing_n: "spacingN";
60
57
  };
61
- declare function ContentSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, loadingWidth, loadingHeight, isLoading, scrollVisibleType, onClick }: ContentSheetProps): JSX.Element;
58
+ declare function ContentSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, loadingWidth, loadingHeight, isLoading, onClick }: ContentSheetProps): JSX.Element;
62
59
  export default ContentSheet;
package/dist/src/mobile/panels/ContentSheet/ContentSheet.js CHANGED
@@ -39,7 +39,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
39
39
  };
40
40
  Object.defineProperty(exports, "__esModule", { value: true });
41
41
  var jsx_runtime_1 = require("react/jsx-runtime");
42
- var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
43
42
  var styled_components_1 = __importStar(require("styled-components"));
44
43
  var styles_1 = require("../../../common/styles");
45
44
  var backgroundColorTheme = {
@@ -72,7 +71,7 @@ var paddingSpacing = {
72
71
  spacing_n: 'spacingN'
73
72
  };
74
73
  function ContentSheet(_a) {
75
- var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'base3' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, loadingWidth = _a.loadingWidth, loadingHeight = _a.loadingHeight, isLoading = _a.isLoading, _m = _a.scrollVisibleType, scrollVisibleType = _m === void 0 ? 'visible' : _m, onClick = _a.onClick;
74
+ var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'base3' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, loadingWidth = _a.loadingWidth, loadingHeight = _a.loadingHeight, isLoading = _a.isLoading, onClick = _a.onClick;
76
75
  var handleClick = function (e) {
77
76
  if (onClick) {
78
77
  onClick(e);
@@ -82,7 +81,7 @@ function ContentSheet(_a) {
82
81
  if (isLoading) {
83
82
  return ((0, jsx_runtime_1.jsx)(S_LoadingContentSheet, { "$width": width !== null && width !== void 0 ? width : loadingWidth, "$height": height !== null && height !== void 0 ? height : loadingHeight, shapeType: shapeType, "$radius": radius }));
84
83
  }
85
- return ((0, jsx_runtime_1.jsx)(S_ContentSheet, __assign({ "x-pds-name": "ContentSheet", "x-pds-element-type": "panel", "x-pds-device-type": "mobile", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, scrollVisibleType: scrollVisibleType }, { children: children })));
84
+ return ((0, jsx_runtime_1.jsx)(S_ContentSheet, __assign({ "x-pds-name": "ContentSheet", "x-pds-element-type": "panel", "x-pds-device-type": "mobile", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick }, { children: children })));
86
85
  };
87
86
  return ContentSheetVariation();
88
87
  }
@@ -113,7 +112,7 @@ var overrideStyle = (0, styled_components_1.css)(templateObject_6 || (templateOb
113
112
  var theme = _a.theme, overrideBorderColorKey = _a.overrideBorderColorKey;
114
113
  return overrideBorderColorKey && theme[overrideBorderColorKey];
115
114
  });
116
- var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n border-style: ", ";\n border-width: ", ";\n box-sizing: border-box;\n height: ", ";\n overflow-y: auto;\n width: ", ";\n\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", "\n\n ", "\n"], ["\n background-color: ", ";\n border-color: ", ";\n border-style: ", ";\n border-width: ", ";\n box-sizing: border-box;\n height: ", ";\n overflow-y: auto;\n width: ", ";\n\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", "\n\n ", "\n"])), function (_a) {
115
+ var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n border-style: ", ";\n border-width: ", ";\n box-sizing: border-box;\n height: ", ";\n width: ", ";\n\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border-color: ", ";\n border-style: ", ";\n border-width: ", ";\n box-sizing: border-box;\n height: ", ";\n width: ", ";\n\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
117
116
  var theme = _a.theme, $backgroundColorTheme = _a.$backgroundColorTheme;
118
117
  return $backgroundColorTheme && theme[backgroundColorTheme[$backgroundColorTheme]];
119
118
  }, function (_a) {
@@ -146,13 +145,6 @@ var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templa
146
145
  }, function (_a) {
147
146
  var paddingLeft = _a.paddingLeft;
148
147
  return paddingLeft !== 'none' && paddingLeftStyle;
149
- }, function (_a) {
150
- var scrollVisibleType = _a.scrollVisibleType;
151
- return scrollVisibleType &&
152
- {
153
- visible: scrollbarStyle_1.scrollbarStyle,
154
- hidden: scrollbarStyle_1.scrollInvisible
155
- }[scrollVisibleType];
156
148
  }, overrideStyle);
157
149
  var S_LoadingContentSheet = (0, styled_components_1.default)(S_ContentSheet)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), styles_1.skeletonLoadingStyle);
158
150
  exports.default = ContentSheet;
package/dist/src/mobile/panels/SectionSheet/SectionSheet.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import type { UiColors } from '../../../common';
2
- import type { ScrollVisibleType } from '../../../common/styles/scroll/scrollbarStyle';
3
2
  import type { CSSProperties } from 'react';
4
3
  type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
5
4
  export type SectionSheetProps = {
@@ -19,7 +18,6 @@ export type SectionSheetProps = {
19
18
  paddingLeft?: PaddingSpacingType;
20
19
  overrideCSS?: CSSProperties;
21
20
  children: React.ReactNode;
22
- scrollVisibleType?: ScrollVisibleType;
23
21
  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
24
22
  };
25
23
  export type StyleProps = {
@@ -37,7 +35,6 @@ export type StyleProps = {
37
35
  paddingRight?: PaddingSpacingType;
38
36
  paddingBottom?: PaddingSpacingType;
39
37
  paddingLeft?: PaddingSpacingType;
40
- scrollVisibleType?: ScrollVisibleType;
41
38
  };
42
39
  declare const paddingSpacing: {
43
40
  readonly spacing_a: "spacingA";
@@ -55,5 +52,5 @@ declare const paddingSpacing: {
55
52
  readonly spacing_m: "spacingM";
56
53
  readonly spacing_n: "spacingN";
57
54
  };
58
- declare function SectionSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, scrollVisibleType, onClick }: SectionSheetProps): JSX.Element;
55
+ declare function SectionSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, onClick }: SectionSheetProps): JSX.Element;
59
56
  export default SectionSheet;
package/dist/src/mobile/panels/SectionSheet/SectionSheet.js CHANGED
@@ -39,7 +39,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
39
39
  };
40
40
  Object.defineProperty(exports, "__esModule", { value: true });
41
41
  var jsx_runtime_1 = require("react/jsx-runtime");
42
- var scrollbarStyle_1 = require("../../../common/styles/scroll/scrollbarStyle");
43
42
  var styled_components_1 = __importStar(require("styled-components"));
44
43
  var backgroundColorTheme = {
45
44
  transparent: 'ui_cpnt_sheet_base_03',
@@ -71,13 +70,13 @@ var paddingSpacing = {
71
70
  spacing_n: 'spacingN'
72
71
  };
73
72
  function SectionSheet(_a) {
74
- var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'transparent' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, _m = _a.scrollVisibleType, scrollVisibleType = _m === void 0 ? 'visible' : _m, onClick = _a.onClick;
73
+ var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'transparent' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, onClick = _a.onClick;
75
74
  var handleClick = function (e) {
76
75
  if (onClick) {
77
76
  onClick(e);
78
77
  }
79
78
  };
80
- return ((0, jsx_runtime_1.jsx)(S_SectionSheet, __assign({ "x-pds-name": "SectionSheet", "x-pds-element-type": "panel", "x-pds-device-type": "mobile", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, scrollVisibleType: scrollVisibleType }, { children: children })));
79
+ return ((0, jsx_runtime_1.jsx)(S_SectionSheet, __assign({ "x-pds-name": "SectionSheet", "x-pds-element-type": "panel", "x-pds-device-type": "mobile", "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick }, { children: children })));
81
80
  }
82
81
  var radiusStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), function (_a) {
83
82
  var $radius = _a.$radius;
@@ -106,7 +105,7 @@ var advancedCSS = (0, styled_components_1.css)(templateObject_6 || (templateObje
106
105
  var theme = _a.theme, overrideBorderColorKey = _a.overrideBorderColorKey;
107
106
  return overrideBorderColorKey && theme[overrideBorderColorKey];
108
107
  });
109
- var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n border-style: ", ";\n border-width: ", ";\n box-sizing: border-box;\n height: ", ";\n overflow-y: auto;\n width: ", ";\n\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", "\n\n ", "\n"], ["\n background-color: ", ";\n border-color: ", ";\n border-style: ", ";\n border-width: ", ";\n box-sizing: border-box;\n height: ", ";\n overflow-y: auto;\n width: ", ";\n\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", "\n\n ", "\n"])), function (_a) {
108
+ var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n border-style: ", ";\n border-width: ", ";\n box-sizing: border-box;\n height: ", ";\n width: ", ";\n\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", "\n"], ["\n background-color: ", ";\n border-color: ", ";\n border-style: ", ";\n border-width: ", ";\n box-sizing: border-box;\n height: ", ";\n width: ", ";\n\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", "\n"])), function (_a) {
110
109
  var theme = _a.theme, $backgroundColorTheme = _a.$backgroundColorTheme;
111
110
  return $backgroundColorTheme && theme[backgroundColorTheme[$backgroundColorTheme]];
112
111
  }, function (_a) {
@@ -139,13 +138,6 @@ var S_SectionSheet = styled_components_1.default.div(templateObject_7 || (templa
139
138
  }, function (_a) {
140
139
  var paddingLeft = _a.paddingLeft;
141
140
  return paddingLeft !== 'none' && paddingLeftStyle;
142
- }, function (_a) {
143
- var scrollVisibleType = _a.scrollVisibleType;
144
- return scrollVisibleType &&
145
- {
146
- visible: scrollbarStyle_1.scrollbarStyle,
147
- hidden: scrollbarStyle_1.scrollInvisible
148
- }[scrollVisibleType];
149
141
  }, advancedCSS);
150
142
  exports.default = SectionSheet;
151
143
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "2.6.3",
3
+ "version": "2.6.4",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",