npm - @hitachivantara/uikit-react-core - Versions diffs - 5.16.0 → 5.17.0 - Mend

@hitachivantara/uikit-react-core 5.16.0 → 5.17.0

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 (102) hide show

package/dist/esm/components/QueryBuilder/RuleGroup/RuleGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RuleGroup.js","sources":["../../../../../src/components/QueryBuilder/RuleGroup/RuleGroup.tsx"],"sourcesContent":["import { useCallback, useContext } from \"react\";\nimport { Add, Delete, Info } from \"@hitachivantara/uikit-react-icons\";\nimport {\n HvButton,\n HvEmptyState,\n HvGrid,\n HvMultiButton,\n HvTypography,\n} from \"@core/components\";\nimport { withTooltip } from \"@core/hocs\";\nimport { ClassNames } from \"@emotion/react\";\nimport { Rule } from \"../Rule\";\nimport queryBuilderClasses, {\n HvQueryBuilderClasses,\n} from \"../queryBuilderClasses\";\nimport { QueryBuilderContext } from \"../Context\";\nimport { styles } from \"./RuleGroup.styles\";\n\nexport interface RuleGroupProps {\n /*\n Override or extend the styles applied to the component.\n * See CSS API tab for more details.\n */\n classes?: HvQueryBuilderClasses;\n id?: number;\n level?: number;\n combinator?: string;\n rules?: any[];\n}\n\nexport const RuleGroup = ({\n level = 0,\n id,\n combinator = \"and\",\n rules = [],\n classes,\n}: RuleGroupProps) => {\n const context = useContext(QueryBuilderContext);\n\n const { dispatchAction, askAction, maxDepth, combinators, labels, readOnly } =\n context;\n const normalizedMaxDepth = maxDepth - 1;\n\n const actionButtons = (\n <ClassNames>\n {({ css, cx }) => (\n <>\n <div\n className={cx(\n queryBuilderClasses.buttonBackground,\n css(styles.buttonBackground),\n classes?.buttonBackground\n )}\n >\n <HvButton\n variant=\"secondarySubtle\"\n onClick={() => {\n dispatchAction({ type: \"add-rule\", id });\n }}\n disabled={readOnly}\n startIcon={<Add />}\n >\n {level === 0 && labels.query?.addRule?.label != null\n ? labels.query?.addRule?.label\n : labels.group.addRule.label}\n </HvButton>\n </div>\n {level <= normalizedMaxDepth && (\n <div\n className={cx(\n queryBuilderClasses.buttonBackground,\n css(styles.buttonBackground),\n classes?.buttonBackground\n )}\n >\n <HvButton\n variant=\"secondarySubtle\"\n onClick={() => {\n dispatchAction({ type: \"add-group\", id });\n }}\n disabled={readOnly}\n startIcon={<Add />}\n >\n {level === 0 && labels.query?.addGroup?.label != null\n ? labels.query?.addGroup?.label\n : labels.group.addGroup.label}\n </HvButton>\n </div>\n )}\n </>\n )}\n </ClassNames>\n );\n\n const DeleteIcon = withTooltip(\n () => (\n <ClassNames>\n {({ css, cx }) => (\n <Delete\n className={\n readOnly\n ? cx(\n queryBuilderClasses.topRemoveButtonDisabled,\n css(styles.topRemoveButtonDisabled),\n classes?.topRemoveButtonDisabled\n )\n : \"\"\n }\n />\n )}\n </ClassNames>\n ),\n level === 0 && labels.query?.delete?.tooltip\n ? labels.query?.delete?.tooltip\n : labels.group.delete.tooltip,\n \"top\"\n );\n\n const onClickCombinator = useCallback(\n (item) => {\n dispatchAction({\n type: \"set-combinator\",\n id,\n combinator: item.operand,\n });\n },\n [dispatchAction, id]\n );\n\n return (\n <ClassNames>\n {({ css, cx }) => (\n <div\n className={cx(\n queryBuilderClasses.root,\n level === 0\n ? queryBuilderClasses.topGroup\n : queryBuilderClasses.subGroup,\n css(styles.root),\n level === 0 ? css(styles.topGroup) : css(styles.subGroup),\n classes?.root,\n level === 0 ? classes?.topGroup : classes?.subGroup\n )}\n >\n <HvGrid container>\n <HvGrid item>\n <HvMultiButton\n className={cx(\n queryBuilderClasses.combinator,\n queryBuilderClasses.topCombinator,\n css(styles.combinator),\n css(styles.topCombinator),\n classes?.combinator,\n classes?.topCombinator\n )}\n disabled={readOnly}\n >\n {combinators &&\n combinators.map((item) => (\n <HvButton\n key={item.operand}\n className={cx(\n queryBuilderClasses.combinatorButton,\n css(styles.combinatorButton),\n classes?.combinatorButton\n )}\n selected={item.operand === combinator}\n onClick={() => item.operand && onClickCombinator(item)}\n disabled={readOnly}\n size=\"xs\"\n >\n {item.label}\n </HvButton>\n ))}\n </HvMultiButton>\n </HvGrid>\n <HvGrid item>\n <div\n className={cx(\n queryBuilderClasses.buttonBackground,\n queryBuilderClasses.topRemoveButton,\n css(styles.buttonBackground),\n css(styles.topRemoveButton),\n classes?.buttonBackground,\n classes?.topRemoveButton\n )}\n >\n <HvButton\n icon\n className={cx(\n queryBuilderClasses.removeButton,\n css(styles.removeButton),\n classes?.removeButton\n )}\n onClick={() => {\n askAction({\n actions: [{ type: \"remove-node\", id }],\n dialog:\n level === 0 && labels.query?.delete != null\n ? labels.query.delete\n : labels.group.delete,\n });\n }}\n aria-label={\n level === 0 && labels.query?.delete?.ariaLabel\n ? labels.query?.delete?.ariaLabel\n : labels.group.delete.ariaLabel\n }\n disabled={readOnly}\n variant=\"secondaryGhost\"\n >\n <DeleteIcon />\n </HvButton>\n </div>\n </HvGrid>\n </HvGrid>\n {rules?.length > 0 && (\n <div\n className={cx(\n queryBuilderClasses.rulesContainer,\n level > 0 && queryBuilderClasses.subRulesContainer,\n level === 0 && queryBuilderClasses.topRulesContainer,\n css(styles.rulesContainer),\n level > 0 && css(styles.subRulesContainer),\n level === 0 && css(styles.topRulesContainer),\n classes?.rulesContainer,\n level > 0 && classes?.subRulesContainer,\n level === 0 && classes?.topRulesContainer\n )}\n >\n {rules.map((rule, index) => {\n if (\"combinator\" in rule) {\n return (\n <RuleGroup\n key={rule.id ?? index}\n level={level + 1}\n {...rule}\n id={rule.id}\n classes={classes}\n />\n );\n }\n\n const isInvalid =\n combinator === \"and\" &&\n rules.some((r, i) => {\n if (\"attribute\" in r) {\n if (\n r.attribute === rule.attribute &&\n r.id !== rule.id &&\n i < index\n ) {\n return true;\n }\n }\n return false;\n });\n\n return (\n <Rule\n key={rule.id ?? index}\n {...rule}\n isInvalid={isInvalid}\n id={rule.id}\n combinator={combinator}\n />\n );\n })}\n </div>\n )}\n {rules?.length === 0 && (\n <HvEmptyState\n title={labels.empty?.title}\n message={\n <>\n <HvTypography\n variant=\"link\"\n component=\"a\"\n onClick={() => {\n dispatchAction({ type: \"add-rule\", id });\n }}\n style={{ cursor: \"pointer\", textDecoration: \"underline\" }}\n >\n {`${labels.empty?.createCondition}`}\n </HvTypography>\n {level <= normalizedMaxDepth && (\n <>\n {`${labels.empty?.spacer}`}\n <HvTypography\n variant=\"link\"\n component=\"a\"\n onClick={() => {\n dispatchAction({ type: \"add-group\", id });\n }}\n style={{\n cursor: \"pointer\",\n textDecoration: \"underline\",\n }}\n >\n {`${labels.empty?.createGroup}`}\n </HvTypography>\n </>\n )}\n </>\n }\n icon={<Info />}\n />\n )}\n <HvGrid container>\n <HvGrid\n item\n className={cx(\n queryBuilderClasses.actionButtonContainer,\n queryBuilderClasses.topActionButtonContainer,\n css(styles.actionButtonContainer),\n css(styles.topActionButtonContainer),\n classes?.actionButtonContainer,\n classes?.topActionButtonContainer\n )}\n >\n {actionButtons}\n </HvGrid>\n </HvGrid>\n </div>\n )}\n </ClassNames>\n );\n};\n"],"names":["RuleGroup","level","id","combinator","rules","classes","context","useContext","QueryBuilderContext","dispatchAction","askAction","maxDepth","combinators","labels","readOnly","normalizedMaxDepth","actionButtons","ClassNames","children","css","cx","_Fragment","_jsx","className","queryBuilderClasses","buttonBackground","styles","HvButton","variant","onClick","type","disabled","startIcon","Add","query","addRule","label","group","addGroup","DeleteIcon","withTooltip","Delete","topRemoveButtonDisabled","delete","tooltip","onClickCombinator","useCallback","item","operand","root","topGroup","subGroup","_jsxs","HvGrid","container","HvMultiButton","topCombinator","map","combinatorButton","selected","size","topRemoveButton","icon","removeButton","actions","dialog","ariaLabel","length","rulesContainer","subRulesContainer","topRulesContainer","rule","index","isInvalid","some","r","i","attribute","Rule","HvEmptyState","title","empty","message","HvTypography","component","style","cursor","textDecoration","createCondition","spacer","createGroup","Info","actionButtonContainer","topActionButtonContainer"],"mappings":"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"}
1	+ {"version":3,"file":"RuleGroup.js","sources":["../../../../../src/components/QueryBuilder/RuleGroup/RuleGroup.tsx"],"sourcesContent":["import { useCallback, useContext } from \"react\";\n\nimport { Add, Delete, Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport {\n HvButton,\n HvEmptyState,\n HvGrid,\n HvMultiButton,\n HvTypography,\n} from \"@core/components\";\nimport { withTooltip } from \"@core/hocs\";\n\nimport { Rule } from \"../Rule\";\nimport { QueryBuilderContext } from \"../Context\";\nimport { HvQueryBuilderClasses } from \"../QueryBuilder\";\nimport { useClasses } from \"../QueryBuilder.styles\";\n\nexport interface RuleGroupProps {\n /*\n Override or extend the styles applied to the component.\n * See CSS API tab for more details.\n */\n classes?: HvQueryBuilderClasses;\n id?: number;\n level?: number;\n combinator?: string;\n rules?: any[];\n}\n\nexport const RuleGroup = ({\n level = 0,\n id,\n combinator = \"and\",\n rules = [],\n classes: classesProp = {},\n}: RuleGroupProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const context = useContext(QueryBuilderContext);\n\n const { dispatchAction, askAction, maxDepth, combinators, labels, readOnly } =\n context;\n const normalizedMaxDepth = maxDepth - 1;\n\n const actionButtons = (\n <>\n <div className={classes.buttonBackground}>\n <HvButton\n variant=\"secondarySubtle\"\n onClick={() => {\n dispatchAction({ type: \"add-rule\", id });\n }}\n disabled={readOnly}\n startIcon={<Add />}\n >\n {level === 0 && labels.query?.addRule?.label != null\n ? labels.query?.addRule?.label\n : labels.group.addRule.label}\n </HvButton>\n </div>\n {level <= normalizedMaxDepth && (\n <div className={classes.buttonBackground}>\n <HvButton\n variant=\"secondarySubtle\"\n onClick={() => {\n dispatchAction({ type: \"add-group\", id });\n }}\n disabled={readOnly}\n startIcon={<Add />}\n >\n {level === 0 && labels.query?.addGroup?.label != null\n ? labels.query?.addGroup?.label\n : labels.group.addGroup.label}\n </HvButton>\n </div>\n )}\n </>\n );\n\n const DeleteIcon = withTooltip(\n () => (\n <Delete\n className={cx({\n [classes.topRemoveButtonDisabled]: readOnly,\n })}\n />\n ),\n level === 0 && labels.query?.delete?.tooltip\n ? labels.query?.delete?.tooltip\n : labels.group.delete.tooltip,\n \"top\"\n );\n\n const onClickCombinator = useCallback(\n (item) => {\n dispatchAction({\n type: \"set-combinator\",\n id,\n combinator: item.operand,\n });\n },\n [dispatchAction, id]\n );\n\n return (\n <div\n className={cx(classes.root, {\n [classes.topGroup]: level === 0,\n [classes.subGroup]: !(level === 0),\n })}\n >\n <HvGrid container>\n <HvGrid item>\n <HvMultiButton\n className={cx(classes.combinator, classes.topCombinator)}\n disabled={readOnly}\n >\n {combinators &&\n combinators.map((item) => (\n <HvButton\n key={item.operand}\n className={classes.combinatorButton}\n selected={item.operand === combinator}\n onClick={() => item.operand && onClickCombinator(item)}\n disabled={readOnly}\n size=\"xs\"\n >\n {item.label}\n </HvButton>\n ))}\n </HvMultiButton>\n </HvGrid>\n <HvGrid item>\n <div\n className={cx(classes.buttonBackground, classes.topRemoveButton)}\n >\n <HvButton\n icon\n className={classes.removeButton}\n onClick={() => {\n askAction({\n actions: [{ type: \"remove-node\", id }],\n dialog:\n level === 0 && labels.query?.delete != null\n ? labels.query.delete\n : labels.group.delete,\n });\n }}\n aria-label={\n level === 0 && labels.query?.delete?.ariaLabel\n ? labels.query?.delete?.ariaLabel\n : labels.group.delete.ariaLabel\n }\n disabled={readOnly}\n variant=\"secondaryGhost\"\n >\n <DeleteIcon />\n </HvButton>\n </div>\n </HvGrid>\n </HvGrid>\n {rules?.length > 0 && (\n <div\n className={cx(classes.rulesContainer, {\n [classes.subRulesContainer]: level > 0,\n [classes.topRulesContainer]: level === 0,\n })}\n >\n {rules.map((rule, index) => {\n if (\"combinator\" in rule) {\n return (\n <RuleGroup\n key={rule.id ?? index}\n level={level + 1}\n {...rule}\n id={rule.id}\n classes={classes}\n />\n );\n }\n\n const isInvalid =\n combinator === \"and\" &&\n rules.some((r, i) => {\n if (\"attribute\" in r) {\n if (\n r.attribute === rule.attribute &&\n r.id !== rule.id &&\n i < index\n ) {\n return true;\n }\n }\n return false;\n });\n\n return (\n <Rule\n key={rule.id ?? index}\n {...rule}\n isInvalid={isInvalid}\n id={rule.id}\n combinator={combinator}\n />\n );\n })}\n </div>\n )}\n {rules?.length === 0 && (\n <HvEmptyState\n title={labels.empty?.title}\n message={\n <>\n <HvTypography\n variant=\"link\"\n component=\"a\"\n onClick={() => {\n dispatchAction({ type: \"add-rule\", id });\n }}\n style={{ cursor: \"pointer\", textDecoration: \"underline\" }}\n >\n {`${labels.empty?.createCondition}`}\n </HvTypography>\n {level <= normalizedMaxDepth && (\n <>\n {`${labels.empty?.spacer}`}\n <HvTypography\n variant=\"link\"\n component=\"a\"\n onClick={() => {\n dispatchAction({ type: \"add-group\", id });\n }}\n style={{\n cursor: \"pointer\",\n textDecoration: \"underline\",\n }}\n >\n {`${labels.empty?.createGroup}`}\n </HvTypography>\n </>\n )}\n </>\n }\n icon={<Info />}\n />\n )}\n <HvGrid container>\n <HvGrid\n item\n className={cx(\n classes.actionButtonContainer,\n classes.topActionButtonContainer\n )}\n >\n {actionButtons}\n </HvGrid>\n </HvGrid>\n </div>\n );\n};\n"],"names":["RuleGroup","level","id","combinator","rules","classes","classesProp","cx","useClasses","context","useContext","QueryBuilderContext","dispatchAction","askAction","maxDepth","combinators","labels","readOnly","normalizedMaxDepth","actionButtons","_Fragment","children","_jsx","className","buttonBackground","HvButton","variant","onClick","type","disabled","startIcon","Add","query","addRule","label","group","addGroup","DeleteIcon","withTooltip","Delete","topRemoveButtonDisabled","delete","tooltip","onClickCombinator","useCallback","item","operand","root","topGroup","subGroup","_jsxs","HvGrid","container","HvMultiButton","topCombinator","map","combinatorButton","selected","size","topRemoveButton","icon","removeButton","actions","dialog","ariaLabel","length","rulesContainer","subRulesContainer","topRulesContainer","rule","index","isInvalid","some","r","i","attribute","Rule","HvEmptyState","title","empty","message","HvTypography","component","style","cursor","textDecoration","createCondition","spacer","createGroup","Info","actionButtonContainer","topActionButtonContainer"],"mappings":";;;;;;;;;;;;AA8BO,MAAMA,YAAYA,CAAC;AAAA,EACxBC,QAAQ;AAAA,EACRC;AAAAA,EACAC,aAAa;AAAA,EACbC,QAAQ,CAAE;AAAA,EACVC,SAASC,cAAc,CAAC;AACV,MAAM;;AACd,QAAA;AAAA,IAAED;AAAAA,IAASE;AAAAA,EAAAA,IAAOC,WAAWF,WAAW;AAExCG,QAAAA,UAAUC,WAAWC,mBAAmB;AAExC,QAAA;AAAA,IAAEC;AAAAA,IAAgBC;AAAAA,IAAWC;AAAAA,IAAUC;AAAAA,IAAaC;AAAAA,IAAQC;AAAAA,EAChER,IAAAA;AACF,QAAMS,qBAAqBJ,WAAW;AAEhCK,QAAAA,qCACJC,UAAA;AAAA,IAAAC,WACEC,oBAAA,OAAA;AAAA,MAAKC,WAAWlB,QAAQmB;AAAAA,MAAiBH,8BACtCI,UAAQ;AAAA,QACPC,SAAQ;AAAA,QACRC,SAASA,MAAM;AACE,yBAAA;AAAA,YAAEC,MAAM;AAAA,YAAY1B;AAAAA,UAAAA,CAAI;AAAA,QACzC;AAAA,QACA2B,UAAUZ;AAAAA,QACVa,WAAWR,oBAACS,OAAK;AAAA,QAAEV,UAElBpB,UAAU,OAAKe,kBAAOgB,UAAPhB,mBAAciB,YAAdjB,mBAAuBkB,UAAS,QAC5ClB,kBAAOgB,UAAPhB,mBAAciB,YAAdjB,mBAAuBkB,QACvBlB,OAAOmB,MAAMF,QAAQC;AAAAA,MAAAA,CACjB;AAAA,IACP,CAAA,GACJjC,SAASiB,0CACR,OAAA;AAAA,MAAKK,WAAWlB,QAAQmB;AAAAA,MAAiBH,8BACtCI,UAAQ;AAAA,QACPC,SAAQ;AAAA,QACRC,SAASA,MAAM;AACE,yBAAA;AAAA,YAAEC,MAAM;AAAA,YAAa1B;AAAAA,UAAAA,CAAI;AAAA,QAC1C;AAAA,QACA2B,UAAUZ;AAAAA,QACVa,WAAWR,oBAACS,OAAK;AAAA,QAAEV,UAElBpB,UAAU,OAAKe,kBAAOgB,UAAPhB,mBAAcoB,aAAdpB,mBAAwBkB,UAAS,QAC7ClB,kBAAOgB,UAAPhB,mBAAcoB,aAAdpB,mBAAwBkB,QACxBlB,OAAOmB,MAAMC,SAASF;AAAAA,MAAAA,CAClB;AAAA,IAAA,CACP,CACN;AAAA,EAAA,CACD;AAGJ,QAAMG,aAAaC,YACjB,MACEhB,oBAACiB,QAAM;AAAA,IACLhB,WAAWhB,GAAG;AAAA,MACZ,CAACF,QAAQmC,uBAAuB,GAAGvB;AAAAA,IAAAA,CACpC;AAAA,EAAA,CACF,GAEHhB,UAAU,OAAKe,kBAAOgB,UAAPhB,mBAAcyB,WAAdzB,mBAAsB0B,YACjC1B,kBAAOgB,UAAPhB,mBAAcyB,WAAdzB,mBAAsB0B,UACtB1B,OAAOmB,MAAMM,OAAOC,SACxB,KACF;AAEMC,QAAAA,oBAAoBC,YACvBC,CAAS,SAAA;AACO,mBAAA;AAAA,MACbjB,MAAM;AAAA,MACN1B;AAAAA,MACAC,YAAY0C,KAAKC;AAAAA,IAAAA,CAClB;AAAA,EAAA,GAEH,CAAClC,gBAAgBV,EAAE,CACrB;AAEA,8BACE,OAAA;AAAA,IACEqB,WAAWhB,GAAGF,QAAQ0C,MAAM;AAAA,MAC1B,CAAC1C,QAAQ2C,QAAQ,GAAG/C,UAAU;AAAA,MAC9B,CAACI,QAAQ4C,QAAQ,GAAG,EAAEhD,UAAU;AAAA,IAAA,CACjC;AAAA,IAAEoB,UAAA,CAEH6B,qBAACC,QAAM;AAAA,MAACC,WAAS;AAAA,MAAA/B,UAAA,CACfC,oBAAC6B,QAAM;AAAA,QAACN,MAAI;AAAA,QAAAxB,8BACTgC,eAAa;AAAA,UACZ9B,WAAWhB,GAAGF,QAAQF,YAAYE,QAAQiD,aAAa;AAAA,UACvDzB,UAAUZ;AAAAA,UAASI,UAElBN,eACCA,YAAYwC,IAAKV,CAAAA,6BACdpB,UAAQ;AAAA,YAEPF,WAAWlB,QAAQmD;AAAAA,YACnBC,UAAUZ,KAAKC,YAAY3C;AAAAA,YAC3BwB,SAASA,MAAMkB,KAAKC,WAAWH,kBAAkBE,IAAI;AAAA,YACrDhB,UAAUZ;AAAAA,YACVyC,MAAK;AAAA,YAAIrC,UAERwB,KAAKX;AAAAA,UAAAA,GAPDW,KAAKC,OAQF,CACX;AAAA,QAAA,CACU;AAAA,MAAA,CACT,GACRxB,oBAAC6B,QAAM;AAAA,QAACN,MAAI;AAAA,QAAAxB,8BACV,OAAA;AAAA,UACEE,WAAWhB,GAAGF,QAAQmB,kBAAkBnB,QAAQsD,eAAe;AAAA,UAAEtC,8BAEhEI,UAAQ;AAAA,YACPmC,MAAI;AAAA,YACJrC,WAAWlB,QAAQwD;AAAAA,YACnBlC,SAASA,MAAM;;AACH,wBAAA;AAAA,gBACRmC,SAAS,CAAC;AAAA,kBAAElC,MAAM;AAAA,kBAAe1B;AAAAA,gBAAAA,CAAI;AAAA,gBACrC6D,QACE9D,UAAU,OAAKe,MAAAA,OAAOgB,UAAPhB,gBAAAA,IAAcyB,WAAU,OACnCzB,OAAOgB,MAAMS,SACbzB,OAAOmB,MAAMM;AAAAA,cAAAA,CACpB;AAAA,YACH;AAAA,YACA,cACExC,UAAU,OAAKe,kBAAOgB,UAAPhB,mBAAcyB,WAAdzB,mBAAsBgD,cACjChD,kBAAOgB,UAAPhB,mBAAcyB,WAAdzB,mBAAsBgD,YACtBhD,OAAOmB,MAAMM,OAAOuB;AAAAA,YAE1BnC,UAAUZ;AAAAA,YACVS,SAAQ;AAAA,YAAgBL,UAExBC,oBAACe,YAAY,EAAA;AAAA,UAAA,CACL;AAAA,QAAA,CACP;AAAA,MAAA,CACC,CAAC;AAAA,IACH,CAAA,IACPjC,+BAAO6D,UAAS,yBACf,OAAA;AAAA,MACE1C,WAAWhB,GAAGF,QAAQ6D,gBAAgB;AAAA,QACpC,CAAC7D,QAAQ8D,iBAAiB,GAAGlE,QAAQ;AAAA,QACrC,CAACI,QAAQ+D,iBAAiB,GAAGnE,UAAU;AAAA,MAAA,CACxC;AAAA,MAAEoB,UAEFjB,MAAMmD,IAAI,CAACc,MAAMC,UAAU;AAC1B,YAAI,gBAAgBD,MAAM;AACxB,qCACGrE,WAAS;AAAA,YAERC,OAAOA,QAAQ;AAAA,YAAE,GACboE;AAAAA,YACJnE,IAAImE,KAAKnE;AAAAA,YACTG;AAAAA,UAAAA,GAJKgE,KAAKnE,MAAMoE,KAKjB;AAAA,QAEL;AAEA,cAAMC,YACJpE,eAAe,SACfC,MAAMoE,KAAK,CAACC,GAAGC,MAAM;AACnB,cAAI,eAAeD,GAAG;AAElBA,gBAAAA,EAAEE,cAAcN,KAAKM,aACrBF,EAAEvE,OAAOmE,KAAKnE,MACdwE,IAAIJ,OACJ;AACO,qBAAA;AAAA,YACT;AAAA,UACF;AACO,iBAAA;AAAA,QAAA,CACR;AAEH,mCACGM,MAAI;AAAA,UAAA,GAECP;AAAAA,UACJE;AAAAA,UACArE,IAAImE,KAAKnE;AAAAA,UACTC;AAAAA,QAAAA,GAJKkE,KAAKnE,MAAMoE,KAKjB;AAAA,MAAA,CAEJ;AAAA,IACE,CAAA,IAENlE,+BAAO6D,YAAW,yBAChBY,cAAY;AAAA,MACXC,QAAO9D,YAAO+D,UAAP/D,mBAAc8D;AAAAA,MACrBE,8BACE5D,UAAA;AAAA,QAAAC,UAAA,CACEC,oBAAC2D,cAAY;AAAA,UACXvD,SAAQ;AAAA,UACRwD,WAAU;AAAA,UACVvD,SAASA,MAAM;AACE,2BAAA;AAAA,cAAEC,MAAM;AAAA,cAAY1B;AAAAA,YAAAA,CAAI;AAAA,UACzC;AAAA,UACAiF,OAAO;AAAA,YAAEC,QAAQ;AAAA,YAAWC,gBAAgB;AAAA,UAAY;AAAA,UAAEhE,UAExD,IAAEL,YAAO+D,UAAP/D,mBAAcsE;AAAAA,QACN,CAAA,GACbrF,SAASiB,2CACRE,UAAA;AAAA,UAAAC,UAAA,CACI,IAAEL,YAAO+D,UAAP/D,mBAAcuE,8BACjBN,cAAY;AAAA,YACXvD,SAAQ;AAAA,YACRwD,WAAU;AAAA,YACVvD,SAASA,MAAM;AACE,6BAAA;AAAA,gBAAEC,MAAM;AAAA,gBAAa1B;AAAAA,cAAAA,CAAI;AAAA,YAC1C;AAAA,YACAiF,OAAO;AAAA,cACLC,QAAQ;AAAA,cACRC,gBAAgB;AAAA,YAClB;AAAA,YAAEhE,UAEA,IAAEL,YAAO+D,UAAP/D,mBAAcwE;AAAAA,UAAAA,CACN,CAAC;AAAA,QAAA,CACf,CACH;AAAA,MAAA,CACD;AAAA,MAEJ5B,MAAMtC,oBAACmE,MAAM,EAAA;AAAA,IAAA,CACd,GAEHnE,oBAAC6B,QAAM;AAAA,MAACC,WAAS;AAAA,MAAA/B,8BACd8B,QAAM;AAAA,QACLN,MAAI;AAAA,QACJtB,WAAWhB,GACTF,QAAQqF,uBACRrF,QAAQsF,wBACV;AAAA,QAAEtE,UAEDF;AAAAA,MAAAA,CACK;AAAA,IAAA,CACF,CAAC;AAAA,EAAA,CACN;AAET;"}

package/dist/esm/components/TimePicker/TimePicker.js CHANGED Viewed

@@ -3,7 +3,6 @@ import { Time as Time$1 } from "@internationalized/date";
 import { useTimeField } from "@react-aria/datepicker";
 import { useTimeFieldState } from "@react-stately/datepicker";
 import { Time } from "@hitachivantara/uikit-react-icons";
-import { useCss } from "../../hooks/useCss.js";
 import "@hitachivantara/uikit-styles";
 import { Placeholder } from "./Placeholder.js";
 import { useClasses } from "./TimePicker.styles.js";
@@ -70,9 +69,6 @@ const HvTimePicker = (props) => {
   } = props;
   const id = useUniqueId(idProp, "hvtimepicker");
   const ref = useRef(null);
-  const {
-    css
-  } = useCss();
   const {
     classes,
     cx
@@ -120,7 +116,6 @@ const HvTimePicker = (props) => {
     second: secondsPlaceholder
   }), [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]);
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
-  const is12HrFormat = state.segments[5] != null;
   const isStateInvalid = validationState === "invalid";
   const errorMessageId = isStateInvalid ? canShowError ? setId(id, "error") : ariaErrorMessage : void 0;
   return /* @__PURE__ */ jsxs(HvFormElement, {
@@ -140,73 +135,68 @@ const HvTimePicker = (props) => {
         className: classes.description,
         children: description
       })]
-    }), /* @__PURE__ */ jsx("div", {
-      className: css({
-        width: is12HrFormat ? 220 : 200
-      }),
-      children: /* @__PURE__ */ jsx(HvBaseDropdown, {
-        role: "combobox",
-        variableWidth: true,
-        disabled,
-        readOnly,
-        placeholder: placeholder && !state.value ? placeholder : /* @__PURE__ */ jsx(Placeholder, {
-          ref,
-          name,
-          state,
-          placeholders,
-          className: cx(classes.placeholder, {
-            [classes.placeholderDisabled]: disabled
-          }),
-          ...fieldProps
+    }), /* @__PURE__ */ jsx(HvBaseDropdown, {
+      role: "combobox",
+      variableWidth: true,
+      disabled,
+      readOnly,
+      placeholder: placeholder && !state.value ? placeholder : /* @__PURE__ */ jsx(Placeholder, {
+        ref,
+        name,
+        state,
+        placeholders,
+        className: cx(classes.placeholder, {
+          [classes.placeholderDisabled]: disabled
         }),
-        classes: {
-          header: cx(classes.dropdownHeader, {
-            [classes.dropdownHeaderInvalid]: isStateInvalid
-          }),
-          panel: classes.dropdownPanel,
-          headerOpen: classes.dropdownHeaderOpen
-        },
-        placement: "right",
-        adornment: /* @__PURE__ */ jsx(Time, {
-          color: disabled ? "secondary_60" : void 0,
-          className: classes.icon
+        ...fieldProps
+      }),
+      classes: {
+        header: cx(classes.dropdownHeader, {
+          [classes.dropdownHeaderInvalid]: isStateInvalid
         }),
-        expanded: open,
-        onToggle: (evt, newOpen) => {
-          if (disableExpand)
-            return;
-          setOpen(newOpen);
-          onToggle == null ? void 0 : onToggle(evt, newOpen);
-        },
-        onContainerCreation: (containerRef) => {
-          var _a;
-          (_a = containerRef == null ? void 0 : containerRef.getElementsByTagName("input")[0]) == null ? void 0 : _a.focus();
-        },
-        "aria-haspopup": "dialog",
-        "aria-invalid": isStateInvalid ? true : void 0,
-        "aria-errormessage": errorMessageId,
-        disablePortal,
-        popperProps: {
-          modifiers: [{
-            name: "preventOverflow",
-            enabled: escapeWithReference
-          }]
-        },
-        ...dropdownProps,
-        children: /* @__PURE__ */ jsx("div", {
-          ref,
-          className: classes.timePopperContainer,
-          children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(Unit, {
-            state,
-            segment,
-            placeholder: placeholders[segment.type],
-            onAdd: () => state.increment(segment.type),
-            onSub: () => state.decrement(segment.type),
-            onChange: (evt, val) => {
-              state.setSegment(segment.type, Number(val));
-            }
-          }, i))
-        })
+        panel: classes.dropdownPanel,
+        headerOpen: classes.dropdownHeaderOpen
+      },
+      placement: "right",
+      adornment: /* @__PURE__ */ jsx(Time, {
+        color: disabled ? "secondary_60" : void 0,
+        className: classes.icon
+      }),
+      expanded: open,
+      onToggle: (evt, newOpen) => {
+        if (disableExpand)
+          return;
+        setOpen(newOpen);
+        onToggle == null ? void 0 : onToggle(evt, newOpen);
+      },
+      onContainerCreation: (containerRef) => {
+        var _a;
+        (_a = containerRef == null ? void 0 : containerRef.getElementsByTagName("input")[0]) == null ? void 0 : _a.focus();
+      },
+      "aria-haspopup": "dialog",
+      "aria-invalid": isStateInvalid ? true : void 0,
+      "aria-errormessage": errorMessageId,
+      disablePortal,
+      popperProps: {
+        modifiers: [{
+          name: "preventOverflow",
+          enabled: escapeWithReference
+        }]
+      },
+      ...dropdownProps,
+      children: /* @__PURE__ */ jsx("div", {
+        ref,
+        className: classes.timePopperContainer,
+        children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(Unit, {
+          state,
+          segment,
+          placeholder: placeholders[segment.type],
+          onAdd: () => state.increment(segment.type),
+          onSub: () => state.decrement(segment.type),
+          onChange: (evt, val) => {
+            state.setSegment(segment.type, Number(val));
+          }
+        }, i))
       })
     }), canShowError && /* @__PURE__ */ jsx(HvWarningText, {
       id: setId(id, "error"),

package/dist/esm/components/TimePicker/TimePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimePicker.js","sources":["../../../../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo } from \"react\";\nimport { Time } from \"@internationalized/date\";\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n TimeFieldStateOptions,\n useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\nimport { useCss } from \"@core/hooks/useCss\";\nimport {\n HvFormElement,\n HvBaseDropdown,\n HvLabel,\n HvWarningText,\n HvInfoMessage,\n HvFormElementProps,\n HvBaseDropdownProps,\n useControlled,\n useUniqueId,\n setId,\n ExtractNames,\n} from \"../..\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\n\nconst toTime = (value?: HvTimePickerValue) => {\n if (!value) return undefined;\n const { hours, minutes, seconds } = value;\n return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n if (timeFormat == null) return 24;\n return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" \| \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n \| \"root\"\n \| \"input\"\n \| \"label\"\n \| \"placeholder\"\n \| \"timePopperContainer\"\n \| \"separator\"\n \| \"periodContainer\"\n \| \"formElementRoot\"\n \| \"dropdownPlaceholder\"\n \| \"iconBaseRoot\"\n \| \"error\"\n \| \"labelContainer\"\n \| \"description\"\n \| \"dropdownHeaderInvalid\"\n \| \"dropdownPlaceholderDisabled\"\n \| \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n hours: number;\n minutes: number;\n seconds: number;\n};\n\nexport interface HvTimePickerProps\n extends Omit<\n HvFormElementProps,\n \"classes\" \| \"value\" \| \"defaultValue\" \| \"onChange\" \| \"onFocus\" \| \"onBlur\"\n > {\n /** Id to be applied to the form element root node. /\n id?: string;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: Partial<HvTimePickerClasses>;\n /* Current value of the element when _controlled_. Follows the 24-hour format. /\n value?: HvTimePickerValue;\n /* Initial value of the element when _uncontrolled_. Follows the 24-hour format. /\n defaultValue?: HvTimePickerValue;\n /* The placeholder value when no time is selected. /\n placeholder?: string;\n /* The placeholder of the hours input. /\n hoursPlaceholder?: string;\n /* The placeholder of the minutes input. /\n minutesPlaceholder?: string;\n /* The placeholder of the seconds input. /\n secondsPlaceholder?: string;\n /\n Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n * If undefined, the component will use a format according to the passed locale.\n /\n timeFormat?: TimeFormat;\n /* Whether to show the seconds when using the native time picker /\n showSeconds?: boolean;\n /* Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` /\n locale?: string;\n /* Whether the dropdown is expandable. /\n disableExpand?: boolean;\n\n /\n Callback function to be triggered when the input value is changed.\n * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n /\n onChange?: (value: HvTimePickerValue) => void;\n\n /* Callback called when dropdown changes the expanded state. /\n onToggle?: (event: Event, isOpen: boolean) => void;\n\n /* Disable the portal behavior. The children stay within it's parent DOM hierarchy. /\n disablePortal?: boolean;\n\n /* Sets if the calendar container should follow the date picker input out of the screen or stay visible. /\n escapeWithReference?: boolean;\n\n /* Extra properties to be passed to the TimePicker's dropdown. /\n dropdownProps?: Partial<HvBaseDropdownProps>;\n}\n\n/\n A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = (props: HvTimePickerProps) => {\n const {\n classes: classesProp = {},\n className,\n\n id: idProp,\n name,\n required = false,\n disabled = false,\n readOnly = false,\n label,\n\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n placeholder,\n hoursPlaceholder = \"hh\",\n minutesPlaceholder = \"mm\",\n secondsPlaceholder = \"ss\",\n\n value: valueProp,\n defaultValue: defaultValueProp,\n\n timeFormat,\n showSeconds,\n disableExpand,\n locale = \"en\",\n\n onToggle,\n onChange,\n\n // misc properties:\n disablePortal = true,\n escapeWithReference = true,\n dropdownProps,\n ...others\n } = props;\n const id = useUniqueId(idProp, \"hvtimepicker\");\n const ref = useRef<HTMLDivElement>(null);\n const { css } = useCss();\n const { classes, cx } = useClasses(classesProp);\n\n const stateProps: TimeFieldStateOptions = {\n value: toTime(valueProp),\n defaultValue: toTime(defaultValueProp),\n label,\n locale,\n isRequired: required,\n isReadOnly: readOnly,\n isDisabled: disabled,\n granularity: \"second\",\n hourCycle: getFormat(timeFormat),\n onChange: (value) => {\n const { hour: hours, minute: minutes, second: seconds } = value;\n onChange?.({ hours, minutes, seconds });\n },\n };\n const state = useTimeFieldState(stateProps);\n const { labelProps, fieldProps } = useTimeField(\n {\n ...stateProps,\n id,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n },\n state,\n ref\n );\n\n const [open, setOpen] = useState(false);\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n const [validationState] = useControlled(status, \"standBy\");\n\n const placeholders = useMemo(\n () => ({\n hour: hoursPlaceholder,\n minute: minutesPlaceholder,\n second: secondsPlaceholder,\n }),\n [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]\n );\n\n // the error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) \|\|\n (status === undefined && required));\n\n const is12HrFormat = state.segments[5] != null;\n const isStateInvalid = validationState === \"invalid\";\n const errorMessageId = isStateInvalid\n ? canShowError\n ? setId(id, \"error\")\n : ariaErrorMessage\n : undefined;\n\n return (\n <HvFormElement\n name={name}\n required={required}\n disabled={disabled}\n status={validationState}\n className={cx(classes.root, className)}\n {...others}\n >\n {(label \|\| description) && (\n <div className={classes.labelContainer}>\n {label && (\n <HvLabel label={label} className={classes.label} {...labelProps} />\n )}\n {description && (\n <HvInfoMessage className={classes.description}>\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n\n <div className={css({ width: is12HrFormat ? 220 : 200 })}>\n <HvBaseDropdown\n role=\"combobox\"\n variableWidth\n disabled={disabled}\n readOnly={readOnly}\n placeholder={\n placeholder && !state.value ? (\n placeholder\n ) : (\n <Placeholder\n ref={ref}\n name={name}\n state={state}\n placeholders={placeholders}\n className={cx(classes.placeholder, {\n [classes.placeholderDisabled]: disabled,\n })}\n {...fieldProps}\n />\n )\n }\n classes={{\n header: cx(classes.dropdownHeader, {\n [classes.dropdownHeaderInvalid]: isStateInvalid,\n }),\n panel: classes.dropdownPanel,\n headerOpen: classes.dropdownHeaderOpen,\n }}\n placement=\"right\"\n adornment={\n <TimeIcon\n color={disabled ? \"secondary_60\" : undefined}\n className={classes.icon}\n />\n }\n expanded={open}\n onToggle={(evt, newOpen) => {\n if (disableExpand) return;\n setOpen(newOpen);\n onToggle?.(evt, newOpen);\n }}\n onContainerCreation={(containerRef) => {\n containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n }}\n aria-haspopup=\"dialog\"\n aria-invalid={isStateInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n disablePortal={disablePortal}\n popperProps={{\n modifiers: [\n { name: \"preventOverflow\", enabled: escapeWithReference },\n ],\n }}\n {...dropdownProps}\n >\n <div ref={ref} className={classes.timePopperContainer}>\n {state.segments.map((segment, i) => (\n <Unit\n key={i}\n state={state}\n segment={segment}\n placeholder={placeholders[segment.type]}\n onAdd={() => state.increment(segment.type)}\n onSub={() => state.decrement(segment.type)}\n onChange={(evt, val) => {\n state.setSegment(segment.type, Number(val));\n }}\n />\n ))}\n </div>\n </HvBaseDropdown>\n </div>\n\n {canShowError && (\n <HvWarningText\n id={setId(id, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n};\n"],"names":["toTime","value","undefined","hours","minutes","seconds","Time","getFormat","timeFormat","HvTimePicker","props","classes","classesProp","className","id","idProp","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","status","statusMessage","ariaErrorMessage","placeholder","hoursPlaceholder","minutesPlaceholder","secondsPlaceholder","valueProp","defaultValue","defaultValueProp","showSeconds","disableExpand","locale","onToggle","onChange","disablePortal","escapeWithReference","dropdownProps","others","useUniqueId","ref","useRef","css","useCss","cx","useClasses","stateProps","isRequired","isReadOnly","isDisabled","granularity","hourCycle","hour","minute","second","state","useTimeFieldState","labelProps","fieldProps","useTimeField","open","setOpen","useState","validationMessage","useControlled","validationState","placeholders","useMemo","canShowError","is12HrFormat","segments","isStateInvalid","errorMessageId","setId","HvFormElement","root","children","labelContainer","_jsx","HvLabel","HvInfoMessage","width","HvBaseDropdown","role","variableWidth","Placeholder","placeholderDisabled","header","dropdownHeader","dropdownHeaderInvalid","panel","dropdownPanel","headerOpen","dropdownHeaderOpen","placement","adornment","TimeIcon","color","icon","expanded","evt","newOpen","onContainerCreation","containerRef","getElementsByTagName","focus","popperProps","modifiers","enabled","timePopperContainer","map","segment","i","Unit","type","onAdd","increment","onSub","decrement","val","setSegment","Number","HvWarningText","disableBorder","error"],"mappings":"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"}
1	+ {"version":3,"file":"TimePicker.js","sources":["../../../../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo } from \"react\";\nimport { Time } from \"@internationalized/date\";\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n TimeFieldStateOptions,\n useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\nimport {\n HvFormElement,\n HvBaseDropdown,\n HvLabel,\n HvWarningText,\n HvInfoMessage,\n HvFormElementProps,\n HvBaseDropdownProps,\n useControlled,\n useUniqueId,\n setId,\n ExtractNames,\n} from \"../..\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\n\nconst toTime = (value?: HvTimePickerValue) => {\n if (!value) return undefined;\n const { hours, minutes, seconds } = value;\n return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n if (timeFormat == null) return 24;\n return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" \| \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n \| \"root\"\n \| \"input\"\n \| \"label\"\n \| \"placeholder\"\n \| \"timePopperContainer\"\n \| \"separator\"\n \| \"periodContainer\"\n \| \"formElementRoot\"\n \| \"dropdownPlaceholder\"\n \| \"iconBaseRoot\"\n \| \"error\"\n \| \"labelContainer\"\n \| \"description\"\n \| \"dropdownHeaderInvalid\"\n \| \"dropdownPlaceholderDisabled\"\n \| \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n hours: number;\n minutes: number;\n seconds: number;\n};\n\nexport interface HvTimePickerProps\n extends Omit<\n HvFormElementProps,\n \"classes\" \| \"value\" \| \"defaultValue\" \| \"onChange\" \| \"onFocus\" \| \"onBlur\"\n > {\n /** Id to be applied to the form element root node. /\n id?: string;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: Partial<HvTimePickerClasses>;\n /* Current value of the element when _controlled_. Follows the 24-hour format. /\n value?: HvTimePickerValue;\n /* Initial value of the element when _uncontrolled_. Follows the 24-hour format. /\n defaultValue?: HvTimePickerValue;\n /* The placeholder value when no time is selected. /\n placeholder?: string;\n /* The placeholder of the hours input. /\n hoursPlaceholder?: string;\n /* The placeholder of the minutes input. /\n minutesPlaceholder?: string;\n /* The placeholder of the seconds input. /\n secondsPlaceholder?: string;\n /\n Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n * If undefined, the component will use a format according to the passed locale.\n /\n timeFormat?: TimeFormat;\n /* Whether to show the seconds when using the native time picker /\n showSeconds?: boolean;\n /* Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` /\n locale?: string;\n /* Whether the dropdown is expandable. /\n disableExpand?: boolean;\n\n /\n Callback function to be triggered when the input value is changed.\n * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n /\n onChange?: (value: HvTimePickerValue) => void;\n\n /* Callback called when dropdown changes the expanded state. /\n onToggle?: (event: Event, isOpen: boolean) => void;\n\n /* Disable the portal behavior. The children stay within it's parent DOM hierarchy. /\n disablePortal?: boolean;\n\n /* Sets if the calendar container should follow the date picker input out of the screen or stay visible. /\n escapeWithReference?: boolean;\n\n /* Extra properties to be passed to the TimePicker's dropdown. /\n dropdownProps?: Partial<HvBaseDropdownProps>;\n}\n\n/\n A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = (props: HvTimePickerProps) => {\n const {\n classes: classesProp = {},\n className,\n\n id: idProp,\n name,\n required = false,\n disabled = false,\n readOnly = false,\n label,\n\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n placeholder,\n hoursPlaceholder = \"hh\",\n minutesPlaceholder = \"mm\",\n secondsPlaceholder = \"ss\",\n\n value: valueProp,\n defaultValue: defaultValueProp,\n\n timeFormat,\n showSeconds,\n disableExpand,\n locale = \"en\",\n\n onToggle,\n onChange,\n\n // misc properties:\n disablePortal = true,\n escapeWithReference = true,\n dropdownProps,\n ...others\n } = props;\n const id = useUniqueId(idProp, \"hvtimepicker\");\n const ref = useRef<HTMLDivElement>(null);\n const { classes, cx } = useClasses(classesProp);\n\n const stateProps: TimeFieldStateOptions = {\n value: toTime(valueProp),\n defaultValue: toTime(defaultValueProp),\n label,\n locale,\n isRequired: required,\n isReadOnly: readOnly,\n isDisabled: disabled,\n granularity: \"second\",\n hourCycle: getFormat(timeFormat),\n onChange: (value) => {\n const { hour: hours, minute: minutes, second: seconds } = value;\n onChange?.({ hours, minutes, seconds });\n },\n };\n const state = useTimeFieldState(stateProps);\n const { labelProps, fieldProps } = useTimeField(\n {\n ...stateProps,\n id,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n },\n state,\n ref\n );\n\n const [open, setOpen] = useState(false);\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n const [validationState] = useControlled(status, \"standBy\");\n\n const placeholders = useMemo(\n () => ({\n hour: hoursPlaceholder,\n minute: minutesPlaceholder,\n second: secondsPlaceholder,\n }),\n [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]\n );\n\n // the error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) \|\|\n (status === undefined && required));\n\n const isStateInvalid = validationState === \"invalid\";\n const errorMessageId = isStateInvalid\n ? canShowError\n ? setId(id, \"error\")\n : ariaErrorMessage\n : undefined;\n\n return (\n <HvFormElement\n name={name}\n required={required}\n disabled={disabled}\n status={validationState}\n className={cx(classes.root, className)}\n {...others}\n >\n {(label \|\| description) && (\n <div className={classes.labelContainer}>\n {label && (\n <HvLabel label={label} className={classes.label} {...labelProps} />\n )}\n {description && (\n <HvInfoMessage className={classes.description}>\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n\n <HvBaseDropdown\n role=\"combobox\"\n variableWidth\n disabled={disabled}\n readOnly={readOnly}\n placeholder={\n placeholder && !state.value ? (\n placeholder\n ) : (\n <Placeholder\n ref={ref}\n name={name}\n state={state}\n placeholders={placeholders}\n className={cx(classes.placeholder, {\n [classes.placeholderDisabled]: disabled,\n })}\n {...fieldProps}\n />\n )\n }\n classes={{\n header: cx(classes.dropdownHeader, {\n [classes.dropdownHeaderInvalid]: isStateInvalid,\n }),\n panel: classes.dropdownPanel,\n headerOpen: classes.dropdownHeaderOpen,\n }}\n placement=\"right\"\n adornment={\n <TimeIcon\n color={disabled ? \"secondary_60\" : undefined}\n className={classes.icon}\n />\n }\n expanded={open}\n onToggle={(evt, newOpen) => {\n if (disableExpand) return;\n setOpen(newOpen);\n onToggle?.(evt, newOpen);\n }}\n onContainerCreation={(containerRef) => {\n containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n }}\n aria-haspopup=\"dialog\"\n aria-invalid={isStateInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n disablePortal={disablePortal}\n popperProps={{\n modifiers: [\n { name: \"preventOverflow\", enabled: escapeWithReference },\n ],\n }}\n {...dropdownProps}\n >\n <div ref={ref} className={classes.timePopperContainer}>\n {state.segments.map((segment, i) => (\n <Unit\n key={i}\n state={state}\n segment={segment}\n placeholder={placeholders[segment.type]}\n onAdd={() => state.increment(segment.type)}\n onSub={() => state.decrement(segment.type)}\n onChange={(evt, val) => {\n state.setSegment(segment.type, Number(val));\n }}\n />\n ))}\n </div>\n </HvBaseDropdown>\n\n {canShowError && (\n <HvWarningText\n id={setId(id, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n};\n"],"names":["toTime","value","undefined","hours","minutes","seconds","Time","getFormat","timeFormat","HvTimePicker","props","classes","classesProp","className","id","idProp","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","status","statusMessage","ariaErrorMessage","placeholder","hoursPlaceholder","minutesPlaceholder","secondsPlaceholder","valueProp","defaultValue","defaultValueProp","showSeconds","disableExpand","locale","onToggle","onChange","disablePortal","escapeWithReference","dropdownProps","others","useUniqueId","ref","useRef","cx","useClasses","stateProps","isRequired","isReadOnly","isDisabled","granularity","hourCycle","hour","minute","second","state","useTimeFieldState","labelProps","fieldProps","useTimeField","open","setOpen","useState","validationMessage","useControlled","validationState","placeholders","useMemo","canShowError","isStateInvalid","errorMessageId","setId","HvFormElement","root","children","labelContainer","_jsx","HvLabel","HvInfoMessage","HvBaseDropdown","role","variableWidth","Placeholder","placeholderDisabled","header","dropdownHeader","dropdownHeaderInvalid","panel","dropdownPanel","headerOpen","dropdownHeaderOpen","placement","adornment","TimeIcon","color","icon","expanded","evt","newOpen","onContainerCreation","containerRef","getElementsByTagName","focus","popperProps","modifiers","enabled","timePopperContainer","segments","map","segment","i","Unit","type","onAdd","increment","onSub","decrement","val","setSegment","Number","HvWarningText","disableBorder","error"],"mappings":"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"}