@dreamcommerce/aurora 0.3.4-164 → 0.3.4-168

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 (77) hide show
  1. package/build/cjs/src/components/color_picker/index.js +6 -2
  2. package/build/cjs/src/components/color_picker/index.js.map +1 -1
  3. package/build/cjs/src/components/controls/components/textarea.js.map +1 -1
  4. package/build/esm/src/components/color_picker/index.js +6 -2
  5. package/build/esm/src/components/color_picker/index.js.map +1 -1
  6. package/build/esm/src/components/controls/components/textarea.js.map +1 -1
  7. package/build/esm/src/src/components/controls/components/textarea.d.ts +4 -0
  8. package/build/esm/src/src/components/controls/hoc/control_cell_selector/index.d.ts +4 -0
  9. package/build/esm/src/src/components/controls/hoc/control_checkbox/index.d.ts +16 -0
  10. package/build/esm/src/src/components/controls/hoc/control_checkbox_switch/index.d.ts +16 -0
  11. package/build/esm/src/src/components/controls/hoc/control_color_picker/index.d.ts +16 -0
  12. package/build/esm/src/src/components/controls/hoc/control_date_picker/index.d.ts +4 -0
  13. package/build/esm/src/src/components/controls/hoc/control_file_picker/index.d.ts +4 -0
  14. package/build/esm/src/src/components/controls/hoc/control_input/index.d.ts +19 -0
  15. package/build/esm/src/src/components/controls/hoc/control_multi_select/index.d.ts +4 -0
  16. package/build/esm/src/src/components/controls/hoc/control_radio/index.d.ts +16 -0
  17. package/build/esm/src/src/components/controls/hoc/control_radio_group/index.d.ts +4 -0
  18. package/build/esm/src/src/components/controls/hoc/control_range/index.d.ts +4 -0
  19. package/build/esm/src/src/components/controls/hoc/control_select/index.d.ts +19 -0
  20. package/build/esm/src/src/components/controls/hoc/control_tags_selector/index.d.ts +4 -0
  21. package/build/esm/src/src/components/controls/hoc/control_textarea/index.d.ts +19 -0
  22. package/build/esm/src/src/components/controls/index.d.ts +4 -0
  23. package/build/esm/src/src/components/date_picker/components/common_ranges.d.ts +3 -0
  24. package/build/esm/src/src/components/date_picker/components/month_controller.d.ts +4 -0
  25. package/build/esm/src/src/components/date_picker/components/pure_date_picker.d.ts +4 -0
  26. package/build/esm/src/src/components/date_picker/hoc/range_picker.d.ts +4 -0
  27. package/build/esm/src/src/components/date_picker/hoc/single_date_picker.d.ts +4 -0
  28. package/build/esm/src/src/components/date_picker/index.d.ts +7 -0
  29. package/build/esm/src/src/components/dropdown/components/option_multiple.d.ts +22 -0
  30. package/build/esm/src/src/components/dropdown/hoc/multiselect/index.d.ts +20 -0
  31. package/build/esm/src/src/components/dropdown/hoc/select/index.d.ts +20 -0
  32. package/build/esm/src/src/components/dropdown/index.d.ts +22 -0
  33. package/build/esm/src/src/components/tags_selector/index.d.ts +4 -0
  34. package/build/esm/src/src/index.d.ts +79 -0
  35. package/build/esm/src/stories/button/button.stories.d.ts +146 -0
  36. package/build/esm/src/stories/controls/control_cell_selector/control_cell_selector.stories.d.ts +90 -0
  37. package/build/esm/src/stories/controls/control_checkbox/checkbox.stories.d.ts +89 -0
  38. package/build/esm/src/stories/controls/control_checkbox_switch/checkbox_switch.stories.d.ts +89 -0
  39. package/build/esm/src/stories/controls/control_color_picker/control_color_picker.stories.d.ts +126 -0
  40. package/build/esm/src/stories/controls/control_date_picker/control_date_picker.stories.d.ts +164 -0
  41. package/build/esm/src/stories/controls/control_file_picker/control_file_picker.stories.d.ts +128 -0
  42. package/build/esm/src/stories/controls/control_input/control_input.stories.d.ts +184 -0
  43. package/build/esm/src/stories/controls/control_multi_select/control_multi_select.stories.d.ts +89 -0
  44. package/build/esm/src/stories/controls/control_radio/control_radio.stories.d.ts +127 -0
  45. package/build/esm/src/stories/controls/control_radio_group/control_radio.stories.d.ts +32 -0
  46. package/build/esm/src/stories/controls/control_range/control_range.stories.d.ts +71 -0
  47. package/build/esm/src/stories/controls/control_range_picker/control_range_picker.stories.d.ts +108 -0
  48. package/build/esm/src/stories/controls/control_select/control_select.stories.d.ts +108 -0
  49. package/build/esm/src/stories/controls/control_tags_selector/control_tags_selector.stories.d.ts +126 -0
  50. package/build/esm/src/stories/controls/control_textarea/control_textarea.stories.d.ts +146 -0
  51. package/build/esm/src/stories/data_table/data_table.stories.d.ts +33 -0
  52. package/build/esm/src/stories/dropdown/dropdown.stories.d.ts +127 -0
  53. package/build/esm/src/stories/flash_messenger/flash_messanger.stories.d.ts +31 -0
  54. package/build/esm/src/stories/gallery/gallery.stories.d.ts +33 -0
  55. package/build/esm/src/stories/grid/col.stories.d.ts +89 -0
  56. package/build/esm/src/stories/grid/grid.stories.d.ts +32 -0
  57. package/build/esm/src/stories/grid/main.stories.d.ts +71 -0
  58. package/build/esm/src/stories/grid/row.stories.d.ts +108 -0
  59. package/build/esm/src/stories/heading/heading.stories.d.ts +51 -0
  60. package/build/esm/src/stories/heading/subheadings.stories.d.ts +32 -0
  61. package/build/esm/src/stories/hint/hint.stories.d.ts +70 -0
  62. package/build/esm/src/stories/loader/loader.stories.d.ts +70 -0
  63. package/build/esm/src/stories/message_box/message_box.stories.d.ts +50 -0
  64. package/build/esm/src/stories/modal/modal.stories.d.ts +126 -0
  65. package/build/esm/src/stories/modal/modal_absolute_positioning.stories.d.ts +183 -0
  66. package/build/esm/src/stories/modal/modal_animations.stories.d.ts +202 -0
  67. package/build/esm/src/stories/modal/modal_relative_positioning.stories.d.ts +88 -0
  68. package/build/esm/src/stories/modal/modal_structure.stories.d.ts +31 -0
  69. package/build/esm/src/stories/multiselect_stories/multiselect.stories.d.ts +281 -0
  70. package/build/esm/src/stories/select_stories/select.stories.d.ts +281 -0
  71. package/build/esm/src/stories/spacing/spacing.stories.d.ts +89 -0
  72. package/build/esm/src/stories/table/table.stories.d.ts +91 -0
  73. package/build/esm/src/stories/tabs/tabs.stories.d.ts +71 -0
  74. package/build/esm/src/stories/tag/tag.stories.d.ts +51 -0
  75. package/build/esm/src/stories/tags_selector/tags_selector.stories.d.ts +108 -0
  76. package/build/esm/src/stories/with_loader/with_loader.stories.d.ts +51 -0
  77. package/package.json +1 -1
@@ -71,11 +71,15 @@ var PureColorPicker = function (_a) {
71
71
  var classes = useStyles({ color: color, saturationLightnessPointer: saturationLightnessPointer, hueSliderPointer: hueSliderPointer, screenName: screenName });
72
72
  var inputOnChange = function (event) {
73
73
  var value = event.target.value;
74
+ var hexValue = value.charAt(0) !== '#' ? "#" + value : value;
74
75
  if (!(hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current) || !(saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current)) {
75
76
  return;
76
77
  }
78
+ if (value !== hexValue) {
79
+ event.target.value = hexValue;
80
+ }
77
81
  try {
78
- var color_1 = utilities.getColorFromHex(value);
82
+ var color_1 = utilities.getColorFromHex(hexValue);
79
83
  var _a = utilities.getIndicatorPositionsFromHEX({
80
84
  hueSliderRef: hueSliderRef,
81
85
  saturationLightnessPanelRef: saturationLightnessPanelRef,
@@ -86,7 +90,7 @@ var PureColorPicker = function (_a) {
86
90
  setHueSliderPointer(hueSliderPointer_1);
87
91
  }
88
92
  catch (e) {
89
- setColor(_tslib.__assign(_tslib.__assign({}, color), { hex: value }));
93
+ setColor(_tslib.__assign(_tslib.__assign({}, color), { hex: hexValue }));
90
94
  }
91
95
  };
92
96
  var restoreInitialColor = function () {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../../src/components/color_picker/index.tsx"],"sourcesContent":["import React, { ChangeEvent, useContext, useRef } from 'react';\nimport { createUseStyles } from 'react-jss';\nimport Input from '@components/controls/components/input';\nimport styles from '@css/color_picker/main.module.less';\nimport SaturationLightnessPicker from './components/saturation_lightness_picker';\nimport ColorPickerSlider from './components/hue_picker';\nimport ColorPickerButtons from './components/buttons';\nimport { getColorFromHex, getIndicatorPositionsFromHEX } from './utilities';\nimport { IColorPickerContextProps, IColorPickerProps, IPureColorPickerProps } from './types';\nimport { ColorPickerContext } from './context';\nimport { cssColorPicker, cssColorPickerPreview, cssColorPickerPreviewContainer } from '@components/color_picker/css_classes';\nimport { useColorPicker } from '@components/color_picker/use_color_picker';\n\nconst useStyles = createUseStyles({\n saturationLightnessPanel: {\n background: ({ color: { hue } }) => `hsl(${hue},100%, 50%)`,\n },\n saturationLightnessPointer: {\n transform: ({ saturationLightnessPointer: { left, top } }) => `translate3d(${left - 10}px,${top - 10}px,0px)`,\n '& > div': {\n background: ({ color: { hex } }) => hex,\n },\n },\n preview: {\n background: ({ color: { hex } }) => hex,\n },\n huePointer: {\n transform: ({ hueSliderPointer: { top, left }, screenName }) =>\n screenName === 'xs' ? `translate3d(${left - 10}px,0px,0px)` : `translate3d(0px,${top - 10}px,0px)`,\n '& > div': {\n background: ({ color: { hue } }) => `hsl(${hue},100%, 50%)`,\n },\n },\n colorPreview: {\n background: ({ color: { hex } }) => hex,\n },\n});\n\nexport const PureColorPicker: React.FC<IPureColorPickerProps> = ({ hideChooseCancelButtons }) => {\n const {\n color,\n setColor,\n initialColor,\n hueSliderPointer,\n saturationLightnessPointer,\n setHueSliderPointer,\n setSaturationLightnessPointer,\n screenName,\n } = useContext<IColorPickerContextProps>(ColorPickerContext);\n const saturationLightnessPanelRef = useRef<HTMLDivElement>(null);\n const hueSliderRef = useRef<HTMLDivElement>(null);\n const classes = useStyles({ color, saturationLightnessPointer, hueSliderPointer, screenName });\n\n const inputOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n if (!hueSliderRef?.current || !saturationLightnessPanelRef?.current) {\n return;\n }\n try {\n const color = getColorFromHex(value);\n const { saturationLightnessPointer, hueSliderPointer } = getIndicatorPositionsFromHEX({\n hueSliderRef,\n saturationLightnessPanelRef,\n hex: event.target.value,\n });\n setColor(color);\n setSaturationLightnessPointer(saturationLightnessPointer);\n setHueSliderPointer(hueSliderPointer);\n } catch (e) {\n setColor({ ...color, hex: value });\n }\n };\n\n const restoreInitialColor = () => {\n setColor(initialColor);\n };\n\n return (\n <div className={`${styles[cssColorPicker]}`}>\n <SaturationLightnessPicker classes={classes} saturationLightnessPanelRef={saturationLightnessPanelRef} />\n <ColorPickerSlider hueSliderRef={hueSliderRef} classes={classes} />\n <div className={styles[cssColorPickerPreviewContainer]}>\n <div className={`${classes.preview} ${styles[cssColorPickerPreview]}`} />\n <div>\n <Input id=\"color-picker-id\" value={color?.hex} onChange={inputOnChange} />\n </div>\n </div>\n {!hideChooseCancelButtons && <ColorPickerButtons restoreInitialColor={restoreInitialColor} />}\n </div>\n );\n};\n\nexport default ({ initialColor, onChange, hideChooseCancelButtons, name }: IColorPickerProps) => {\n const colorPickerContext = useColorPicker({ initialColorHex: initialColor || '#ffffff', onChange });\n\n return (\n <ColorPickerContext.Provider value={colorPickerContext}>\n <input type=\"hidden\" name={name} />\n <PureColorPicker hideChooseCancelButtons={hideChooseCancelButtons} />\n </ColorPickerContext.Provider>\n );\n};\n"],"names":["createUseStyles","useRef","getColorFromHex","React","styles","cssColorPicker","SaturationLightnessPicker","ColorPickerSlider","cssColorPickerPreviewContainer","cssColorPickerPreview","Input","ColorPickerButtons","useColorPicker","ColorPickerContext"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../../../../src/components/color_picker/index.tsx"],"sourcesContent":["import React, { ChangeEvent, useContext, useRef } from 'react';\nimport { createUseStyles } from 'react-jss';\nimport Input from '@components/controls/components/input';\nimport styles from '@css/color_picker/main.module.less';\nimport SaturationLightnessPicker from './components/saturation_lightness_picker';\nimport ColorPickerSlider from './components/hue_picker';\nimport ColorPickerButtons from './components/buttons';\nimport { getColorFromHex, getIndicatorPositionsFromHEX } from './utilities';\nimport { IColorPickerContextProps, IColorPickerProps, IPureColorPickerProps } from './types';\nimport { ColorPickerContext } from './context';\nimport { cssColorPicker, cssColorPickerPreview, cssColorPickerPreviewContainer } from '@components/color_picker/css_classes';\nimport { useColorPicker } from '@components/color_picker/use_color_picker';\n\nconst useStyles = createUseStyles({\n saturationLightnessPanel: {\n background: ({ color: { hue } }) => `hsl(${hue},100%, 50%)`,\n },\n saturationLightnessPointer: {\n transform: ({ saturationLightnessPointer: { left, top } }) => `translate3d(${left - 10}px,${top - 10}px,0px)`,\n '& > div': {\n background: ({ color: { hex } }) => hex,\n },\n },\n preview: {\n background: ({ color: { hex } }) => hex,\n },\n huePointer: {\n transform: ({ hueSliderPointer: { top, left }, screenName }) =>\n screenName === 'xs' ? `translate3d(${left - 10}px,0px,0px)` : `translate3d(0px,${top - 10}px,0px)`,\n '& > div': {\n background: ({ color: { hue } }) => `hsl(${hue},100%, 50%)`,\n },\n },\n colorPreview: {\n background: ({ color: { hex } }) => hex,\n },\n});\n\nexport const PureColorPicker: React.FC<IPureColorPickerProps> = ({ hideChooseCancelButtons }) => {\n const {\n color,\n setColor,\n initialColor,\n hueSliderPointer,\n saturationLightnessPointer,\n setHueSliderPointer,\n setSaturationLightnessPointer,\n screenName,\n } = useContext<IColorPickerContextProps>(ColorPickerContext);\n const saturationLightnessPanelRef = useRef<HTMLDivElement>(null);\n const hueSliderRef = useRef<HTMLDivElement>(null);\n const classes = useStyles({ color, saturationLightnessPointer, hueSliderPointer, screenName });\n\n const inputOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n const hexValue = value.charAt(0) !== '#' ? `#${value}` : value;\n if (!hueSliderRef?.current || !saturationLightnessPanelRef?.current) {\n return;\n }\n\n if (value !== hexValue) {\n event.target.value = hexValue;\n }\n\n try {\n const color = getColorFromHex(hexValue);\n const { saturationLightnessPointer, hueSliderPointer } = getIndicatorPositionsFromHEX({\n hueSliderRef,\n saturationLightnessPanelRef,\n hex: event.target.value,\n });\n setColor(color);\n setSaturationLightnessPointer(saturationLightnessPointer);\n setHueSliderPointer(hueSliderPointer);\n } catch (e) {\n setColor({ ...color, hex: hexValue });\n }\n };\n\n const restoreInitialColor = () => {\n setColor(initialColor);\n };\n\n return (\n <div className={`${styles[cssColorPicker]}`}>\n <SaturationLightnessPicker classes={classes} saturationLightnessPanelRef={saturationLightnessPanelRef} />\n <ColorPickerSlider hueSliderRef={hueSliderRef} classes={classes} />\n <div className={styles[cssColorPickerPreviewContainer]}>\n <div className={`${classes.preview} ${styles[cssColorPickerPreview]}`} />\n <div>\n <Input id=\"color-picker-id\" value={color?.hex} onChange={inputOnChange} />\n </div>\n </div>\n {!hideChooseCancelButtons && <ColorPickerButtons restoreInitialColor={restoreInitialColor} />}\n </div>\n );\n};\n\nexport default ({ initialColor, onChange, hideChooseCancelButtons, name }: IColorPickerProps) => {\n const colorPickerContext = useColorPicker({ initialColorHex: initialColor || '#ffffff', onChange });\n\n return (\n <ColorPickerContext.Provider value={colorPickerContext}>\n <input type=\"hidden\" name={name} />\n <PureColorPicker hideChooseCancelButtons={hideChooseCancelButtons} />\n </ColorPickerContext.Provider>\n );\n};\n"],"names":["createUseStyles","useRef","getColorFromHex","React","styles","cssColorPicker","SaturationLightnessPicker","ColorPickerSlider","cssColorPickerPreviewContainer","cssColorPickerPreview","Input","ColorPickerButtons","useColorPicker","ColorPickerContext"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"textarea.js","sources":["../../../../../../src/components/controls/components/textarea.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\n\nimport cssClasses from '@css/input/main.module.less';\nimport { ITextareaProps } from '../types';\nimport { cssControl, cssControlS, cssControlDisabled, cssControlReadonly } from '../css_classes';\n\nconst Textarea: React.FC<ITextareaProps> = ({\n id,\n name,\n padding,\n placeholder,\n value,\n disabled,\n readOnly,\n onChange,\n onKeyPress,\n ...props\n}): JSX.Element => {\n const inputClasses = classnames(cssClasses[cssControl], {\n [cssClasses[cssControlS]]: padding === 'small',\n [cssClasses[cssControlDisabled]]: disabled,\n [cssClasses[cssControlReadonly]]: readOnly\n });\n\n return (\n <textarea\n {...props}\n className={inputClasses}\n id={id}\n name={name}\n defaultValue={value}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n onChange={onChange}\n onKeyPress={onKeyPress}\n ></textarea>\n );\n};\n\nexport default Textarea;\n"],"names":["classnames","cssClasses","cssControl","cssControlS","cssControlDisabled","cssControlReadonly","React"],"mappings":";;;;;;;;;;;;;;;IAOM,QAAQ,GAA6B,UAAC,EAW3C;;IAVG,IAAA,UAAE,EACF,cAAI,EACJ,oBAAO,EACP,4BAAW,EACX,gBAAK,EACL,sBAAQ,EACR,sBAAQ,EACR,sBAAQ,EACR,0BAAU,EACV,8HAAQ;IAER,IAAM,YAAY,GAAGA,8BAAU,CAACC,sBAAU,CAACC,sBAAU,CAAC;QAClD,GAACD,sBAAU,CAACE,uBAAW,CAAC,IAAG,OAAO,KAAK,OAAO;QAC9C,GAACF,sBAAU,CAACG,8BAAkB,CAAC,IAAG,QAAQ;QAC1C,GAACH,sBAAU,CAACI,8BAAkB,CAAC,IAAG,QAAQ;YAC5C,CAAC;IAEH,QACIC,wEACQ,KAAK,IACT,SAAS,EAAE,YAAY,EACvB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,KAAK,EACnB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,IACd,EACd;AACN;;;;"}
1
+ {"version":3,"file":"textarea.js","sources":["../../../../../../src/components/controls/components/textarea.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\n\nimport cssClasses from '@css/input/main.module.less';\nimport { ITextareaProps } from '../types';\nimport { cssControl, cssControlS, cssControlDisabled, cssControlReadonly } from '../css_classes';\n\nconst Textarea: React.FC<ITextareaProps> = ({\n id,\n name,\n padding,\n placeholder,\n value,\n disabled,\n readOnly,\n onChange,\n onKeyPress,\n ...props\n}): JSX.Element => {\n const inputClasses = classnames(cssClasses[cssControl], {\n [cssClasses[cssControlS]]: padding === 'small',\n [cssClasses[cssControlDisabled]]: disabled,\n [cssClasses[cssControlReadonly]]: readOnly,\n });\n\n return (\n <textarea\n {...props}\n className={inputClasses}\n id={id}\n name={name}\n defaultValue={value}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n onChange={onChange}\n onKeyPress={onKeyPress}\n ></textarea>\n );\n};\n\nexport default Textarea;\n"],"names":["classnames","cssClasses","cssControl","cssControlS","cssControlDisabled","cssControlReadonly","React"],"mappings":";;;;;;;;;;;;;;;IAOM,QAAQ,GAA6B,UAAC,EAW3C;;IAVG,IAAA,UAAE,EACF,cAAI,EACJ,oBAAO,EACP,4BAAW,EACX,gBAAK,EACL,sBAAQ,EACR,sBAAQ,EACR,sBAAQ,EACR,0BAAU,EACV,8HAAQ;IAER,IAAM,YAAY,GAAGA,8BAAU,CAACC,sBAAU,CAACC,sBAAU,CAAC;QAClD,GAACD,sBAAU,CAACE,uBAAW,CAAC,IAAG,OAAO,KAAK,OAAO;QAC9C,GAACF,sBAAU,CAACG,8BAAkB,CAAC,IAAG,QAAQ;QAC1C,GAACH,sBAAU,CAACI,8BAAkB,CAAC,IAAG,QAAQ;YAC5C,CAAC;IAEH,QACIC,wEACQ,KAAK,IACT,SAAS,EAAE,YAAY,EACvB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,KAAK,EACnB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,IACd,EACd;AACN;;;;"}
@@ -63,11 +63,15 @@ var PureColorPicker = function (_a) {
63
63
  var classes = useStyles({ color: color, saturationLightnessPointer: saturationLightnessPointer, hueSliderPointer: hueSliderPointer, screenName: screenName });
64
64
  var inputOnChange = function (event) {
65
65
  var value = event.target.value;
66
+ var hexValue = value.charAt(0) !== '#' ? "#" + value : value;
66
67
  if (!(hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current) || !(saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current)) {
67
68
  return;
68
69
  }
70
+ if (value !== hexValue) {
71
+ event.target.value = hexValue;
72
+ }
69
73
  try {
70
- var color_1 = getColorFromHex(value);
74
+ var color_1 = getColorFromHex(hexValue);
71
75
  var _a = getIndicatorPositionsFromHEX({
72
76
  hueSliderRef: hueSliderRef,
73
77
  saturationLightnessPanelRef: saturationLightnessPanelRef,
@@ -78,7 +82,7 @@ var PureColorPicker = function (_a) {
78
82
  setHueSliderPointer(hueSliderPointer_1);
79
83
  }
80
84
  catch (e) {
81
- setColor(__assign(__assign({}, color), { hex: value }));
85
+ setColor(__assign(__assign({}, color), { hex: hexValue }));
82
86
  }
83
87
  };
84
88
  var restoreInitialColor = function () {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../../src/components/color_picker/index.tsx"],"sourcesContent":["import React, { ChangeEvent, useContext, useRef } from 'react';\nimport { createUseStyles } from 'react-jss';\nimport Input from '@components/controls/components/input';\nimport styles from '@css/color_picker/main.module.less';\nimport SaturationLightnessPicker from './components/saturation_lightness_picker';\nimport ColorPickerSlider from './components/hue_picker';\nimport ColorPickerButtons from './components/buttons';\nimport { getColorFromHex, getIndicatorPositionsFromHEX } from './utilities';\nimport { IColorPickerContextProps, IColorPickerProps, IPureColorPickerProps } from './types';\nimport { ColorPickerContext } from './context';\nimport { cssColorPicker, cssColorPickerPreview, cssColorPickerPreviewContainer } from '@components/color_picker/css_classes';\nimport { useColorPicker } from '@components/color_picker/use_color_picker';\n\nconst useStyles = createUseStyles({\n saturationLightnessPanel: {\n background: ({ color: { hue } }) => `hsl(${hue},100%, 50%)`,\n },\n saturationLightnessPointer: {\n transform: ({ saturationLightnessPointer: { left, top } }) => `translate3d(${left - 10}px,${top - 10}px,0px)`,\n '& > div': {\n background: ({ color: { hex } }) => hex,\n },\n },\n preview: {\n background: ({ color: { hex } }) => hex,\n },\n huePointer: {\n transform: ({ hueSliderPointer: { top, left }, screenName }) =>\n screenName === 'xs' ? `translate3d(${left - 10}px,0px,0px)` : `translate3d(0px,${top - 10}px,0px)`,\n '& > div': {\n background: ({ color: { hue } }) => `hsl(${hue},100%, 50%)`,\n },\n },\n colorPreview: {\n background: ({ color: { hex } }) => hex,\n },\n});\n\nexport const PureColorPicker: React.FC<IPureColorPickerProps> = ({ hideChooseCancelButtons }) => {\n const {\n color,\n setColor,\n initialColor,\n hueSliderPointer,\n saturationLightnessPointer,\n setHueSliderPointer,\n setSaturationLightnessPointer,\n screenName,\n } = useContext<IColorPickerContextProps>(ColorPickerContext);\n const saturationLightnessPanelRef = useRef<HTMLDivElement>(null);\n const hueSliderRef = useRef<HTMLDivElement>(null);\n const classes = useStyles({ color, saturationLightnessPointer, hueSliderPointer, screenName });\n\n const inputOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n if (!hueSliderRef?.current || !saturationLightnessPanelRef?.current) {\n return;\n }\n try {\n const color = getColorFromHex(value);\n const { saturationLightnessPointer, hueSliderPointer } = getIndicatorPositionsFromHEX({\n hueSliderRef,\n saturationLightnessPanelRef,\n hex: event.target.value,\n });\n setColor(color);\n setSaturationLightnessPointer(saturationLightnessPointer);\n setHueSliderPointer(hueSliderPointer);\n } catch (e) {\n setColor({ ...color, hex: value });\n }\n };\n\n const restoreInitialColor = () => {\n setColor(initialColor);\n };\n\n return (\n <div className={`${styles[cssColorPicker]}`}>\n <SaturationLightnessPicker classes={classes} saturationLightnessPanelRef={saturationLightnessPanelRef} />\n <ColorPickerSlider hueSliderRef={hueSliderRef} classes={classes} />\n <div className={styles[cssColorPickerPreviewContainer]}>\n <div className={`${classes.preview} ${styles[cssColorPickerPreview]}`} />\n <div>\n <Input id=\"color-picker-id\" value={color?.hex} onChange={inputOnChange} />\n </div>\n </div>\n {!hideChooseCancelButtons && <ColorPickerButtons restoreInitialColor={restoreInitialColor} />}\n </div>\n );\n};\n\nexport default ({ initialColor, onChange, hideChooseCancelButtons, name }: IColorPickerProps) => {\n const colorPickerContext = useColorPicker({ initialColorHex: initialColor || '#ffffff', onChange });\n\n return (\n <ColorPickerContext.Provider value={colorPickerContext}>\n <input type=\"hidden\" name={name} />\n <PureColorPicker hideChooseCancelButtons={hideChooseCancelButtons} />\n </ColorPickerContext.Provider>\n );\n};\n"],"names":["ColorPickerSlider"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../../../../src/components/color_picker/index.tsx"],"sourcesContent":["import React, { ChangeEvent, useContext, useRef } from 'react';\nimport { createUseStyles } from 'react-jss';\nimport Input from '@components/controls/components/input';\nimport styles from '@css/color_picker/main.module.less';\nimport SaturationLightnessPicker from './components/saturation_lightness_picker';\nimport ColorPickerSlider from './components/hue_picker';\nimport ColorPickerButtons from './components/buttons';\nimport { getColorFromHex, getIndicatorPositionsFromHEX } from './utilities';\nimport { IColorPickerContextProps, IColorPickerProps, IPureColorPickerProps } from './types';\nimport { ColorPickerContext } from './context';\nimport { cssColorPicker, cssColorPickerPreview, cssColorPickerPreviewContainer } from '@components/color_picker/css_classes';\nimport { useColorPicker } from '@components/color_picker/use_color_picker';\n\nconst useStyles = createUseStyles({\n saturationLightnessPanel: {\n background: ({ color: { hue } }) => `hsl(${hue},100%, 50%)`,\n },\n saturationLightnessPointer: {\n transform: ({ saturationLightnessPointer: { left, top } }) => `translate3d(${left - 10}px,${top - 10}px,0px)`,\n '& > div': {\n background: ({ color: { hex } }) => hex,\n },\n },\n preview: {\n background: ({ color: { hex } }) => hex,\n },\n huePointer: {\n transform: ({ hueSliderPointer: { top, left }, screenName }) =>\n screenName === 'xs' ? `translate3d(${left - 10}px,0px,0px)` : `translate3d(0px,${top - 10}px,0px)`,\n '& > div': {\n background: ({ color: { hue } }) => `hsl(${hue},100%, 50%)`,\n },\n },\n colorPreview: {\n background: ({ color: { hex } }) => hex,\n },\n});\n\nexport const PureColorPicker: React.FC<IPureColorPickerProps> = ({ hideChooseCancelButtons }) => {\n const {\n color,\n setColor,\n initialColor,\n hueSliderPointer,\n saturationLightnessPointer,\n setHueSliderPointer,\n setSaturationLightnessPointer,\n screenName,\n } = useContext<IColorPickerContextProps>(ColorPickerContext);\n const saturationLightnessPanelRef = useRef<HTMLDivElement>(null);\n const hueSliderRef = useRef<HTMLDivElement>(null);\n const classes = useStyles({ color, saturationLightnessPointer, hueSliderPointer, screenName });\n\n const inputOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n const hexValue = value.charAt(0) !== '#' ? `#${value}` : value;\n if (!hueSliderRef?.current || !saturationLightnessPanelRef?.current) {\n return;\n }\n\n if (value !== hexValue) {\n event.target.value = hexValue;\n }\n\n try {\n const color = getColorFromHex(hexValue);\n const { saturationLightnessPointer, hueSliderPointer } = getIndicatorPositionsFromHEX({\n hueSliderRef,\n saturationLightnessPanelRef,\n hex: event.target.value,\n });\n setColor(color);\n setSaturationLightnessPointer(saturationLightnessPointer);\n setHueSliderPointer(hueSliderPointer);\n } catch (e) {\n setColor({ ...color, hex: hexValue });\n }\n };\n\n const restoreInitialColor = () => {\n setColor(initialColor);\n };\n\n return (\n <div className={`${styles[cssColorPicker]}`}>\n <SaturationLightnessPicker classes={classes} saturationLightnessPanelRef={saturationLightnessPanelRef} />\n <ColorPickerSlider hueSliderRef={hueSliderRef} classes={classes} />\n <div className={styles[cssColorPickerPreviewContainer]}>\n <div className={`${classes.preview} ${styles[cssColorPickerPreview]}`} />\n <div>\n <Input id=\"color-picker-id\" value={color?.hex} onChange={inputOnChange} />\n </div>\n </div>\n {!hideChooseCancelButtons && <ColorPickerButtons restoreInitialColor={restoreInitialColor} />}\n </div>\n );\n};\n\nexport default ({ initialColor, onChange, hideChooseCancelButtons, name }: IColorPickerProps) => {\n const colorPickerContext = useColorPicker({ initialColorHex: initialColor || '#ffffff', onChange });\n\n return (\n <ColorPickerContext.Provider value={colorPickerContext}>\n <input type=\"hidden\" name={name} />\n <PureColorPicker hideChooseCancelButtons={hideChooseCancelButtons} />\n </ColorPickerContext.Provider>\n );\n};\n"],"names":["ColorPickerSlider"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"textarea.js","sources":["../../../../../../src/components/controls/components/textarea.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\n\nimport cssClasses from '@css/input/main.module.less';\nimport { ITextareaProps } from '../types';\nimport { cssControl, cssControlS, cssControlDisabled, cssControlReadonly } from '../css_classes';\n\nconst Textarea: React.FC<ITextareaProps> = ({\n id,\n name,\n padding,\n placeholder,\n value,\n disabled,\n readOnly,\n onChange,\n onKeyPress,\n ...props\n}): JSX.Element => {\n const inputClasses = classnames(cssClasses[cssControl], {\n [cssClasses[cssControlS]]: padding === 'small',\n [cssClasses[cssControlDisabled]]: disabled,\n [cssClasses[cssControlReadonly]]: readOnly\n });\n\n return (\n <textarea\n {...props}\n className={inputClasses}\n id={id}\n name={name}\n defaultValue={value}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n onChange={onChange}\n onKeyPress={onKeyPress}\n ></textarea>\n );\n};\n\nexport default Textarea;\n"],"names":[],"mappings":";;;;;;IAOM,QAAQ,GAA6B,UAAC,EAW3C;;IAVG,IAAA,UAAE,EACF,cAAI,EACJ,oBAAO,EACP,4BAAW,EACX,gBAAK,EACL,sBAAQ,EACR,sBAAQ,EACR,sBAAQ,EACR,0BAAU,EACV,uHAAQ;IAER,IAAM,YAAY,GAAG,UAAU,CAAC,UAAU,CAAC,UAAU,CAAC;QAClD,GAAC,UAAU,CAAC,WAAW,CAAC,IAAG,OAAO,KAAK,OAAO;QAC9C,GAAC,UAAU,CAAC,kBAAkB,CAAC,IAAG,QAAQ;QAC1C,GAAC,UAAU,CAAC,kBAAkB,CAAC,IAAG,QAAQ;YAC5C,CAAC;IAEH,QACI,6CACQ,KAAK,IACT,SAAS,EAAE,YAAY,EACvB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,KAAK,EACnB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,IACd,EACd;AACN;;;;"}
1
+ {"version":3,"file":"textarea.js","sources":["../../../../../../src/components/controls/components/textarea.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\n\nimport cssClasses from '@css/input/main.module.less';\nimport { ITextareaProps } from '../types';\nimport { cssControl, cssControlS, cssControlDisabled, cssControlReadonly } from '../css_classes';\n\nconst Textarea: React.FC<ITextareaProps> = ({\n id,\n name,\n padding,\n placeholder,\n value,\n disabled,\n readOnly,\n onChange,\n onKeyPress,\n ...props\n}): JSX.Element => {\n const inputClasses = classnames(cssClasses[cssControl], {\n [cssClasses[cssControlS]]: padding === 'small',\n [cssClasses[cssControlDisabled]]: disabled,\n [cssClasses[cssControlReadonly]]: readOnly,\n });\n\n return (\n <textarea\n {...props}\n className={inputClasses}\n id={id}\n name={name}\n defaultValue={value}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n onChange={onChange}\n onKeyPress={onKeyPress}\n ></textarea>\n );\n};\n\nexport default Textarea;\n"],"names":[],"mappings":";;;;;;IAOM,QAAQ,GAA6B,UAAC,EAW3C;;IAVG,IAAA,UAAE,EACF,cAAI,EACJ,oBAAO,EACP,4BAAW,EACX,gBAAK,EACL,sBAAQ,EACR,sBAAQ,EACR,sBAAQ,EACR,0BAAU,EACV,uHAAQ;IAER,IAAM,YAAY,GAAG,UAAU,CAAC,UAAU,CAAC,UAAU,CAAC;QAClD,GAAC,UAAU,CAAC,WAAW,CAAC,IAAG,OAAO,KAAK,OAAO;QAC9C,GAAC,UAAU,CAAC,kBAAkB,CAAC,IAAG,QAAQ;QAC1C,GAAC,UAAU,CAAC,kBAAkB,CAAC,IAAG,QAAQ;YAC5C,CAAC;IAEH,QACI,6CACQ,KAAK,IACT,SAAS,EAAE,YAAY,EACvB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,KAAK,EACnB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,IACd,EACd;AACN;;;;"}
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { ITextareaProps } from '../types';
3
+ declare const Textarea: React.FC<ITextareaProps>;
4
+ export default Textarea;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { IControlCellSelector } from '../../types';
3
+ declare const ControlCellSelector: React.FC<IControlCellSelector>;
4
+ export default ControlCellSelector;
@@ -0,0 +1,16 @@
1
+ import React from 'react';
2
+ import { IControlCheckboxProps } from '../../types';
3
+ /**
4
+ * @component
5
+ * @example
6
+ * return (
7
+ * <ControlCheckbox
8
+ * id="checkbox_example"
9
+ * label="Label"
10
+ * labelPosition="left"
11
+ * checked
12
+ * />
13
+ * )
14
+ */
15
+ declare const ControlCheckbox: React.FC<IControlCheckboxProps>;
16
+ export default ControlCheckbox;
@@ -0,0 +1,16 @@
1
+ import React from 'react';
2
+ import { IControlCheckboxProps } from '../../types';
3
+ /**
4
+ * @component
5
+ * @example
6
+ * return (
7
+ * <ControlCheckbox
8
+ * id="checkbox_example"
9
+ * label="Label"
10
+ * labelPosition="left"
11
+ * checked
12
+ * />
13
+ * )
14
+ */
15
+ declare const ControlCheckboxSwitch: React.FC<IControlCheckboxProps>;
16
+ export default ControlCheckboxSwitch;
@@ -0,0 +1,16 @@
1
+ import React from 'react';
2
+ import { IControlColorPickerProps } from '@components/controls/types';
3
+ /**
4
+ * @component
5
+ * @example
6
+ * return (
7
+ * <ControlColorPicker
8
+ * initialColor="#FF00FF"
9
+ * name="Example color picker"
10
+ * isRequired
11
+ * label="Example color picker label"
12
+ * />
13
+ * )
14
+ */
15
+ declare const ControlColorPicker: React.FC<IControlColorPickerProps>;
16
+ export default ControlColorPicker;
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { IDatepickerProps } from '@components/date_picker/types';
3
+ declare const DatePickerWithDropdown: (props: IDatepickerProps) => JSX.Element;
4
+ export default DatePickerWithDropdown;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { IControlFilePicker } from '../../types';
3
+ declare const ControlFilePicker: React.FC<IControlFilePicker>;
4
+ export default ControlFilePicker;
@@ -0,0 +1,19 @@
1
+ import React from 'react';
2
+ import { IControlInputProps } from '../../types';
3
+ /**
4
+ * @component
5
+ * @example
6
+ * return (
7
+ * <ControlInput
8
+ * label="Label"
9
+ * isRequired={true}
10
+ * id="input_example"
11
+ * postfix="zł"
12
+ * placeholder="Enter text"
13
+ * value="example"
14
+ * onChange={() => {}}
15
+ * />
16
+ * )
17
+ */
18
+ declare const ControlInput: React.FC<IControlInputProps>;
19
+ export default ControlInput;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { IControlMultiSelectProps } from '../../types';
3
+ declare const ControlMultiSelect: React.FC<IControlMultiSelectProps>;
4
+ export default ControlMultiSelect;
@@ -0,0 +1,16 @@
1
+ import React from 'react';
2
+ import { IControlRadioProps } from '../../types';
3
+ /**
4
+ * @component
5
+ * @example
6
+ * return (
7
+ * <ControlRadio
8
+ * id="checkbox_example"
9
+ * label="Label"
10
+ * labelPosition="left"
11
+ * checked
12
+ * />
13
+ * )
14
+ */
15
+ declare const ControlRadio: React.FC<IControlRadioProps>;
16
+ export default ControlRadio;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { IControlRadioGroup } from '../../types';
3
+ declare const ControlRadioGroup: React.FC<IControlRadioGroup>;
4
+ export default ControlRadioGroup;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { IControlRange } from '../../types';
3
+ declare const ControlRange: React.FC<IControlRange>;
4
+ export default ControlRange;
@@ -0,0 +1,19 @@
1
+ import React from 'react';
2
+ import { IControlSelectProps } from '../../types';
3
+ /**
4
+ * @component
5
+ * @example
6
+ * return (
7
+ * <ControlInput
8
+ * label="Label"
9
+ * isRequired={true}
10
+ * id="input_example"
11
+ * postfix="zł"
12
+ * placeholder="Enter text"
13
+ * value="example"
14
+ * onChange={() => {}}
15
+ * />
16
+ * )
17
+ */
18
+ declare const ControlSelect: React.FC<IControlSelectProps>;
19
+ export default ControlSelect;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { IControlTagsSelectorProps } from '../../types';
3
+ declare const ControlTagsSelector: React.FC<IControlTagsSelectorProps>;
4
+ export default ControlTagsSelector;
@@ -0,0 +1,19 @@
1
+ import React from 'react';
2
+ import { IControlTextareaProps } from '../../types';
3
+ /**
4
+ * @component
5
+ * @example
6
+ * return (
7
+ * <ControlInput
8
+ * label="Label"
9
+ * isRequired={true}
10
+ * id="input_example"
11
+ * postfix="zł"
12
+ * placeholder="Enter text"
13
+ * value="example"
14
+ * onChange={() => {}}
15
+ * />
16
+ * )
17
+ */
18
+ declare const ControlTextarea: React.FC<IControlTextareaProps>;
19
+ export default ControlTextarea;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { IControlProps, IControlComposition } from './types';
3
+ declare const Control: React.FC<IControlProps> & IControlComposition;
4
+ export default Control;
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ declare const CommonRanges: () => JSX.Element;
3
+ export default CommonRanges;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { IControllerProps } from '../types';
3
+ declare const MonthController: React.FC<IControllerProps>;
4
+ export default MonthController;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { IPureDatepickerProps } from '@components/date_picker/types';
3
+ export declare const PureDatepicker: React.FC<IPureDatepickerProps>;
4
+ export default PureDatepicker;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { IRangePickerProps } from '@components/date_picker/types';
3
+ export declare const RangePicker: React.FC<IRangePickerProps>;
4
+ export default RangePicker;
@@ -0,0 +1,4 @@
1
+ import { FC } from 'react';
2
+ import { ISingleDatepickerProps } from '@components/date_picker/types';
3
+ export declare const SingleDatepicker: FC<ISingleDatepickerProps>;
4
+ export default SingleDatepicker;
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ import { IDatepickerProps } from './types';
3
+ import RangePicker from './hoc/range_picker';
4
+ import SingleDatepicker from './hoc/single_date_picker';
5
+ export { RangePicker, SingleDatepicker };
6
+ declare const _default: ({ defaultDate, defaultRange, type, name, onChange, maxDate, minDate, maxRange, minRange, className, showButtons, showDefaultRanges, }: IDatepickerProps) => JSX.Element;
7
+ export default _default;
@@ -0,0 +1,22 @@
1
+ import React from 'react';
2
+ import { IDropdownOptionMultipleProps } from '../types';
3
+ /**
4
+ * Dropdown.OptionMultiple component. Should be only used within Dropdown.List
5
+ * @component
6
+ * @example
7
+ * const option = {
8
+ * text: 'Option 1',
9
+ * value: '1'
10
+ * }
11
+ *
12
+ * <Dropdown.OptionMultiple
13
+ * key="id1"
14
+ * option={option}
15
+ * isSelected={false}
16
+ * isDisabled={false}
17
+ * isReadonly={false}
18
+ * onClick={(option) => console.log(option)}
19
+ * />
20
+ */
21
+ declare const OptionMultiple: React.FC<IDropdownOptionMultipleProps>;
22
+ export default OptionMultiple;
@@ -0,0 +1,20 @@
1
+ import React from 'react';
2
+ import { IMultiSelectProps } from '../../types';
3
+ /**
4
+ * MultiSelect component. Build with Dropdown composed components.
5
+ *
6
+ * @component
7
+ * @example
8
+ * const options = [{
9
+ * text: 'Option 1',
10
+ * value: 'value1'
11
+ * }, {
12
+ * text: 'Option 2,,
13
+ * value: 'value2'
14
+ * }];
15
+ * return (
16
+ * <MultiSelect name="my_select_name" options={options} onChange={(option) => console.log(option)} />
17
+ * )
18
+ */
19
+ declare const Multiple: React.FC<IMultiSelectProps>;
20
+ export default Multiple;
@@ -0,0 +1,20 @@
1
+ import React from 'react';
2
+ import { ISelectProps } from '../../types';
3
+ /**
4
+ * Select component. Build with Dropdown composed components.
5
+ *
6
+ * @component
7
+ * @example
8
+ * const options = [{
9
+ * text: 'Option 1',
10
+ * value: 'value1'
11
+ * }, {
12
+ * text: 'Option 2,,
13
+ * value: 'value2'
14
+ * }];
15
+ * return (
16
+ * <Select name="my_select_name" options={options} onChange={(option) => console.log(option)} />
17
+ * )
18
+ */
19
+ declare const Select: React.FC<ISelectProps>;
20
+ export default Select;
@@ -0,0 +1,22 @@
1
+ import React from 'react';
2
+ import { IDropdownProps, IDropdownComposition } from './types';
3
+ /**
4
+ * Dropdown composition component. Provides several Dropdown dependant components which can be composed to create selects, multiselects or dropdowns.
5
+ *
6
+ * @component
7
+ * @example
8
+ * return (
9
+ * <Dropdown>
10
+ * <Dropdown.Label label="Wybierz link" />
11
+ * <Dropdown.Content>
12
+ * <Dropdown.List>
13
+ * <Dropdown.Link text="shoper.pl" href="https://shoper.pl" />
14
+ * <Dropdown.Link text="forum.shoper.pl" href="https://forum.shoper.pl" />
15
+ * <Dropdown.Link text="shoper.pl/help" href="https://shoper.pl/help" />
16
+ * </Dropdown.List>
17
+ * </Dropdown.Content>
18
+ * <Dropdown>
19
+ * )
20
+ */
21
+ declare const Dropdown: React.FC<IDropdownProps> & IDropdownComposition;
22
+ export default Dropdown;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { ITagsSelectorProps } from './types';
3
+ declare const TagsSelector: React.FC<ITagsSelectorProps>;
4
+ export default TagsSelector;
@@ -0,0 +1,79 @@
1
+ import './i18n';
2
+ /**
3
+ * import components for export
4
+ */
5
+ import Button from '@components/button';
6
+ import ButtonsGroup from '@components/buttons_group';
7
+ import ColorPicker from '@components/color_picker';
8
+ import ControlInput from '@components/controls/hoc/control_input';
9
+ import ControlCheckbox from '@components/controls/hoc/control_checkbox';
10
+ import ControlCheckboxSwitch from '@components/controls/hoc/control_checkbox_switch';
11
+ import ControlRadio from '@components/controls/hoc/control_radio';
12
+ import ControlRange from '@components/controls/hoc/control_range';
13
+ import ControlDatepicker from '@components/controls/hoc/control_date_picker';
14
+ import ControlColorPicker from '@components/controls/hoc/control_color_picker';
15
+ import ControlTagsSelector from '@components/controls/hoc/control_tags_selector';
16
+ import ControlTextarea from '@components/controls/hoc/control_textarea';
17
+ import ControlSelect from '@components/controls/hoc/control_select';
18
+ import ControlMultiSelect from '@components/controls/hoc/control_multi_select';
19
+ import ControlFilePicker from '@components/controls/hoc/control_file_picker';
20
+ import ControlCellSelector from '@components/controls/hoc/control_cell_selector';
21
+ import Datepicker from '@components/date_picker';
22
+ import Dropdown from '@components/dropdown';
23
+ import Gallery from '@components/gallery';
24
+ import Grid from '@components/grid';
25
+ import Heading from '@components/heading';
26
+ import Label from '@components/label';
27
+ import FilePicker from '@components/file_picker';
28
+ import ModalProvider from '@components/modal/hoc/modal_provider';
29
+ import AbsoluteModal from '@components/modal/hoc/absolute_modal';
30
+ import RelativeModal from '@components/modal/hoc/relative_modal';
31
+ import MultiSelect from '@components/dropdown/hoc/multiselect';
32
+ import Modal from '@components/modal';
33
+ import Select from '@components/dropdown/hoc/select';
34
+ import Spacing from '@components/spacing';
35
+ import Table from '@components/table';
36
+ import DataTable from '@components/table/hoc/data-table';
37
+ import { TabItem, Tabs } from '@components/tabs';
38
+ import Tag from '@components/tag';
39
+ import TagsSelector from '@components/tags_selector';
40
+ import Hint from '@components/hint';
41
+ import Loader from '@components/loader';
42
+ import WithLoader from '@components/with_loader';
43
+ /**
44
+ * Assets
45
+ */
46
+ import IconCalendar from '@assets/icon_calendar';
47
+ import IconArrow from '@assets/icon_arrow';
48
+ import IconTick from '@assets/icon_tick';
49
+ /**
50
+ * import context for export
51
+ */
52
+ import { DropdownContext } from '@components/dropdown/context';
53
+ import { ModalContext } from '@components/modal/context/modal_context';
54
+ /**
55
+ * import types for export
56
+ */
57
+ import { IDropdownProps, ISelectOption } from '@components/dropdown/types';
58
+ import { IHeadingProps } from '@components/heading/types';
59
+ import { ICellProps, IIRowProps, ITableProps } from '@components/table/types';
60
+ import { IDropdownContext } from '@components/dropdown/context/types';
61
+ import ControlRadioGroup from '@components/controls/hoc/control_radio_group';
62
+ import { IControlRadioGroupOption } from '@components/controls/types';
63
+ import { IColor } from '@components/color_picker/types';
64
+ import { IDatepickerRange } from '@components/date_picker/types';
65
+ import { TFilePickerFile } from '@components/file_picker/types';
66
+ import MessageBox from '@components/message-box';
67
+ import FlashMessenger from '@components/flash_messenger';
68
+ import { TMessageBoxType } from '@components/message-box/types';
69
+ import { useFlashMessenger } from '@components/flash_messenger/context';
70
+ import { ILoaderProps } from '@components/loader/types';
71
+ import { IWithLoader } from '@components/with_loader/types';
72
+ /**
73
+ * export components
74
+ */
75
+ export { Button, ButtonsGroup, Dropdown, Select, MultiSelect, Label, ControlInput, ControlCheckbox, ControlCheckboxSwitch, ControlRadio, ControlSelect, ControlRange, ControlMultiSelect, ControlTextarea, Gallery, Datepicker, ColorPicker, ControlColorPicker, ControlDatepicker, ControlFilePicker, Heading, Modal, ModalProvider, AbsoluteModal, RelativeModal, Tabs, TabItem, Tag, TagsSelector, ControlTagsSelector, Table, DataTable, Grid, DropdownContext, ModalContext, IconCalendar, Spacing, IconArrow, IconTick, FilePicker, ControlCellSelector, Hint, ControlRadioGroup, MessageBox, FlashMessenger, useFlashMessenger, Loader, WithLoader, };
76
+ /**
77
+ * export types
78
+ */
79
+ export type { IDropdownProps, ISelectOption, IHeadingProps, ICellProps, IIRowProps, ITableProps, IDropdownContext, IControlRadioGroupOption, IColor, IDatepickerRange, TFilePickerFile, TMessageBoxType, ILoaderProps, IWithLoader, };